こんにちは! 仙台オフィスで主にTypeScriptを書いているChloéです。普段の開発では静的型付き言語を使うことが多いのですが、今回はPythonにおける型ヒントと、それに基づいて型チェックを行うツールのmypyについて記事を書いてみることにしました。記事のターゲットとしては、主に「Jupyter Notebook等で生成AI等を使うためにPythonを書くのには慣れているけど、Pythonで(Web)アプリケーションを作った経験があまり無い」という方を想定しています。<h2 id="h0669eefa7c">目次</h2><ol><li>環境</li><li>Pythonに型チェックを導入するモチベーション</li><li>型ヒントの基本<ol><li>変数の型ヒント</li><li>関数の型ヒント</li><li>Union型</li></ol></li><li>mypyの導入<ol><li>mypyのインストール</li><li>mypyによる型チェック</li></ol></li><li>実践的な型チェック<ol><li>意図しない型変換</li><li>Null安全</li></ol></li><li>まとめ</li></ol><h2 id="h2b77a92925">1. 環境</h2><ul><li>Python 3.12.1</li><li>mypy 1.10.0<ul><li>本記事では特にカスタマイズはせず、デフォルトの設定で使用します。</li></ul></li></ul><h2 id="he47629f54e">2. Pythonに型チェックを導入するモチベーション</h2>私たちの会社では、生成AIや機械学習関連の業務がそこそこ多いため、Pythonエンジニアの割合が高いです。そのため、Webバックエンドアプリケーションは主にPythonで実装されています。Pythonは動的型付き言語であるため、ある程度の規模以上のアプリケーションを実装する際、型の情報がコードに明示されていないとメンテナンス性に問題が生じる可能性があります。このような問題を解決するために、現代のPythonには 型ヒント(Type Hints) という機能が存在します。型ヒントを利用することで、以下の利点が得られます。<ul><li>ドキュメンテーション<ul><li>型ヒントによって変数や関数にどのような値が入るかが可視化されるため、人間がコードを読んだ時に理解の助けになります。</li></ul></li><li>自動補完<ul><li>Pythonに対応しているテキストエディタやIDEについて、自動補完をサポートします。Pythonは動的型付き言語なので、ある変数についてどのような操作や演算ができるか解析しにくいです。型ヒントを入れることにより、変数に対する操作や演算が明確になり、自動補完がより正確になります。</li></ul></li><li>型チェック<ul><li>型をチェックできる静的解析ツールにより、プログラミングのミスに早期に気付くことができます。</li></ul></li></ul>型ヒント自体はPythonの機能ですが、Pythonのランタイムは型ヒントに対して特に何もしないことに注意してください。(型ヒントが書かれているコードを実行した時、型ヒントが無い場合と全く同じ動作をします) 自動補完や型チェックについては、型ヒントを理解する外部ツールによって実現されています。この記事では型チェックにフォーカスし、mypyという静的解析ツールを使って実際にPythonコードの型チェックを行う方法を説明します。<h2 id="h777965de86">3. 型ヒントの基本</h2>本章では、Pythonのコードに型ヒントを付ける方法を扱います。<h3 id="ha5befadd66">3.1 変数の型ヒント</h3><ul><li>変数に型ヒントを付ける際は、 <code>変数名: 型名 = 値</code> と書きます。</li></ul><pre><code class="language-python"># int型の値
int_value: int = 123

# str型の値
str_value: str = &quot;Biz Freak&quot;

# bool型の値
bool_value: bool = True</code></pre><ul><li><code>list</code>や<code>tuple</code>といったコレクション型の型ヒントは以下の要領で書きます。</li></ul><pre><code class="language-python"># str型の要素を持つlist
list_value: list[str] = [&quot;abc&quot;, &quot;def&quot;, &quot;ghi&quot;]

# 1番目の要素がstr型, 2番目の要素がint型のtuple
tuple_value: tuple[str, int] = (&quot;abc&quot;, 1)

# Keyがstr型、Valueがint型のdict
dict_value: dict[str, int] = { &quot;abc&quot;: 1, &quot;def&quot;: 2 }</code></pre><h3 id="h94457c143b">3.2 関数の型ヒント</h3>関数に型ヒントを付ける際は、 <code>def 関数名(引数名: 型名 ...) -&gt; 戻り値の型名</code> と書きます。<pre><code class="language-python"># str型の引数1つをとってstr型の返り値を返す関数
def do_freak(something: str) -&gt; str:
 return f&quot;{something} Freak&quot;</code></pre><h3 id="hb5e347ca97">3.3 Union型</h3>複数の型を受け入れる変数を定義したいことがしばしばあります。そのような時には、Union型を使います。Union型は「複数の型のうちいずれかの型」を表現するものです。<pre><code class="language-python">int_or_str_value: int | str = 1 # intとstrのUnion型。 int型の値を代入
int_or_str_value = &quot;foo&quot; # str型の値の代入が許される</code></pre><h2 id="h38babb5976">4. mypyの導入</h2>本章では、静的解析ツールであるmypyの導入と、簡単な型チェックの方法を扱います。<h3 id="h643ed29b6a">4.1 mypyのインストール</h3>mypyは外部ツールなので、 <code>pip</code> などのパッケージマネージャからインストールするのが簡単です。<pre><code class="language-shell">pip install mypy</code></pre><h3 id="h09aa9f9c49">4.2 mypyによる型チェック</h3><code>mypy</code> コマンドの後に型チェックしたいスクリプトファイルのパスを渡すと、そのファイルの型チェックを行えます。<pre><code class="language-shell">mypy my-script.py</code></pre>ここで、標準出力に <code>Success: no issues found in 1 source file</code> と出力されると、型チェック成功です。また、ソースコードが置かれているディレクトリを渡すと、ディレクトリの中のスクリプトファイルを再帰的に型チェックできます。<pre><code class="language-shell">mypy ./src/</code></pre><h3 id="hdaad11f928">4.3 テキストエディタ・IDEとの統合</h3>この手のツール全般に言えることですが、テキストエディタやIDEと統合することで快適な開発環境を構築することができます。ここでは例として、VSCodeとの統合方法を紹介します。<ul><li>VSCodeの拡張機能のマーケットプレースから”<a href="https://marketplace.visualstudio.com/items?itemName=ms-python.mypy-type-checker">Mypy Type Checker</a>”をインストールします。</li><li>拡張機能の設定から”Mypy-type-checker: Show Notifications”を”onError”に設定します。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/8e6187309f204d3e914819e0266b0bd7/python01-mypy-type-checker-show-notifications.png" alt="" width="511" height="118"></figure></li><li>型エラーのある箇所に、自動的に以下のような表示が出ます。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/cdcf023227794d658583209077bcfe1d/python01-mypy-error-on-cursor.png" alt="" width="1037" height="129"></figure>ちなみにこのエディタは正確にはVSCodeではなく、VSCodeをフォークして開発された<a href="https://cursor.sh/">Cursor</a>です :-)</li></ul><h2 id="haed544bae8">5. 実践的な型チェック</h2>この章では、実際のコードでありそうな型エラーとその解決方法について扱います。<h3 id="hfbcb309316">5.1 意図しない型変換</h3><h4 id="h07bd922a7b">5.1.1 型エラーの出るコード例</h4>以下は、価格と税率から税込価格を計算しようとしているコードです。<pre><code class="language-python"># 税込価格を計算する
def calcurate_total(price: int, tax_rate_percentage: int) -&gt; int:
	tax_rate = tax_rate_percentage / 100
	return price * (1 + tax_rate)

