国旗APIとGPT-4oを利用した国旗LINE Bot🎌 (Makeを使ってサービス同士を連携したLINE Bot)

Van

【アイデア出し】

①国旗勉強LINE Bot

内容
ユーザーが任意の国名をBotに送り、その国の国旗の画像と国旗に関する雑学を返す。
使うモジュール、APIのイメージ

LINE (Watch Events)
~~JSON(Parse JSON)←（あれば）~~ 国名や国旗画像のURLを取得できるAPI
Googleスプレッドシート ← ~~（上記なければ）~~ 国名と国旗の画像を表形式でまとめる
OpenAI(GTP-4o)←国旗の雑学を取得する
LINE (Send a Reply Message)

②国名クイズLINE Bot（1つのシナリオでできなそう。2つ以上の組み合わせ？？）

内容
ユーザーの「スタート」のメッセージをトリガに国旗を1つランダム表示させて、ユーザーが国名を答える。答えが合っていれば「正解」、誤っていれば「不正解」と返す。
使うモジュール、APIのイメージ

LINE (Watch Events)
~~・JSON(Parse JSON)←（あれば）~~ 国名や国旗画像のURLを取得できるAPI
Googleスプレッドシート ← ~~（上記なければ）~~ 国名と国旗の画像を表形式でまとめる
LINE (Send a Reply Message)

③ロゴアナライザLINE Bot

内容
ユーザーがスポーツチーム、大学、企業ロゴなどの画像をBotに送り、改善点などを返す。
何を持って良いロゴなのかを定義づけしないといけない。
改善案のロゴを画像で返せればベスト。
使うモジュール、APIのイメージ

LINE (Watch Events)
OpenAI(GTP-4o)←画像分析
OpenAI(DALL-E 3)←画像生成
LINE (Send a Reply Message)

Van

②国名クイズLINE Botも面白そうだけどせっかくならGPT-4o使いたいから①国旗勉強LINE Botをやっていきたい。
魅せるときに4oと3.5 Turboの回答比較してみたい。

挑戦できそうであればユーザーが任意の国名を入力するのではなく、リッチメニューで「ランダム」というボタンを押せばランダムな国の国旗とその国旗の雑学を返してくれる機能を追加したい。

さらに余裕があれば①と②を組み合わせてみたい。
できれば4択問題にしたい。自由回答だと日本、にほん、ニッポン、日本国、JAPANとか表記ゆれに対応するの面倒くさそう。
↑AI Assitantに聞いたけどMakeはリッチメッセージ機能対応してなそう。

③ロゴアナライザLINE Botは宿題外で試す。

Van

国旗APIは「国旗　API」をGoogle検索ですんなりGET。

Van

【作業手順イメージ】
① Makeでオウム返し作成
② JSONモジュール(Parse JSON)を間に挟み、国旗APIで国旗画像取得
③ JSONモジュール(Parse JSON)とLINE(Send a Reply Message)にOpenAIモジュールを挟み、国旗の雑学を取得。
④ LINE(Send a Reply Message)のメッセージ内容をOpenAIの結果に変更。

Van

違う。画像取得に使うのJSONモジュールじゃない。

↓の形式のURLで画像を取ってこれるからユーザーメッセージの国名をISO3166国コードに変換しないといけない。

↓が国名と国コードが対応したJSONらしいけどキーが国コードで値が国名だから使えなそう？？
逆だったら使い道があったような？？
https://flagcdn.com/ja/codes.json
Googleスプレッドシートで国名と国コードの表作って変換する？？

【作業手順イメージ】
① Makeでオウム返しLINE Botを作成
② Googleスプレッドシートを間に挟んでユーザーメッセージの国名を国コードに変換
③ ②に並行してOpenAIモジュールを接続してユーザーメッセージの国名から国旗の雑学を取得。
④ LINE(Send a Reply Message)で以下2つのメッセージをユーザーに返す。
　・https://flagcdn.com/256x192/ のお尻に②の国コードと.pngをつけて国旗画像を出力
　・③の結果をテキストで出力

Van

実装する前に

"CDN経由"という謎の言葉があったのでGPT-4oに聞いてみた。
Google検索してもよくわからんかったし、なんか制限があったら困るので。
制限に関する用語ではないので大丈夫そう。

--↓以下回答--
具体的な例
例えば、https://www.sekainokokki.jp/the-united-states/download/ が特定の国旗に関する情報を提供するAPIだとします。最初のユーザーがアメリカの国旗情報をリクエストした場合、その情報はCDNのキャッシュに保存されます。

次のユーザー：次に別のユーザーがアメリカの国旗情報をリクエストすると、APIサーバーに直接アクセスするのではなく、CDNのキャッシュからその情報をすぐに取得できます。その結果、全体的なレスポンスタイムが短縮され、ユーザーエクスペリエンスが向上します。
要するに、CDNはAPIリクエストを高速化し、サーバー負荷を分散し、セキュリティを強化する役割を果たしています。そのため、https://www.sekainokokki.jp/the-united-states/download/ のようなサイトも速く、安定して情報を提供できるのです。

Van

