🌊

LINE アプリで簡単に作れる AI チャットボット！ ChatGPT 連携

2023/07/10に公開

13件

LINE

OpenAI

tech

1. OpenAI の設定

1-1. アカウント作成

「Create your account」画面にアクセスし、OpenAI のアカウントを作成
OpenAI 1

1-2. ログイン

「Create your account」画面にアクセス後、「Log in」リンクをクリックし、ログイン画面を表示後、ログインを実施
OpenAI 2

1-3. 「API Keys」画面に遷移

右上の「Personal」をクリック後、「View API keys」をクリックし、「API kyes」画面に遷移
OpenAI 3

1-4. 「Create new secret key」ダイアログを表示

「+ Create new secret key」をクリックし、「Create new secret key」ダイアログを表示
OpenAI 4

1-5. secret key の発行

「Name」に「hands-on」と入力し、「Create secret key」ボタンをクリック
OpenAI 5

1-6. 「secret key」をコピー

「Create new secret key」ダイアログに表示された「コピー」ボタンをクリックし、「secret key」をコピーし、「Done」ボタンをクリック
※コピーした secret key をテキストエディターにペーストしておいてください
OpenAI 6

2. LINE Messaging API の設定

2-1. LINE Business ID の作成

以下のリンクにアクセスし、LINE Business ID のアカウントを作成してください

LINE 01

2-2. LINE Developers ID ログイン画面を開く

以下のリンクの「LINE アカウントでログイン」ボタンをクリックし、ログイン画面を開く

LINE 01

2-3. ログイン

「LINE アカウントでログイン」をクリック後、「メールアドレス」「パスワード」を入力し、「ログイン」ボタンをクリック
LINE 02
※スマートフォンの LINE アプリ上で画面に表示された認証番号を入力する必要があります。

2-4. 「新規プロバイダー作成」ダイアログを表示

プロバイダーの「新規プロバイダー作成」ボタンをクリックし、新規プロバイダー作成ダイアログを開く
LINE 03

2-5. 新規プロバイダーを作成

「プロバイダー名」に「hands-on」を入力し、「作成」ボタンをクリック
LINE 04

2-6. 新規チャネル作成画面を開く

「Messaging API」をクリック
LINE 05

2-7. 新規チャネルを作成

必須項目を入力して「作成」ボタンをクリックし、確認ダイアログを表示し、「OK」ボタンをクリック
※確認ダイアログが 2 回表示されますが、中身を読んだ上で「確認」ボタンをクリック
LINE 06

入力項目	入力値
会社・事業者の所在国・地域	日本
チャネル名	hands-on
チャネル説明	ChatGPT hands-on
大業種	飲食店・レストラン
小業種	カフェ・喫茶店
メールアドレス	（個人のメールアドレスを入力してください）
LINE 公式アカウント利用規約の内容に同意します	チェックボックス On
LINE 公式アカウント API 利用規約の内容に同意します	チェックボックス On

2-8. チャネル作成完了

チャネルの作成が完了
LINE 07

2-9. 友達追加

「Messaging API 設定」タブをクリックし、QR コードを表示し、スマホの LINE アプリで友達追加をしておいてください
LINE 08

2-10. 「応答設定」画面を開く

「LINE 公式アカウント機能 > 応答メッセージ > 編集」リンクをクリックし、「応答設定」画面を開く
※新しい画面「LINE Official Account Manager」が開きます
LINE 09

2-11. 「応答設定」

「LINE Official Account Manager」画面にて応答設定を実施後、画面を閉じてください
LINE 10

入力項目	入力値
チャット	Off
あいさつメッセージ	Off
Webhook	On
応答メッセージ	Off

2-12. 「チャネルアクセストークン」の発行

「LINE Developers」画面の「Messaging API 設定」タブを開き、「チャネルアクセストークン > 発行」ボタンをクリック
LINE 11

2-13. 「チャネルアクセストークン」のコピー

発行された「チャネルアクセストークン」をコピーして、テキストに貼り付けておいてください
LINE 12

3. make の設定

3-1. make アカウントの作成

以下のリンクにアクセスし、make のアカウントを作成してください
https://www.make.com/en/register
make 01

3-2. make にログイン

以下のリンクにアクセス後、「Email」「Password」を入力し、「Sign in」ボタンをクリック
https://www.make.com/en/login
make 02

