LoginSignup
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@okinakamasayoshi(がいこつ 沖中)inプロトアウトスタジオ

PipedreamでChatGPT×LINE Botを作ろう！

Last updated at Posted at 2023-08-04

本資料はこちらの体験会で使用するハンズオン資料となります。
LINE Developersのアカウント設定やOpenAIのAPI_key、pipedreamのアカウント作成などは実施をお願いします。

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

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

今回の目標

今回のイベントでは

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

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

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

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

2.おうむ返しBotの作成

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

【事前準備】公式アカウント作成

pipedream設定

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

image.png
image.png
image.png
image.png
image.png
image.png
image.png

LINE公式アカウント画面へ
コピーした webhookURL+/webhookと入力して「更新」
image.png
image.png
SHOW NEW ENENT から最新のPOST/webhookを選択
image.png
image.png
image.png
image.png
LINE公式アカウント画面へ
チャネルアクセストークンを発行してコピペ
image.png
image.png
image.png
image.png
QRコードでログインする
image.png
LINEの画面に移行し 何かメッセージを送ります
image.png
trigger SELECT EVENT に戻り SHOW NEW EVENT から最新のPOST/webhook 選択
image.png
image.png
image.png
image.png
image.png
steps→trigger→event→body→events[0]→replyTokenとドリルダウンして選択
{{steps.trigger.event.body.events[0].replyToken}}をコピペでもOK
image.png
image.png
steps→trigger→event→body→events[0]→message.textとドリルダウンして選択
{{steps.trigger.event.body.events[0].message.text}}をコピペでもOK
image.png
image.png
image.png
オウム返し完成！
image.png

応用 返す言葉をアレンジしてみよう

image.png
image.png

3.ChatGPTに返答させよう

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

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

keyを貼り付け ニックネームを入力(なんでもいいです)
image.png

API keyは、他人には絶対に公開しないでください。悪用される恐れがあります。

image.png
steps→trigger→event→body→events[0]→message.textとドリルダウンして選択
{{steps.trigger.event.body.events[0].message.text}}をコピペでもOK
image.png
image.png
image.png
一旦消去しましょう そのうえで
steps→chat→$return_value→choices→message→contentとドリルダウンして選択
{{steps.chat.$return_value.choices[0].message.content}}をコピペでもOK
image.png
image.png
image.png

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

画面の通りに進めましょう
image.png
image.png
DEPLOY すれば完成です
image.png
色々試してみましょう
image.png
image.png

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

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

image.png
reply_message は一旦停止しておく
image.png
+ボタンから新しいモジュール send Broadcast Messageを選択
image.png
両項目ともこれまでと同じように選択しDEPLOY
image.png
気になる記事全体をLINEにコピペ
image.png
そのまま貼り付けると 300字にまとめて お友だち全員に配信
image.png

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

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

image.png
+ボタンから新しいモジュール Create Imageを選択
image.png
{{steps.trigger.event.body.events[0].message.text}}を選択 or 入力 しTest
image.png
{{steps.create_image.$return_value.data[0].url}}を選択 or 入力 しTest
image.png

プロンプトを調整して　バンクシーにアートを描かせてみよう
image.png
image.png
色々と試してみてください！

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

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

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

これから少しずつでも勉強したい方は、
LINEDCコミュニティでも楽しいイベントが沢山ありますし、
YouTubeチャンネルにはすぐ真似できる動画も盛り沢山!

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

◆おきなかTwitterはこちら

◆LINE DC コミュニティ

◆YouTubeチャンネル

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

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

10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?