こんにちは! 仙台オフィスで主に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 で効率的にスタイルを適用しよう！

「まずは、パワポに書いてごらん。それを関係者に見せるんだ。それが最小のPoCだよ。」そんなアドバイスを受けた経験のある起業家は、多いのではないだろうか。冷静に考えてみてほしい。仮にあなたがアドバイザーの立場だったらどうだろう。自分より若く野心に満ち溢れた起業家の、想いに満ちたスライドを見て、あなただったら何というか。いや、その前に、そもそも、あなたはその事業のペルソナの集約的な意見の持ち主なのだろうか。いずれにしても、きっとあなたはその起業家に良いアドバイスをしてあげるだろう。背中を押してあげるに違いない。でも、新規事業はそんなに甘くない。「あんなに評価してくれていたのに、リリースしたら買ってくれない。」なんて、よくある話だ。アドバイザーはアドバイザーだし、顧客は顧客なのだ。そして、プロダクトを提供する顧客は、その起業家のことなど知らないし、常に代替案を持っている。“It&apos;s the only way.” と思わせるその何かを、明確に持っていないと、そのプロダクトはゴミとなる。だから、はっきりいってプロダクトを市場に出さない限り、そのものの価値は測れないと、僕は常に思っている。そして、その出し方も、非常に重要だ。その意味で大事なのは、Simple is best. これに尽きる。なぜならば、先にも述べた通り、“It&apos;s the only way.”と思わせなければならない、というのが、新規事業の最初のハードルであるからだ。つまり、USP（Unique Selling Proposition）と言い換えても良い。&quot;The Unique Selling Proposition (USP) should be something that your competitors either cannot, or do not, offer. It must be unique—either a uniqueness of the brand or a claim not otherwise made in that particular field of advertising.&quot;ユニークセーリングポジション（USP）は、競合他社が提供できないか、提供しないものでなければならない。それはユニークでなければならない-ブランドの独自性、または広告のその特定の分野で、他にない主張のいずれかでなければならない。ーRosser Reeves（USP提唱者）彼は、こうも言っている。&quot;The consumer tends to remember just one thing from an advertisement— one strong claim, or one strong concept.&quot;広告から消費者が覚えているのはたった一つの強い主張やコンセプトだ。ーRosser Reevesそんな視点に立った時、プロダクトを作るその前に一つ冷静になって考えてほしい。「なぜ、そのサービスを顧客は手に取るのか。」それこそがUSPである。この一点に尖ったプロダクトを出すべきだ。ここで起業家が行うべきなのは、ラインナップの拡充ではない。唯一無二の一点突破である。USPを明確にした初期プロダクトのリリースは、他にも様々な利点を持つ。一つ目に、学習の明確さだ。例えば、ラインナップ拡充型のサービスを市場に出し、仮にフィットしなかったとしよう。さて、あなたはそこから何が学べるだろうか。逆に、一点突破型のプロダクトをリリースし、失敗したとしよう。もし、マーケティング面での失敗だったのなら、USPそのものが顧客に刺さっていないと明確になる。ユーザーインサイトを深掘りし、USPを考え直すべきだろう。逆に、マーケティングは成功したのちプロダクトが合わなかったのであれば、USPを起点に、UXを考え直しプロダクトのみを改修すれば良い。いずれにしても、素早いピボットが可能になるのだ。初期プロダクトにおいて何よりも大事なのは、完成物の提供ではなく、仮説検証による学習の機会だ。&quot;Do not be afraid to fail. It&apos;s just an outcome. Failure teaches you what your next move should be.&quot;失敗を恐れてはいけない。それはただの一つの結果に過ぎない。失敗はあなたが次にどう動くべきかを教えてくれる。ーSara Blakely（Spanx 創業者）二つ目に、オペレーションとカルチャーの構築のし易さがある。USPを明確にした初期プロダクトについて、デリバリープロセスを考えてみよう。まず、マーケティングがシンプルになり、問い合わせしてくる顧客が何に興味関心を持っているかの想定も、簡単になる。もちろん、その後の営業もシンプルになる。極論、たった一言の価値訴求でクロージングできる可能性すらある。USPの一点にフォーカスしてユーザーとコミュニケーションと取れば良いため、導入は簡単だ。余った時間をユーザーのペインの深掘りや顧客との関係構築に時間を費やせば良い。また、サービスを実際に使用してもらう際の不具合も少なくなり、ユーザー体験が簡素化し、結果サービス全体のUXが向上する。社内の組織構築においても、会社のバリューが明確になるため、行動指針を策定しやすい。また、個々が、&quot;何が会社の強みか&quot;について、自社のサービスを通して理解しているので、いわゆるカルチャー醸成が簡単になるのだ。このように、USPにフォーカスしたシンプルさは、価値・UX・強み・カルチャーなどあらゆる面を明確化し、尖らせるのである。最後に、価格競争をしなくて済む。最後に、エッジがきけばきくほど、競合が減る。競合がいない（もしくは少ない）のであれば、価格競争をする必要がない。営業やマーケティングすらする必要がない可能性もある。利益を生み出すことで、より良いサービスの構築に繋がり、また、追従してきたプレーヤーがいたとしても、参入障壁が大きくなるのだ。さらに、競合に大企業がいたとしても、USPを明確に持つことで、差分が生まれる。そして、その絞り込みこそが、ベンチャーの唯一の長所であるスピードに繋がり、我々を勝利へと導いてくれるのだ。Competition should be avoided. Creating a unique business and breaking away from competition is the path to success.競争は避けるべきだ。ユニークな事業を創り、競争から脱却することが成功への道だ。Peter Thiel（PayPal共同創設者）