if __name__ == &quot;__main__&quot;:
 print(calcurate_total(900, 10))</code></pre>このコードをmypyで型チェックすると、以下のようなエラーが出ます。<pre><code class="language-shell">error: Incompatible return value type (got &quot;float&quot;, expected &quot;int&quot;) [return-value]</code></pre><h4 id="h8cbe228081">5.1.2 原因</h4>原因は <code>price * (1 + tax_rate)</code>の部分です。 <code>int</code> 型の値 <code>price</code> と、 <code>float</code> 型の値 <code>tax_rate</code> について計算を行っていますが、このとき <code>price</code> の型が <code>int</code> から <code>float</code> に自動的に変換されます。<ul><li> <code>float</code>は<code>int</code>よりも表現できる範囲が広いため、これらを混ぜて演算すると<code>int</code>が<code>float</code>に変換された上で演算されます。このような挙動を型昇格といいます。</li></ul><h4 id="hbc7a8127ed">5.1.3 修正案</h4>修正の方針ですが、税込価格が整数で欲しい場合は以下のような修正が考えられるでしょう。<pre><code class="language-python"># 税込価格を計算する
def calcurate_total(price: int, tax_rate_percentage: int) -&gt; int:
	tax_rate = tax_rate_percentage / 100
	return math.floor(price * (1 + tax_rate)) # 小数点以下を切り捨て</code></pre>この場合、<code>math.floor()</code>は<code>float</code>型の値を引数に取って<code>int</code>型の値を返す関数なので、<code>calcurate_total</code>関数の戻り値は<code>int</code>型になります。割りとありがちなケアレスミスですが、型ヒントを書いておけばこのようなミスに早く気付くことができます。<h3 id="h2ae2f1a608">5.2 Null安全</h3><h4 id="h96d34dd40e">5.2.1 型エラーの出るコード例</h4>以下は、辞書からキー &quot;id&quot; に対応する値を取得しようとしているコードです。また、関数内で何やらデバッグログを出そうとしています。<pre><code class="language-python">import logging
logging.basicConfig(level=logging.DEBUG, format=&quot;%(message)s&quot;)

def get_id_value(input: dict[str, str]) -&gt; str:
 id_value = input.get(&quot;id&quot;)
 logging.debug(&quot;id_value: &quot; + id_value)
 return id_value

if __name__ == &quot;__main__&quot;:
 print(get_id_value({&quot;id&quot;: &quot;bar&quot;}))</code></pre>このコードをmypyで型チェックすると、以下のようなエラーが出ます。<pre><code class="language-python">Unsupported operand types for + (&quot;str&quot; and &quot;None&quot;) [operator]
Incompatible return value type (got &quot;str | None&quot;, expected &quot;str&quot;) [return-value]</code></pre><h4 id="hfc0ce67b96">5.2.2 原因</h4>エラーの内容を大雑把にいうと<ul><li>1行目: <code>str</code>型と <code>None</code>型について<code>+</code>演算子を適用できない (つまり、足し算ができない)</li><li>2行目: 関数の戻り値の型ヒントが<code>str</code>だが、mypyが推論した戻り値の型は <code>str | None</code> である</li></ul>ということになります。<code>input.get(&quot;id&quot;)</code> について、<code>input</code>に “id”という名前のキーが含まれていない場合、対応する値の代わりに<code>None</code>が返されるのですが、このコードはそれの考慮を忘れてしまっています。また、このコードですが、<code>get_id_value</code>関数にうっかり”id”キーを含まない辞書を渡して実行すると以下のような例外がraiseされてしまいます。<pre><code class="language-python">Traceback (most recent call last):
 File &quot;/path-to-script.py&quot;, line 20, in &lt;module&gt;
 print(get_id({&quot;a&quot;: &quot;foo&quot;, &quot;d&quot;: &quot;bar&quot;}))
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 File &quot;/path-to-script.py&quot;, line 15, in get_id
 logging.debug(&quot;id_value: &quot; + id_value)
 ~~~~~~~~~~~~~^~~~~~~~~~
TypeError: can only concatenate str (not &quot;NoneType&quot;) to str</code></pre>このような実行時エラーが起こりうる実装を、mypyを使うことによって実行前にチェックできます。<h4 id="hb3caff6542">5.2.3 修正案</h4>まず、<code>logging.debug()</code>の部分で例外が出ないように修正します。f-stringを使い、変数を文字列にそのまま埋め込むのが手っ取り早いでしょう。<pre><code class="language-python">logging.debug(f&quot;id_value: {id_value}&quot;)</code></pre>次に、戻り値の型を修正します。今回は ”id” がない場合はとりあえず<code>None</code>を返すようにします。この時、適切な型は<code>str</code>と<code>None</code>のUnion型 <code>str | None</code>です。<pre><code class="language-python">def get_id_value(input: dict[str, str]) -&gt; str | None:
 ...</code></pre>合わせると、以下のようになります。<pre><code class="language-python">import logging
logging.basicConfig(level=logging.DEBUG, format=&quot;%(message)s&quot;)

def get_id_value(input: dict[str, str]) -&gt; str | None:
 id_value = input.get(&quot;id&quot;)
 logging.debug(f&quot;id_value: {id_value}&quot;)
 return id_value

