Node-REDでノーコード大喜利AIBotを作ろう！ ざぶとんボタン付き！プロトアウト体験会

## はじめに
ビジュアルプログラミングに特化した開発ツールのNode-RED、公式LINEでお馴染みのLINE Bot、OpenAIを利用して、LINEリッチメニューから簡単操作の「大喜利AI LINE Bot」を作ってみましょう！

![LINE_img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/8f0f5794-809d-e354-608d-5ec74e863654.jpeg)
↑セルフで大喜利をやってくれる

## 事前準備
### Node-REDを立ち上げられるようにする (挙動確認)
以下の記事を参考にして、GitHub CodespacesでNode-REDが使用できるようにしましょう。

- GitHub Codespaces上のサーバ設定はprivate(デフォルト)ではなくpublicに設定します。GitHub Codespacesのコンソール(下側)のあるタブから「サーバ」を選択すると変更できます。

https://qiita.com/kazuhitoyokoi/items/7a41e7c7aee684815cf0

- GitHub Codespacesについては以下をご参照ください。

https://zenn.dev/protoout/articles/68-github-codespaces-setup

### LINEbotを使えるようにする
以下の記事を参考にして、LINE Botの作成と「チャネルシークレット」、「チャネルアクセストークン」をメモしましょう。

https://zenn.dev/protoout/articles/16-line-bot-setup


### ChatGPTのクレジットを購入する（任意、ハンズオン後に使用する場合は購入してください）
以下の記事を参考に、ChatGPTのAPI KEYの発行をします。
2024年5月現在では、\\$5の無料クレジットは配布されていないため、少なくとも\\$5以上のクレジットを購入する必要があります。

https://qiita.com/okinakamasayoshi/items/0643199d3407d301373a



## 作り方
### フロー図
![flow_img_memo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/4abb2b4d-f3b4-8da0-2cdc-8db812c1d756.png)

swichノードでそれぞれ3通り(大喜利しよ！、さぶとん一枚!、さぶとん回収！)に対する返答を分岐させています。

### JSONデータ
```javascript:JSON 
[{"id":"9e71faa6a1a2665f","type":"tab","label":"大喜利フロー","disabled":false,"info":"","env":[]},{"id":"b1a66c50a0af3bd2","type":"switch","z":"9e71faa6a1a2665f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"大喜利しよ！","vt":"str"},{"t":"eq","v":"さぶとん一枚！","vt":"str"},{"t":"eq","v":"ざぶとん回収！","vt":"str"}],"checkall":"false","repair":false,"outputs":3,"x":280,"y":300,"wires":[["9dee05ac480f2bdb"],["ee72ebaf771bce03"],["a16da9bc5920e79b"]]},{"id":"9dee05ac480f2bdb","type":"simple-chatgpt","z":"9e71faa6a1a2665f","name":"","Token":"","Model":"","SystemSetting":"あなたは笑点の一員です、なんでもいいのでお題と回答をしてください。","functions":"","functionsType":"str","function_call":"auto","function_callType":"str","x":520,"y":240,"wires":[["7a8fbd2d67f7f7cc"]]},{"id":"ddc57e0b453518b7","type":"Webhook","z":"9e71faa6a1a2665f","name":"","url":"/webhook","x":90,"y":300,"wires":[["b1a66c50a0af3bd2"]]},{"id":"7a8fbd2d67f7f7cc","type":"ReplyMessage","z":"9e71faa6a1a2665f","name":"","replyMessage":"","x":720,"y":240,"wires":[]},{"id":"ee72ebaf771bce03","type":"ReplyMessage","z":"9e71faa6a1a2665f","name":"","replyMessage":"やった！もっと大喜利やらせて！","x":720,"y":300,"wires":[]},{"id":"a16da9bc5920e79b","type":"ReplyMessage","z":"9e71faa6a1a2665f","name":"","replyMessage":"まだまだ精進します！大喜利やらせてください！","x":720,"y":360,"wires":[]}]
```
上記のJSONデータをコピーして、Node-REDから読み込むと、参考フローを手元で動かすことができます。
以下記事のステップ4-6を参考にしてください。
(今回は初期ノード以外も使用するので次のセクションからノードを追加してみてください！)

https://qiita.com/nogayama/items/0e9ae80736e7faebdeda

### Node-RED上で必要なノード
Node-REDには初期ノードの他に、追加設定できるノードが存在します。

① `node-red-contrib-simple-chatgpt` 
以下の記事を参考に、Node-RED上のハンバーガーメニューから「パレットの管理」を選び設定します。

https://qiita.com/h-takauma/items/80a7ab7c167155baf324

② `line-messaging-api`
さらにノードに「チャネルシークレット」、「チャネルアクセストークン」を記載します。

https://qiita.com/youtoy/items/287a0782fdd185fc2004#reply-message-%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E8%A8%AD%E5%AE%9A


### リッチメニューを設定する
LINE Official Account Manager上でリッチメニューを設定します。
リッチメニューのデザインは1行x3列、アクションのタイプは"テキスト"でそれぞれの画像について"大喜利しよ！", "さぶとん一枚！","ざぶとん回収！"と設定していきます。


https://qiita.com/bow_arrow/items/32ac5d2b4c67bd0c1dc2

今回の設定内容は以下の通りです。（アクションで設定したテキストがフロー図のswitchノードの分岐条件となっています。）

![rich_menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/5ad10a0e-bfc0-e84d-d138-c0cb3ae4f5a7.png)

リッチメニューの参考画像を以下に置きますので、手元に保存して使ってみてください。

![richmenu_img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/ead470d1-c5c0-e5e5-af1f-2d01e8196832.jpeg)

### 注意点
- LINE Developersのwebhook先のURLは以下の通り設定してください。
![webhook_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565590/730567a2-731c-9a87-4ce4-4ef6caee843f.png)

## おわりに
大喜利できたでしょうか？　
アレンジして、自分だけのオリジナルAIbotを作ってみてくださいね！
(私はGASを使って、お題をランダムに持ってきて大喜利したいな〜と思いました。)