CCCMKホールディングス TECH LABの Tech Blog

TECH LABのエンジニアが技術情報を発信しています

ブログタイトル

GPT Builderで英語学習アプリを作ってみました

こんにちは。テックラボの矢澤です。 最近は英語を話す機会があまり無く、たまに外国人の方に路上で道を聞かれたりした際、簡単な内容でもとっさに出てこなくて困ることがあります。 英語の文法や難解な技術用語などを覚えることも大切ですが、基本的な単語をすぐに答えられるようにしておくと、日常会話がスムーズに行えるのではないかと思いました。 英単語の中でも、名詞や動詞は義務教育や書籍・論文などで目にする機会が多いため比較的覚えやすいですが、形容詞や副詞は使わなくても会話が成り立つことも多く、意識しないとなかなか学べないと感じています。 そこで今回は、英語の形容詞を重点的に学習するための簡易アプリを、ノーコードのGPTs作成ツール(GPT Builder)で作ってみました。

GPT Builderは、OpenAIが公式に提供しているサービスで、WEB画面上でいくつかの設定を入力するだけで簡単にオリジナルのChat-GPTを作れるようになっています。 テキストベースの指示(システムプロンプト)を自由に記述できるだけでなく、外部知識の入力やGPTの機能(ウェブ参照、画像生成、コードインタープリターなど)、外部APIの呼び出しによる独自アクションなどを実行することもできます。 作成したアプリは、リンクやGPTストアで他者に共有することもでき、実際に様々な面白いChat-GPTが公開されています1

アプリの作り方

以降で、今回作成した英語学習アプリの作り方を説明していきたいと思います。

作成ページへのアクセス

まずはGPTsを作成するためのWEBページに行きます。 右上の「作成する」を選択すると、新しいGPTを作成するための画面が開きます。 作成方法としては、対話形式で作っていく方法(「作成する」)と設定を直接記述する方法(「構成」)の2種類がありますが、今回は私自身が作りやすい方法として後者を使いました。

アプリ作成画面

アプリの名前、説明

初めに、これから作るアプリの名前と説明を入力します。 英語の形容詞を学習するGPTなので、そのまま名前を「英語形容詞学習」、説明を「英語の形容詞を学習するためのアプリ」としました。 こちらの名前と説明はアプリ公開時に使われるだけでなく、アイコン生成時にも利用されるため(後述)、実際のサービスでは表現などを調整しながら試すと良さそうです。

アイコンの設定

続いてアプリのアイコン画像を設定します。 アイコンについては、自身で好きな画像をアップロードすることも可能ですが、タイトルを基にDALL-Eで自動生成することができます。 クオリティや権利などの面で、適切な画像を用意できないことも多々あると思われるため、地味に便利な機能だと感じました。

実際に生成されたアイコン画像を以下に載せています。 日本語の名前・説明でも、意味が正しく解釈されて綺麗な画像を生成できました。

生成されたアイコン画像

GPTへの指示

次に、今回のアプリのメイン部分であるGPTへの指示(システムプロンプト)を記載していきます。 Chat-GPTなどを使ったことのある方なら馴染みがあると思いますが、GPTなどのLLMではテキストプロンプトによってAIに答えてほしい内容を伝えます。 厳密には、プログラム側であらかじめGPTの役割や制約条件などを決めておくための「システムプロンプト」と、ユーザーが自由に会話するための「ユーザープロンプト」があり、ここで設定するのは「システムプロンプト」です。 このプロンプトを工夫することで、想定した通りの回答が返ってくるようにしたり、回答内容の品質を向上させたりすることができます。 本技術は、プロンプトエンジニアリングとして独自に研究されるほど奥が深い分野ですが、ここでは深入りせずに最低限の要件を記述するようにしました2