社長ブログ

“It's the only way.” と思わせるその何かを、明確に持っていないと、そのプロダクトはゴミとなる。その意味で大事なのは、Simple is best なのである。USP（Unique Selling Proposition）と言い換えても良い。


新規事業の初期プロダクトは、より尖れ。

「誰でも直感的にわかる！」を目標に、ディープラーニングについてわかりやすく解説します。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 のアカウント作成からアプリ公開までの流れが丸わかり！

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

２０２４年２月１日、経営をし始めて３年が経過した。今から３年前の２０２１年２月１日、僕と長谷川は株式会社Biz Freakを創業した。まずは朝イチで法務局に行こう！と朝から仙台の広瀬通りと東二番丁通りの交差点にあるマックに集まった。長谷川がホチキスを忘れて、コンビニで経費で買ったことに苛立った朝だったのを覚えている。会社名の最終候補は、長谷川が出した「Biz Freak」か、僕が出した「Napier（ネイピア数。オイラーの等式のように、複雑にからまった紐を指一本でほどく魔法のような存在になろう）」か「チキンライス（チキン野郎の集りでも世界を変えられる）」だった。俺たちって、天才じゃないじゃん。だったらもうイカれたように仕事しようぜ。バカでも努力で世界変えようぜ。「Biz Freak（ビジネスに熱狂する）」にしよう。そんな感じで決まった会社名だった。このとき、同じ意味合いで出したチキンライスにしなくてよかったと、今では思っている。Napier（ネイピア数）は、何度説明しても長谷川には伝わらなかった。「もっとフリークしようぜ。」とか「あいつはフリークしてる。」という言葉が、今では定着しつつあるので、（後日シリコンバレーの投資家には社名をディスられるが）まあ良かったんじゃないかと思っている。そして、なぜか僕らには共通した思いがあった。いつも、どんな些細なことでも常に議論していたが、「誰もが今に熱狂する世界を創る。」このメッセージについて、僕は即決し、長谷川は頷いた。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/a563a59625b44a8f90d4c467e4779ce0/logo.png" alt="" width="785" height="252"></figure> さて、次は、何をするかだ。ここにおいても、僕たちは&quot;明確な答え&quot;を持っていた。「テクノロジーを活用して、提供価値を生み出そう。」そう、ここにおいては、&quot;明確な答え&quot; の基準が限りなく浅かった。なぜこれでイケると思っていたのか、今思うと不思議だ。「で、何するんだったっけ。」この日を境に、１００回くらいこの疑問に立ち戻ることになる。<hr>ここから、僕たちはシステム受託を始めた。初めはエンジニアなど社内にいなかったので、僕が開発を行っていた。AIについてはある程度の知見や実装経験を持っていたが、Webをしっかりと学んだのはこの時が初めてだったかもしれない。しかし、それがきっかけで、今の新規事業特化型の、独自のアジャイル開発体制を築いていくことになるのだ。「今のテクノロジーをフル活用してさ、俺一人で、最も効率よく開発を行うとしたらどうしたら良い？」それは、人がいないからこそ生まれる問いだった。そこから、（会社にいるメンバーには申し訳ない話だが、）リソースが枯渇するたびに、僕らは成長を重ねてきたように思う。<hr>程なくして、CTOの高橋が入社した。彼は、僕が前にいたベンチャーで一緒に働いたことがあり、若いが馬力があった。学ぶ力が飛び抜けていた。予想通り、彼は入社してすぐに、僕が思う理想の開発プロセスをトレースし、すぐに上回った。数週間の出来事だった。僕は「これからは営業を忘れて、エンジニアになる」という、前月に下した大きな意思決定を即座に忘れ、すぐに営業に戻ることにした。そこから、僕たちは１年かけて、外部委託をせずに、３人でどこまで案件をこなせるか、という勝負を始めてみた。生成AIやPaaSを活用し、どこまで開発を効率よくこなせるか、実験してみようと。それは、個々人への負荷はもちろんあったが、必要なプロセスだったように思う。本当にタイミングよく、PaaSが流行り、そして、これまたタイミングよくOpenAIがChatGPTで世界をひっくり返し、生成AI市場がブチ上がった。僕たちはそんな傍で、小さく、３人で、１億円の売上を計上した。そこから、徐々に噂を聞きつけ、人が集まってくるようになっていった。<hr>そんなこんなで創業した会社が、今年、４年目を迎えた。１年ほどの迷走期間を経て、新規事業に特化して、唯一無二のバリューを出せる会社を創る、と決め、開発を爆速で進め、新しいテクノロジーにいち早くリーチさせる会社にしようと決めた。早く作る工程においては既存のツールをハックしよう。その代わり、AIにおいてはアルゴリズムベースで理解しよう。新規事業のコンサルをやっている人たちは、僕らと違って頭が良い。でもリスクを取らないから、開発はしないらしい。じゃあ僕らは、開発を主軸におこう。レベルの高いエンジニアを集め、僕たちで、アジャイル開発を再定義しよう。そんな発想のもとで、３年間、必死に提供価値を磨いてきた。ハックしたツールでは国内No.1の評価を取り、AIにおいてブラックボックスは無くなった。大手企業からの依頼がほとんどを占めるようになり、SIerが取るような大規模案件の依頼も増えてきた。今ではコンペ相手が誰もが知る大手SIerやコンサルでも、何とも思わない。売上においては毎年掲げた数字を達成してきたし、創業当初は無謀に思えた、売上５億・純利益１億も、無謀ではないのかな、と思う程度のハードルに思えてきている。そしてこれからは、ただ提供価値を向上して、売上を達成するだけではなく、ディープラーニングをフルに活用して、アジャイル開発の回し方自体を再考して効率化していく。本当に、アジャイル開発そのものの再定義を行っていこう、というフェーズに入っていくのだ。<hr>ーこう書けば、見栄えは良い。「それで、お前はその景色を変えたのかよ。」最近よく思い出す言葉だ。これは、早稲田でラグビーをやっていたときに先輩から言われたものである。練習に、良い緊張感がなく悲壮感が漂い、今年は優勝できないのかもしれない、そんな雰囲気を感じて先輩に相談したときに、返ってきた一言だった。お前一人変われば、世界が変わるんじゃねぇのかよ。世界がそのままなのは、お前の責任だろ。そして、僕は大学４年になり、その意味を理解した。チームを日本一にするのは、歴史や伝統ではない。今そこで、グラウンドに立っているやつの中の何人が、どれだけ深く、世界を変えようとしているかの、総和でしかないのだ。それ以外の変数は存在しない。勝手に勝利に導いてくれる&quot;誰か&quot;は、そもそも存在しないのだ。また、その逆も同じである。例えば、負けた理由を組織のせいにしたこともあった。しかし、組織の中で立場が上がるにつれて、僕は、ずっと存在すると勝手に思い込んでいた、&quot;文句をつける対象&quot;のはずだった&quot;組織&quot;や&quot;誰か&quot;が、そもそも存在しないことに気付いていくのだった。それは、自分がその構成要素であるということを忘れ、気づかずに自分で自分の影響範囲を限定し、そしてその範囲外と勝手に決めつけた環境に対して、文句を垂れていただけに過ぎなかった。僕は謂わゆる、&quot;ホンモノ&quot; ではなかったのだ。忘れられない体験を通して理解したはずなのに、また、卒業して１０年も経って、同じ問いが僕に突き刺さってくるのだ。「それで、お前はその景色を変えたのかよ。」僕はまだ何もできていない。<ul><li>日々、一緒に働いてくれるメンバーを、勝たせることができたのか？</li><li>本当に、唯一無二の提供価値を出せていると言い切れるのか？</li><li>日々応援してくれる人たちに、恩を返せているのか？全てNOだ。</li></ul>そして、何より、<ul><li>僕たちはまだ、世界を変えていない。</li></ul>という事実だけがそこにある。本当にこの３年間、一瞬だった。きっと次の３年も一瞬なんだろう。定性・定量の全てに、期日を持って活動していく。<ul><li>メンバーを、勝たせる。</li><li>唯一無二の提供価値を出す。</li><li>日々応援してくれた人たちに、恩を返す。</li></ul>たったこれだけのことを、きちんと実行していこう。３年経って、何もできていませんでした、じゃ、そもそも話にならない。しかし、現状はそれが事実なのである。それが今の実力だ。であればその事実とちゃんと向き合って、一つ一つ解決して、階段を登っていくしかないのだ。「誰もが今に熱狂する世界を創る。」創業時に、掲げたコンセプトが、こんなにも自分を追い詰めるとは思わなかった。伝統あるスポーツチームが、勝手に優勝するわけではないのと同じように、創業して時間が経ったからといって、掲げたビジョンが勝手に達成されるわけじゃない。毎年、そこにいる人間が、重圧のなかで、ベクトルを自分に向けて、一つずつ、必死に積み重ねていくほかないのだ。世界を変えていくことができるのは、僕たちしかいないのだ。そういった当事者意識を、何人が、どこまで持てるか。僕たちはそういう戦いをしている。シンプルにいえば、やり切る。ただ、それだけの話だ。<hr>最後に、会社のみんなへ。もっともっと、Freakしようぜ。絶対勝てるから。

