GPTsを活用しよう！ChatGPTをカスタマイズしてBubbleと連携 vol.1

みなさん、こんにちは！

今回は OpenAI の「GPTs」について取り上げていきたいと思います。

人工知能（AI）の発展は目覚ましく、その中でも言語モデルの進化は特に注目を集めていますね。OpenAI の GPT シリーズは、自然言語処理の分野で革命を起こし、多くの人々が日常的にAIを利用するきっかけを提供しました。

そしてついに OpenAI では昨年の11月に、ChatGPT を手軽にカスタマイズできるサービス、通称「GPTs」をスタートしました。さらに GPTs では、ChatGPT の外で情報を取得させたり、何かしらのイベントを実行することができるアクションを構築することができます。

本記事では、GPTs を使用してオリジナルのGPTを作成し、さらに Bubble アプリと連携する方法について２回に分けてお届けしたいと思います。

1. アプリの概要
2. サンプルアプリについて
3. Bubbleアプリの作成
4. まとめ
5. コンテンツ

1. アプリの概要

具体的にはサンプルとして「中学校カリキュラムに基づいた英単語フラッシュカードアプリ」を作成しました。それぞれの役割は以下のようなイメージです。

👉GPTs

GPTs では「日本の中学校カリキュラムに基づいた英単語学習データを生成」してくれる GPT を作成し、アクションを使用して生成したデータを Bubble アプリのデータベースに登録します。

👉Bubble

Bubble では、GPT によって登録されたデータを表示させる簡単なフラッシュカードアプリを作成します。

GPTs を活用することで、アプリの核となるデータ生成業務を委託し、アプリの価値や魅力を向上させるサポートを受けることができそうですね。実装時においてもリソースやコストの節約を大幅に実現できるかもしれません。AI を活用したアプリ開発の参考アイデアとして、ぜひ最後までお付き合いいただければと思います。

なお前提としまして、GPTs を使用するには、ChatGPT Plus 以上のプラン加入が、また、Bubble に関しましても Data API を使用しますので、Starter 以上のプラン加入が必要となります。

2. サンプルアプリについて

以下が今回、実際に作成した GPT と Bubble アプリのリンクとなっています。よろしければ併せてご参考ください。

👉 GPTs「Vocab Voyager」

※ GPTs を参照する場合も、OpenAI のプラン加入が必要です。

chat.openai.com

👉Bubbleアプリ

Bubble は Agency プランで実装しています。参照する際は認証が必要となりますので「username」と「password」を入力してご利用ください。

https://vocab-voyager.bubbleapps.io/version-test

bubble.io

第１回となる本記事では、まず Bubble アプリの準備から進めていきます。Bubbleアプリでは、データベースに登録された英単語データを表示するフラッシュカードを作成します。

フラッシュカードの作り方については、かなり以前にもご紹介しましたが、今回は特にタイマーなどは使用せずに、限りなくシンプルに作成していきます。

ワークフローはシンプルですが、今回は WU 消費への考慮や、陥りがちな問題にも触れていきながら作成します。Bubble の公式認定資格（Bubble Developer Certification）の受験を検討されている方は、テスト対策として是非ご参考いただければと思います。

3. Bubbleアプリの作成

今回作成するフラッシュカードは以下のようなイメージ（※２倍速）です。

データベースから GPTs に生成、登録してもらったデータを取得して、最初に英単語と例文を、５秒後に日本語訳を表示します。STOP ボタンで、一時停止ができ、START ボタンで再スタートします。

3.1. データベース（Data type）の作成

まずはデータベース（Data type）から作成していきます。今回は英単語を保存する「Vocab」という名前の Data type をひとつだけ作成します。

フィールドは下表の４つを作成します。

No.	フィールド名	詳細
1	word	英単語
2	translation	英単語の日本語訳
3	sentence	英文
4	sentence_translation	英文の日本語訳

プライバシールールは「Publicly visible（誰でも見れる状態）」としておきます。

3.2. ページの作成

次にフラッシュカードを表示するページを作成していきます。今回はログインなどは実装せずに index ページを使用していますが、こちらは任意に作成したページでも問題ありません。

ページを準備したら「Page」element を選択して、プロパティパネルの「i」アイコンから Element inspector を開き、Custom state を３つ作成します。Custom state は Data types や Option sets のように目視で確認しにくいため、特に理由がない場合は、特定の Element（一般的には Page element を使用）にまとめて作成するのがおすすめです。

No.	Custom states	型	リスト型	詳細
1	isEnglish	yes/no	-	現在表示している言語タイプ。`yes`の場合は英語、`no`の場合は日本語を表示している。デフォルトは`yes`。今回は英語から表示されることを前提とした実装となっています。
2	isPouse	yes/no	-	再生が一時停止されているか。`yes`の場合は一時停止中、`no`の場合は再生中。デフォルトは`yes`（この場合、ページロード時は一時停止状態で表示される）。
3	vocabList	Vocab type	○	Vocab typeから取得した英単語一覧を保持。

ページに配置していく Elements は、以下のようなイメージです。

「Repeating group」を１つ配置して、その中に「Text」を３つ配置します。Repeating group の下には「Button」を１つ配置しておきます。