3-3. scenario の作成

「Create a new scenario」ボタンをクリックし、「New scenario」画面を開く
make 03

3-4. LINE application の追加

「+」ボタンクリック後、検索フォームに「LINE」を入力し、「LINE」を選択
make 04

3-5. 「Watch Events」の追加

「Watch Events」をクリック
make 05

3-6. 「Webhook」の追加

「Webhook」ダイアログの「Add」ボタンをクリック
make 06

3-7. 「Webhook」の作成

「Create a webhook」ダイアログの「Webhoook name」に「hands-on」と入力し、「Connection」の「Add」ボタンをクリック
make 07

3-8. 「connection」の作成

「Create a connection」ダイアログの「Connection name」に「hands-on」と入力し、「Channel Access Token」に【「チャンネルアクセストークン」のコピー】でコピーしたチャネルアクセストークンを貼り付けて「Save」ボタンをクリック
make 08

3-9. 「webhook」の作成

「Create a webhook」ダイアログで「Connection」に「hands-on」が設定されているのを確認し、「Save」ボタンをクリック
make 09

3-10. 「Webhook address」のコピー

「LINE」ダイアログの「Copy address to clipboard」ボタンをクリックし、「address」をコピーし、テキストに貼り付けておいてください。貼り付けが終わったら「OK」ボタンをクリックして「LINE」ダイアログを閉じてください
make 10

3-11. 「make」を一時保存

「Save」ボタンをクリックし、make を一時保存
make 11

4. LINE から make の連携設定

4-1. Webhook 設定

「LINE Developers」画面の「Messaging API 設定」タブの「Webhook 設定 > 編集」ボタンをクリック後、入力欄に【「Webhook address」のコピー】でコピーしたアドレスを貼り付けて「更新ボタン」をクリック
make-line 01

4-2. Webhook 検証

「make」画面で「Run Once」ボタンクリック後、「LINE Developers」画面に戻り「Messaging API 設定」タブの「Webhook 設定 > 検証」ボタンをクリックし、「成功」ダイアログが表示されることを確認
「make」画面に戻り、LINE アイコンの右上に「1」が表示されることを確認
「LINE Developers」画面に戻り「Messaging API 設定」タブの「Webhook 設定 > webhook の利用」ボタンを On に変更
make-line 02
make-line 03
make-line 04
make-line 05

4-3. LINE よりメッセージ送信

「make」画面で再度「Run Once」ボタンクリック後、【友達追加】で追加したチャットボットアカウントに LINE でメッセージを送信し、「make」画面で LINE アイコンの右上に「1」が表示されることを確認
make-line 06

5. make から openai の連携設定

5-1. module 追加

「make」画面で「LINE」アイコン横にカーソルを移し、表示された「+ Add another module」ボタンをクリック
make-openai 01

5-2. HTTP モジュール選択

検索フォームに「http」と入力し、「HTTP」モジュールを選択
make-openai 02

5-3. Make a request モジュール選択

ACTIONS より「Make a request」モジュールを選択
make-openai 03

5-4. HTTP モジュールの設定（その 1）

以下の値を入力
make-openai 04

入力項目	入力値
URL	https://api.openai.com/v1/chat/completions
Method	POST

5-5. HTTP モジュールの設定（その 2）

以下の値を入力
make-openai 05

入力項目	入力値
Headers > item1 > Name	Content-Type
Headers > item1 > Value	application/json
Headers > item2 > Name	Authorization
Headers > item2 > Value	Bearer {OpenAI で発行した API キー}

5-6. HTTP モジュールの設定（その 3）

以下の値を入力し、「OK」ボタンをクリック
make-openai 06

入力項目	入力値
Body type	Raw
Content type	JSON (application/json)
Request content	{"model": "gpt-3.5-turbo","messages" : [{"role": "system","content": "あなたは大阪府箕面市森町中にある喫茶店「森のひととき」の店長です。常に明るく元気に丁寧に返信してください。お店の営業時間は AM9:00〜PM18:00。休業日は水曜日。受信メッセージに `SHINMACHI` が含まれる場合は返信内容に「クーポンをお知らせします！12345」を文末または文頭に含めてください。"},{"role": "user","content": "{{1.events[].message.text}}"}]}
Parse response	Yes

