🔰デジタル初心者がChat GPTとLINEBotをつなげて電子辞書として使ってみた件✏

みなさん、はじめまして。
個人的に「ラグビーワールドカップ」 が気になっており
屈強の男たちが泥まみれになりながトライを決めるプレイにかっこいいなと感じております。

https://twitter.com/pmawjmng

さて、
先日、ＴＶでラグビー特集のなかでキャスターの方が
「選手たちはフィジカルを強くもって・・・」
の場面で私は
「フィジカル・・？」
意味がなんとなくで、よくわからりませんでした。

このような場面、職場や生活の身の回りに結構多いと思います。
今回デジタル初心者の私がChatGPTとLINEBotを使ってフレーズに対して
ChatGPT機能で解説してもらいます。

# まずはLINEBotのオウム返しから
**完成イメージ**
:point_up:まずはリプライメッセージを送るLINE Botの基本となるオウム返しBotを準備しましょう。
![2023-09-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/3d0c0f33-16b9-337c-13f9-2bd071026899.png)

# モジュールの設定①Watch Event

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323130303034382f30623034616132642d363361622d383966342d393564302d3739393339313163373832622e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/8b1b4e34-d9d4-4886-795e-8218a0db135b.png)





![2023-09-22 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/74d2a4a4-d730-3248-735c-03f2438274d3.png)
![2023-09-22 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/3136643e-733c-c270-c3b7-68c7a8680d6b.png)
![2023-09-22 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/49e352cc-3434-ef3a-b84d-3853ed530552.png)

Webhookを設定します。LINE Developersより取得したCHANNEL ACCESS TOKENを貼り付けてください。

:writing_hand:LINE Developers側には、下画像のCopy address to clipboardの部分からコピーしたWebhook_URLを貼り付けてください。
:wink:Webhook_URLの有効化も忘れずにチェックしてください。



# モジュールの設定②Watch Event
![2023-09-22 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/091f505d-3ede-af06-515c-f6e8df484c6a.png)

:writing_hand:Reply TokenとTextの部分を画像の通りに設定。　
LineからMessaging APIを通して送られてきた情報より、Reply TokenとTnxt情報を抜き出すイメージです。



![2023-09-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/09e3b3a9-3586-c088-e193-f12ae9086211.png)
:writing_hand:Run onceを押した状態でメッセージを送ると全く同じメッセージが返ってくるオウム返しBotとなります。


# ③Open AI(Chat GPT,Whisper,DALL-E)接続する
****完成イメージ****

![2023-09-22 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/2de1de7a-9ff5-adb0-e1fe-9d24d6177742.png)


![2023-09-22 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/4f91b47b-3def-f1ad-4ec6-1a4d21887cd8.png)

:writing_hand:ConnectionのAddボタンをクリックしてAPIの設定をします。

:writing_hand:モジュールは画像の通り、
①Create a Chat Completion、gpt-3.5-turboを選んでください。
②MessagesはRoleをUser、Message ContentのところにはEvents[]:Message.Textを入力してください。これでLINEに入力した言葉でChatGPTのAPIをつなげることができます。

# ④Send a Reply Meassgeの接続


![2023-09-22 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/22de15fe-06b2-32a5-bf40-4791a6ecc792.png)


:writing_hand:MessgesのTextをChoisesのMessage.Contentを選択して確定して　
Run onceを押した状態であいさつするとつながりました。

![2023-09-22 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/dd1ff5e9-aee5-e64e-0085-f96112dae7df.png)

:punch_tone1:では、フィジカルについて質問しましょう！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2画面動作確認動画 <a href="https://t.co/v3EpO0IHtq">pic.twitter.com/v3EpO0IHtq</a></p>&mdash; 齋藤正則 (@pmawjmng) <a href="https://twitter.com/pmawjmng/status/1706670432815133002?ref_src=twsrc%5Etfw">September 26, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

📝LINEトークで「フィジカル」と送信し[Watch Events]→[OpenAI(ChatGPT,Whisper,DALL-E]
→[Send a Reply Message]へ回答が返信されます。

# さらに会話をData storeに保存しよう
**完成イメージ**
![2023-09-22 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/52ba19ed-d2c8-1911-86ab-a7da2e512351.png)

# Add/replace a record①
:writing_hand:LINEから受け取ったuserIdとテキストデータをuserからの情報として保存します。

 ![2023-09-22 (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/81972f33-9e62-a470-35b8-a42a9493f914.png)

# Add/replace a record②
![2023-09-22 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/13517f34-d837-017b-9f39-36d692984f5c.png)

ChatGPTのAPIから受け取ったリプライをassistantからの情報として保存します。
LINEのuserIdも一緒に保存することで、利用者を識別します。


![2023-09-22 (12) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/82c60c27-5bd0-be9c-e8a0-187331d0b9b6.png)


:writing_hand:Data storeのBrowseに今までの会話が記録されます。

![2023-09-22 (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/6731adc7-cd42-0a48-5f74-25db4f98dfe8.png)

:clap:これで今までの会話の記録が閲覧できるようになりました。
# ここから広がるChatGPTの可能性

**実際に制作してみて**
アナログ人間が調べて何とかここまでできるようになりました。　
ChatGPTに触れてみて生活や業務の進めていくうえで効率を上げる可能性を感じました。　
しかし、勉強不足の私がこれから多くを学び、発信することでスキルアップに繋げていきたいです。

今後もご覧いただければうれしいです。よろしくお願いします。