【国旗API】雑談苦手がGPT-4oを利用した国旗アプリを開発した

::: note
ぜひ[最後にお願い](https://qiita.com/vanchan2625/items/ccd29dea9dbf533761ec#%E6%9C%80%E5%BE%8C%E3%81%AB%E3%81%8A%E9%A1%98%E3%81%84)の章まで読んでいただけるとうれしいです🙇
:::

## 国旗スキ🎌
国旗スキのVanです。
どのくらい好きかというと、履歴書の趣味欄に **「国旗鑑賞」** って書いていたくらい好きです。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/72d084cf-a718-0900-6495-1f17f9bafc07.png">

（原文ママのイメージです。）


> それは弊社になんのメリットがあるの？

と面接官に言われて黙り込んでしまいました。（いや、自分の趣味に会社のメリットなんかないだろと思いましたが）

なぜ鑑賞するのに国旗が良いかというと**国旗ってアート**だと思うからです。
詳細は私の執筆した[参考記事](https://qiita.com/vanchan2625/items/ccd29dea9dbf533761ec#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B)を挙げたので気になる方はご覧ください。

## 国旗鑑賞の課題
私は国旗鑑賞に2つの課題を感じていました。

①私のベスト鑑賞法は**国旗カード**を広げて鑑賞をする方法ですが、出先で広げることは難しいです。
いちいちスマホで**国旗一覧のWebサイトを開いて**、スクロールをして希望の国旗を見つけるのも面倒です。

::: note warn
⇒気軽に国旗を鑑賞したい！！
:::

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/d0dc6758-ba0e-7ee2-fba4-a4803047f745.png">

②国旗カードを眺めていても知識の広がりはないです。
いちいち「○○(国名)　雑学」と検索して調べるの面倒です。

::: note warn
⇒気軽に国旗に関する雑学を知りたい！！
:::

また、私は<font color = red>**雑談が苦手**</font>なので、国旗に関する雑学を知ることができれば話のネタになり、**雑談の苦手意識**を軽減できるのではないかと考えました。

## 国旗API
そんなとき**国旗API**を見つけました。

https://www.sekainokokki.jp/the-united-states/download/api

APIといってもサイトのURLに寸法と国コードを加えるだけで国旗画像が取得できるという単純なものです。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/04e06873-d8b6-c5f9-c8f8-6c344505418c.jpeg">

これをプロダクトに組み込めば**デジタルの力を使って気軽に国旗を鑑賞**することができるのではないかと考えました。

<details><summary>CDN経由とは？ChatGPTに聞いてみた。</summary>

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

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

## 使いなじみのあるLINEに組み込む
国名を送ると、**国旗の画像**と**国旗の雑学**を返してくれる**LINE Bot**を開発すれば、上記の[2つの課題](https://qiita.com/vanchan2625/items/ccd29dea9dbf533761ec#%E5%9B%BD%E6%97%97%E9%91%91%E8%B3%9E%E3%81%AE%E8%AA%B2%E9%A1%8C)を解決できるのではないかと考えました。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/9c75763c-8cb4-4728-f504-16d8d88f0768.png">


## 実現に向けて必要なこと
以下の2点が課題でした。
1. 国名を国コードに変換
2. 国旗の雑学を取得

まず1に関しては、それぞれの国名と国コードが対応した[JSONファイル](https://flagcdn.com/ja/codes.json)が用意されていたため、それを表形式に変換しました。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/13234e51-bb58-1b7c-2545-44d26eaa3e03.png">

2に関しては、開発当時(2024年6月)、超高性能化で話題沸騰だった**GPT-4o**を利用すれば[ハルシネーション](https://www.nri.com/jp/knowledge/glossary/lst/ha/hallucination)が軽減された正確な回答を取得できるのではないかと考えました。

## [iPaaS](https://www.ntt.com/business/sdpf/knowledge/archive_59.html)サービス [make](https://us1.make.com/)を利用する

[make](https://us1.make.com/)を使って開発を進めました。モジュールといわれるブロックを以下のように組み合わせることで求めていたLINE Botを開発することができました！

<details><summary>GPT-4oから国旗雑学を得る際のプロンプト</summary>

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

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

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/168657f8-be70-2635-7791-a461619d43b0.png">

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZUa7GehBxxo?si=-nFjhbyJAM87H8bv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

私が確認した限り、致命的なハルシネーションは確認されませんでした。
GTP-4oが高性能な点、国旗の雑学や由来は不変的なものである点から、**生成AI×国旗**は親和性の高い組み合わせであると感じました。

### 応用①：リッチメニューの実装
ここからは応用編です。
**リッチメニューのボタンを押せばランダムな国の国旗とその国旗の雑学を返してくれる機能**を追加実装しました。

簡単に説明すると以下のような仕組みを追加しました。
* 国名、国コード対応表の行数の範囲で乱数を生成
* 生成した乱数の行の国名と国コードを使用して国旗画像と国旗雑学を出力する段を追加

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/d6708811-d7bf-53cc-232a-afe3925f1a41.png">

<iframe width="560" height="315" src="https://www.youtube.com/embed/VwmlGrYfgo8?si=R9-osBDrqT_X29mr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

### 応用②：国旗を画像分析して国名を特定
以下の記事をみて、国旗にも応用できるのではないかと考えました。
実際、モジュールの組み合わせはほぼそのまま踏襲して追加実装することができました。[おきなか様](https://x.com/okinakamasayos1)ありがとうございます。

https://qiita.com/okinakamasayoshi/items/ddc2876953c6871581a2

<details><summary>Image Analyzerのプロンプト(国旗の画像認識)</summary>

```:プロンプト
##命令
あなたは国旗博士です。
写っている画像がどこ国の国旗か判断してください。
誤った情報が含まれていた場合、罰金100万ドル

##条件
・国旗ではない場合はFを出力して
・シンプルに国名だけを出力して

##出力例
アメリカ
```
</details>

<details><summary>GPT-4oのプロンプト(国旗雑学の取得)</summary>

```:プロンプト
##命令
あなたは国旗博士です。
{{89.result}}の国旗についての雑学を150文字以内で語ってください。
誤った情報が含まれていた場合、罰金100万ドル

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

<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/6cc82252-48d4-467f-4bbb-bf826f36d42a.jpeg">

**オーストラリアとニュージーランドの違いも問題なく区別することができました！**

<iframe width="560" height="315" src="https://www.youtube.com/embed/ESqanfQ996E?si=UJtfE6wyXPHtP28w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

実は2016年にニュージーランドの国旗が変わる可能性がありました。
> 2015年7月に現行ニュージーランドの国旗をニューヨーク市民に見せ国名を答えてもらうという企画を地元のテレビ番組が放送し、市民の大半がオーストラリア、もしくはわからないと答えたことがきっかけとなり、国旗変更に対する議論が深まった[2]。

https://ja.wikipedia.org/wiki/%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B8%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89%E5%9B%BD%E6%97%97%E5%A4%89%E6%9B%B4%E5%9B%BD%E6%B0%91%E6%8A%95%E7%A5%A8

国旗の識別は国の尊厳にかかわる大きな社会問題ということですね。

### おまけ
こんな小さいなステッカーでも問題なく識別することができます。
生成AIすごいですね。
<iframe width="560" height="315" src="https://www.youtube.com/embed/xqRv6wgxIZA?si=1tOINPZ5GLp4NuZa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 最終的なシナリオ
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/cad4cb68-442f-6ca7-fe68-036fab84c83c.jpeg">

## 最後にお願い
開発から3か月ほど経ちましたが、**国旗を気軽に鑑賞できる**という点では今でも重宝しています。開発して本当に良かったと感じています。

ただ、<font color=red>**雑談苦手克服**</font>も兼ねて作ったプロダクトでしたが、**これだけでは不十分**でした。
そこで本気で<font color=red>**雑談苦手克服**</font>を目指して、クラウドファンディングを実施することにしました！

`9/12(木)～9/26(木)`の2週間短期決戦です！
ぜひ一度ページに目を通していただき、応援や共感をしてくださる方はお気に入りをお願いいたします。

https://camp-fire.jp/projects/778080/preview?token=35yzhf67&utm_campaign=cp_po_share_c_msg_projects_show

お気に入りにしておくことでクラウドファンディング開始時に通知を受け取ることができます。
**支援忘れ**がないよう、ぜひお願いいたします！

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3597730/41dc8c2f-a903-1834-3edb-e939f8de03e4.jpeg">

## 参考記事
**100スキ以上もらった記事なのでおすすめです！**

https://note.com/vanchan2625/n/n67c007550749

***
他にもあります！

https://note.com/vanchan2625/n/n020e9508aac2

https://note.com/vanchan2625/n/ne08641778a96

https://note.com/vanchan2625/n/n54a319764ade

https://note.com/vanchan2625/n/n009bf99940ac

## LT登壇しました！

LINE DCさん主催の[LT大会](https://linedevelopercommunity.connpass.com/event/318685/)に登壇した際の動画です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/asEWVKuyVEY?si=gBh9OUQNBI1SL3p9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>