if __name__ == &quot;__main__&quot;:
 print(get_id_value({&quot;id&quot;: &quot;bar&quot;}))</code></pre>これは極端な例でしたが、値がNull (Pythonでは<code>None</code>に相当する) である場合のハンドリングを忘れてしまうことはしばしばあります。ある変数がNullではない事を言語レベルで表明できる機能のことを「Null Safety」と呼んだりしますが、mypyによってそれを部分的に実現できます。<h2 id="h51351c43d4">6. まとめ</h2>この記事では、Pythonの型ヒントとmypyを用いた型チェック方法を説明しました。型ヒントを使用すると、コードのドキュメンテーション、自動補完、型チェックの利点が得られ、開発効率が向上します。また、mypyを使用することにより、型エラーを早期に発見し修正することが可能になります。また、一般的にコードを書く時間よりも読む時間の方が長いといわれています。型ヒントを重要な場所(特に、モジュール外から参照されうる関数や変数)に書くことにより、 他の開発者がコードを読む際に理解が容易になります。それにより、特に多人数で開発する際の開発者間の齟齬が小さくなり、結果的に開発の高速化に寄与できるのではないでしょうか。どのようなツールを使用するかはプロジェクトやチームの状況によりますが、mypyや型ヒントなどのツールはPython開発をさらに効率的で信頼性の高いものにするための一つの選択肢となるでしょう。<a href="https://bizfreak.co.jp/recruit" target="_blank" rel="noopener noreferrer nofollow">株式会社Biz Freak</a>は、ロバストなソフトウェアの設計・実装に興味のあるPythonエンジニアを募集しています。

プログラミング

型ヒントと型チェックで開発スピードを落とさずに安全に実装しましょう。

【Python #1】はじめてのmypy

Biz Freakの麦太郎です！このブログでは、「APIなんて触ったことがない方でも、ChatGPTを、プログラム上で動かせる！」を目標に、Google colabを使用して、簡単なコードを書いていきます。プログラムを書いたことがない方でも、実行可能な内容と思いますので、ぜひ、最初の一歩に、取り組んでみて下さい。<hr><h2 id="heb0c680bba">Google Colabとは</h2>プログラミングやデータサイエンスに興味を持っているけれど、ハイスペックなコンピュータを持っていない？開発環境の作り方がめんどくさい？大丈夫、心配はいりません。Google Colab（コラボラトリー）は、インターネット上で高性能な計算資源を無料で利用できる素晴らしいツールです。また、瞬時にコードを書き、実行できる環境が立ち上がるという良さもあります。まずは、Google Colabとは何か、そしてどのように使うのかを初心者向けにわかりやすく解説します。<h3 id="hed808a5ff1">Google Colabとは？</h3>Google Colab（Google Collaboratory）は、Googleが提供する無料のクラウドベースのサービスで、Pythonコードを実行できるオンラインノートブック環境です。まあ、簡単にいうと、「色々なライブラリがプレインストールされているので、&quot;import ####&quot;と入力するだけで様々なライブラリを即時に使用することができる、またPCのスペックを気にせずにガンガンAI回せちゃう、PoC環境」的な感じです。もう少し細かく説明すると、以下のような利点があります。<ul><li>高性能な計算資源：GPUやTPUといった高性能なハードウェアを無料で利用可能。</li><li>クラウドベース：インターネットに接続されたどこからでもアクセス可能。自分のパソコンにインストールや設定が不要。</li><li>共有可能：作成したノートブックを簡単に共有でき、他の人と共同作業が可能。</li><li>統合されたライブラリ：Pythonのデータサイエンスライブラリ（Pandas、NumPy、TensorFlowなど）がすぐに利用可能。</li></ul><h3 id="h004bffc2d7">Google Colabの使い方</h3><h4 id="h07d27b00cf">1. Google Colabにアクセス</h4>まず、<a href="https://colab.research.google.com/?hl=ja">Google Colab</a>にアクセスします。Googleアカウントでログインすると、すぐに使い始めることができます。<h4 id="h44e5e49382">2. 新しいノートブックを作成</h4>「ファイル」から、「ノートブックを新規作成」をクリックすると、新しいノートブックが作成されます。ここでPythonコードを書いて実行することができます。<h4 id="he3da48daf7">3. コードを実行</h4>ノートブックのセルにPythonコードを入力し、Shift+Enterキーを押すとコードが実行されます。例えば、以下のような簡単なコードを試してみましょう。<div data-filename="sample_1.ipynb"><pre><code class="language-python">print(&quot;Hello, Google Colab!&quot;)</code></pre></div><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/4b177d2dd73546abb35eb73ae865b88f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-17%2018.04.14.png" alt="" width="581" height="143"></figure>上記のようになれば成功です！<h4 id="h242c0b001e">4. ノートブックの保存と共有</h4>作成したノートブックは自動的にGoogleドライブに保存されます。また、共有リンクを生成することで、他の人と簡単にノートブックを共有することができます。さて、ではいよいよ、このGoogle Colab上でChatGPTを動かしていきましょう！<h2 id="h967909d60b">Google ColabでChatGPTを動かす手順ガイド</h2>Google ColabでChatGPTを動かすのは比較的簡単。いくつかのステップを踏むだけで実現できてしまいます！このガイドでは、Pythonコードを使ってChatGPTを動かす手順を説明します。<h3 id="h14b84c6e46">ステップ1: Google Colabのセットアップ</h3><ol><li>Google Colabにアクセス:<ul><li>Google Colabにアクセスします。</li><li>必要に応じてGoogleアカウントにログインします。</li></ul></li><li>新しいノートブックの作成:<ul><li>右下の「新しいノートブック」をクリックして、新しいノートブックを作成します。</li></ul></li></ol><h3 id="h6fd9dc894f">ステップ2: 必要なライブラリのインストール</h3>ChatGPTを動かすために、必要なライブラリをインストールします。以下のコードを最初のセルにコピーして実行します。<div data-filename="main.ipynb"><pre><code>!pip install openai</code></pre></div>さて、補足的な内容ですが、ここで一応、Google Colabでのライブラリのインストールの仕方を説明しておきましょう！よく使う、スタンダードなライブラリは、先にも書いた通りすでにGoogle Colabにインストールされています。そのため、以下のように、&quot;import ####(ライブラリ名)&quot;を書くだけで、すぐに実行可能になります。<div data-filename="sample_2.ipynb"><pre><code>import numpy as np

# 簡単な例: 配列の作成と基本操作
array = np.array([1, 2, 3, 4, 5])
print(&quot;配列:&quot;, array)

