7
7

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.

プログラミング不要でChatGPTのLINEボットを作る

Last updated at Posted at 2023-05-14

プログラミング不要でChatGPTのLINEボットを作る

色々な方が既に紹介されているかと思いますが、過去に開催したChatGPTハンズオンの資料を共有します。

対象 プログラミング知識が無い方

お仕事や学校で、日常的にマニュアルなどを見ながらPC利用されている方であれば、手順通りにできるかと思います。

できること

(1)プログラミングの知識が無い方でも、ChatGPTとLINEで会話できるLINEチャットボットを作成する体験ができます。

(2)ChatGPTは役割や前提情報をうまく入力できると、非常に良い回答をするようになります。
役割や前提情報を上手に記載できる技術があれば、ChatGPTなどの生成AIを有効に使えることが身近なLINEを使って直感的に理解できます。
※スクリプトエンジニアリング と呼ばれる、これから必要と言われている技術です

必要なもの

・ChatGPT APIのAPI Key と Organization ID
 OpenAIのホームページから利用申請
 申請後、承認まで数週間かかることがあります(記事作成時点)
・make の利用登録(以前のサービス名は integromat)
 make のホームページで無料ユーザー登録
・LINE公式アカウント
 LINE for Business

想定時間 15分~90分

事前に必要なアカウント作成や利用申請が承認され、準備ができていること。
プログラミング知識が無い方:細かな補助付きで90分程度
アプリ開発経験者:30-60分程度
現役開発者、API連携など経験者:15-30分程度

ご注意

(1)課金
記事作成時点(更新2023.1)では、数回の動作試験程度なら各サービスの無料プラン内となります。
ただ、課金が発生する認識が無いままでLINEボットを継続利用したり、公開して利用されてしまうと高額な請求になる可能性があります。

(2)事前に利用申請やアカウント作成を行ってください
ChatGPTのAPI利用申請は、申請後に数週間必要な可能性があります(記事作成時点)。

(3)知識のない方は、絶対に一般公開しないこと
運用するためにはセキュリティや、管理作業と利用料金などコストやリスクに対応できる必要があります。これは、初心者では無理かと思われます。
ChatGPTを利用したシステムへの攻撃が多く発生しており、費用請求につながる可能性もあります。
開発体験に留め、動作の確認後は利用したAPIの削除やサービス停止などを必ず行ってください。

補足

ChatGPTを組込んだアプリ開発を楽にしてくれるツールは色々とありますので。
今回、プログラミングの知識がない方、これから学習される学生向けに、最近注目されている make(旧 Integromat)という、異なるツール同士をプログラミング不要で連携できるツール(ノーコードツール)版に書き直しました。

AIボット開発や会話の調整などは膨大なお金や知識が必要になります。
今回、そこは全てChatGPTにお任せして、十分な機能とは言えませんが、日常的に使っているLINEで使える「アプリ作れた感」が演出できます。
私は「作ったものが動く」体験から、ChatGPTなどのAI研究やIT技術全般に興味を持つ方、特に学生が増えたら良いなと思います。

ボットの動作(担当するツールと、その役割)

担当 役割
  ↓    LINE LINEへの書き込みを検知し、makeへ送信
  ↓    make LINEへの書込み内容を受取
  ↓    make 役割や前提情報※、LINEへの書込み内容をChatGPTへ送信
  ↓    ChatGPT 回答を作成、makeへ送信
  ↓    make ChatGPTの回答をLINEへ送信
  ↓    LINE ChatGPTの回答をLINEに表示
最初に戻る LINE LINEへの書き込みを待つ(最初から繰り返し)

※スクリプトエンジニアリングの部分

事前準備

ChatGPT API のAPIキーを入手

ChatGPT APIのAPI Key と Organization IDが必要になります。
(GPT-4のAPI利用申請は不要です。利用申請が承認された時点で利用できるgpt-3.5-turboで動かします)
OpenAIのホームページから利用申請
申請後、承認まで数週間かかることがありますので注意してください。(記事作成時点)

少し下にあるGet started のリンクから進んで下さい。
WS000000.JPG

LINE公式アカウント LINE for Businessアカウントを作成

LINE for Business

新規プロバイダーを作成します。
スクリーンショット 2023-05-11 18.35.39.png

スクリーンショット 2023-05-11 21.27.40.png

LINEのチャネルを作成します。
スクリーンショット 2023-05-11 21.31.27.png

WS000003.JPG

WS000003.JPG

後で認証を行う を選択し、管理画面に戻ってください。
WS000004.JPG

内容をよく読んで、ボタン「同意」をクリックしてください。2つ程度。
WS000005.JPG

ホーム の右上にある「設定」をクリックします。
WS000006.JPG

左側のメニュー「Messaging API」>ボタン「Messaging APIを利用する」を押す
WS000007.JPG

