Node-REDを使ってノーコーディングでLINE botを作ってみよう!! (01_環境構築編)

#はじめに
Node-REDを使ってLINE botを作る記事は調べればでてきますが、最初から最後までノーコーディングで作成している記事はなかったのでここで解説していこうと思います。

データの内容からなるべく詳細に記載しようと思うので、必要な部分のみ参考にして下さい。

当該記事は環境構築のみになります。
以下目次のリンクより必要記事にアクセスして下さい。

#目次
[01_環境構築編](https://qiita.com/VulpeS404/items/da196c87541b6af9214c)
[02_基礎編～LINE bot作成におけるNode-REDのデータの流れ～](https://qiita.com/VulpeS404/items/ee9e719f37ae535571fd)
[03_Node-REDからbotユーザーにメッセージを送信しよう](https://qiita.com/VulpeS404/items/c2e0db947db1b4c6229c)
[04_オウム返しbotをつくろう](https://qiita.com/VulpeS404/items/640b075b0a9eaaad249f)
[05_LINEから受信したデータの詳細を見てみよう](https://qiita.com/VulpeS404/items/554119209a4469130b98)
[06_ユーザーから送られたメッセージを判定して返事を返そう](https://qiita.com/VulpeS404/items/308f599660a79d2c457e)
[07_Node-REDとCloudantDBを連携させよう](https://qiita.com/VulpeS404/items/0d73963177d5829bc5a9)
08_ユーザーとやりとりできるbotをつくろう
09_おすすめの〇〇を紹介するbotをつくろう
[99_各nodeの解説まとめ](https://qiita.com/VulpeS404/items/0ce3057451d18f4d87ec)

#1. 環境構築概要
今回はIBM Cloudで環境を作っていこうと思います。
そのため以下の作業が必要になります。

1. IBM Cloudのアカウント作成
2. IBM Cloud上にNode-REDプロジェクトの作成
3. LINE Developersアカウント作成・チャンネルの作成
4. Webhookを設定し、Node-REDとLINE botを紐づけ
5. 必要ノードのインストール
6. 2度目の起動方法

それぞれ細かくやっていこうと思います。

#1-1. IBM Cloudアカウント作成
まずは[IBM Cloud](https://www.ibm.com/jp-ja/cloud)にアクセスし、アカウント登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/c8722597-42fb-9984-bf2c-03ff4e5937f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/9f8995f7-7941-befa-7fab-6bde9524f5f0.png)

メールアドレスとパスワードをいれると、入力したメールアドレス宛に検証コードが届きます。
そのまま個人情報等入力し先に進んでください。

![スクリーンショット (1306).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/5e083ce3-53cc-873d-386c-0e605735f45d.png)

登録したらそのままログインしてください。

アカウントタイプは個人で大丈夫です。

クレジットカードを登録しなくてはいけませんが、基本量は無料になります。
(利用するコンテンツの料金体系等を確認してご利用下さい)
※クレジットカード登録画面で左上のIBM Cloudをクリックすると登録回避できます。
  (登録しないとNode-RED使えませんが)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/f630537d-fb68-78e0-af93-180c195b85d5.png)

#1-2. Node-REDプロジェクト作成
ログインしたらダッシュボード画面右上にある"リソースの作成"をクリックします。
![スクリーンショット (1307).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/2dec153f-e0df-c9d0-1953-f149285cf18f.png)


検索窓から"Node-RED App"を検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/b760c324-4871-6a18-2383-3e535e93af83.png)

作成タブに移動しアプリ名を入力します。
一番下の価格設定プランはLiteに設定しないとお金がかかる場合がありますのでご注意下さい。
必要事項を記載したら作成ボタンをクリックします。
ここで設定するリージョンは組織が設定されているリージョンを選択してください。
（後続の設定のリージョンと同一にする必要があるかも）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/48eeceef-5f8b-7d8c-8fe2-5325cb86976e.png)


しばらく待つとこの画面になります。
まずは真ん中にある"アプリをデプロイ"をしていきましょう。(デプロイボタンが有効になるのにも少し時間がかかります)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/7f8eedbd-b387-fe37-bf78-41a842bab09c.png)


その後の画面で以下を設定してください。
1．Cloud Foundryの選択(画像1)
2．IBM Cloud API鍵の新規(画像2)
3．リージョン・ホストの設定(画像3)

3については2で新規作成後自動で設定されます。
ここでエラーが出た場合は組織の作成等で不備があるので右の"組織を作成します。"より組織の設定を行ってください。
（組織を作成する場合はリージョンはリソース作成時に指定したリージョンで作成しとくと確実です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/6a63cfed-fcb6-2c80-3184-6cc01721bd1b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/d010075c-00f5-8cf1-e0e6-7980288a8b87.png)
![スクリーンショット (1309).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/1e791cb7-61d4-d765-82f4-b0561a0e7d4b.png)

設定完了後"次へ"を選択すると以下の画面に遷移します。
必要項目を入力したら"作成"ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/b15501c0-6ea7-bc4b-5b87-a70f93f7796b.png)





以下の画面になる。(画像1)
画面が画像2になるまで待ってください。
完了するまで時間がかかります。（15~20分程度）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/fe3751a0-0dd7-9195-1b11-e5113c2fddc0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/1aa9f143-ba75-8224-41a9-51cb4122a3cf.png)


アプリURLのリンクをクリックしましょう。
Nextを押してNode-REDアカウントを設定していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/4c8663c9-aae2-c7bd-8fc7-07f009cf2ed3.png)

ユーザー名とパスワードを設定しよう（設定せずに誰でもアクセスできるようにすることもできます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/e4af2e35-5232-4687-4076-38c9727b0c2e.png)