5-7. openai へのメッセージ送信検証

「make」画面で「Run Once」ボタンクリック後、LINE からメッセージを送信し、「LINE」アイコン、「HTTP」アイコンの右上に「1」が表示されることを確認
make-openai 07

6. make から LINE の連携設定

6-1. module 追加

「make」画面で「LINE」アイコン横にカーソルを移し、表示された「+ Add another module」ボタンをクリック
make-line 10

6-2. 「LINE > Send a Reply Message」の選択

「LINE > Send a Reply Message」を選択
make-line 11

6-3. 「Send a Reply Message」の設定

以下の値を入力し、「OK」ボタンをクリック
make-line 12

入力項目	入力値
Connection	hands-on (hands-on)
Reply Token	{{1.events[].replyToken}}
Messages > item1 > Type	Text
Messages > item1 > Text	{{2.data.choices[].message.content}}

6-4. openai アプリの送信検証

「make」画面で「Run Once」ボタンクリック後、LINE からメッセージを送信し、応答が LINE で返ってくることを確認

7. openai API の各種パラメータについて

7-1. 概要

openai の API を呼び出す際、以下のようなパラメータを設定しています。

{
    "model": "gpt-3.5-turbo",
    "messages": [
        {
            "role": "system",
            "content": "You are a helpful assistant."
        },
        {
            "role": "user",
            "content": "Hello!"
        }
    ]
}

基本的には以下のページに詳細が記載されています

7-2. model

model には利用するモデル名を設定します
※例）gpt-4, gpt-3.5-turbo

7-3. messages

messages は role、content を指定することで、実際の質問文、応答する際の役割などを設定することができます

role の種類	content に設定する値
user	ユーザからの質問を設定
system	応答時の制約を設定（丁寧に答えてくれとか、〜〜〜の選択肢の中からだけ回答してくれとか）
assistant	今まで openai api からの回答を設定することで文脈を踏まえて回答できるようにしてくれる

7-4. temperature / top_p

回答のランダム性を設定します。

temperature (0〜2)

0: 毎回同じ回答を返す
2: よりランダムに回答を返す

top_p (0〜1)

0.1: 確率の高い上位 10%の候補から選択された回答を返す

7-5. n

応答ごとに生成する候補の数
指定した数分の応答を生成するので、トークンをより多く消費します

7-6. stream

設定すると、ChatGPT と同様に部分的な応答が送信されます。トークンは、使用可能になると data-only server-sent イベントとして送信され、ストリームは data: [DONE] メッセージで終了します

7-7. max_tokens

生成された回答に許可されるトークンの最大数
既定では、モデルが返すことができるトークンの数は (4096 - プロンプトトークン) になります

7-8. frequency_penalty

-2.0 から 2.0 の数値
値を正にすると、これまでのテキストに存在する頻度に基づいて新しいトークンにペナルティが課せられ、モデルが同じ行を逐語的に繰り返す可能性が低下

7-9. presence_penalty

-2.0 から 2.0 の数値
正の値を指定すると、これまでのテキストに出現するかどうかに基づいて新しいトークンにペナルティが課せられ、モデルが新しいトピックを扱う可能性が高まる

GitHubで編集を提案

Discussion

MASA 6ヶ月前

はじめまして、MASAと申します。
非常に分かりやすく有益な情報を掲載いただきありがとうございます！
非エンジニアの私でもマニュアル通りに設定を進めることができて感謝です。
最後の「6-4. openai アプリの送信検証」において、画像のようなエラーが表示されて返答が返ってこないのですが、もし可能でしたら原因を教えていただけませんでしょうか、、？

鉄兵 5ヶ月前

返信が遅くなり申し訳ありません。
ちょっと見たことがないエラーなので、もう少し情報を頂きたいです。
「5-7. openai へのメッセージ送信検証」で「HTTP」アイコンの「1」をクリックした時のキャプチャーをいただくことは可能でしょうか？

鉄兵 5ヶ月前

もしくは「LINE」アイコン（右側）が添付する画像になっているかの確認をお願いします。

alpaca 6ヶ月前

同じエラーが出ました。マッピングをしていないことと関係があるのでしょうか？何かわかればぜひ知りたいです。

鉄兵 3ヶ月前

返信が遅くなり申し訳ありません。
お手数ですが、画面キャプチャーなどを貼っていただけると何かしらサポートできるかもです。