フラッシュカードは１問ずつ表示していきたいので、Repeating group の設定は Rows、Column ともに「1」としておきます。また、Type of content は「Vocab」として、Data source には先ほど Page element に作成した Custom state「vocabList」の値をセットするようにしておきます。

次に「画面に表示されている問題は何問目か？」が分かるように、問題番号を表示させておきます。値は「No.」という文字に Repeating gorup の「's page number」を加えて、ページ番号を表示するようにします。

なお、よくある間違いとして Repeating group を使用して行番号を取得したい場合に使える「Current cell's index」は、あくまで「現在表示されている表においてのセル番号」となります。今回は 1 × 1 の固定行を表示する Repeating group として作成していますので「Current cell's index」と指定すると、ずっと「No.1」が表示される結果となります。今回のような例では「Current cell's index」ではなく「's page number」を使用します。

次に、英単語の部分を表示する Text を設定します。この Text は「英単語⇒日本語訳⇒英単語⇒日本語訳...」と言語を切り替えて表示させます。

データ数が少ないなど実行環境によっては、特にチラつきが気になるといったことは無いかもしれませんが、アプリの規模が大きくなるにつれて、初期ロード時の表示はチラつきの影響を受けることがあります。条件によって表示させるテキストを操作したい場合は、初期値を空欄にセットしておくと良いですね。

今回は初期ロード時は空欄として、Conditional で表示する値をセットするように設定しました。

Conditional の When に設定する条件は、Custom state の「isEnglish」を参照して、英単語を表示させるか、日本語を表示させるかを決定します。

When	Text
[Page element]'s isEnglish is yes	Current cell's Vocab's word（英単語を表示）
[Page element]'s isEnglish is no	Current cell's Vocab's translation（日本語訳を表示）

例文の Text も同様に、同じ条件で設定します。

When	Text
[Page element]'s isEnglish is yes	Current cell's Vocab's sentence（英文を表示）
[Page element]'s isEnglish is no	Current cell's Vocab's sentence_translation（日本語訳を表示）

次にフラッシュカードの表示切替をストップ再生させる Button を作成します。「STOP」もしくは「START」とするかは、Custom state の「isPouse」の値を参照して判断します。

今回は初期表示を「STOP」として、Custom state の「isPouse」の値が「yes（一時停止中）」の場合に「START」となるように設定しました。

以上で、画面デザインの作成が完了です。

3.3. ワークフローの作成

次にワークフローを作成していきます。ワークフローは Event が３つと、Custom Event が１つの全部で４つです。

１つ目は「Page is loaded」の時に、作成しておいた Custom state の「vocabList」に、Vocab type から取得した一覧を Set state しておきます。

次に「Do every 5 seconds」Event を作成して、Only when に「[Page element]’s isPouse is no」と入力します。これで、５秒おきに Custom state「isPouse」が「no」（つまりは「再生中」）である場合に、Step1 から Action を実行していきます。

Step1 で実行しているのが、Custom Event の「next page」を「Trigger a custom event」した Action です。

Custom Event の「next page」は、以下の通り Repeating group のページを次に進める「Show next」を Step1 に定義しているだけのシンプルなものです。「Wrap around」にチェックしておくことで、最終問題を表示したあと、もう一度１問目から再生することができます。

先ほどの「Do every 5 seconds」Event の Action に戻ります。

Step1 で Custom Event の「next page」を呼び出すときは、日本語表示が終わったタイミングでのみページを進めたいので、Only when には「[Page element]’s isEnglish is no」と入力しておきます。

Step2 では、Custom state の「isEnglish」を yes の場合は no に、no の場合は yes となるように、Value に「[Page element]’s isEnglish is no」と Set state しておきます。

なお、「Show next」させるだけの Custom Event を作成しているのは、Bubble の仕様であるワークフローの実行順序を保証させるためです。もし、Custom Event に定義するのではなく、「Do every 5 seconds」Event の Step1 に「Show next」Action を定義した場合、アプリの規模や環境にもよりますが、Show next される前に、Step2 の Set state を実行する可能性があり、この場合は意図せぬ動作の原因となります。

このブログでは何度も取り上げていますが、ワークフローの実行順序は Bubble を開発する上で重要なポイントです。詳細については、以下の記事でご紹介していますので、併せてご参考ください。

blog.nocodelab.jp

最後に「START/STOP」ボタンを押したときの Event を作成しておきます。Custom state「isPouse」が yes の場合は no に、no の場合は yes になるように、Value には「[Page element]’s isPouse is no」と Set state しておきます。

以上でワークフローの作成が完了です。

補足：WU消費について

今回の Bubble アプリでは、ページロード時に取得したVocab type のリストを一旦 Custom state にセットして、参照は Custom state にセットした値を使用するように設定しました。

Custom state にセットせずに、下図のように直接 Repeating group の Data source に「Do a search for」で Vocab type を検索してセットすることもできますが、この場合、Show next するタイミングでサーバー接続を都度実施しすることになり、つまりは指定した秒数おきに WU を消費し続けることになることを意味します。

サーバーへの接続はブラウザの開発ツールを使うとリアルタイムで確認することができます。下図は Chrome の開発ツールを使用した例です。「Network」タブを確認することで、ページを進める度にサーバーへ接続を実行しているリクエストを確認することができ、また取得したレスポンスも目視で確認することができます。