PipedreamでChatGPT×LINE Botを作ろう！

https://linedevelopercommunity.connpass.com/event/289749/

本資料はこちらの体験会で使用するハンズオン資料となります。
[LINE Developers](https://developers.line.biz/ja/)のアカウント設定や[OpenAIのAPI_key](https://platform.openai.com/account/api-keys)、[pipedream](https://pipedream.com/)のアカウント作成などは実施をお願いします。

https://developers.line.biz/ja/

https://platform.openai.com/account/api-keys

https://pipedream.com/

::: note alert
本記事にはLINE Messaging APIのCHANNEL_ACCESS_TOKENなど記載されていますが、本来は悪用を防ぐために、漏洩には十分注意してください。記事中のキーは全てハンズオン用に取得したものであり、イベント終了後は使用できないものとなっております。
:::

## 1.イベントに参加いただくにあたり

### 今回の目標

今回のイベントでは
- **入力した文字がそのまま帰ってくる、オウム返しLINE Botをつくる🦜**
- **LINEを通じてChatGPTのAPIを叩いて、リプライが返ってくるLINE Botをつくる**
- **APIを叩くときのプロンプトを調整し、想定した返答を引き出す**


以上、3点が実施できることを目標としています。

途中経過も含めて、スクリーンショットや動画をtwitterに  `#LINEDC`をつけて発信してみましょう。

---以下ハンズオンの作業資料---
---


## 2.おうむ返しBotの作成

**まずはリプライメッセージを送るLINE Botの基本となるおうむ返しBotを準備します。**

### 【事前準備】公式アカウント作成
https://qiita.com/okinakamasayoshi/private/bf9593b2af20148c4d19

### pipedream設定

 画面の通りに進めましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/678d7ea6-ed3c-d5fe-bbf6-77a4343216be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/70b10cfc-075d-a7a1-c641-9fa8c30adb7b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/145b836c-6d80-32d0-4a6f-92da0da3e8fb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c89a5089-9ce8-4bfe-8b2c-c6e5e871828b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f024d178-0388-b417-2149-876955ae9cc4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/05e5644a-0402-108b-33e4-b25764907783.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/88d2dc92-ff6c-ffb8-5860-d0ad664b02d2.png)

LINE公式アカウント画面へ
コピーした `webhookURL`+`/webhook`と入力して「更新」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/26b2cdea-79e7-ad03-322e-00b9556d8a08.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d7a3b852-baff-fb4a-dd3f-0c6bbf5f79a6.png)
SHOW NEW ENENT から最新のPOST/webhookを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c6f4a767-94ba-a462-469e-f6a51d64fe56.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c84a203b-2d3d-7d78-b279-a531f9f3db3e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/98ed9048-7217-1b0f-8440-b189d21ca92a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/4fc4771e-2826-a07e-c756-23d9f418abf0.png)
LINE公式アカウント画面へ
`チャネルアクセストークン`を発行してコピペ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0b17b492-2c25-d778-e62b-edc53855a3b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/174acca3-4a72-4617-600c-b3a418360e84.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/272b6fcd-2a30-ed5c-2368-179dab67c044.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/98181493-483b-c306-a03f-ef84439013a5.png)
QRコードでログインする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e011d666-759c-d4ae-277e-63c31e6792de.png)
LINEの画面に移行し 何かメッセージを送ります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/169c7f6a-ffda-3b94-6ba7-d2a73a49d8bd.png)
trigger SELECT EVENT に戻り SHOW NEW EVENT から最新のPOST/webhook 選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/0a4cfde5-4021-1176-3ecd-5a2532d8326a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ac3ef28c-755b-2fde-106f-1e370b4c7baf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/1164225e-0eb5-ef8d-f831-14278914e6f9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/8e1e37c4-66b1-f3b7-44d4-30de46947752.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/6b7fd7c5-6234-83e8-b4b8-b8fca3767530.png)
 steps→trigger→event→body→events[0]→replyTokenとドリルダウンして選択
`{{steps.trigger.event.body.events[0].replyToken}}`をコピペでもOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/07086a71-601b-bfb8-a463-728c93eea197.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/7f48cb3d-db47-fbf8-ab19-8844a8206944.png)
 steps→trigger→event→body→events[0]→message.textとドリルダウンして選択
`{{steps.trigger.event.body.events[0].message.text}}`をコピペでもOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/643459b7-12f4-57cd-0039-c780a6b80a46.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/f4dd6f12-bd3a-cb39-0751-8a09f579cbe5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e98bc17d-2cf2-c67d-f85b-97a28a8077f3.png)
オウム返し完成！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/28f9de4d-b529-ab71-9bae-14acce1ac8ac.png)

### 応用 返す言葉をアレンジしてみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/15052553-5bf2-4218-8a18-4924596d08e0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/6a69e5c5-6ad7-fb91-1e98-056331596202.png)

## 3.ChatGPTに返答させよう

画面の通りに進めましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ccbcbe8d-04e8-5e2b-25c8-742365fc8c1d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2c7db983-236c-cb26-6527-3096ad481bde.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/602bfdb9-c979-e1a7-d651-e8aac1934623.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/fd2f7e34-c616-e088-9e13-f2c6fc8cf1ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d655f952-a0cb-e6b8-ec1d-e4370b27880c.png)

