文字を書くよりコードを書くのが好きで、人工知能がもっと好きな M.H です！昨今、話題となっている人工知能、その研究者・企業が一堂に会する人工知能学会全国大会が今年もハイブリッドで開催されました。 注目は、生成AI・大規模言語モデル（LLM＝Large Language Model：大規模言語モデル）の登場によって、どこまでの影響を受けているかです。 個人的には、昨年は参加できず、2年ぶりの参加なので、発表内容もこれまでと大きく様変わりしていることが予想されます。 現在の人工知能の研究の状況について報告します。<h2 id="h0669eefa7c">目次</h2><ol><li>大会概要</li><li>聴講しての感想</li><li>発表に関する分析</li><li>まとめ</li></ol><h2 id="hd27335faf7">1. 大会概要</h2><ul><li>2024年度 人工知能学会全国大会 (第38回)<ul><li>日程：2024年5月28日(火)～31日(金)</li><li>会場：アクトシティ浜松(静岡県浜松市) ＋ オンライン（ハイブリッド開催）</li><li><a href="https://www.ai-gakkai.or.jp/jsai2024/">https://www.ai-gakkai.or.jp/jsai2024/</a> </li></ul></li><li>会場<ul><li>アクトシティは浜松駅に隣接した施設で、すぐ隣にありました。</li><li>立派な広い施設で、逆に受付の場所を探すのに苦労しました。</li><li>各講演会場は複数の建物に広く配置されていて、セッションXの発表を聴いて次にセッションYの発表を聴こうとして、会場の移動に5分〜10分かかって聞きそびれることもありました。</li></ul></li></ul><ul><li>クロージングで発表された参加者数など（大会委員会発表の速報値）<ul><li>発表件数：946件</li><li>参加者数：3792人（うち現地参加：2893人）</li><li>スポンサー数：113社</li></ul></li></ul><h2 id="h7967accc18">2. 聴講しての感想</h2><h3 id="h8b9e8caa27">概観</h3>　全体を通して多かったのが、予想通り「生成AI」や「大規模言語モデル」に関わる発表でした。しかし、発表者も急速な「生成AI」の発展についていけていない状況が見て取れました。 　実際に、発表論文提出期限（2024/2/12）から大会（2024/5/28）までの間に状況が大きく動きました（5/14：GPT-4o発表、5/15：Google I/O など）。さすがにこれらを考慮していないことを責めるのは酷というものでしょう。 　それでも、本来やるべきことを蔑ろにしているように見える場合がいくつかありました。　全体的な印象として、「大規模言語モデルを用いた◯◯」系の発表では、うまくいっていないものが多く感じられました。 　本来なら、手法やモデルを比較検討し、そこにアイデアを加えて性能を上げるべきところを、安易に生成AIに置き換えてしまっている場合が見られました。 　それでうまくいっていればいいのですが、往々にして期待する結果が得られていません。原因としては、生成AIの位置付けを間違っているのではないかと考えられます。生成AIは要素技術ではなく、出来上がったサービスです。極端なことを言えば、データ分析に検索エンジンを使うと言っているのと同じ発想になります。もしかしたらうまくいくこともあるかもしれませんが、期待しない結果になる場合の方が多いのではないでしょうか。さらに、研究の根幹に関わる部分を置き換えてしまっているので、研究の焦点が見えなくなってしまいます。 　また、生成AIでは「同じプロンプトに対して同じ回答をするとは限らない」という点も考慮しなければなりません。この特性があるので、生成AIを要素技術に置き換えても研究成果の再現性は出なくなってしまいます。 　その結果、研究報告というよりは、生成AIの性能評価のような発表になっている場合が見受けられました。　これらの様子で既視感があるのが、「Word2vec」や「BERT」が出てきた時です。この時にも、皆がこぞって使うようになり、成果を出している報告がある一方で、とんでもない使い方をしているのを見かけたことがあります。 　独自性を出そうとしているのか、あるいは便利なツールが出てきたので便利に使ってみようとしたのかわかりませんが、目的と手法の選択という基本的なところをしっかりしないとトンデモになってしまうというものだと感じました。　もちろん、有益な発表も多数存在します。そのうち注目したものの一部を紹介します。<h3 id="h9c26481d22">「物語構造分析に基づくLLMを活用した創作支援を目的とするインタラクティブストーリー生成システム」</h3>　「ブラックジャック」の新作のプロット作成を支援したシステムの話でした。 　言ってみれば生成AIの入出力を支援するツールです。プロンプトとして表現すべき項目をUIとして設定してパラメータ調整することで、適切なプロンプトに変換し、その出力をわかりやすく表示するものです。 　ツール自体はそんなに難しい仕組みには見えませんでしたが、適切な項目の選択やパラメータからプロンプトへの変換など、内部的にはノウハウの塊であろうことはよくわかります。 　見た目は単にGPT4にUIをつけたものですが、それらを適切に変換する仕組みがすごい成果だと思います。<h3 id="hde138737b5">「生成AI時代のナレッジグラフ」</h3>　ナレッジグラフの研究者によるパネルディスカッションでした。 　最初にそれぞれの研究者が立場を表明し、ディスカッションに臨みました。 　タイトルが全てですが、生成AIに対してどう位置付けていくかがポイントでした。 　各人それぞれの立場・思想はありますが、ナレッジグラフを生成AIと融合して活用していくかという方向性は一致しています。　個人的には、ナレッジグラフには興味があり、期待しています。 　生成AIは驚異的な進化を短時間で遂げており、今後も進化していくことが予想されますが、その本質はニューラルネットワークです。 　一方で、人間の知識・推論・学習を考えた場合に、論理構造を無視することはできないと思います。ある確定した情報を紐づける。あるいはすでに紐づいているものを利用する。そのために多くの時間を割いて学習するというのは、どうしても考えられません。 　もちろん、人間の脳はニューロンで作られたネットワークで構成されているわけですが、その中に論理的に思考する仕組みがあります。 　現在のニューラルネットワークにはそれがないように見えます。そしてそれを補うのがナレッジグラフではないかと考えています。 　これらがうまく融合することによって、もう一段上のステップに進むことができるのではないかと期待します。<h2 id="hc41637abee">3. 発表に関する分析</h2>　2024年度の人工知能学会全国大会の発表内容について、大会サイトの<a href="https://confit.atlas.jp/guide/event/jsai2024/category" target="_blank" rel="noopener noreferrer nofollow">セッション一覧ページ</a>をたどってスクレイピングしてデータを収集しました。 　次のような収集を行い解析を行いました。<ul><li>一般発表やポスターセッション、招待講演なども含め、1011件を収集<ul><li>英語のみの発表は極力除外</li><li>企業ブースの説明は除外</li></ul></li><li>講演情報のページから次を抽出<ul><li>タイトル</li><li>キーワード</li><li>講演内容のアウトライン</li></ul></li></ul><ul><li>プログラム言語<ul><li>Python</li></ul></li><li>形態素解析<ul><li>janome（辞書は、付属の標準辞書を使用）</li></ul></li><li>解析ツール<ul><li><a href="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%B0%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89" target="_blank" rel="noopener noreferrer nofollow">WordCloud</a></li><li><a href="https://maartengr.github.io/BERTopic/index.html" target="_blank" rel="noopener noreferrer nofollow">BERTopic</a></li></ul></li></ul><h3 id="h01d7285464">WordCloud</h3>　単語数に基づくワードクラウドを作成してみた結果がこちらです。出現数が多い単語が大きいフォントで表示されています。 　「モデル」「学習」「研究」「言語」「データ」「生成」「AI」などが出現数が多いことがわかります。 　これだけ見ても、生成AI・大規模言語モデルの影響が大きいことが見て取れます。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/df8f9242ea9d47cdbfcbc68dfa9afa2b/wordcloud.png?w=600&amp;h=400" alt="" width="600" height="400"></figure><h3 id="h76c61f58ed">BERTopicによるトピック分析</h3>　12のトピックが抽出されました。トピックごとの出現単語 　全体的に生成AI・大規模言語モデルがあり、そのほかに医療、交通、市場分析、画像、感情、スポーツ、ロボットなどのトピックがあります。<ul><li>医療＝Topic3</li><li>市場分析＝Topic4</li><li>画像＝Topic5</li><li>スポーツ＝Topic6</li><li>交通＝Topic7</li><li>ロボット＝Topic8</li><li>感情＝Topic9</li></ul><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/6ee3f04f45c8411cb335a2a932e11b8f/Topic_Word_Scores.png" alt="" width="958" height="697"></figure>階層クラスタリング 　12に分かれていますが、大きく見ると３つか４つにまとまるように見えてきます。こちらでも生成AI関連が大きくなっていることが見て取れます。 　0.8のところを目安に見てみると、次のようになっているように見えます。<ul><li>(11)+(6) → ロボット</li><li>(8)　　　→ スポーツ</li><li>(9)　　　→ 感情分析</li><li>その他　→ 生成AI・LLM</li></ul><figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/392abd3a9ad942c5bfbc55cfc5659635/Hierarchical_Clustering.png" alt="" width="952" height="318"></figure>ドキュメントとトピックの関係、分布状況 　講演とトピックの分布関係です。<figure><img src="https://images.microcms-assets.io/assets/145b371faece4417bfaf63302a2f6c77/db52cf28f2f44934bb24e54b09a2bcc3/documents_and_Topics.png?w=1166&amp;h=641" alt="" width="1166" height="641"></figure><h3 id="h44d4a5b16e">4. まとめ</h3>　全体を通して、生成AI・大規模言語モデルに塗りつぶされてしまったという印象です。もし、「生成AI・LLM学会」だと言われてもさほど違和感を感じないほどです。 　しかし、皆が生成AIを研究にうまく取り込んで使いこなせているというわけではありませんでした。むしろ、急激な変化に追いつけていけず困惑しているという様子すら感じられました。 　生成AIがゴールというわけではありません。AGI（汎用人工知能）に向かう長い道のりにおける一つのブレークスルーなのではないでしょうか。　一方で、そのほかの個別の研究がかすんでしまったように感じました。 　現在の生成AIの躍進は、『冬の時代』にも続けていた研究があってこそだと思っています。今は生成AIほど華々しくもなく目に見える成果もないように見える研究がいつか大きな成果を生み出すかもしれません。　次回の大会では、生成AIを使いこなした研究・発表に加えて、そのほかの研究の巻き返しが多く出てくることを期待したいと思います。　Biz Freakでは、独自のAIシステムとノーコード等のツールを活用して、短期間で最高品質のプロダクトを実装できる能力を養うことができます！ 　<a href="https://bizfreak.co.jp/recruit">https://bizfreak.co.jp/recruit</a>（M.H）

AI（人工知能）

「2024年度 人工知能学会全国大会 (第38回)」（2024/5/28～5/31、@浜松アクトシティ）を聴講したので、報告します

「2024年度 人工知能学会全国大会 (第38回)」 聴講報告

ローコード

はじめてのデータベースを Bubble で学ぼう！RDBとの類似点も解説！
データを作成して画面表示するまでの詳しい手順も合わせてご紹介！

【Bubble 入門 #5】はじめてのデータベース！Bubble ではどう使う？

こんにちは! 仙台オフィスで主に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システムとノーコード等のツールを活用して、短期間で最高品質のプロダクトを実装できる能力を養うことができます！圧倒的な成長や、大手との新規事業の共創に興味がある方は、ぜひお気軽にお問い合わせ下さい。

このブログでは、「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 のアカウント作成からアプリ公開までの流れが丸わかり！

BLOG

「2024年度人工知能学会全国大会 (第38回)」聴講報告

【Bubble 入門 #5】はじめてのデータベース！Bubble ではどう使う？

【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

「2024年度 人工知能学会全国大会 (第38回)」 聴講報告

【Bubble 入門 #5】はじめてのデータベース！Bubble ではどう使う？

【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

「2024年度人工知能学会全国大会 (第38回)」聴講報告

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