２０２４年２月１日、経営をし始めて３年が経過した。
今から３年前の２０２１年２月１日、僕と長谷川は株式会社Biz Freakを創業した。

創業３周年。結果何もやれてない

“思考錯誤を重ね続け、ある日突然、サービスがマーケットにフィットした。それまでは必死に様々な改修をしながら、クライアントへのインタビューにかけずり回っていたが、突然、サービスは羽が生えたように成長し、巨額のキャッシュを落とし続けるようになった。それまで必死に働き続けていたチームは、その金のなる木をただ見ているだけの日々を過ごすことになったのだ。”こんな日々を妄想し、日々奮闘しているスタートアップは数知れない。しかし、これはユートピアに過ぎない。PMFは、直線的な成長の中にある通過点であり、実際に”PMF達成の瞬間”を感じたことのある経営者は、ほぼいないのである。また、例えばB2Bでは、徐々に改善を重ねていくそのプロセスを通して、製品と市場の適合性を感じ始めるまでに通常２年かかる。データから見てみよう。以下は、米国のエンジェル投資家が配信するニュースレター（<a href="https://www.lennyrachitsky.com/）の中で紹介されているグラフだ。">https://www.lennyrachitsky.com/</a> ）の中で紹介されているグラフだ。△…製品をリリースした時期□…最初の顧客獲得の時期○…最初にPMFを感じた時期<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/d3a27b07c5724e77a0906887096acb9b/0d41a9e4-a902-41ae-a74a-4e3be6c4256b_5438x6448.webp" alt="" width="728" height="863"></figure>レニーのニュースレター（<a href="https://www.lennysnewsletter.com/">https://www.lennysnewsletter.com/</a> ）から引用もし、あなたが革新的なアイディアを発見し、毎日そのアイディアに向き合っているにも関わらず、約２年もの間、市場に適合していないと感じ続けたら、元々ニーズがなかったと割り切ってやめてしまうか、誰かに譲ってしまうかのどちらかを選択するのではないだろうか。しかし、上記のデータから、いくつかのことが分かる。一つ目は、アイディアを発見した段階から、製品が市場に適合したと感じる瞬間までの期間の中央値は約２年、サービスリリースからPMFを感じるまでには、９ヶ月〜１８ヶ月かかることが分かる。二つ目は、その一方で、Figma、Airtable、Slack などの企業は PMF を見つけるまでに 4 年以上かかっているが、それは例外的だということだ。例えば、Slack について調べてみると、コミュニケーションツールを開発する前は、全く別の製品（ゲーム開発）をしており、解決する課題自体を、大きくピボットしていることが分かる。上記の記事の中で引用されている、スタートアップ企業の経営者のコメントを２つほど引用しておこう。I never felt at any point of time like, ah, now I have product-market fit. I always felt like there was always something for us to improve on—whether it was growth or product or customer care. I’m always seeing what more we can do to solve problems on behalf of our customers.”“私はどの時点でも、ああ、これでプロダクト マーケット フィットができた、と感じたことは一度もありませんでした。事業成長、製品、カスタマーケアなど、常に改善すべき点があると感じていました。私は常に、お客様に代わって問題を解決するために何ができるかを考えています。“——Tomer London （Gusto共同創設者兼 CPO）“PMF has been so gradual; I might even say . . . linear. There’s not just one hump that we got over and thought, ‘Okay, now it’s clicking.’ It’s more like we’re chipping away at these obstacles and getting more and more people interested. It’s more like, ‘Oh, this is really working for certain segments.’”“PMFはとても緩やかなものでした。直線的とさえ言えるかもしれません。。私ちが乗り越えた「よし、これでうまくいく」と思ったこぶは、一つではありませんでした。様々な障害を少しずつ取り除いていくのと同時に、少しずつ興味を持ってもらう人を増やしていった気がします。それはむしろ、&quot;ああ、これは特定の層には本当に有効なんだ &quot;というような感じでした。“——Jori Lallo （Linear共同創設者）つまり、PMFのプロセスは顧客と対話をし続けた結果であり、閾値的な到達点（YES or NO）というよりは、徐々に馴染んでいくイメージに近いことがわかる。また、大事なのは、「１つのアイディアに対して、約２年間は試行錯誤を繰り返し続けることが必要である」という事実だ。あなたが諦めそうになっているその課題解決は、一見は市場に適合していないガラクタのように見えるかもしれないが、２年はその”革新的かも知れないアイディア”に向き合ってみた方が良いのである。また、新規事業を企画する際には、最低でも約２年間の”試行錯誤の体力”を、計画に練り込んでおく必要がある。ここで改めて認識すべきなのは、この”体力”とは、ただサービスが市場を泳いでいるのを黙って見守る間の”期間”のみのことではなく、絶え間ないサービス改修や顧客との対話を行うための、期間・資金・人員といった、あらゆるコストについてである、ということだ。そして、その約２年の期間でPMFするサービスは、新規事業の約半分であるということも、想定しておく必要がある。さて、約２年、長くても３〜４年。その間の食糧を積んで、出航する準備はできているだろうか。もしくは、航海の途中で、食糧を調達する道具や計画を、船に積んでいるのか。そういった視点で、改めて作成した計画書を眺めてみてほしい。また、新規事業を評価する側も、簡単にグロースするものではないということ、一方で、きちんと改善を回すことで、前に進むプロセスであることも、同時に伝えておきたい。さて、これまで、その大変さについて記載してきたが、僕が本当に言いたいのは、その来たる航海の苦難を事前に認識し、しっかりと準備や計画を行なった上で、出すべき船は出せ、ということだ。起業や新規事業を立ち上げる際、漠然とした不安に怯える人は数多い。しかし、モノの価値とは、期待収益をリスクで割って初めて明らかになるため、リスクテイクの判断をするためには、そのものの定量化が必要なはずだ。にも関わらず、リスクの定量化に試みた人は、案外少ないのではないだろうか。ただ、リスクは定量化できる。マーケットフィットの中央値は出ているし、調べれば分散についてもある程度の数値は出てくるはずだ。リターンがわかるのであれば、価値を提供化することが可能であり、ブラックボックス化した不安に怯える必要もない。なぜなら、何度もいうように、そのベースとなるマーケットフィットとは、明確なゴールラインでもなければ、短期間で到達できる保証もないのだが、一定の期間の努力の先に、確かに存在する素晴らしい景色を持つプロセスなのだから。最後に、その航海の間の重要なポイントである顧客との対話の重要性について、以下のコメントを引用しよう。““We spent about a year building, when in retrospect, we should have spent half that time talking to customers. And if we had, we would’ve wasted a lot less time on customers who were never going to buy.The biggest thing I will tell founders is, you have to spend half your time talking to your customers. If you’re a B2B company, that means becoming a salesperson. Figure out how to spend the collective time of your founding team: 50% needs to be talking to customers. If you’re a consumer company, that just means talking to them and meeting them. Airbnb was very famous for doing this. And spend the other 50% of your time building.”“サービスビルディングに約 1 年を費やしましたが、振り返ってみると、その半分の時間を顧客との対話に費やすべきでした。もしそうなら、決して購入するつもりのない顧客に無駄な時間を費やすことははるかに少なくなったでしょう。私が創業者たちに最も伝えたいことは、時間の半分は顧客との会話に費やす必要があるということです。B2B企業であれば、それは営業マンになることを意味します。創業チームの時間をどのように費やすかを考えてください。例えば、あなたが消費者を対象とする事業を行っている場合、それは単に彼らに話しかけ、実際に会うことを意味します。Airbnb はこれを行うことで非常に有名でした。そして残りの50%の時間をサービス構築に費やします。”——Spenser Skates（Amplitude 共同創設者兼 CEO）時間は有限である。これは、すべての事業に共通する唯一の絶対事項だと僕は思っている。では、その限られた時間を何に使うのか。その意思決定の上で、トライ＆エラーの旅を楽しんでほしいと思う。

PMFが、閾値的な到達点というのはユートピアに過ぎない。

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 とは？アプリを公開するまでの流れを丁寧に解説！

創業３周年。結果何もやれてない

PMFというユートピアと新規事業計画について

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 とは？ アプリを公開するまでの流れを丁寧に解説！

創業３周年。結果何もやれてない

PMFというユートピアと新規事業計画について

RECRUIT

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