下記の手順に沿って API keyを発行
『OpenAIのAPIキーの発行手順』の章を参考にご準備ください

https://auto-worker.com/blog/?p=6988#

https://platform.openai.com/account/api-keys

keyを貼り付け ニックネームを入力(なんでもいいです)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/3baa8510-195c-b7c6-80bc-faf53fff63f0.png)

::: note alert
API keyは、他人には絶対に公開しないでください。悪用される恐れがあります。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/aacda407-656a-08c0-2371-c91c4c736978.png)
 steps→trigger→event→body→events[0]→message.textとドリルダウンして選択
`{{steps.trigger.event.body.events[0].message.text}}`をコピペでもOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a41aa6df-42a4-9713-7ec1-f3ef02d7262f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/7eb364f2-fa8d-78ad-6db5-9abb72ff4e8c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/88f99581-077e-41cc-cb5a-0c8eb06669dc.png)
一旦消去しましょう そのうえで
 steps→chat→$return_value→choices→message→contentとドリルダウンして選択
`{{steps.chat.$return_value.choices[0].message.content}}`をコピペでもOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/2792e7a0-06ef-1862-7a87-0810885ecb0c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a86de0f7-89f4-8d38-70f0-ae78bf71c666.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/d721dd80-27d0-7011-08a0-ffa3f0cf817c.png)

## 4.プロンプトを調整し 任意の解答をさせよう

画面の通りに進めましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b7454d6b-a3c8-a8f1-e15e-eb46f1a2638f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/452875ef-12c5-262c-9a5a-fa9e7777318b.png)
DEPLOY すれば完成です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/528694cf-3258-e5a0-6f2c-21bc17195319.png)
色々試してみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/1e2caab7-cf01-8c41-d8f1-eac71cf537d1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/28a6a80e-b075-382a-a7c5-6b407085de92.png)

### 応用 業務で使っているGPT LINEBot

・ニュース記事全文を瞬時に要約させます
・お友だち内の誰かが投稿すると お供だち全員が要約を読めます

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/9f9f74fb-1760-4769-a344-fcd19d920ef3.png)
reply_message は一旦停止しておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/a40155b7-7987-c269-b632-4d743f01b9a0.png)
+ボタンから新しいモジュール `send Broadcast Message`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c162cf5d-54e9-a950-9597-db9c7c360bba.png)
両項目ともこれまでと同じように選択しDEPLOY
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/b498e348-7832-d774-f59a-9d671cbfad2d.png)
気になる記事全体をLINEにコピペ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/682f9338-aca4-824d-d89b-d9fe529b5fc0.png)
そのまま貼り付けると 300字にまとめて お友だち全員に配信
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/9f5b87d2-dda3-d93c-8b27-a2e65f9cfb2b.png)

## 5.おまけ お絵描きBotも作ってみよう

余裕があったら画面に沿ってやってみよう！ 細かい説明は省きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/09304f85-c784-9d85-8915-e6343d3bb76b.png)
+ボタンから新しいモジュール `Create Image`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/ef2da4ab-f610-1ca1-19ee-7599ed5523ad.png)
`{{steps.trigger.event.body.events[0].message.text}}`を選択 or 入力 しTest
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/3c52333f-6942-ec99-5132-9f84b1ba0358.png)
`{{steps.create_image.$return_value.data[0].url}}`を選択 or 入力 しTest
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/94de0e18-7808-e39d-59cd-19589ed46f8b.png)

プロンプトを調整して　バンクシーにアートを描かせてみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/24674411-29f6-0caf-1db5-56b8dda51f94.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/c5f19ed5-c735-d0cc-7e03-7834c48263cb.png)
色々と試してみてください！

# 6.LINE Botライフを楽しもう!!

 プライベートでもビジネスでも大活躍の「LINE」
 アイデア次第で色々と楽しめそうですよね。

 特にビジネスシーンでは、企業用LINE Botを完全外注すると〇〇百万円なることもあります。
 ChatGPTも搭載した簡単なLINE Botくらいはまずは自分で作り、
 外注が必要な部分を最小化できれば、更に色々と可能性が広がっていくと思います。

 これから少しずつでも勉強したい方は、
 [LINEDCコミュニティ](https://linedevelopercommunity.connpass.com/)でも楽しいイベントが沢山ありますし、
 [YouTubeチャンネル](https://www.youtube.com/channel/UCZkYYwmvSA6y7WWLxM5x9IA)にはすぐ真似できる動画も盛り沢山!

 今日を機に、みなさんがオリジナルのLINE Botをどんどん生み出してくれると嬉しいです!
 またぜひどこかのイベントでお会いしましょう。ご参加ありがとうございました☻

 ◆おきなか[Twitterはこちら](https://twitter.com/okinakamasayos1)

 ◆LINE DC コミュニティ

https://linedevelopercommunity.connpass.com/

 ◆YouTubeチャンネル

https://www.youtube.com/channel/UCZkYYwmvSA6y7WWLxM5x9IA

 ◆私が通ったプロトタイピングスクール(おすすめ)

 https://protoout.studio/

 ◆最近色々なコミュニティも立ち上がりました！

 https://note.com/protoout/n/nebe3e2651bda