ナガイ 5ヶ月前に更新

初めまして、ナガイと申します。
記事の掲載ありがとうございます！

是非一度試してみたいと進めさせていただいたのですが、
Send a Reply Messageの際、下記エラーが発生しております。
お手数ですが、何か原因として想定されることがありましたらご教示いただけますと幸いです。

鉄兵 3ヶ月前

返信が遅くなり申し訳ありません。
「reply token」がおかしいというエラーメッセージなので、そのあたりを見ると良いかもです。

みやちゃん 4ヶ月前

質問お願いします。
マニュアルの5－7で躓いています。

写真のようなエラーが出ます。

対象方はどの様にすればいいのでしょうか。

Takuya 3ヶ月前

OpenAIのAPIキーの設定が間違っていそうです。キーに{}は不要です。

鉄兵 3ヶ月前

わかりにくくてすいません。。。
「{}」なしでキーの入力をお願いします

kazu 3ヶ月前

すみません。質問させてください。
こちらの記事を参考にさせていただきながら自社オリジナルのチャットBOTを作成しようと思っています。
設定までは問題なくできて、自社の情報を学習させようと思い、情報を入れていたのですが情報量が膨大でトークン数が足りないためエラーになってしまいます。
外部のファイルを読み込ませるなど、膨大な情報から回答をさせる方法は無いでしょうか？
回答をいただけるととても嬉しいです。よろしくお願いします。

鉄兵 3ヶ月前

この辺の話になるかと思いますが、やったことがないので・・・

muro 3ヶ月前に更新

はじめまして、muroと申します！
非常に興味深く、有益な情報ありがとうございます！

6-3　「Send a Reply Message」の設定
において、{{2.data.choices[].message.content}}と入力しても、画像のようになってしまいます。
このまま6-4の送信検証を行うとエラーになってしまいました。

可能であれば、原因など教えていただきたいです。

1. OpenAI の設定

1-1. アカウント作成

1-2. ログイン

1-3. 「API Keys」画面に遷移

1-4. 「Create new secret key」ダイアログを表示

1-5. secret key の発行

1-6. 「secret key」をコピー

2. LINE Messaging API の設定

2-1. LINE Business ID の作成

2-2. LINE Developers ID ログイン画面を開く

2-3. ログイン

2-4. 「新規プロバイダー作成」ダイアログを表示

2-5. 新規プロバイダーを作成

2-6. 新規チャネル作成画面を開く

2-7. 新規チャネルを作成

2-8. チャネル作成完了

2-9. 友達追加

2-10. 「応答設定」画面を開く

2-11. 「応答設定」

2-12. 「チャネルアクセストークン」の発行

2-13. 「チャネルアクセストークン」のコピー

3. make の設定

3-1. make アカウントの作成

3-2. make にログイン

3-3. scenario の作成

3-4. LINE application の追加

3-5. 「Watch Events」 の追加

3-6. 「Webhook」 の追加

3-7. 「Webhook」 の作成

3-8. 「connection」 の作成

3-9. 「webhook」 の作成

3-10. 「Webhook address」のコピー

3-11. 「make」を一時保存

4. LINE から make の連携設定

4-1. Webhook 設定

4-2. Webhook 検証

4-3. LINE よりメッセージ送信

5. make から openai の連携設定

5-1. module 追加

5-2. HTTP モジュール選択

5-3. Make a request モジュール選択

5-4. HTTP モジュールの設定（その 1）

5-5. HTTP モジュールの設定（その 2）

5-6. HTTP モジュールの設定（その 3）

5-7. openai へのメッセージ送信検証

6. make から LINE の連携設定

6-1. module 追加

6-2. 「LINE > Send a Reply Message」の選択

6-3. 「Send a Reply Message」の設定

6-4. openai アプリの送信検証

7. openai API の各種パラメータについて

7-1. 概要

7-2. model

7-3. messages

7-4. temperature / top_p

temperature (0〜2)

top_p (0〜1)

7-5. n

7-6. stream

7-7. max_tokens

7-8. frequency_penalty

7-9. presence_penalty

Discussion

3-5. 「Watch Events」の追加

3-6. 「Webhook」の追加

3-7. 「Webhook」の作成

3-8. 「connection」の作成

3-9. 「webhook」の作成