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



## 1. まず最初に

### 1-1. 完成イメージ

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/0e616dbc-b803-dfdd-8f5e-2316572a8789.jpeg" width="50%">

<br>

### 1-2． 動作確認環境
- OS:  Windows10以上 または　masOS Catalina以上
- 推奨ブラウザ：Google Chrome 

<br>

## 2． 準備事項

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

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

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

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

[![Image from Gyazo](https://i.gyazo.com/65ac525b80c6ec0b80de80860bde202e.png)](https://gyazo.com/65ac525b80c6ec0b80de80860bde202e)

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

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

|![Image from Gyazo](https://i.gyazo.com/d8d0b076675ffcba8f1c108a1e808ba3.png)|
|:-:|

<br>
LINEアカウントでログイン

|![Image from Gyazo](https://i.gyazo.com/bab203c4363227653999f60df55bb982.png)|
|:-:|
<br>
メールアドレスまたはQRコードでログイン

QRコードログインの場合

|![Image from Gyazo](https://i.gyazo.com/abe8a5ba1c7b117812d801ed8ac66d69.png)|
|:-:|

<br>
こんな画面になる。

|![Image from Gyazo](https://i.gyazo.com/a4dfb0f7cd24f549b85fa8605d5e5c14.png)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/a2e49af725ad3f2160601cc65cb373bd.jpg)|
|:-:|


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

|![Image from Gyazo](https://i.gyazo.com/dd51693fef082033048a4d874d30bc9e.jpg)|
|:-:|

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

|![Image from Gyazo](https://i.gyazo.com/89a8a494f8e6044199dcb6f686c07a0a.png)|
|:-:|


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

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

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

「Get Started Free」をクリック
[![Image from Gyazo](https://i.gyazo.com/4a76f4cb2fd6bf94f4a65327ca90c3b7.png)](https://gyazo.com/4a76f4cb2fd6bf94f4a65327ca90c3b7)

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

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

[![Image from Gyazo](https://i.gyazo.com/6dc7ed6e60b41f2a3fd5905002ef37bb.png)](https://gyazo.com/6dc7ed6e60b41f2a3fd5905002ef37bb)

メールが届くので Verify email をクリック
[![Image from Gyazo](https://i.gyazo.com/7712affce875b1f8fa9941b9ce513340.png)](https://gyazo.com/7712affce875b1f8fa9941b9ce513340)

この画面に飛ぶので、Sign in
[![Image from Gyazo](https://i.gyazo.com/239ac7f3b42a25efad7878155556c4aa.png)](https://gyazo.com/239ac7f3b42a25efad7878155556c4aa)

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

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

[![Image from Gyazo](https://i.gyazo.com/428b9e0bfe33e10586736b103589d97b.png)](https://gyazo.com/428b9e0bfe33e10586736b103589d97b)

またここに飛んでくる。
Sign in をクリック
[![Image from Gyazo](https://i.gyazo.com/239ac7f3b42a25efad7878155556c4aa.png)](https://gyazo.com/239ac7f3b42a25efad7878155556c4aa)



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

[![Image from Gyazo](https://i.gyazo.com/d51ab304125e9965dc9355d5d00a6fac.png)](https://gyazo.com/d51ab304125e9965dc9355d5d00a6fac)

この画面になったらOK
[![Image from Gyazo](https://i.gyazo.com/ee9f8d2732fa44a8a34ed0d7d45cd18a.png)](https://gyazo.com/ee9f8d2732fa44a8a34ed0d7d45cd18a)







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

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

[Sign up]をクリック
[![Image from Gyazo](https://i.gyazo.com/07df88f8950d1897a8cece79bb808830.png)](https://gyazo.com/07df88f8950d1897a8cece79bb808830)

メールアドレスを入力して「Continue」
[![Image from Gyazo](https://i.gyazo.com/cc8135c857c8b2d3d722f590e314116d.png)](https://gyazo.com/cc8135c857c8b2d3d722f590e314116d)

パスワード入力
[![Image from Gyazo](https://i.gyazo.com/68dc6903c77fb51e275d5136429148ce.png)](https://gyazo.com/68dc6903c77fb51e275d5136429148ce)

登録したメールアドレスに確認のメールが送られる。
[![Image from Gyazo](https://i.gyazo.com/01bbb18e78198cc0649ea3212bee3d66.png)](https://gyazo.com/01bbb18e78198cc0649ea3212bee3d66)

そのメールを開き、
「Verify email address」をクリック
[![Image from Gyazo](https://i.gyazo.com/f84f48023f0decdb755c03b9d6e94ff1.png)](https://gyazo.com/f84f48023f0decdb755c03b9d6e94ff1)

名前を入力
[![Image from Gyazo](https://i.gyazo.com/c2acda264f96f80ebd47ca654d7f63c6.png)](https://gyazo.com/c2acda264f96f80ebd47ca654d7f63c6)

携帯番号を入力
[![Image from Gyazo](https://i.gyazo.com/67da5733c0dee39a846764e424ecbb87.png)](https://gyazo.com/67da5733c0dee39a846764e424ecbb87)

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

携帯に届いた認証コードを入力
[![Image from Gyazo](https://i.gyazo.com/4b971b427b87dbd3d2f1f40900ec6068.png)](https://gyazo.com/4b971b427b87dbd3d2f1f40900ec6068)

個人利用をクリック
[![Image from Gyazo](https://i.gyazo.com/bf506a495f07707cc7c73cbaef2079e4.png)](https://gyazo.com/bf506a495f07707cc7c73cbaef2079e4)

こんな画面になったらOK
[![Image from Gyazo](https://i.gyazo.com/7397ec40049aea1305e7d0d4556cdfe8.png)](https://gyazo.com/7397ec40049aea1305e7d0d4556cdfe8)


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

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

OpenAIの文章生成のAPIは、入力文字とAI生成文字の量に応じた料金体系です。
今回はこちらの赤線で囲んだ Davinci を使います。
[![Image from Gyazo](https://i.gyazo.com/0b2a68eddaf72c35a97936e4235bf31b.png)](https://gyazo.com/0b2a68eddaf72c35a97936e4235bf31b)

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

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

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

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


<br>
準備事項は以上です。



<br>


## 3. 開発

開発に入ります。

### 3-1. LINE　Developers

#### 3-1-1. 初期設定
LINE Developersを開き、ログインします。
→ https://developers.line.biz/ja/

[![Image from Gyazo](https://i.gyazo.com/a16d92cc3d6c42a290c7cd695ce797fe.jpg)](https://gyazo.com/a16d92cc3d6c42a290c7cd695ce797fe)

LINEアカウントでログイン
[![Image from Gyazo](https://i.gyazo.com/2e84068fbb8888b2c01c99085215ea6c.png)](https://gyazo.com/2e84068fbb8888b2c01c99085215ea6c)

新規プロバイダーを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/af5d048e-9267-308a-30ad-3227c19b1ab8.png)

※すでにアカウントを持ってる方はこの画面
[![Image from Gyazo](https://i.gyazo.com/7c655f0e965c425ccbfc8704561f0b96.png)](https://gyazo.com/7c655f0e965c425ccbfc8704561f0b96)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/326356b3-7be3-bf40-6c82-9484249d9125.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/f785604e-1119-915a-db8c-48ddea4ea534.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/93d7fb4b-8667-9194-669f-28fae1b26d32.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/67798617-f48a-b58b-6408-47c1c68a262a.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/e81c48e9-ec73-c60c-f1ea-de0d9c5385b7.png)

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

[![Image from Gyazo](https://i.gyazo.com/3b738ad7103e754a4893af418061a328.png)](https://gyazo.com/3b738ad7103e754a4893af418061a328)



<br>

#### 3-1-2. Messaging APIの設定

Messaging API 設定

[![Image from Gyazo](https://i.gyazo.com/b1772966495b6cd028f43f6231e3dcbf.png)](https://gyazo.com/b1772966495b6cd028f43f6231e3dcbf)

QRコードがでてきます。
[![Image from Gyazo](https://i.gyazo.com/39811a358d2f4480d48c64e3655bcb43.png)](https://gyazo.com/39811a358d2f4480d48c64e3655bcb43)

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/5af93702-fce3-2323-4292-bc0b31793a59.jpeg" width="50%">

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

<br>

### 3-2.Make

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

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

#### 3-2-1. 初期設定

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

Sign in
[![Image from Gyazo](https://i.gyazo.com/050a54f39cb73fbc74b872da505d1cde.png)](https://gyazo.com/050a54f39cb73fbc74b872da505d1cde)

この画面がでれば、 Make platform
[![Image from Gyazo](https://i.gyazo.com/547ee2b375f1b05d44355dd1d2de3fcf.png)](https://gyazo.com/547ee2b375f1b05d44355dd1d2de3fcf)

Ｅmail とパスワードを入力して、Sign in
[![Image from Gyazo](https://i.gyazo.com/17df462b55d58dbc1441c941e036310d.png)](https://gyazo.com/17df462b55d58dbc1441c941e036310d)

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

[![Image from Gyazo](https://i.gyazo.com/22149b93ce875d041268dd4110081427.png)](https://gyazo.com/22149b93ce875d041268dd4110081427)


名前を変更（しなくても可）
[![Image from Gyazo](https://i.gyazo.com/c389e8ce2ab6cef280f494c27fc626df.png)](https://gyazo.com/c389e8ce2ab6cef280f494c27fc626df)


#### 3-2-2. LINE受信設定

真ん中の「＋」をクリック
[![Image from Gyazo](https://i.gyazo.com/cefabdc433d7b43ed697bedca026b0df.png)](https://gyazo.com/cefabdc433d7b43ed697bedca026b0df)


「LINE」を選ぶ
[![Image from Gyazo](https://i.gyazo.com/7e71ef48799773434a592bc79c193014.png)](https://gyazo.com/7e71ef48799773434a592bc79c193014)

「Watch Events」
[![Image from Gyazo](https://i.gyazo.com/5120ea7a1a419169f22a7d68be48559d.png)](https://gyazo.com/5120ea7a1a419169f22a7d68be48559d)

こんな画面に
「Add」をクリック
[![Image from Gyazo](https://i.gyazo.com/23788987100c6f751881450ee3594163.jpg)](https://gyazo.com/23788987100c6f751881450ee3594163)

「Add]をクリック
[![Image from Gyazo](https://i.gyazo.com/d62fa8a2eb19cddc89255435ae95c7e7.png)](https://gyazo.com/d62fa8a2eb19cddc89255435ae95c7e7)


こんな画面になる
[![Image from Gyazo](https://i.gyazo.com/a652cb16cb39bd9a44528596cbdb1139.png)](https://gyazo.com/a652cb16cb39bd9a44528596cbdb1139)


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

QRコードのあるページの一番下の
「チャネルアクセストークン」＞発行
[![Image from Gyazo](https://i.gyazo.com/827d4ffae92714bf4c11b8842da3288f.png)](https://gyazo.com/827d4ffae92714bf4c11b8842da3288f)

チャネルアクセトークンをコピー
[![Image from Gyazo](https://i.gyazo.com/b81b6f8efb24b8ddb8cec378d8090da4.png)](https://gyazo.com/b81b6f8efb24b8ddb8cec378d8090da4)


Makeに戻って、ここに張り付ける
[![Image from Gyazo](https://i.gyazo.com/000dda855813f92294e2eef6c25e34ba.png)](https://gyazo.com/000dda855813f92294e2eef6c25e34ba)

Save
[![Image from Gyazo](https://i.gyazo.com/56a5f2459f90110471d3e26db1d9f7fa.png)](https://gyazo.com/56a5f2459f90110471d3e26db1d9f7fa)

「Copy sddress to clipboard」 を 　クリックして「OK]
[![Image from Gyazo](https://i.gyazo.com/1dbbbc3a8a14990621ab34ccf0b15678.png)](https://gyazo.com/1dbbbc3a8a14990621ab34ccf0b15678)


いったん　Save
[![Image from Gyazo](https://i.gyazo.com/12aaf5a654d1a0dcb4745b91d518dd8c.png)](https://gyazo.com/12aaf5a654d1a0dcb4745b91d518dd8c)



また、LINE Developersに戻り
WebhookURL > 編集
[![Image from Gyazo](https://i.gyazo.com/8cdccedf6f02484529f61d2e3fd82e5d.png)](https://gyazo.com/8cdccedf6f02484529f61d2e3fd82e5d)

ここに先ほどのURLをペーストし、更新ボタン
[![Image from Gyazo](https://i.gyazo.com/d7857068bdb0a79ef687654fa741a24f.png)](https://gyazo.com/d7857068bdb0a79ef687654fa741a24f)

「検証」ボタン
[![Image from Gyazo](https://i.gyazo.com/69ba8ceae3f5b64feaf4fb03f6f802fb.png)](https://gyazo.com/69ba8ceae3f5b64feaf4fb03f6f802fb)

「成功」
[![Image from Gyazo](https://i.gyazo.com/22925df77ae1f56db9c6b10a81860c7e.png)](https://gyazo.com/22925df77ae1f56db9c6b10a81860c7e)

Webhook の利用をオン（緑色）
[![Image from Gyazo](https://i.gyazo.com/c0257518dd7ac700203ba91ed5ce2cd9.png)](https://gyazo.com/c0257518dd7ac700203ba91ed5ce2cd9)

その下の応答メッセージの「編集」をクリック
[![Image from Gyazo](https://i.gyazo.com/08dc3575471b102aaabb295f674f512a.png)](https://gyazo.com/08dc3575471b102aaabb295f674f512a)

別タブが開き、応答メッセージをオフにする。このまま閉じてOK。
[![Image from Gyazo](https://i.gyazo.com/9b51451de56c5c2dd95937477c350837.png)](https://gyazo.com/9b51451de56c5c2dd95937477c350837)


#### 3-2-3. LINE出力設定

ふたたびMake

以下画像の部分をマウスオーバーすると
[![Image from Gyazo](https://i.gyazo.com/b154e1d51bafb5d178853bda7b8e777c.png)](https://gyazo.com/b154e1d51bafb5d178853bda7b8e777c)

Add another module が現れる
[![Image from Gyazo](https://i.gyazo.com/2c94479bc9cd5a24974c36b9770ea3a2.png)](https://gyazo.com/2c94479bc9cd5a24974c36b9770ea3a2)

クリックすると、
もう１つまるが現れ、
「Add another module」をクリック
[![Image from Gyazo](https://i.gyazo.com/df743afffd33df541472fa286154b143.png)](https://gyazo.com/df743afffd33df541472fa286154b143)

LINEをクリック
[![Image from Gyazo](https://i.gyazo.com/cc72e021bac53a0db5a157bbe258b43c.png)](https://gyazo.com/cc72e021bac53a0db5a157bbe258b43c)

Send a Reply Message
[![Image from Gyazo](https://i.gyazo.com/b005571982a6762ed923d88c605d2cd6.png)](https://gyazo.com/b005571982a6762ed923d88c605d2cd6)


さっき作ったConnectionを選ぶ。
<img src="https://i.gyazo.com/74fc09f6b8d37c99b238883d6c73b953.png" width="70%">

Reply Token　の入力枠を左クリックすると
[![Image from Gyazo](https://i.gyazo.com/e3d62769d1f5d3e123f896781d1cc2f4.png)](https://gyazo.com/e3d62769d1f5d3e123f896781d1cc2f4)

Events[] の左横の三角形をクリック
[![Image from Gyazo](https://i.gyazo.com/f637d3fe4a6f4c83731bab02f241b0a3.png)](https://gyazo.com/f637d3fe4a6f4c83731bab02f241b0a3)

Reply Tokenをクリック
[![Image from Gyazo](https://i.gyazo.com/b72e522242960993362d96660671673f.png)](https://gyazo.com/b72e522242960993362d96660671673f)

Events、 Reply Token　が反映
[![Image from Gyazo](https://i.gyazo.com/8ffe16f5b9d91568ccf6bca5b28d878f.png)](https://gyazo.com/8ffe16f5b9d91568ccf6bca5b28d878f)

Add Item の左横の「＋」をクリック
[![Image from Gyazo](https://i.gyazo.com/ab714eee696d6fd34db28064b52d1c53.png)](https://gyazo.com/ab714eee696d6fd34db28064b52d1c53)

以下の入力欄を左クリックすると
[![Image from Gyazo](https://i.gyazo.com/cbe431c11279218838ee3c1b01db0de0.png)](https://gyazo.com/cbe431c11279218838ee3c1b01db0de0)

Messageの左横の三角形をクリック
[![Image from Gyazo](https://i.gyazo.com/4d51a52eab766ba5b8ff7f1b148b4098.png)](https://gyazo.com/4d51a52eab766ba5b8ff7f1b148b4098)

Text をクリック
[![Image from Gyazo](https://i.gyazo.com/2d5eaf5bdb414ccc005cae05950ec3ea.png)](https://gyazo.com/2d5eaf5bdb414ccc005cae05950ec3ea)


1.Events[  ];Message.Text が反映される。
[![Image from Gyazo](https://i.gyazo.com/4a5a70b4e10f8e6d87fd26c2e095a4ed.png)](https://gyazo.com/4a5a70b4e10f8e6d87fd26c2e095a4ed)

ＯＫボタン
[![Image from Gyazo](https://i.gyazo.com/db80f61975b848cd2837caa1e57a1c46.png)](https://gyazo.com/db80f61975b848cd2837caa1e57a1c46)

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

[![Image from Gyazo](https://i.gyazo.com/a94a7675f55a43926fa9c59333c9b61f.png)](https://gyazo.com/a94a7675f55a43926fa9c59333c9b61f)


こんなアラートがでたら、「Wait for new data」
[![Image from Gyazo](https://i.gyazo.com/a15d64290264685d7810f623be105602.png)](https://gyazo.com/a15d64290264685d7810f623be105602)


こんなアラートがでたら、「Listen for new」
[![Image from Gyazo](https://i.gyazo.com/3a41e197514d6e3b06cf5e0cd04bd197.jpg)](https://gyazo.com/3a41e197514d6e3b06cf5e0cd04bd197)


こんな画面になる。
[![Image from Gyazo](https://i.gyazo.com/6054a96fd7282c01aca4907b13718c2c.png)](https://gyazo.com/6054a96fd7282c01aca4907b13718c2c)


では、LINEボットになんでもいいので打ち込んでください
おうむ返しができました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/a7c81b8d-9d91-c5f2-60b3-c9b3d0afcacf.jpeg" width="50%">






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

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

まず、「Run once」 の下の 今OFF ってなているところをクリック
[![Image from Gyazo](https://i.gyazo.com/c4cc50fbe928d013eba3e1b76c5f1a65.png)](https://gyazo.com/c4cc50fbe928d013eba3e1b76c5f1a65)

こんなメッセージがでる。
「delete queue」をクリック
[![Image from Gyazo](https://i.gyazo.com/90a775739fb008dc6ea7328a659f3069.png)](https://gyazo.com/90a775739fb008dc6ea7328a659f3069)

本当に消してもいいのか？　とアラート出ますが、OKを押す。
[![Image from Gyazo](https://i.gyazo.com/77583d484eb20116c544a11ba5167cd7.png)](https://gyazo.com/77583d484eb20116c544a11ba5167cd7)


「Run once」の下のスイッチが「ON」になる。
これで、ずっとチャットボットが使えるようになりました。
[![Image from Gyazo](https://i.gyazo.com/4fb524850850efa0fd762bcb0d79d17c.png)](https://gyazo.com/4fb524850850efa0fd762bcb0d79d17c)

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

オペレーションの数は下のように各円に数字で表示されます。
以下のケース（LINEにつぶやいて、AIがそれに応える）では　６オペレーションです。
つまり、月間１６６回までなら無料です。
[![Image from Gyazo](https://i.gyazo.com/01ea88732468d361c616fd73b2c0c7e7.png)](https://gyazo.com/01ea88732468d361c616fd73b2c0c7e7)

<br>

### 3-3. OpenAI 連携

#### 3-3-1. APIキー入手
OpenAIのページへ
https://openai.com/api/

[Get Started]
[![Image from Gyazo](https://i.gyazo.com/6b2bc6c20e7467e0b392f6138076bcd5.png)](https://gyazo.com/6b2bc6c20e7467e0b392f6138076bcd5)

"Verify you are human"と表示されたら、ボタンをクリックします。
<img src="https://i.gyazo.com/62aa216cf79e091a80983bddb2f1d0b1.png" width="50%">


Log in
<img src="https://i.gyazo.com/c03a36c1c2c9abba34d5079a2c8225d2.png" width="50%">


メールアドレスをいれて、[Continue]
<img src="https://i.gyazo.com/7f826f448fbacd6fccf20d5701e1a21b.png" width="50%">


パスワードをいれて、[Continue]
<img src="https://i.gyazo.com/ba52b5a2cbe34935bc62f8e24001f4fb.png" width="50%">


こんな画面になる。
右上の「personal」をクリック
[![Image from Gyazo](https://i.gyazo.com/659725cd230ad8eb9592170400fdd20d.png)](https://gyazo.com/659725cd230ad8eb9592170400fdd20d)

「View API keys」をクリック
[![Image from Gyazo](https://i.gyazo.com/791759527f5cbe754908d1843858443a.png)](https://gyazo.com/791759527f5cbe754908d1843858443a)

「＋ Create new secret key」をクリック
[![Image from Gyazo](https://i.gyazo.com/5a197c7e5f90e9fa09d760af46df7d63.png)](https://gyazo.com/5a197c7e5f90e9fa09d760af46df7d63)

APIキーが生成される。
下図の緑色のコピーボタンを押して、「OK」
[![Image from Gyazo](https://i.gyazo.com/fa767b8ec9332afeab213f55584ef127.png)](https://gyazo.com/fa767b8ec9332afeab213f55584ef127)


#### 3-3-2. Makeでの設定

Make に戻る。

突起を右クリック
[![Image from Gyazo](https://i.gyazo.com/eeb1252546e4a4c4d23cba40f8d00584.png)](https://gyazo.com/eeb1252546e4a4c4d23cba40f8d00584)

Add a module
[![Image from Gyazo](https://i.gyazo.com/75318e522b8953c7fa4964a5a59def36.png)](https://gyazo.com/75318e522b8953c7fa4964a5a59def36)

Add another module
[![Image from Gyazo](https://i.gyazo.com/60f38d558aa82c6dcfdd9c3f741780e7.png)](https://gyazo.com/60f38d558aa82c6dcfdd9c3f741780e7)

HTTP　を選択
[![Image from Gyazo](https://i.gyazo.com/d6fa0c842ac545b12ff7cfe6efc3a7c8.png)](https://gyazo.com/d6fa0c842ac545b12ff7cfe6efc3a7c8)

Make a Request を選択
[![Image from Gyazo](https://i.gyazo.com/ae5a4fe05f2f094b60907a15fe185c16.png)](https://gyazo.com/ae5a4fe05f2f094b60907a15fe185c16)

以下入力
[![Image from Gyazo](https://i.gyazo.com/f88965403c2977548464b401737834c6.png)](https://gyazo.com/f88965403c2977548464b401737834c6)

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
<br>
最後に「OK」
<br>
いったんsaveする
[![Image from Gyazo](https://i.gyazo.com/ec5c1a90f137f92121ef3f57babb58a7.png)](https://gyazo.com/ec5c1a90f137f92121ef3f57babb58a7)

ここでいったん「Run once」ボタンを押す。
[![Image from Gyazo](https://i.gyazo.com/ab680a0c276d71b819f3b96dcf999dc2.png)](https://gyazo.com/ab680a0c276d71b819f3b96dcf999dc2)

こんな状況になって
[![Image from Gyazo](https://i.gyazo.com/00014a4edda11e9488d8d48bfe35e413.png)](https://gyazo.com/00014a4edda11e9488d8d48bfe35e413)

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


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/7ab97efd-b30e-ab7b-9703-f4deb662343c.jpeg" width="50%">


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


右側のLINEをクリック
[![Image from Gyazo](https://i.gyazo.com/b57c7e838cc7571a69f8a33827af601b.png)](https://gyazo.com/b57c7e838cc7571a69f8a33827af601b)

こんな画面になる。
TEXT欄に「1.Events[]:Messsage.Text」と記入されてるのをDeleteキーなどを使って空欄にする。
[![Image from Gyazo](https://i.gyazo.com/a938da8304c63647d9de02651ca1e7ab.png)](https://gyazo.com/a938da8304c63647d9de02651ca1e7ab)

TEXT欄をクリックして現れたウィンドウの Data > choices[] > text をクリックする。
[![Image from Gyazo](https://i.gyazo.com/f71099b17b9e90dde2fc7f6e5f33c6f5.png)](https://gyazo.com/f71099b17b9e90dde2fc7f6e5f33c6f5)

すると、こうなるので、OK
[![Image from Gyazo](https://i.gyazo.com/a69fecf83fcef47e2f0ad2f5e9eb824d.png)](https://gyazo.com/a69fecf83fcef47e2f0ad2f5e9eb824d)

Saveする。
[![Image from Gyazo](https://i.gyazo.com/921a06ec8601aa6a3850b89afd5b3603.png)](https://gyazo.com/921a06ec8601aa6a3850b89afd5b3603)

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/4f88c93b-503f-b3f5-695c-6d4d4bba62b3.jpeg" width="60%">



できました。



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

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


<br>

以上です。