ワンフットシーバス 田中です。今回はChatGPT が相手をしてくれるシンプルな LINE BOT 作成してみます。
enebular Web エディタで LINE BOT を作成して、LINE BOT にメッセージを送ってみると、OpenAI 社の ChatGPT API が返答してくれます。
目次
LINE BOT は作成してある前提で進めます
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_02.jpg)
LINE Developers で LINE BOT が作成済みで、今回つなぐ LINE BOT のチャネルシークレットとチャネルアクセストークンをメモしておきましょう。
今回の Discover Flow
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_03.png)
今回使う Discover Flow はこちらです。
クラウド実行環境の準備 の手順が完了したプロジェクトに、インポートボタンをクリックしてインポートしましょう。
フローを編集する
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_04.png)
インポートして読み込めたら編集ボタンをクリックしてフローを編集しましょう。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_05.png)
このようなフローが表示されます。
LINE BOT 設定 change ノードの設定
LINE BOT 設定という名前の change ノードの設定をします。今回使う LINE BOT のチャネルシークレットとチャネルアクセストークンを設定します。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_06.png)
ノードをダブルクリックしてプロパティ設定を表示しましょう。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_07.png)
プロパティ設定です。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_08.png)
対象の値の <ChannelSecret>
を今回使う LINE BOT のチャネルシークレットに置き換えます。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_09.png)
対象の値の <ChannelAccessToken>
を今回使う LINE BOT のチャネルアクセストークンに置き換えます。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_10.png)
設定できたら完了ボタンをクリックします。
Open AI 社の ChatGPT API のトークンを設定
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_11.png)
過去記事「OpenAI 社の ChatGPT API を enebular からつないでみる」を参考に Open AI 社の ChatGPT API のトークンを準備します。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_12.png)
simple-chatgpt ノードをダブルクリックしてプロパティを開きます。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_13.png)
Token の欄に先ほどの API トークンを入力して完了ボタンをクリックします。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_14.png)
ワークスペースに戻ったら保存ボタンをクリックします。
これで準備が完了です。
現在開いている Web エディタの URL から LINE Bot 用の URL をメモ
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_15.png)
保存ボタンの横にある ( i ) マークにマウスをのせます。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_16.png)
現在開いている Web エディタの URL が出てきます。
今回 LINE Bot となる URL は、現在開いている Web エディタの URLに /linebot
を加えたものです。たとえば 、現在開いている Web エディタの URLが、
https://abcde.herokuapp.com/
の場合は、今回 LINE BOT となる URL は、
https://abcde.herokuapp.com/linebot
となります。
LINE Developers で Webhook の設定をする
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_17.png)
LINE Developers を、ブラウザの別のタブで開きます。このように今回使う LINE BOT の Messaging API 設定に移動します。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_18.png)
スクロールして Webhook 設定の項目を見つけて、編集ボタンをクリックします。また、Webhook の利用がオンになっていることも確認してきましょう。まれにオフになっているので、その時はオンにします。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_19.png)
さきほどの今回 LINE BOT となる URL を Webhook URL の欄にペーストして更新ボタンをクリックします。
これで LINE BOT の設定は完了です。
動かしてみる
今回動かす LINE BOT にメッセージを送ってみると、OpenAI 社の ChatGPT API が相手をしてくれます。今回の仕組みはシンプルなものなので、以前の会話の文脈は記憶せずにその場その場で 1 つずつ答えてくれますが、このように enebular の話でも盛り上がることができます。
![image](/wp-content/uploads/2023/05/lcdp-linebot-chatgpt-simple_20.png)
後半の記事では、この仕組みをクラウド実行環境に移植する流れを伝えてきます。