作成済のプロバイダーを選択します。
WS000008.JPG

記入せずにボタン「OK」を押す。
WS000009.JPG

WS000010.JPG

この画面になればLINEの準備は完了です。
WS000011.JPG

プロフィール画像を設定したい場合は、左端のメニュー「アカウント設定」 > 基本設定 プロフィール画像 から登録することができます。

make のユーザー登録

make のホームページで無料ユーザー登録した後、登録したメールアドレスにVerifyのメールが届きます。
ボタン「Verify email」を押せば、make にログインできるようになります。
image.png

make ログイン直後の画面
image.png

ChatGPTのLINEボットを作る

ここからは、準備した環境を利用して、LINEボットを作ります。
【make】【ChatGPTAPI】【LINE】の3つの画面を、切り替えながら(ログインしながら)の作業になります。

【LINE】LINEへの書込み内容を受取

LINE で必要な設定を行い、Channel Access Token を発行します。
Channel Access Tokenは【make】が【LINE】と連携することを許可するためのものです。

LINE Developersにログインし、コンソールを開きます
WS000020.JPG

Messaging API設定 の 下の方にある 応答メッセージ の 「編集」を左クリックします。
WS000018b.JPG

WebだけON、他はOFFにします。
WS000018b2.JPG

以下、場所がわからない場合は再度、LINE Developerのコンソールを開きなおしてください。

Messaging API設定 の 下の方にある チャネルアクセストークン(長期)の ボタン「発行」を左クリックします。
WS000019.JPG

チャネルアクセストークン(長期)の右にあるアイコンを左クリックしてコピーします。
WS000019.JPG

【make】LINEへの書込み内容を受取

make で「LINEへの書込み内容を受取」するための処理を作ります。
make でシナリオを作成し、LINEボットがChatGPTと連携して動作するようにします。
make はプログラミングの知識が無くても、複雑な処理を作成することができます。
make にログインします。

右上の「+」ボタンを押し、New scenario (新しいシナリオ)を作成します
image.png

左クリックします。
WS000012.JPG

WS000013.JPG

image.png

WS000015.JPG

WS000016.JPG

画面下のボタンを押して、保存しておきます
WS0000165.JPG

【LINE】からチャネルアクセストークン(長期)をコピーし、貼り付けます。
ボタン「Save」を左クリックします。
WS0000185.JPG

WS000022.JPG

Copy adress to clipboard を左クリックします。
必要なら、メモ帳などに保存しておいてください。
ボタン「OK」を左クリックし、画面下のボタン「Save(保存)」を左クリックします。
WS000023.JPG

【LINE】LINEへの書込み内容を受取

LINE に Webhook URLを設定します。
Webhook URLは【LINE】が【make】と連携することを許可するためのものです。

LINE Developersにログインし、コンソールを開きます

Messaging API設定 > Webhook設定 > Webhook URL の「編集」を左クリックします。
WS000024.JPG

【make】でコピーしたものをペーストします。
ボタン「更新」を左クリックします。
WS000025.JPG

【make】LINEへの書込み内容を受取

ここまでの作業が上手く出来たか、動かして確認します。
make にログインします。

make で「Run Once(一回だけ実行)」ボタンを押し、LINEからの通知を受け取れるようにしておきます。
WS000027.JPG

【LINE】LINEへの書込み内容を受取

LINE から Webhook URLを検証します。
LINE Developersにログインし、コンソールを開きます

Messaging API設定 > Webhook設定 > Webhook URL の「検証」を左クリックします。
WS000028.JPG

成功 が表示されたらOKです。
上手くいかない場合は、今までの手順を確認してください。
まれに、make側でWebhook URLが変わっていることがあります。
makeのLINEアイコンを左クリックし、再度、Copy adress to clipboardを押してLINEのWebhook URLを編集することも試してみてください。
WS000029.JPG

成功 と表示されれば、LINEへの書込み内容を(makeが)受取できるようになっています。
実際にLINEから書込みしたものがmakeへ届くか確認します。
LINE Developersにログインし、コンソールを開きます
Messaging API設定 > QRコード を使って、LINE公式アカウント(ボット)を友達として追加しておいてください。

【make】LINEへの書込み内容を受取

先ほどの試験と同様、make で「Run Once(一回だけ実行)」ボタンを押し、LINEからの通知を受け取れるようにしておきます。
2回目以降の実行では「 wait for new data(LINEからの新しいデータを待つ) 」を左クリックするようにしてください。
WS000030.JPG

友達登録したLINEアプリから、書込みを行ってみて下さい。
スクリーンショット 2023-05-14 21.22.37.png

