ノーコードで猫画像を取得するLINEのチャットボットを作る



## 1. 作るもの

猫画像を取得するLINEのチャットボットを作ります。

<img src="https://i.gyazo.com/f1a0ae19b074709838322936e02b6eed.jpg" width="60%">

<br>

## 2． 準備事項

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

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

LINE Developers サイトを開き、「コンソールにログイン」
→ https://developers.line.biz/ja/

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

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

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

<font color="RED">　なおこれ以降の登録については１年前の情報なので、画面や手順が違う場合あります。
（私はすでに登録済みで再現できないため）</font>

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


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

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

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

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


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

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

<font color="RED">なおこれ以降の登録については１年前の情報なので、画面や手順が違う場合あります。
（私はすでに登録済みで再現できないため）</font>

メールが届くので 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)


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

<br>

## 3. 開発

開発に入ります。

### 3-1. LINE　Developers

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

LINE Developers サイトを開き、「コンソールにログイン」
→ https://developers.line.biz/ja/

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

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

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

新規プロバイダーを作成
![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 from Gyazo](https://i.gyazo.com/e41366314b5796ddba23180d9761f929.png)](https://gyazo.com/e41366314b5796ddba23180d9761f929)

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

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

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

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

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

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

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


<br>

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

Messaging API 設定

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

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

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

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

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

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

<br>

### 3-2.Make

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

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

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

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

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

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

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

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


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

1.　 検索バーで「Line」と入力
2. 「Watch Events」をクリック
[![Image from Gyazo](https://i.gyazo.com/78246b645e7758b981904e551ee6d121.png)](https://gyazo.com/78246b645e7758b981904e551ee6d121)

こんな画面に
「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 old data」をクリック
[![Image from Gyazo](https://i.gyazo.com/967bc7c21a2a29ee79f116c59c2afd53.png)](https://gyazo.com/967bc7c21a2a29ee79f116c59c2afd53)

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

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


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

オペレーションの数は下のように各円に数字で表示されます。
今回の以下のケース（LINEにつぶやいて、APIリクエストをした結果を応える）では　3オペレーションです。
つまり、月間333回までなら無料です。
[![Image from Gyazo](https://i.gyazo.com/b8080b0e14008d08f96fbc5f8793ad38.png)](https://gyazo.com/b8080b0e14008d08f96fbc5f8793ad38)

<br>

### 3-3. 猫画像API 連携

猫の画像のURLをランダムに返すというAPI「The CatAPI」を使います。

CatAPIについて詳しくはこちら
https://developers.thecatapi.com

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

Makeで左側のLINEの突起を右クリック
[![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)

HTTP　を選択
<img src="https://i.gyazo.com/b9fe9ecd715d505410a6ad3a74fb67d2.png" width="70%">


Make a Request を選択
<img src="https://i.gyazo.com/734c9cf76cc88aaaa4ed9d6e7e692462.png" width="70%">

以下入力
<img src="https://i.gyazo.com/da51871c094030cf15833ded5ca72766.png" width="70%">


URL： CatAPIのURL （https://api.thecatapi.com/v1/images/search）
Method: GET
Parse response: Yes

<br>
最後に「OK」
<br>

いったんsaveする
[![Image from Gyazo](https://i.gyazo.com/ec5c1a90f137f92121ef3f57babb58a7.png)](https://gyazo.com/ec5c1a90f137f92121ef3f57babb58a7)


右側の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)

以下のように設定
[![Image from Gyazo](https://i.gyazo.com/15858ebd70dac7c4b1c8481dd3a5a854.png)](https://gyazo.com/15858ebd70dac7c4b1c8481dd3a5a854)


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

これで、スマートフォンのLINEで呟いてください。
猫画像がランダムに帰ってきます。

<img src="https://i.gyazo.com/f1a0ae19b074709838322936e02b6eed.jpg" width="60%">




できました。



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

Makeからメールが来てるはずです。

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


<br>

以上です。