ノーコードでOpenAIを使ったLINEボットを作ってみた

1. まず最初に

1-1. 完成イメージ

以下の画像のようなAIによる対話型のLINEボットを作りました。

最近話題のChatGPTと同じOpenAIのAIモデルを使ったLINEのチャットボットをノーコードで作ります。
ChatGPTより少し性能は低いですが、ChatGPTと同じ系統のAIモデルです。
※これを作成した当時（2月下旬）はまだChatGPTのAPIは公開されていませんでした。

1-2． 動作確認環境

• OS: Windows10以上 または　masOS Catalina以上
• 推奨ブラウザ：Google Chrome

2． 準備事項

以下の4点にご対応ください。

(1) チャットボットのアイコン画像

講座で作成するチャットボットに使うアイコン画像を用意して、デスクトップに保存してください。

ファイル形式：PNG、JPG、JPEG、GIF、BMP
ファイルサイズ：3 MB以内

(2) LINE Developers の登録（無料）

LINE Developers サイトを開き、ログインします。
→ https://developers.line.biz/ja/

LINEアカウントでログイン
メールアドレスまたはQRコードでログイン

QRコードログインの場合

こんな画面になる。

英語になってる人は、日本語に変えよう

必要情報を入力し、「アカウントを作成」

この画面がでたらOKです。

（3）　Makeのアカウント取得（無料プラン）

Makeとはノーコードツールの一種で、RPAのような業務自動化に適してきます。

こちらのリンクをクリック
https://www.make.com/en

「Get Started Free」をクリック

必要事項を入力し、Sign up for FREE をクリック

・Email
・Password
・Name
・Country
・Hosting Region （ＥUでもUSでもどっちでも可）
・2か所チェック

メールが届くので Verify email をクリック

この画面に飛ぶので、Sign in

簡単なアンケートに答えてください。

上から
職種、業種、会社の規模、
こうした自動化ツールを使ったことある？
自動化ツールを何に使いたい？

またここに飛んでくる。
Sign in をクリック

こんな画面になる。
ポップアップメッセージはバツを押して閉じる。

この画面になったらOK

(4) OpenAI 登録 （初めての方は18ドルまで無料）

OpenAIの登録ページへ
https://openai.com/api/

[Sign up]をクリック

メールアドレスを入力して「Continue」

パスワード入力

登録したメールアドレスに確認のメールが送られる。

そのメールを開き、
「Verify email address」をクリック

名前を入力

携帯番号を入力

国際電話は通常最初の0は不要だが0があっても大丈夫らしい　（私は0無しで通った）
（例）090-1234-5678 の場合、通常は「[phone]」　だが、本件は「[phone]」でも通るらしい

携帯に届いた認証コードを入力

個人利用をクリック

こんな画面になったらOK

（参考）結局どれだけ無料で使えるか

OpenAIの会員登録を行うと、その際に18ドル相当のクレジットが付与されます。
このクレジットは3ヶ月間有効で、OpenAIのAPI利用時に18ドル（約2300円）分のクレジットが充当されます。
18ドルを超えると使えなくなります。

使用状況はこちらで確認できます。
https://platform.openai.com/account/usage

OpenAIの文章生成のAPIは、入力文字とAI生成文字の量に応じた料金体系です。
今回はこちらの赤線で囲んだ Davinci を使います。

Davinciは、1000トークンで 0.02ドル（約2.6円）
つまり18ドル分といえば90万トークン分が無料ということになります。　
英単語１ワードで１トークン、日本語は、　ひろがながだいたい１トークン、漢字・記号が２トークンくらいです。

これだけではなんのこっちゃなので、トークンの量が計算できるサイトで調べました。
https://platform.openai.com/playground/p/

「走れメロス」全文で１４０００トークン（1万文字）
「吾輩は猫である」全文で50万トークン（35万文字）

つまり、無料枠は走れメロス６４個分、吾輩は猫である1.8個分なので、そう簡単には無料枠超えないので安心して使いましょう。
（無料枠超えても、有料会員登録しなければ、使えないだけ）

準備事項は以上です。

3. 開発

開発に入ります。

3-1. LINE　Developers

3-1-1. 初期設定

LINE Developersを開き、ログインします。
→ https://developers.line.biz/ja/

LINEアカウントでログイン

新規プロバイダーを作成

※すでにアカウントを持ってる方はこの画面

チャネルの種類：Messaging API
プロバイダー: さっき作ったやつ
会社・事業所の所在地：　入力
チャネルアイコン：　持参したアイコン画像を入れよう
チャネル名：　チャットボットの名前です。
チャネル説明：　チャットボットの説明
大業種：入力
小業種：入力
メールアドレス：入力
プライバシーポリシーURL ：今回は入力不要
サービス利用規約URL ：　今回は入力不要
・LINE公式アカウント利用規約 の内容に同意します
・LINE公式アカウントAPI利用規約 の内容に同意します
にチェックをいれて、
作成をクリック

チャットボットの設定ができました。

3-1-2. Messaging APIの設定

Messaging API 設定

QRコードがでてきます。

みなさんのブラウザに表示されているQRコードを読んでください。

おお、チャットボットができてますね。

LINE Developersのウィンドウはこのままにしておいてください。