# 配列の要素を2倍にする
doubled_array = array * 2
print(&quot;2倍にした配列:&quot;, doubled_array)</code></pre></div>スクショのようになれば成功です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/59aedcac5cfd46da9686909c0f007ca4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-18%2020.52.34.png" alt="" width="1436" height="494"></figure>標準でプレインストールされていないライブラリについては、先ほどのopenaiのように一番最初に一行加えるだけです。<div data-filename="main.ipynb"><pre><code>!pip install openai
from openai import OpenAI</code></pre></div>この&quot;!pip ~~~~~~&quot;とは、簡単にいうと、Google colab のちょっと外に出て、外の環境からGoogle colabにインストールをさせている、という風に理解して下さい。これで、事前にインストールされていないライブラリについても、使用可能になるわけです。簡単ですね！&quot;!pip install openai&quot;がない場合とある場合を比較してみましょう。＜&quot;!pip install openai&quot;がないと...＞以下のように、エラーが出る。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/64b6580709e341fc9d21d5e27357bfdc/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-18%2020.48.56.png" alt="" width="1492" height="736"></figure>＜&quot;!pip install openai&quot;を足すと...＞インストールに成功！<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/07425205501a402da278c42737fa9002/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-18%2020.50.45.png" alt="" width="2230" height="1104"></figure>さて、進んでいきましょう。<h3 id="h65b2eb962e">ステップ3: OpenAI APIキーの取得</h3>ちょっと話はそれますが、&quot;API&quot;って何かご存知ですか？&quot;Application Programming Interface&quot;の略です。外部のアプリと接続するためのインターフェイスですね。IT言語でよくわからないものがあったら、全文を確認して和訳しましょう。早期にインターネットテクノロジー業界の言葉を理解するコツです。さてさて、ChatGPTを動かすには、OpenAIのAPIキーが必要です。以下の手順でAPIキーを取得します。<ol><li>①OpenAIの<a href="https://openai.com/product" target="_blank" rel="noopener noreferrer nofollow">APIページ</a>にアクセスし、「Get Started」をクリックします。</li><li>「<a href="https://openai.com/pricing#language-models">Pricing</a>」を確認ください。使用した分だけ課金されます。</li><li>ダッシュボードからAPIキーを取得します。※OpenAI APIキーの取得について、詳細は別ブログなどを参考にしてみて下さい。ここでは詳細割愛します。</li></ol><h3 id="hc093996aaf">ステップ4: ChatGPTを動かすコードの作成</h3>次に、ChatGPTを動かすためのコードを作成します。以下のコードを新しいセルにコピーして、<code>&lt;YOUR_API_KEY&gt;</code>をあなたのAPIキーに置き換えて実行します。<div data-filename="main.ipynb"><pre><code>!pip install openai
from openai import OpenAI
import os

# APIキーとモデル名を設定
API_KEY = &quot;your_openai_key&quot; # openaiで取得したAPIキーを入れて下さい。
MODEL = &quot;gpt-4o&quot;

client = OpenAI(api_key=API_KEY)

completion = client.chat.completions.create(
 model=MODEL,
 messages=[
 {&quot;role&quot;: &quot;system&quot;, &quot;content&quot;: &quot;あなたは最高に優秀なアシスタントです。&quot;},
 {&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: &quot;こんにちは！2+2を解いてくれますか？&quot;}
 ]
)

print(&quot;アシスタント: &quot; + completion.choices[0].message.content)</code></pre></div><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/80f46408596b49bc939977af88346d90/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%208.42.58.png" alt="" width="1554" height="602"></figure>上記のようになれば成功です！うごきましたね！<h3 id="he115b6ef16">ステップ5: gpt-4oを使用して、画像を解析してもらおう。</h3>以下はちょっとした発展版。先日、米国時間の5月13日、gpt-4oがリリースされました。上記のコードではしれっと、<div data-filename="main.ipynb"><pre><code>MODEL = &quot;gpt-4o&quot;</code></pre></div>を使用していたのですが、せっかくなので、もう少しgot-4oを触って、最先端を体験しましょう。以下のように入力してみて下さい。画像はなんでも良いです。画像の指定方法は、この下に記載します。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/db53eb3d66824f39b2dfcad9f0da3dac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%208.51.59.png" alt="" width="1476" height="1278"></figure><div data-filename="main.ipynb"><pre><code>from IPython.display import Image, display, Audio, Markdown
import base64

IMAGE_PATH = &quot;/スクリーンショット 2024-04-08 11.51.48.png&quot;

# プレビューで画像を表示してみましょう
display(Image(IMAGE_PATH))</code></pre></div>Google colabで画像を指定するためには、以下の手順です。簡単ですね。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/dc5afe9bdc9f4220987288d4a2d085fb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%208.54.27.png" alt="" width="1008" height="1032"></figure>上記でアップロード完了したら、<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/5682d3514be8443b925c190d04c74bcf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%208.59.18.png" alt="" width="404" height="88"></figure><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/ce819587823f424c95b389cebc10b0f7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%208.57.47.png" alt="" width="496" height="386"></figure>これで、パスがコピーできるので、この部分にペーストして下さい！これでどんな画像も参照可能です。<div data-filename="main.ipynb"><pre><code>IMAGE_PATH = &quot;/スクリーンショット 2024-04-08 11.51.48.png&quot;</code></pre></div>さて、上記が完了したら、以下のコードを実行するだけ。<div data-filename="main.ipynb"><pre><code class="language-python"># 画像ファイルを開き、Base64文字列としてエンコード
def encode_image(image_path):
 with open(image_path, &quot;rb&quot;) as image_file:
 return base64.b64encode(image_file.read()).decode(&quot;utf-8&quot;)

base64_image = encode_image(IMAGE_PATH)

response = client.chat.completions.create(
 model=MODEL,
 messages=[
 {&quot;role&quot;: &quot;system&quot;, &quot;content&quot;: &quot;あなたは最高に優秀なアシスタントです。&quot;},
 {&quot;role&quot;: &quot;user&quot;, &quot;content&quot;: [
 {&quot;type&quot;: &quot;text&quot;, &quot;text&quot;: &quot;この画像にはなんて書いてありますか？文字起こしして下さい。&quot;},
 {&quot;type&quot;: &quot;image_url&quot;, &quot;image_url&quot;: {&quot;url&quot;: f&quot;data:image/png;base64,{base64_image}&quot;}}
 ]}
 ],
 temperature=0.0,
)

print(response.choices[0].message.content)</code></pre></div><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/5f108bbfd1644a9d80629367b43b5712/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-05-20%209.02.18.png" alt="" width="1646" height="950"></figure>完了です！画像をAIで読み込み、文字起こしができました！<h3 id="ha214098e44">まとめ</h3>このガイドでは、Google ColabでChatGPTを動かすための基本的な手順を説明しました。必要なライブラリのインストールからAPIキーの設定、実際のChatGPTとの対話までのステップを完了することで、簡単にChatGPTを使ったプロジェクトを開始できます。Google Colabを使えば、ブラウザ上で手軽に実験や開発ができるので、ぜひ試してみてください！Biz Freakでは、独自のAIシステムとノーコード等のツールを活用して、短期間で最高品質のプロダクトを実装できる能力を養うことができます！圧倒的な成長や、大手との新規事業の共創に興味がある方は、ぜひお気軽にお問い合わせ下さい。

AI（人工知能）