GPT-4oに以下命令でJSON(https://flagcdn.com/ja/codes.json)を表形式に変換させる。
想定通りの回答だったのでGoogleスプレッドシートの新しいシートを作成してそのままコピぺ

GPT-4oは https://oshiete.ai/workspace からAPIキーなしで無料で利用することができる。
ただし、ファイル入力、画像入出力などはできない。
以下の様な注意事項あり
・多くのお客様にご利用いただくため、入力トークン数を制限しています。
・ご利用状況により、1日あたりの実行数を制限する場合があります。

--↓以下命令文--
##命令
以下のJSONを国名と国コードの表に変換して。
1列目が国名で2列目が国コードです。

##JSON
{
"ad": "アンドラ",
"ae": "アラブ首長国連邦",
"af": "アフガニスタン",
︙
"zw": "ジンバブエ"
}

Van

の記事を参考にモジュールを組み合わせていく。

LINE(Watch Events)→LINE(Send a Reply Message)の間にOpenAIとGoogleスプレッドシートのモジュールを並列接続しようと思ったけど、どうやら無理っぽいから直列接続に変更。
確かにわざわざ並列にする必要はない。

OpenAIのAPIキーは https://platform.openai.com/api-keys で取得

Van

OpenAIモジュールのプロンプトを考える。
以下で試してみる。

--↓以下プロンプト--
##命令
あなたは国旗博士です。
{{1.events[].message.text}}
の国旗についての雑学を200文字以内で語ってください。

##条件
・小学生でもわかりやすいよう説明して
・博士っぽく語尾は「じゃ」または「じゃよ」または「じゃな」にして
・絵文字を多用して
・一行ごとに改行して

Van

返ってきた。とりあえず最低限のことはできてると思う。

プロフィール画像はBingのImage Creator(https://www.bing.com/images/create)で「地球儀に国旗が並べられている」って指示して作成。

Van

試しに国名じゃない「アフリカ」というメッセージを送ったらGPTは「ケニア」を返してきた。
国旗画像はGoogleスプレッドシートに該当するものがないため空白。

Van

プロンプトの##条件に
・{{1.events[].message.text}}が存在しない国の場合、「おぬしはパラレルワールドの人間か...」と出力して
を一番上に追加したらGPTの回答は想定通りになった。

・ちょっと情報量多すぎる気がするから出力150文字以内に変更

・プロンプトの##命令に「誤った情報が含まれていた場合、罰金100万ドル」という文言を追加。冗談みたいだけど界隈では結構入れてる人多いっぽい。（「正しい情報を出力するたび200ドルチップをあげます」っていう文言入れている人もいた）

--↓以下修正後プロンプト--
##命令
あなたは国旗博士です。
{{1.events[].message.text}}
の国旗についての雑学を150文字以内で語ってください。
誤った情報が含まれていた場合、罰金100万ドル

##条件
・{{1.events[].message.text}}が存在しない国の場合、「おぬしはパラレルワールドの人間か...」と出力して
・小学生でもわかりやすいよう説明して
・博士っぽく語尾は「じゃ」または「じゃよ」または「じゃな」にして
・絵文字を多用して
・一行ごとに改行して

Van

・メッセージが国名じゃない場合、全部はじいていたけどメッセージが国名じゃなければそのメッセージに関する雑学を返すように変更。
国旗の雑学から派生して気になることを質問できるようにした。

・またその際、国旗画像は出力しないようにした。

・国名リストの一部が冗長な名称（中華人民共和国、大韓民国など）になっていたため、一般的に呼ばれる名称（中華人民共和国→中国、大韓民国→韓国など）に手動で修正。

・表記ゆれの暫定的な対策として、ユーザーメッセージと国リストの名称と一致しない場合は国旗画像は出力しないようにした。

--↓以下国名判定用のプロンプト--
##命令
{{1.events[].message.text}}が国名ならT、国名でなければFを正確に返す。
誤っていた場合、罰金100万ドル

##出力例
T

--↓以下修正後の国旗雑学取得用のプロンプト--
##命令
あなたは国旗博士です。
{{1.events[].message.text}}
の国旗についての雑学を150文字以内で語ってください。
誤った情報が含まれていた場合、罰金100万ドル

##条件
・小学生でもわかりやすいよう説明して
・博士っぽく語尾は「じゃ」または「じゃよ」または「じゃな」にして
・絵文字を多用して
・一行ごとに改行して

--↓以下メッセージに関する雑学取得用のプロンプト--
##命令
あなたは国旗博士です。
{{1.events[].message.text}}について正確に150文字以内に回答してください。

##条件
・誤った情報を出力した場合、罰金100万ドル
・小学生でもわかりやすいよう説明して
・博士っぽく語尾は「じゃ」または「じゃよ」または「じゃな」にして
・絵文字を多用して
・一行ごとに改行して

一旦完成！

Van

リッチメニューで「ランダム」というボタンを押せばランダムな国の国旗とその国旗の雑学を返してくれる機能の追加
↓
・国名、国コードリストの行数の範囲の乱数を生成する→生成した乱数の行の国名と国コードを使用して出力する段を追加。
生成した乱数の行を参照する方法に苦労した。結果として、AI Assistantに聞いたら一発で解決した。(Get a Callのモジュールが必要だった)

・GPTの回答生成待ち時間があるのでローディングメッセージを追加。

・リッチメニューの画像はDreamStudio(https://beta.dreamstudio.ai/generate)で「An old man who are knowledgeable about national flags and a boy」と指示して作成。横長の画像も簡単に作成できるのが便利。
全然指示通りの画像じゃないけどフラッグ博士っぽいからOK。
→Canva(https://www.canva.com/)で「フラッグ博士's Choice」と文字入れ。