3-2.Make

Makeとはノーコードツールの一種で、RPAのような業務自動化に適してきます。

例えば、受信メールに「プロジェクト」という文字があればスプレッドシートに自動的に書き出すとか、
SNSの投稿があったらLINEに通知するとか、
手動でやってることを自動化してくれます。

3-2-1. 初期設定

Makeを開きます。
https://www.make.com/en

Sign in

この画面がでれば、 Make platform

Ｅmail とパスワードを入力して、Sign in

こんな画面になるので、Create a new scenario

名前を変更（しなくても可）

3-2-2. LINE受信設定

真ん中の「＋」をクリック

「LINE」を選ぶ

「Watch Events」

こんな画面に
「Add」をクリック

「Add]をクリック

こんな画面になる

この状態で別ウィンドウのLINE Developersの画面に行く。

QRコードのあるページの一番下の
「チャネルアクセストークン」＞発行

チャネルアクセトークンをコピー

Makeに戻って、ここに張り付ける

Save

「Copy sddress to clipboard」 を 　クリックして「OK]

いったん　Save

また、LINE Developersに戻り
WebhookURL > 編集

ここに先ほどのURLをペーストし、更新ボタン

「検証」ボタン

「成功」

Webhook の利用をオン（緑色）

その下の応答メッセージの「編集」をクリック

別タブが開き、応答メッセージをオフにする。このまま閉じてOK。

3-2-3. LINE出力設定

ふたたびMake

以下画像の部分をマウスオーバーすると

Add another module が現れる

クリックすると、
もう１つまるが現れ、
「Add another module」をクリック

LINEをクリック

Send a Reply Message

さっき作ったConnectionを選ぶ。

Reply Token　の入力枠を左クリックすると

Events[] の左横の三角形をクリック

Reply Tokenをクリック

Events、 Reply Token　が反映

Add Item の左横の「＋」をクリック

以下の入力欄を左クリックすると

Messageの左横の三角形をクリック

Text をクリック

1.Events[ ];Message.Text が反映される。

ＯＫボタン

設定完了
「Run once」 で実際に動かす

こんなアラートがでたら、「Wait for new data」

こんなアラートがでたら、「Listen for new」

こんな画面になる。

では、LINEボットになんでもいいので打ち込んでください
おうむ返しができました。

3-2-4. ずっと動かすには

このままではRunを押した1回だけしか動かないので、ずっと動かすには次のとおり。

まず、「Run once」 の下の 今OFF ってなているところをクリック

こんなメッセージがでる。
「delete queue」をクリック

本当に消してもいいのか？　とアラート出ますが、OKを押す。

「Run once」の下のスイッチが「ON」になる。
これで、ずっとチャットボットが使えるようになりました。

なお。Makeには利用回数の制限があって、
なお、月間1,000オペレーションまでは無料 それ以上は有料になります。
（今回はクレジット登録してないので、1000オペレーション超えると止まります）

オペレーションの数は下のように各円に数字で表示されます。
以下のケース（LINEにつぶやいて、AIがそれに応える）では　６オペレーションです。
つまり、月間１６６回までなら無料です。

3-3. OpenAI 連携

3-3-1. APIキー入手

OpenAIのページへ
https://openai.com/api/

[Get Started]

"Verify you are human"と表示されたら、ボタンをクリックします。

Log in

メールアドレスをいれて、[Continue]

パスワードをいれて、[Continue]

こんな画面になる。
右上の「personal」をクリック

「View API keys」をクリック

「＋ Create new secret key」をクリック

APIキーが生成される。
下図の緑色のコピーボタンを押して、「OK」

3-3-2. Makeでの設定

Make に戻る。

突起を右クリック

Add a module

Add another module

HTTP　を選択

Make a Request を選択

以下入力

URL： https://api.openai.com/v1/completions
Method: POST

Headers > Item1
Name: Content-Type
Value: application/json

Headers > Item2
Name: Authorization
Value: Bearer ＋半角1文字あけて、OpenAIのAPIキー
（例）
Bearer sk-hAsDFASdO9YgaBj1vSRHP08T3BlbkFJqOi76d555SDG32uJvOAFSru

Request Content: 以下をコピペして入れる

{
  "model": "text-davinci-003",
  "prompt": "{{1.events[].message.text}}",
  "max_tokens": 4000
}

Parse response :Yes


最後に「OK」


いったんsaveする

ここでいったん「Run once」ボタンを押す。

こんな状況になって

自分のスマホのさっき作ったLINEボットになんでもいいからつぶやく。

なんかデータが通過したようなビジュアルが表現される。

右側のLINEをクリック

こんな画面になる。
TEXT欄に「1.Events[]:Messsage.Text」と記入されてるのをDeleteキーなどを使って空欄にする。

TEXT欄をクリックして現れたウィンドウの Data > choices[] > text をクリックする。

すると、こうなるので、OK

Saveする。

これで、スマートフォンのLINEで呟いてください。
AIが反応するはずです。

できました。

3-3-3. 動かないとき

Makeからメールが来てるはずです。
内容次第ですが、だいたいもう1回立ち上げるか、Run once の下の常時接続のスイッチがオフになっているので、オンにすれば直ります。

以上です。