このブログでは、「APIなんて触ったことがない方でも、ChatGPTを、プログラム上で動かせる！」を目標に、Google colabを使用して、簡単なコードを書いていきます。さらに、gpt-4oを使用して、画像を解析してみましょう！

【AI入門 #2】Google ColabでChatGPTを動かそう！(gpt-4o対応)

ローコード

Bubble でレスポンシブデザインを実現するには、いくつかの重要な概念を押さえておく必要があります。
豊富な具体例と共に Container の Layout を基礎から理解し、レスポンシブデザインをロジカルに実装していきましょう！

【Bubble 入門 #4】Layout を駆使してレスポンシブデザインを実現しよう！

こんにちは！CSSに若干のアレルギー反応がある上松です。今回は、Bubble 入門シリーズの3発目！ Styles？<s>ちょっと取っ付きにくいな… 見なかった事にしよう</s>編！前回の記事では、Bubble の画面の見方をおさらいしました。 👉 前回の記事はこちら <a href="https://bizfreak.co.jp/blog/zb_ripyli" target="_blank" rel="noopener noreferrer nofollow">【Bubble 入門 #2】初心者必見！Bubble エディタの使い方まとめ</a>その中で登場した Styles タブにフォーカスする内容です！本記事では、Bubble の Styles 機能を活用することにより、<ul><li>一貫性のある UI デザインをユーザーに提供しやすくなること</li><li>UI デザインの保守性が向上すること</li></ul>をハンズオン形式で一歩ずつ解説していきます。特に Bubble を触りたての方や、今まで Styles を避けてきた方に、 オススメの内容となっております。<h2 id="h0669eefa7c">目次</h2><ol><li>Styles とは？</li><li>Style variables でフォントと色を定義する</li><li>Element styles でスタイルを定義する</li><li>Styles を Element に適用する</li><li>Styles による一貫性と保守性をプチ体験</li><li>まとめ</li></ol><h2 id="h1812590deb">1. Styles とは？</h2>Styles は、アプリ内の各 Element (UI要素) の視覚的なデザインを一元管理するための機能です。この機能を使うことで、テキストやボタン、入力フィールドといった様々な Element のスタイル (色、フォント、余白の設定など…) を統一的に設定し、管理することができます。つまり、CSS で例えると class に近い機能です！Styles を使用することは、基本的にはメリットしかありません。スタイルを一元的に管理することは、ユーザーに一貫性のある UI デザインを提供することに繋がり、さらには Bubble を扱う我々自身がアプリの保守をしやすくなります。Styles の機能は、その名の通り「Styles タブ」で利用可能です。Bubble エディタの一番左にあるナビメニューで、筆のアイコンをクリックして、Styles タブにアクセス！<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/668e288d70494f9ebedb23343852ae68/20240422_01.png?w=800&amp;h=534" alt="" width="800" height="534"></figure>なんか色々ありますが… Styles は<ul><li>Element styles</li><li>Style variables</li></ul>の2大要素で構成されています。以下、それぞれを実際に使ってみましょう！<h2 id="heda92bc7a5">2. Style variables でフォントと色を定義する</h2>まずは、Styles variables から見ていきましょう。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/08d5209ad80a417680283f72d215a4da/20240422_02.png?w=800&amp;h=679" alt="" width="800" height="679"></figure>Style variables タブでは、フォントと色を「変数として定義」することができます。本記事では、以下のように Style variables を定義してみます。 (初期項目に存在しないものは Create new font/color variable します。)<ul><li>Fonts<ul><li>Joke Font: <code>EB Garamond</code></li></ul></li><li>Colors<ul><li>Primary: <code>#32cd32</code></li><li>Success: <code>#17D9B9</code></li><li>Low: <code>#808080</code></li><li>High: <code>#0000FF</code></li></ul></li></ul>では、このように定義した Styles variables はどこに現れて、どのように利用可能なのでしょうか？デザインタブに戻り、任意の Element をダブルクリックして、プロパティエディタを召喚します。そして、フォントを選択しようとしてみてください。そこにはなんと… いるではありませんか… 先ほど定義した <code>Joke Font</code> が！<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/fa91798f260c4f2181cd848866bc9895/20240422_03.png?w=800&amp;h=573" alt="" width="800" height="573"></figure>そして次は、なんでもいいので色のプロパティを変更しようとしてみてください。そこにはなんと… いるではありませんか… <code>Color variables</code> に、先ほど定義した色が！<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/e8209fe4d092421a8cb4ed9e4c8559ad/20240422_04.png?w=800&amp;h=573" alt="" width="800" height="573"></figure>フォントとか色って無限にありますよね？？少なくともデザイナー畑ではない私にとっては、途方もなくそう感じます。このように Style variables としてお気に入りを保持しておくだけでも、一気にフォントや色の扱いやすさが向上するします。その片鱗を、ここで感じていただけたのではないでしょうか？あと、ノーコードだから、フォントの名前とか色の16進数とかを書かなくていいのも、イイですよね。ここではまだ Style variables は Element に適用しません。次の Element styles で適用します。（どういうことだろう？）<h2 id="hbddb9433cf">3. Element styles でスタイルを定義する</h2>Styles においては、実はこっちがメインの要素です！ゆえに Styles タブ上で初期表示されるんでしょう。（多分…）Element styles では Element のスタイルを丸ごと定義できます。つまり、後で Element に丸ごと適用したい「色やフォント、ボーダーなどの見た目に関するプロパティ達を」「1つのまとまりとして」定義できます。(やはり、CSS でいうクラスなのだ、という例えがしっくりきます。)まずは Element styles タブを開き、Add Style ボタンをクリックしましょう。Text を装飾するスタイルとして <code>Joke</code> を作成していきます。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/d7331033471846e1b44f21cd205da70e/20240422_05.png?w=400&amp;h=214" alt="" width="400" height="214"></figure><code>Joke</code> スタイルを作成すると、以下のような画面になります。これは <code>Joke</code> スタイルの編集画面です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/bd9e9879187f43c092ad9eb84ffca251/20240422_06.png?w=800&amp;h=571" alt="" width="800" height="571"></figure>画面左側の一覧の Text 欄に、<code>Joke</code> スタイルが追加されていることがわかります。そして、恐る恐る、画面右側をご覧ください。ものすごく、見覚えがありませんか…？そうです、これはあの「プロパティエディタ」です！正確には、プロパティエディタからスタイルに関するものを抜粋したもの、です！Appearance、Layout、Conditional、… 見れば見るほど同じだ。（驚愕）ここで、申し上げたいことは「Styles 恐るるに足らず」です。すなわち、いつも通りプロパティエディタを弄るだけ！終了！(続きがあるので、まだブラウザは閉じないでください笑)フォントはもちろん、先ほど Styles variables で定義した <code>Joke Font</code> にしましょう！(伏線回収)ついでに他のプロパティもちょこちょこ編集すると、以下のように「とてもお洒落に Joke をかませそうな」 Text のスタイルが出来上がりました。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/da0239b024ee4a04b9e7591ab5d2a37f/20240422_07.png?w=800&amp;h=544" alt="" width="800" height="544"></figure>これだけじゃまだ物足りないので、プロパティエディタの Conditional タブを開き、Define another condition をクリックします。この Conditional では、条件に応じた何らかの変化を定義できます。ここでは <code>Joke</code> スタイルが適用された Text がホバーされた時に、フォントサイズが大きくなる、という動きを作ってみます。When: <code>This Text is hovered</code>⇒ Font size: <code>36px</code><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/91d01828909d479896f849ebf2630144/20240422_08.png?w=800&amp;h=544" alt="" width="800" height="544"></figure>文字を打つ必要はなくクリックだけで定義可能です。（流石ノーコード！）この操作感がクセになるんですよね…例えるなら、プログラミングしているときに生成AIが自動的に補完してくれるから、Tabキーをひたすら押していくだけ、みたいな…<h2 id="heb2877963d">4. Styles を Element に適用する</h2>さて、お待ちかね！Element styles で定義したスタイルを実際に Element に適用します。主戦場である Design タブに帰りましょう。Joke を言っている Text をクリックして、プロパティエディタを表示してください。実は Style という項目があります。今まで目に入っていなかったかもしれませんが、Styles を勉強している私たちには「見える」ようになっています！（勉学による認知の拡張）<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/e2d430dbe9934aec9184adeb89db5689/20240422_09.png?w=800&amp;h=611" alt="" width="800" height="611"></figure>そのドロップダウンを展開すると… 先ほど Element styles で定義した <code>Joke</code> スタイルがあるではありませんか…！<code>Joke</code> スタイルを、2つの Text に適用してプレビューで確認すると、こんな感じになります！<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/046b1c47d8e5462f9ea1c1c405a3285c/20240422_10.gif" alt="" width="640" height="400"></figure><h2 id="h13388a790d">5. Styles による一貫性と保守性をプチ体験</h2>上記の例では2箇所の Text に <code>Joke</code> スタイルを適用しました。仮に「なんかこのフォント… あんまり Joke っぽくないよ…」と言われたとき、どう変更するでしょうか？それぞれの Text のプロパティエディタを開いて、1つずつフォントを変更するでしょうか？いいえ、Styles で1箇所だけを変更し、分散する 2つの Text のフォントをまとめて変更します！Styles variable の Style variables で <code>Joke Font</code> を <code>EB Garamond</code> から <code>Aclonica</code> に変更すると…<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/b66e3ecf424146b9aff1169febe2b5e8/20240422_11.png?w=700&amp;h=690" alt="" width="700" height="690"></figure>しっかり2箇所の Text が変更されています！実際の業務では、見た目を変更しなければならない箇所が平然と何十も出てきますが、 このように Styles で管理しておけば、見た目に一貫性を持たせられるだけでなく、 いざ変更したくなったときに一発で変更が可能です。ざっとアプリを見ると、他にも共通のスタイルを適用できる/すべき箇所がありますので、みなさんもこれを機に Styles にトライしてみてください！<h2 id="h51351c43d4">6. まとめ</h2>Styles を使用すると、Element に適用するスタイルを一元的に管理できることがわかりました。結局は CSS でいうクラスみたいなものでしたね。私のような Styles 過激派になると、Styles なしでデザインを変更することはないです。（もちろん、半分冗談です笑、半分。）そして、この記事をここまで読んでくださったあなたも、今日から Styles 過激派です！Styles を活用して、一貫性のある UI デザインをユーザーに提供しつつ、保守可能なスタイル管理をやっていきましょう！本記事の枠を超えて、<ul><li>もっと本格的に Styles 過激派になりたい…</li><li>あるいはもう Bubble だけではなく、プログラミングや AI にも強くなりたい…</li></ul>という方は是非 Biz Freak で一緒に働きましょう！様々な分野の過激派(??)があなたをお待ちしています＾＾Check 👉 <a href="https://bizfreak.co.jp/recruit">https://bizfreak.co.jp/recruit</a><hr>次回は、レスポンシブデザインに挑戦！👉 <a href="https://bizfreak.co.jp/blog/5fo31aye1d60" target="_blank" rel="noopener noreferrer nofollow">【Bubble 入門 #4】Layout を駆使してレスポンシブデザインを実現しよう！</a>

