本記事は下記Youtube動画にて解説している手順のテキスト版です。Youtube版では画面遷移等より詳しく解説してあります。是非合わせてご覧ください。
概要
LINE公式アカウントの収益化機能の一つ、トークルーム広告がリリースされBotのマネタイズが手軽に出来るようになりました。既にいくつかのBotに導入され、収益を得られている方もいらっしゃるかと思います。
詳しくはこちらから
今回はその記念に、相性が良いと思われる生成AIとLINEを組み合わせる例として、「生成AIカルタBot」をノーコードで作成する手順をご紹介します。
是非皆さんも作ってみてください。
作るもの
AIに生成させたテキストと画像を利用したカルタが遊べるLINE Botです。
お題を出すとお題に沿って生成された正解画像と、その類語で生成された不正解画像の2枚の画像が提示され、正解のものを選ぶ、という遊び方です。
Dixitというボードゲームが好きで、同じようなものが作れないかと思い作ってみました。
Botの開発
完成シナリオ
準備
以下のアカウントが必要となります。まだお持ちでない方はご準備ください。
LINE公式アカウント
以下からMessaging APIのチャネルを作成しておいて下さい。既存のものでも問題ありません。
Makeのアカウント
OpenAIのアカウント、課金
アカウント開設
課金
※ 本記事を試すだけであれば$3程度で十分可能です。
作っていく
Makeでのシナリオ作成
「Create a new scenario」をクリックします。
わかりやすい名前をつけておきましょう。
LINE公式アカウントとシナリオの接続
はじめにユーザーが公式アカウントに対して送ったメッセージをMakeで受け取れるように設定します。
シナリオ中央の「+」をクリック、検索窓に「LINE」と入力、出てきたLINEモジュールをクリックして下さい。
続いて「Watch Events」をクリック。
「Create a webhook」をクリック。
「Create a connection」をクリック。
公式アカウントからChannel Access Tokenをコピーし、貼り付けて「Save」をクリック。
LINE Developers > チャネル > Messaging API設定
下にスクロールしチャネルアクセストークンをコピー
貼り付けてSave。
Connectionが設定されました。表示されたURLをコピーし、LINE DevelopersのWebhook URL欄にペースト、Webhookの利用もオンにし、保存して下さい。
オウム返し
ちゃんと繋がっているかを確認するために、オウム返しをシナリオ上で設定してみましょう。
画面下部の「LINE」をクリック。
「Send a reply Message」をクリック。
新しく出来たモジュールを先程作成したWebhookのモジュールの方へドラッグすると自動的に接続されます。
Replyの方のモジュールをクリックし、reply tokenとMessages > Textの2つを以下のように設定し、OKをクリックして保存します。
「Run once」をクリックし、公式アカウントに何か適当に呼びかけてみましょう。
ここまで設定できていれば呼びかけた内容をそのまま返してくれるようになっています。
シナリオ上でも呼び出しが行われたことが確認出来ます。
ChatGPTの組み込み
カルタの画像生成は以下のパラメータで2枚の画像を生成することにします。
- ユーザーの入力テキストから主語、述語、目的語を抜き出したもの
- 主語と(1)の述語の類語、目的語の類語
(1)を正答、(2)を不正解とします。
よって、ユーザーの入力から主語、述語、目的語を抜き出し、類語を生成する必要があります。
このような作業はGPTが得意とするところなのでOpenAIのモジュールを利用して設定していきましょう。
シナリオ画面下部の「＋」をクリックし検索窓に「OpenAI」と入力、出てきたモジュールをクリックします。
「Create a Completion」をクリック。
OpenAIモジュールがシナリオに追加されました。ドラッグで作成済みの2つのモジュールの間にドラッグし、割り込ませます。
OpenAIアカウントとの接続を行います。「Create Connection」をクリックします。
API KeyとOrganization IDが必要ですので、インプット下部の赤字のリンクをクリックし作成&コピペしてください。
終わったらOKをクリックします。
接続が完了しました。
以下のようにModel、Messages > Item 1、Item 2を設定して下さい。返答結果は後で扱いやすいよう、JSON形式を指定します。
Item 1 > Message Contentは以下をペースト
## 答えはjson形式で返却してください
## jsonのキーは英語で、主語はsubject、述語はpredicate、目的語はobject、述語の類語はpredicate_synonym、目的語の類語はobject_synonymとしてください
Item 2 > Message Contentは以下をペーストし、自動補完を削除し再設定
「{{1.events[].message.text}}」という文章から出来るだけ短い主語と述語と目的語を抜き出してください。述語の類語と目的語の類語を1つ挙げ、返却結果に含めてください。
これでユーザーの自由入力テキストから主語、述語、目的語と述語、目的語の類語が生成されます。
一度Run onceをクリックして呼びかけてみると正確に生成されるのが確認できます。
JSON形式へのパース
GPTによる生成結果はテキスト形式です。この後利用しやすくするためパースしてそれぞれを参照できるようにします。
シナリオ画面の適当なところで右クリック、Add a moduleをクリック。
「JSON」を検索しクリック。
「Parse JSON」をクリック。
OpenAIモジュールとReply Messageの間に割り込ませる
モジュールをクリックして設定ダイアログを開き、Create data structureをクリック、Strictにチェックを入れる、sample dataに以下を入力し「Generate」をクリック。
サンプルデータ
{
"subject": "子供",
"predicate": "遊ぶ",
"object": "サッカーボール",
"predicate_synonym": "遊び回る",
"object_synonym": "ボール"
}
JSON StringにはChatGPTから返されたデータを設定します。OKをクリックして保存します。
Run onceして動作確認してみましょう。
無事テキストがパースされ、変数に格納されました。
画像の生成
正解画像
次に画像のDALL-Eを利用して画像を生成します。まずは正解画像を生成からです。
右下のOpenAIのボタンをクリックし、「Genarate an Image」をクリックします。
JSONモジュールの後に割り込ませます。
以下のように設定します。
結果の確認のため、シナリオ最後のReply Messageの内容を生成した画像のURLに変更します。
モジュールをクリックして設定ダイアログを開く
Messages > Item 1 > Textの内容をDALL-Eの方のOpenAIモジュールのData[] > URLに変更
保存して動作確認してみましょう。
同じように呼びかけると・・・
生成された画像が返ってきます。
不正解画像
次に不正解画像です。手順は同様なのですが、設定を以下のように変更し、正解画像生成モジュールの後に割り込ませて下さい。
正解インデックスのランダム化
後は画像に正解or不正解データを埋め込んでカルタを作れば終わり、と言いたいところなのですが、このまま進めるとシナリオ実行中は常に同じ位置の画像が正解となるような出題しか設定出来ません。
これではクイズになりませんので、正解がランダムな位置になるよう設定する必要があります。
ということで、Toolsでランダムな変数を作りましょう。下部の工具アイコンをクリックし「Set variable」をクリック。
割り込ませます。
以下のように設定します。式は入力フィールドクリック後に右側に出てくるパネルのタブから式タブをクリックすることで設定出来ます。
これで変数correct_indexには0もしくは1が入ります。中が見えない箱に0もしくは1の番号が書かれたボールが入っており、そこから1つだけ引くようなイメージです。
ちなみに*の後に来る数字を増やせばバリエーションも増えますので3択、4択にしたい時はそのようにします。
何度か動作確認してみましょう。無事ランダムに正解位置となる変数がランダムに生成されているのが確認出来ます。
LINE Botからカルタを返信
疲れてきましたか？私も疲れてきましたが頑張ります。もう一息です。
次にLINEからユーザーへの返答をカルタに変更します。
モジュールをクリック、TypeをTemplateに変更します。
Alternative Textに「問題」と入力、Template TypeをImage Carouselに変更します。
Columnsの下のAdd itemを2回クリック。
それぞれ以下のように設定します。
なお先程作成したランダムな正解位置によって順番を変えるため、ifを利用しています。こちらも式と同様に入力フィールドクリック後に右側に出てくるパネルの左から2番目のタブで設定できます。
ランダムな数字で処理を分けるため、このような形になります。
3択、4択にしたい時はswitchを利用します。
これでカルタの完成です。
動作確認してみましょう。
無事に動いているようですね！
微妙な類語がたくさんありそうなふわっとした言葉を使うと、どちらが正解か迷うような面白い問題が出来ます。
フィルタ設定
最後に、ユーザーが画像をタップした時に発言される「正解！」「不正解！〜」に対しては問題生成の要求ではないため、以後の処理をスキップしましょう。フィルター機能を利用します。
webhookと文面解析のモジュールを繋いでいる点線をクリック、出てきたメニューから「Set up a filter」をクリック。
以下のようにフィルタ名と条件を設定します。
モジュール間の間隔を空けてやることでフィルタ名が表示されます。
動作確認してみましょう。画像タップ時の正解！や不正解！というテキストは処理をスキップされていることが確認出来ます。
エラー処理
エラー処理は紙面の都合上割愛していますが、実際にサービスとしてリリースするためには各種例外処理が必要です。ご注意下さい。
まとめ
いかがでしたか？
LINE Messaging APIに含まれるリッチなメッセージ形式に加えChatGPTとDALL-Eの両方の使い方を紹介したかったため若干内容は無理矢理ですが、プログラミングの知識が無くても簡単にサービスが作れることがおわかり頂けたのではないかと思います。
話題性があり、誰でも簡単に使えるLINEのAPIと生成AIを組み合わせることで、プログラミングの知識があまりない方でも多くのユーザーに使われるサービスを作り出すことが可能な時代が到来しました。
皆さんも是非アイディアを形にし、トークルーム広告でマネタイズに挑戦してみてください。
面白いサービスの登場を心よりお待ちしています。
Special Thanks!
本記事の執筆にあたり、LINE API × Makeの第一人者であり、LINE Developer Communityで頻繁に登壇されているおきなかがいこつさんにレビュー頂きました。ありがとうございます。
以下はおきなかさんが登壇され、MakeとLINEのAPIの解説をして頂いた勉強会のアーカイブの一部です。とても参考になりますので、是非ご覧ください。