あなたは優秀な英語の先生です。
簡単な日本語の文章の内、形容詞のみを英語に変換したものを問題として出題し、ユーザーが変換前の日本語を正しく答えられるかテストしていきます。
ユーザーの回答が正しい場合は「正解です!」、不正解の場合は「不正解です!」と言った後、次の問題に進んでいきます。

【例】
・アシスタント:Q. 最も[physical]で、最も[primitive]で、そして最も[fetish]なやり方で行かせていただきます
・ユーザー:A. 物理的、原始的、性的
・アシスタント:正解です!次の問題に進みます。
・アシスタント:Q. {別の問題}
...

画像生成機能の追加

上記のQ&Aに加えて、画像生成によるヒント機能をシステムプロンプトに追加しました。 GPT Builderでは、「機能」欄の「DALL-E 画像生成」にチェックを入れるだけで、簡単に画像を生成することができるようになります。 プロンプトに以下の文言を追加し、ユーザーがヒントを求めたら文章を画像で表すようにしました3

回答前にユーザーが「ヒント」と言ったら、元の文章を表す画像をDALL-Eで生成して提示してください。

【例】
・アシスタント:Q. 一寸先は[dark]
・ユーザー:ヒント
・アシスタント:{「一寸先は暗い」を表す画像}
・ユーザー:明るい
・アシスタント:不正解です!次の問題に進みます。
...

その他の設定

その他、細かい設定として会話開始用の文章や知識ファイルの入力、GPT機能の有効化などを行います。

会話の開始については、ユーザーによるテキスト入力に加えて、あらかじめ設定したオプションから選択できるようになっており、「こんにちは!英語を勉強したいので問題を出してください。」という文章を設定しておきました。 知識はRAGのように外部の知識を取り込みたい場合に使う機能ですが、今回はWeb検索のみを使用して問題を作成するためファイルのアップロードは行いません。 また、機能として「ウェブ参照」、「DALL-E画像生成」のチェックボックスをクリックし、対象機能をアプリで利用できるようにします(特にコードなどを記述せずとも、GPT側で自動的に機能の利用タイミングなどを判断してくれます)。

今回使用した以外に「コードインタープリターとデータ分析」の機能もあり、内部でPythonコードを実行してファイルの分析や演算処理などを実現できるようになっています。

アプリの動作確認

以上で英語形容詞学習アプリの作成は完了です。ここからは、実際に本アプリを使って動作を確認してみます。

会話を開始すると、さっそくGPTが問題を出してきました。

アプリ画面(会話開始後)

英語の「quiet」、「peaceful」をそれぞれ日本語で回答します。 すると「正解です!」という返答があり、次の問題が出題されます。

今度はヒントをくれるようにお願いしてみます。

アプリ画面(ヒント)

ヒントとして元の文章を表す画像が生成されたので、これを参考に回答を考えることができます。

このように、GPT Builderを活用することでチャット形式のアプリを短時間で作成できることが分かりました。

まとめ

本記事では、OpenAIのノーコードツールを使ったGPTアプリの作成方法を紹介しました。 今回は利用できませんでしたが、GPT Builderでは「アクション」機能によって外部APIの呼び出しを行うことができ、サービス開発の可能性が更に広がると考えています。 今後は、コードインタプリターや上記のアクションを使った高度なアプリの作成や、GPTから呼び出すためのAPI自体の実装などにも挑戦していきたいです。


  1. 例えば書籍「ChatGPT GPTsが作れるようになる本」で紹介されているアプリとして、ユーザーのレベル感に応じて英単語を学習できる「AITAN」や、プログラミングのアシストを行ってくれる「Grimoire」、テキストを音声データに変換する「ElevenLabs Text to Speech」などがあります。
  2. 例題は現在配信されているドラマの一節から拝借しました。本文章は難易度が高いですが、実際の動作ではもう少し簡単な文章が出題されます。
  3. 元の文章が「一寸先は闇」だとすると「dark」は形容詞ではなく名詞になりますが、今回はあくまで例として厳密性は無視しています。