Styles の概要から使い方までをご紹介！
Styles を活用すると、スタイル（見た目）の管理が楽になるだけでなく、一貫性のある UI デザインをユーザーに提供しやすくなります。

【Bubble 入門 #3】Bubble の CSS？ Styles で効率的にスタイルを適用しよう！

「誰でも直感的にわかる！」を目標に、ディープラーニングについてわかりやすく解説します。ChatGPTや他のAIツールの背後にある技術の原理を直感的に学ぶことで、AIを使いこなせるようになりましょう！

【AI入門 #1】直感的に学ぶ人工知能！ディープラーニングの解説

どうも〜！仙台オフィスのもふすけと申します！前回記事ではBubbleの導入案内をさせて頂きましたが、 いかがでしょうか、色々な事ができる編集画面に戦々恐々としながら触っていませんか？怖くありませんか？ あたかも「使い方、分かってますよね」みたいな感じで、ボタンがドバッと出てきて、ビビりますよね…。そんな事無いですか？あ、そう…… 👉 前回の記事はこちら <a href="https://bizfreak.co.jp/blog/wk-4h2jjhx">【Bubble 入門 #1】ノーコードツール Bubble とは？ アプリを公開するまでの流れを丁寧に解説！</a>まぁともかく、今回は誰もが安心してBubbleに触り始められるように、まるっとエディタの使い方を紹介する記事を書かせて頂きます！ 細かい部分を１つ１つ説明するとキリが無いので、細かい事は後回しというスタンスで、重要な部分だけを目立つように紹介していきます。<h3 id="h0669eefa7c">目次</h3><ol start="0"><li>全体を見てみる</li><li>ヘッダメニューを見てみる</li><li>ナビメニューを見てみる</li><li>“Design”タブを見てみる</li><li>“Workflow”タブを見てみる</li><li>“Data”タブを見てみる</li><li>“Styles”タブを見てみる</li><li>“Plugin”タブを見てみる</li><li>“Settings”タブを見てみる</li><li>“Logs”タブを見てみる</li><li>まとめ</li></ol><h2 id="h3a22b71630">全体を見てみる</h2>上記目次の番号をそのまま画面上で示しますと、以下のような配置になっています。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/178fca985f54466da28beefe13804bee/blog_basic2_1.png" alt="" width="2558" height="1476"><figcaption>前回記事で作った画面をそのまま使っています</figcaption></figure>ではこれらを番号順に掻い摘んでいきます。<h2 id="h7d035b4f43">ヘッダメニューを見てみる</h2>まずは画面上部をご覧ください。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/707cb77a8715403da67b20de7ebe74e4/blog_basic2_2.png" alt="" width="2678" height="342"></figure>どの画面に行ってもこの部分は常時表示されます、それくらい重要な情報がいっぱい！ なので、まずはヘッダメニューを少し詳しめに紹介します。<h3 id="haac0dc9209">左半分</h3><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/624eb27121a84941ac0fd722398d3d0c/blog_basic2_3.png" alt="" width="1458" height="292"><figcaption>ヘッダ部分の左半分だけくり抜いております</figcaption></figure><ol><li>ただのHomeリンクBubbleのApps一覧を別タブで開くだけのリンク。</li><li>Page移動 (重要)編集中のページ、もしくはReusableElement。クリックをすると一覧選択で移動できる。テキストを打つ事も出来て、部分一致による検索も可能。</li><li>選択エレメント名現在選択中のエレメント名。クリックすると一覧選択もできる。こちらも部分一致による検索が可能。要素数は大量に増える可能性があるので、規模が大きくなったら検索癖を付けると良い。</li><li>右クリメニュー（Editメニュー）エレメントを右クリックした時に出るメニューと同じ。コピペとか色々できる。</li><li>保存状態このエディタは何かするたびに逐一保存されるオートセーブ機能がついているので、エディットしてる間はこの部分が目まぐるしく「Saving…」⇔「Saved」と切り替わります、普段は気にしないでOK。通信エラーが出て保存できない場合はここが赤くなります。</li></ol><h3 id="h7235a84054">右半分</h3><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/7c09fff53c06408a8d2288050e8fa213/blog_basic2_4.png" alt="" width="1646" height="242"><figcaption>ヘッダ部分の右半分だけくり抜いております</figcaption></figure><ol><li>ただのアプデ情報へのリンクただのアプデ情報へのリンク</li><li>issues! (超重要)issue ( = 記述エラー ) の件数が常に計算され、1件でもあれば赤く表示されます。ここが赤くなった瞬間はつまり “今の操作が構造上マズかった” という事！不具合はというのは、気付くのが後になるほど改修が面倒になるものなので、issueが1件でも出た場合は (特別な理由がない限り) 放置せず直しに行きましょう！</li><li>「気にしないでいいです」気にしないでいいです。ViewとArrangeとComponentsはどれも”ちょっとした便利ツール”です。慣れてきてからでOK。</li><li>Undo, Redo説明不要ですね。「元に戻す」「やり直す」です。</li><li>なんでも検索 (重要)今は割愛しますが、不具合で行き詰まった時の調査作業は、この機能を使いこなせるかで効率が段違いです。きっと別の記事で掘り下げる事になります、乞うご期待！</li></ol>…ヘッダ部分は以上！まとめると「ヘッダ部分はissuesは注視しよう！」という事だけ覚えて帰ってくれれば大丈夫です<h2 id="h1619bf15b7">ナビメニューを見てみる</h2>画面左側をご覧ください。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/ea908869583847fda75f34ef73cfe697/blog_basic2_5.png?w=185&amp;h=482" alt="" width="185" height="482"><figcaption>色々な編集画面に切り替える事ができます。</figcaption></figure>色々とタテに並んでいますが、逆に言えばBubbleのエディタを構成するものはこれで全てです。以下より1つ1つ解説していきます。<h2 id="h1b93705333">“Design”タブを見てみる</h2>Bubbleの主役、画面を構築する画面です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/0cc0ec864cc6444781a9e98e06846af8/blog_basic2_6.png" alt="" width="1407" height="854"><figcaption>この画面は触って確かめるのが近道</figcaption></figure>だいじな所だけ掻い摘みます。<ol><li>Elements Tree画面上に配置されている要素は全てここに表示されています。画面上の見た目を整えた後は、このツリーを確認し上下関係・親子関係を整理しながらページを作り上げていきましょう！特に、レスポンシブレイアウトを意識すると、この階層構造が非常に重要になってきます。もはや右側の見た目なんてどうでもよくなるくらい重要です（誇張ではない！）</li><li>Assets画面上に配置できる素材一覧です。ここから引っ張ってきて配置できます、以上！</li><li>Propertyエディタ要素１つ１つの詳細設定です。真面目に解説するとキリが無いけれど、落とし穴もいっぱいあるため今後の記事で順を追って覚えていきましょう！今は各タブの解説まで。概要だけ覚えてね。<ul><li>Appearanceタブ (見た目)見た目というか、基本設定詰め合わせです。振る舞いとかもひっくるめてココで設定。</li><li>Layout (配置)レイアウト、つまり配置に関する部分です。レスポンシブ周りの記事で改めて説明します！</li><li>Conditional (条件分岐)条件に応じて上記内容を細かく上書きする事が出来ます。つまり自由度の高いカスタマイズが可能なのですが、それゆえにバグの温床になりやすい部分でもあります。「意味不明な振る舞いをするな？」と思ったら要チェック！</li></ul></li></ol><h2 id="h0fefb43f71">“Workflow”タブを見てみる</h2>「◯◯ボタンが押された時」だとか「◯◯が表示状態になった時」だとか、そういうイベント単位で処理を定義することが出来る画面です。 プログラミング行為とやる事はなんら変わりません、ポチポチして出来上がるというだけで。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/126c49760ea0491db76628f022f7f0c5/blog_basic2_7.png" alt="" width="777" height="408"><figcaption>クリックしてイベント作成ポップアップが出ている様子</figcaption></figure>皆さんのお手元ではまだ何も定義されていないと思いますが、当シリーズで徐々に解説していきます。乞うご期待。<h2 id="hf7e403058d">“Data”タブを見てみる</h2>いや、”データ”と言われましても…という気持ちになかもしれませんが、 その実態は、Bubbleお手製のデータベース(・その他諸々)を管理する画面です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/bbf90c8d274a4af88aff87e0fc749d41/blog_basic2_8.png" alt="" width="1114" height="545"><figcaption>５種のタブが横に並んでいる事がわかると思います</figcaption></figure>今は各タブについてざっくりとだけ覚えておいてください。具体的な使い方は別記事にして紹介します。<ul><li>Data types1番左にあるタブ。Data typeを管理します、データの型を管理します。一般的なRDBで言う”テーブル”に相当します、例えば最初から用意されている ”User” という名前のData typeは「email(text), 変更日(date), 作成日(date), slug(text) という4つのパラメータから構成される１つの型」という事になります。</li><li>Privacy作成したData typeのアクセス権限を設定します。Auto-binding機能を使う場合は設定必須。また「なぜかデータが保存されない」という不具合はここから発生する事が多いです。</li><li>App data作成したData typeに格納されているデータを閲覧・変更・削除・等々…が行えます</li><li>Option sets定数セットです、地味に重要。Data typeとは別の領域で取り扱われる”固定値のフィールド”を作成できます。別記事にて詳しく説明します。</li><li>File manager1番右にあるタブ。今サービスにアップロードされているファイルを閲覧する事ができます。何かしらでファイルをアップするとここで管理できますが、基本的に見る必要なし。</li></ul><h2 id="h2bb1536b06">“Styles”タブを見てみる</h2>Styleを編集します、UI/UXデザイナーの領域です。ここで作成したStyleを各Elementに適用する、というのが基本姿勢になります。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/2d545a364c6543ff80d928df11e16f50/blog_basic2_9.png" alt="" width="1168" height="726"><figcaption>Style整え画面</figcaption></figure>初めからいくつかのStyleが用意されていますが、出来ることは「フォント」や「余白の設定」…と、どれも見れば分かる内容になっているかと思います。 今後、デザインに統一性を持たせたい場合や、アプリの規模が大きくなりそうな場合は使う事になりますが、そうでなければまだ触る必要はありません。※ この画面をちゃんと使う場合、CSS設計でClassコンポーネント化する際と同じような判断をしていく事になります。ので（弊社で教わるか）とりあえず手を動かして見た目を設計してみてください、一般論としては経験量がモノを言います。こちらも別記事にて詳しく説明します。<h2 id="h1b993812b7">“Plugin”タブを見てみる</h2>誰かが作ったプラグインをどかどかとインストールできる画面です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/c3193df84eeb40ca9868bab0f4873913/blog_basic2_10.png" alt="" width="609" height="358"><figcaption>始めは更地ですが、すぐ賑やかになります</figcaption></figure>注意点は色々とあるのですが（別記事でまとめます）、そういう話は有料プランになってからでも遅くはないので、初めのうちは気安くインストールしてみてください。 いまは何も考えず「Add plugins」ボタンを、ほら、押してみて……（触って確かめてみましょう！！）<h2 id="hbbac3bc6fb">“Settings”タブを見てみる</h2>その他色々なセッティング、正直結構な情報量なのですが、 とはいえ初めのうちは特段触る理由も無い、というのが正直な所です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/7d6c2d9217f74da68b6f29e5ee2c4ac4/blog_basic2_11.png" alt="" width="1156" height="648"><figcaption>開幕一番、おもむろに課金プランについて見せつけられます</figcaption></figure>今は気にしないで先に進みましょう！！<h2 id="h0a2e767dad">“Logs”タブを見てみる</h2><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/80bee4f7b0fd4a81b78156c6cc62c023/blog_basic2_12.png" alt="" width="1171" height="701"><figcaption>統計とエラーログ、そしてScheduler管理が行える</figcaption></figure><ul><li>App Metricsいろいろな統計を見ることができます。課金プランになるとここを見てパフォーマンスを最適化していく事になります</li><li>Server logsサーバー側に溜まっているログ、本気で困った時に見に行く事になります。今は不要。</li><li>Scheduler上級者向け機能。ページを作るだけでは飽き足らない人がサーバー側に重い処理をさせたい場合に使う事になります。触りたくなったらご相談ください、留意すべき事がいっぱいあります。</li></ul><h2 id="ha214098e44">まとめ</h2><hr>駆け足でしたが、如何でしたか？ 見渡すだけでも色々な機能があってワクワクしちゃいますよね！！…え、しない？あ、そう…… 実際に触り始めていると、きっと具体的な活用法、しいては「どういう考え方で使えばいいのか」といった部分が気になってくると思います。（というか、今回はまだ色々省いていますしね。。） 発展的な内容も含めて、なるべく記事として発信していくのでお待ち頂きたい......のですが！もし手っ取り早く経験値を溜めたいと思ったら、ぜひ弊社にお越しください。ローコードに限らないWeb開発の考え方、コーディングとの違いなどを含めて、学ぶ機会に溢れています！ <a href="https://bizfreak.co.jp/recruit">https://bizfreak.co.jp/recruit</a>次回はいよいよ実践編 …になる予定です！この記事で触れる場所は概ね把握頂けたと思うので、自由に構築してみてください！👉 <a href="https://bizfreak.co.jp/blog/hu-qlxt9ju0" target="_blank" rel="noopener noreferrer nofollow">【Bubble 入門 #3】Bubble の CSS？ Styles で効率的にスタイルを適用しよう！</a>

