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

この記事は【GPTsを活用しよう！ChatGPTをカスタマイズしてBubbleと連携 vol.1 】の続きとなっています。

みなさん、こんにちは！

前回の vol.1 では、まず Bubble アプリのフラッシュカードから準備しました。今回は ChatGPT をカスタマイズして、日本の中学校カリキュラムに基づいた英単語学習データを生成してもらい、要望に応じて Bubble に Data API 経由でデータを登録しれくれるオリジナルの GPT を作成していきます！それぞれの役割は下図の通りです。

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

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

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

👉 GPTs「Vocab Voyager」

GPTs は閲覧に関しても、プラン加入が必要です。

chat.openai.com

👉Bubbleアプリ

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

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

bubble.io

1. GPTs とは
2. ChatGPTをカスタマイズ
3. カスタムアクションの作成
4. まとめ
5. 参考資料
6. コンテンツ

1. GPTs とは

OpenAI では、特定の目的のために作成できる ChatGPT のカスタムバージョンのことを「GPTs」と呼んでいます。GPTs は、日常生活、特定のタスク、仕事、または家庭でより役立つように ChatGPT のカスタマイズ版を誰でも作成し、そのモデルを他の人と共有できる新しい方法です。

先に述べた通り、GPTs を利用するには、ChatGPT Plus 以上のプラン加入が必要となりますが、自分が作成した以外の公開されている GPTs も、自由に利用することができます。

GPTs は ChatGPT チームにより開発されたものもあれば、Canva や Zapier といった有名サービスによるもの、個人作成のものまで様々です。執筆現在で公開されているカテゴリーは以下の7つとなっています。

No	カテゴリー	詳細
1	ChatGPT	ChatGPT チームによって作成された GPTs
2	DALL·E	DALL:E を使用したアイデアを映像に変える GPTs
3	Writing	文章作成、編集、スタイル改良のためのツールを使い、文章をより洗練したものにするための GPTs
4	Productivity	効率を上げるための GPTs
5	Research & Analysis	情報の検索、評価、解釈、視覚化をしてくれる GPTs
6	Programming	コードを書く、デバッグする、テストする、学ぶための GPTs
7	Education	新しいアイデアを探求し、既存のスキルを見直すための GPTs
8	Lifestyle	旅行、ワークアウト、スタイル、食べ物などのヒントを得るための GPTs

上図は OpenAI でトレンド入りしている GPTs の一部ですが、画像に関するものが多い印象ですね。実際に使って見ると、一般的な ChatGPT よりも、特定の目的を持っている GPT であるため、こちらからの要望に対して追加で情報の提供を求められることが多いです。対話をすることで、ユーザーが何を重要として考えているのか、何を求めているのかを明確にするための質問をするようにカスタマイズされているようです。

2. ChatGPTをカスタマイズ

では、実際に GPT を作成していきたいと思います。

Explore GPTs のページから、「＋Create」ボタンをクリックして、GPT の下書き画面を開きます。

左側が GPT の設定に関する指示を行うエリアで、右側が作成した GPT と実際に対話ができるプレビューエリアです。

さらに設定の指示エリアでは「Create」と「Configure」の2種類あり、指示を行う方法を対話で進めるか、もしくは自身で定義していくかを選択できます。

まずは「Create」で、ある程度の枠組みを対話で作成し、細かい調整を「Configure」の「Instructions」で行うと、スムーズに GPT を調整することができるのでおススメです。「Create」ではアイコンも作成してもらえるので、具体的なイメージや希望を伝えてみてくださいね。

「Configure」で設定できるのは、以下の項目となっています。

設定項目	詳細
Name	GPT の名前
Description	GPT の説明
Instructions	この GPT は何をするか？どのように振る舞うか？何を避けるべきか？といった GPT への詳細な指示。
Conversation starters	ユーザーが GPT と会話を始める際のサンプル
Knowledge	この GPT が参照するための追加ファイル。「Code Interpreter」が有効の場合に、ファイルのダウンロードが可能。
Capabilities	GPT が使用できる機能を選択。ウェブ参照、DALL-E 画像生成、コード実行（有効にすると、この GPT はデータ分析、アップロードしたファイルの作業、数学計算などが可能）
Actions	定義すると GPT は API アクションが実行可能
Additional Settings	会話データを使用してモデルの改善に役立てるかどうかの設定

今回は、GPT の名前を「Vocab Voyager」とし、Instructions では、一旦以下のような指示を設定してみました。

このGPTは、日本の中学校のカリキュラムに基づく英単語学習データを生成することを目的としています。出力は必ずJSON形式であり、外部アプリケーションとの互換性および使いやすさを確保します。複数のエントリーを含む場合、それらは単一のJSON配列としてまとめられます。各エントリーには、英単語、その日本語訳、使用例、および使用例の日本語訳を含めます。JSONフォーマットは以下の通りです：

[
  {
    "word": "英単語",
    "translation": "日本語訳",
    "sentence": "英単語を使用した例文",
    "sentence_translation": "例文の日本語訳"
  },
  {
    "word": "別の英単語",
    "translation": "別の日本語訳",
    "sentence": "別の英単語を使用した例文",
    "sentence_translation": "その例文の日本語訳"
  }
]

このGPTは、日本の中学校の教育基準に適合する正確で関連性の高い語彙に注意を払います。不適切な内容を含めないようにし、学習材料が生徒に適していることを確保します。例文を生成する際には、文脈に関連し理解しやすいものであることを保証し、学習に対する洞察を提供します。例文の日本語訳の追加により理解を助け、学習体験を向上させます。

GPT の定義を設定したら「Save」で保存します。Save する際は以下の中から、どこまで公開するかを選択して実行します。