しばらく待つと、以下の画面になります。
右上に1が表示されますので、その部分を左クリックするとmakeがLINEから受け取ったデータを確認することができます。
本来はプログラミングが必要な処理がmakeによって簡単に実現することができました。
WS000031.JPG

WS000032.JPG

【ChatGPT】LINEへの書込み内容を受取

ChatGPT APIのAPI Key と Organization IDを確認しておきます。
[ChatGPT API にログインします。]((https://openai.com/api/)

どちらもログイン後、画面右上のメニューから表示します。
次の手順で必要ですので、メモ帳などにコピーしておいてください。

・API Key
WS000039.JPG

必要な方はAPI Keyを作成してください。
WS000040.JPG

・ Organization ID
APIの利用登録時に付与されています。
WS000041.JPG

image.png

【make】役割や前提情報、LINEへの書込み内容をChatGPTへ送信

LINEへの書込み内容を、ChatGPTへ送信する処理をmakeで作成していきます。
make にログインします。

WS000033.JPG

WS000034.JPG

WS000035.JPG

WS000036.JPG

ChatGPT APIのAPI Key と Organization IDを入力し、ボタン「Save」を左クリックしてください。
WS000038.JPG

Select Method を Create a Chat Completion に変更すると記入欄が変わります。
WS000043.JPG

Messages は Item 1から3まで、add itemを左クリックし、下記のように追加してください。
この部分の記載を変えることで、ChatGPTの回答やその性能が変わります。(プロンプトエンジニアリング)
上手く動いたら、各自で修正して色々試してみてください。

Item Role Message Content
 1  System あなたはレストランの従業員です。お客様からの問合せや予約の相談に対して丁寧に応答します。
 2  Asisstant 現在、お客様が大変多く来られており、事前の予約をお勧めしています。予約は希望の日時・人数・駐車台数・お名前・電話番号を伺い、後ほどオーナーシェフから、お電話でご連絡させて頂きます。
 3  User 表示されるウインドウ内の Text(LINE > Events[] > Message > Text)をドラッグする

WS000044.JPG

WS000045.JPG

受け答えするには文字数が不足してしまうので、追加の設定項目を表示させるためにShow advanced settingsをONにします。
Max Tokens を800に変更し、ボタン「OK」を左クリックします。

Max Tokensの数が多ければ、LINEの書込が多くChatGPT APIに送信され、会話が成立しやすくなります。ただ、この数が多いとChatGPT APIの無償枠がすぐに無くなります、あまり増やさないようにしてください。
WS000046.JPG

【make】役割や前提情報、LINEへの書込み内容をChatGPTへ送信

ここまでの処理が正しく作成できているか試験します。
Saveし、Run OnceしてからLINEに書き込んでみてください。
成功すれば、ChatGPTからの回答を確認することができます。
上手くいかない場合は、今までの手順を再度確認してください。

スクリーンショット 2023-05-14 22.40.58.png

WS000047.JPG

設定した内容がmakeから送信(ChatGPT APIのInput)されています。
WS000048.JPG

ChatGPTの回答(ChatGPTのoutput)をmakeが受け取っています。
image.png

★ポイント★
・ChatGPTは、どのように会話を続ければコミュニケーションが取りやすい(意味がある文)かを、確率で計算して単語を選びます。
文字数を多くすると、会話を続けてくれますが事実とは限りません。

・ChatGPTは、確率で会話が選ばれるため、指示した内容をロジカルに守るような論理性はありません。指示したからといって、その通りに回答してくれるかはわかりません。
ただ、頼み方が上手だと、うまく応答してくれることもあります。(プロンプトエンジニアリング)

【make】ChatGPTの回答をLINEへ送信

ここまで動けば、ChatGPTの回答をLINEへ送信し表示させるだけです。
右側に最後のモジュールを追加します。

make にログインします。

WS000050.JPG

WS000051.JPG

WS000052.JPG

WS000054.JPG

Reply Tokenは、表示されるウインドウ内の Reply Token(LINE > Events[] > Reply Token)をドラッグする。Add Itemを左クリックします。
WS000055.JPG

TypeはText、Textは、表示されるウインドウ内の Reply Token(OpenAI > choices[] > message > Content)をドラッグする。
ボタン「OK」を左クリックします。
WS000056.JPG

動作テスト(最終)

Saveし、Run OnceしてからLINEに書き込んでみてください。
成功すれば、ChatGPTからの回答をLINEで確認することができます。
上手くいかない場合は、今までの手順を再度確認してください。

WS000057.JPG

実行例
IMG_1968.PNG

問題が無く、連続して使いたい場合はRun Onceの下にあるSCHEDULINGをONにすると常に実行状態になります。
これはmakeをログオフしたり、Webブラウザを閉じても継続して動いていますので、試験後は必ずOFFにするようにしてください。
WS000058.JPG

以上です。
お疲れさまでした!

7
7
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
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?