Next押してfinishを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/66b555cb-6a16-8bf0-32a2-0466d858d6e5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/29bbee24-bdec-4ec4-2352-8fd66f05ef3e.png)

少し待つと以下の画面が表示されるので"Go to your Node-RED flow editor"をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/c9f70f93-bc91-9738-dca5-e88065060390.png)

さっき設定したユーザー名とパスワードを入力するとNode-REDが起動しました。
ここまででIBM Cloud上にNode-REDの開発環境を構築することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/004048c2-b27f-fe05-164c-fee39daeec40.png)

#1-3. LINE Developersアカウント作成・チャンネルの作成
次にLINE Developersアカウントを登録しbotアカウントを作成していきます。
まずは[LINE Developers](https://developers.line.biz/ja/)にアクセスします。
右上のログインから自分のLINEアカウントでログインしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/562bd42c-feef-9034-b535-6e95e278e7dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/3db53886-bc99-38d0-6588-2557ff05e79d.png)

無事にログインすると以下の画面になります。
(言語表示が英語の場合右下から日本語に変更できます)
プロバイダーの作成をクリックしましょう。
![スクリーンショット (1310).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/21c56fb0-8453-81c3-ac77-dbcbe1971dd2.png)

プロバイダー名を入力し作成してください。
![スクリーンショット (1311).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/d8102e71-9adc-c754-a535-8b94b300edcb.png)

プロバイダーを作成したら、次はチャネルを作成します。
Messaging APIをクリックします。
![スクリーンショット (1312).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/bd20509b-4c0e-f4ee-b0b7-7f0dcf614915.png)

チャンネル名やアイコン等必要事項を設定しましょう。
下までいき、最後に利用規約同意にチェックをいれたら作成を押しましょう。
![ass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/6bc965ad-9bb5-db3a-3cdb-9a7c82cfd448.png)


以下のような画面になればbotアカウントの完成です。
"Messaging API設定"タブに移動すれば友達登録用のQRコードを確認できます。
![スクリーンショット (1313).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/dc40dcd9-61f2-b8e6-1b32-310ebb186613.png)

#1-4. Webhookを設定し、Node-REDとLINE botを紐づけ
次に1-3で作ったLINE botアカウントとNode-REDを紐づけしていこう。
Node-REDの画面に戻りURLを見てみると前半が以下のようになっている。

https://{{リソース名}}.mybluemix.net/～～

自分の場合は以下のようになります。
https://linebotqiitasample.mybluemix.net/～～

この.net/までのURLに任意の文字を入れ、Webhook用のURLを設定します。
https://{{リソース名}}.mybluemix.net/{{任意}}