保存が完了したら、実際に GPT を使うことが出来るようになります。なお、GPTs は「@GPT名」でメンションして ChatGPT から会話に呼び出すことも可能です。

作成した GPT と会話して回答を確認し、必要があれば再度「Create」や「Configure」で設定を調整していきます。

作成した GPT は Explore GPTs ページの「My GPTs」から確認することができます。また、再度GPTを編集したい場合は My GPTs ページにある鉛筆アイコンから、削除したい場合はメニューアイコンから実行できます。

今回は「Create」を使用してアイコンや基本的な機能を作成し「Configure」で想定したフォーマットで回答をしてくれるように調整を行いました。最終的な Instructions は、以下のような内容となっています。

このGPTは、日本の中学校のカリキュラムに基づく英単語学習データを生成することを目的としています。出力は必ずJSON形式であり、外部アプリケーションとの互換性および使いやすさを確保します。複数のエントリーを含む場合、それらは単一のJSON配列としてまとめられます。各エントリーには、英単語、その日本語訳、使用例、および使用例の日本語訳を含めます。JSONフォーマットは以下の通りです：

[
  {
    "word": "英単語",
    "translation": "日本語訳",
    "example_sentence": "英単語を使用した例文",
    "example_sentence_translation": "例文の日本語訳"
  },
  {
    "word": "別の英単語",
    "translation": "別の日本語訳",
    "sentence": "別の英単語を使用した例文",
    "sentence_translation": "その例文の日本語訳"
  }
]

このGPTは、日本の中学校の教育基準に適合する正確で関連性の高い語彙に注意を払います。不適切な内容を含めないようにし、学習材料が生徒に適していることを確保します。例文を生成する際には、文脈に関連し理解しやすいものであることを保証し、学習に対する洞察を提供します。例文の日本語訳の追加により理解を助け、学習体験を向上させます。

このGPTは、生成するデータ件数が明確に指定されていない場合は、生成を実行する前に、一度に生成できる最大件数が10件であることを伝え、ユーザーが生成したい件数を必ず確認します。また「vocab-voyager.bubbleapps.io」へのデータ登録(registVocab)を実施するかどうかも必ず確認します。生成したデータはユーザーがコピーしやすいように、かつ必ずJSON形式で提供します。

また、Capabilities では、画像処理やコード実行は必要ないため「Web Browsing」のみを使用するように指定しました。

以上の設定で、指定した Json 形式を使って英単語データを出力してくれる GPT の作成が完了です。

3. カスタムアクションの作成

次に Bubble と連携するようにカスタムアクションを作成していきます。 Actions で「Create new action」をクリックして「Add actions」を開きます。

まずは認証部分を設定していきます。

Authentication の項目をクリックして、Authentication Type を「API Key」に、API Key には、前回の vol.1 で取得しておいた Bubble の API Key を入力します。Auth Type は「Bearer」です。設定できたら「Save」で保存しておきます。

次に Schema を設定します。Schema には OpenAPI 仕様に従って、GPT が外部のAPIにアクセスする方法を定義します。なお、カスタムアクションを定義するためには OpenAPI 3.0 形式で記述する必要があります。

Bubble でも Swagger と呼ばれる OpenAPI 仕様に基づいて記述された API 定義ファイルは存在しますが、残念ながら執筆時点では 2.0 形式のため、そのまま使用することはできません。

Swagger ファイルを確認したい場合は「api/1.1/meta/swagger.json」のアドレスで中身を閲覧することができます。

なお、Swagger の確認には Settings の API にある「Hide Swagger API documentation access」のチェックがオフである必要がありますが、特に公開の必要がない場合は、セキュリティ上チェックをオンにして非表示としておくことが推奨されています。

Schema では定義を Import することも可能なため、今後 Bubble の Swagger の仕様がアップデートされれば、より実装が手軽になりそうですね！

また、Schema の作成には「Example」でサンプルを確認したり、カスタムアクションに特化した「ActionsGPT」にサポートしてもらうことも可能となっています。

今回のカスタムアクションでは ActionsGPT にサポートしてもらい、以下の Schema を準備しました。

openapi: 3.0.0
info:
  title: Bubble Quiz Submission APIBubble English vocabulary data registration
  description: API for registering English vocabulary data created by users to the Bubble application.
  version: 1.0.0
servers:
  - url: https://vocab-voyager.bubbleapps.io/version-test/api/1.1/obj
    description: This is the Bubble application endpoint for registering English vocabulary.
paths:
  /Vocab:
    post:
      operationId: registVocab
      description: Regist a user-created vocabulary.
      x-openai-isConsequential: false
      requestBody:
        required: true
        content:
          application/json:
            schema:
              type: object
              properties:
                word:
                  type: string
                  description: English word.
                translation:
                  type: string
                  description: The Japanese translation of the word.
                sentence:
                  type: string
                  description: An example sentence using the word.
                sentence_translation:
                  type: string
                  description: The Japanese translation of the sentence.
      responses:
        "200":
          description: Vocabulary successfully Registed.
          content:
            application/json:
              schema:
                type: object
                properties:
                  success:
                    type: boolean
                  message:
                    type: string
        "400":
          description: Bad request, possibly due to incorrect input format.
        "401":
          description: Unauthorized, check your authentication credentials.
        "500":
          description: Internal server error.
components:
  schemas: {}

「servers」の「url」定義で、Bubble の Data API root URL を、また「paths」で登録を行いたい Data type の「Vocab」type を指定しています。また、「properties」で、生成される Json と一致させた Field 名を指定していすることで、API Token で認証を行った後、Data API を使用してデータ登録を実行してくれるアクションとなっています。

また Schema で定義した内容は「Test」からデバッグを実行することができ、Preview でエンドポイントの呼び出しやレスポンスを確認できます。