安心してBubbleに触り始められるように、まるっとエディタの使い方を紹介！
重要な部分だけを掻い摘んで、エディタの見方を把握してみよう。

【Bubble 入門 #2】初心者必見！Bubble エディタの使い方まとめ

ローコードの基本的な概念をおさらいした後、その代表的なプラットフォームである Bubble をご紹介します。
Bubble のアカウント作成からアプリ公開までの流れが丸わかり！

BLOG

【Python #1】はじめてのmypy

【AI入門 #2】Google ColabでChatGPTを動かそう！(gpt-4o対応)

【Bubble 入門 #4】Layout を駆使してレスポンシブデザインを実現しよう！

【Bubble 入門 #3】Bubble の CSS？ Styles で効率的にスタイルを適用しよう！

【AI入門 #1】直感的に学ぶ人工知能！ディープラーニングの解説

【Bubble 入門 #2】初心者必見！Bubble エディタの使い方まとめ

【Bubble 入門 #1】ローコード Bubble とは？アプリを公開するまでの流れを丁寧に解説！

RECRUIT

BLOG

【Python #1】はじめてのmypy

【AI入門 #2】Google ColabでChatGPTを動かそう！(gpt-4o対応)

【Bubble 入門 #4】Layout を駆使してレスポンシブデザインを実現しよう！

【Bubble 入門 #3】Bubble の CSS？ Styles で効率的にスタイルを適用しよう！

【AI入門 #1】直感的に学ぶ人工知能！ディープラーニングの解説

【Bubble 入門 #2】初心者必見！Bubble エディタの使い方まとめ

【Bubble 入門 #1】ローコード Bubble とは？ アプリを公開するまでの流れを丁寧に解説！

RECRUIT

【Bubble 入門 #1】ローコード Bubble とは？アプリを公開するまでの流れを丁寧に解説！