今回はcallbackとするため
https://linebotqiitasample.mybluemix.net/callback
がWebhook URLとなります。

このWebhook URLをLINE botチャネル画面の"Messaging API設定"タブのWebhook設定に登録します。
その後、Webhookの利用を有効化してください。

![スクリーンショット (1314).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/f5bba3e8-0e43-382c-22d3-0cb2091f16b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/837b258d-ea47-77b7-8c77-8ab85b607367.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/88ab3823-f9ac-3d01-4c66-fda50c047557.png)

次にチャネルアクセストークンを発行します。
同じく"Messaging API設定"タブの一番下にチャネルアクセストークンの発行設定があります。
発行ボタンをクリックすれば発行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/8b716c8e-82b8-b478-2978-73442556413c.png)

Node-REDと連携する時に以下3点を利用します。
・webhook URL
・チャネルアクセストークン
・チャネルシークレット

チャネルシークレットは"チャネル基本設定"タブの真ん中あたりに記載されています。

最後に、後々面倒なのでその他LINE bot側の設定を編集しておきます。
"Messaging API設定"タブの応答メッセージ編集を開いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/8f178528-97b0-ac39-af7f-183d3c856350.png)

以下のように応答メッセージをオフに設定しておきます。
ここをオフにしないと、botにメッセージを送るごとにNode-REDで送るメッセージと別にここで設定されているメッセージも送信してしまうことになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/c97fa9f8-2b51-e343-3319-b958ddf5d725.png)

あいさつメッセージはbotを友達登録した時に送信するメッセージを設定できます。
botらしくするためにはここも編集必須なので覚えておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/33bbdefd-2285-5c86-db6a-1bad94fc5d82.png)




これでLINE botとNode-REDを連携する準備は整いました。

#1-5. 必要ノードのインストール
次にLINE bot用のノードをインストールする。
別のNode-REDでLINE botを作成する記事はNode-REDからLINE botへ情報送るために一部コーディングをしているものが多いですが、今回のテーマはノーコーディングなのでこの作業は必須です。

Node-REDの画面右上3本線をクリックし、"パレットの管理"へ進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/f2d5ac73-db26-995b-67e3-d9c78b079008.png)

"ノードを追加"タブに移動し、検索欄に"line-m"と入力すると、"node-red-contrib-line-messaging-api"が表示されます。
ノードを追加をクリックするとLINE Messaging API用のノードが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/b8f68ddd-2f9c-d30d-bfd1-88d6cfb6a5b9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/4393684f-7fde-ba5f-cd79-9bb42b3fdc99.png)
左側のパレットの一番下に行くとノードが追加されているのがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/2e2bdaff-d4ef-64b7-874d-69d917d74fde.png)

これでNode-REDからLINE botへ情報送るためのあれこれをコーディングせずに、ノードの設定だけでできるようになりました。

#1-6. 2度目の起動方法
最後に構築したNode-RED環境に2回目にアクセスするときはどういう手順を踏めば良いか解説します。

まずは[IBM Cloud](https://www.ibm.com/jp-ja/cloud)にログインします。
その後左上三本線のところをクリックし、リソースリストを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/356c5594-a366-58ab-c18d-307ff335e08a.png)

今回作ったリソース関連のものが色々なところにはいっていることが確認できます。
二度目にアクセスするときは"Apps"に記載されてるリソースをクリックしてください。
（諸事情により再度別名称でリソース作成しているので、前述で登録したリソース名称と異なります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/4c0d0e33-889a-a30f-30ee-f2b9a821e9e1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/0aaf6538-0424-f703-b5ec-c14dc8838b16.png)

あとは最初に起動した時と同様にアプリURLをクリックしてNode-REDを起動してください。
Node-RED起動後のURLについてショートカットを作成しておくとこの手順踏まなくて良いので楽です。

https://{{プロジェクト名}}.mybluemix.net/

これでも起動できます。

#おわりに
今回はIBM Cloudを活用したNode-REDの開発環境構築とLINE botアカウントの作成・Node-REDと連携まで解説しました。
次回の記事から具体的なNode-REDの話にはいっていきます。