IBM Cloud上のNode-REDでLINE Botの作成

#はじめに
本記事は、IBM Cloud上のNode-REDとLINE Messaging APIを利用した、LINE Botの作成方法を記載しています。
※2021年8月時点での手順です(クラウドサービスのため変更されている可能性あり)

#前提
本記事の手順を進めるにあたり、下記の3つが前提条件です。

- LINEアカウントを持っていること
    - 通常のLINEを利用できるもの
    - もしLINEを使っていない場合は、アカウントの作成が必要
- IBM Cloudアカウントを持っていること
    - ライトアカウントでもPAYGアカウントでもどちらでも大丈夫
    - もしアカウントを持っていない場合は、[こちら](https://cloud.ibm.com/registration)からアカウント登録

- IBM Cloud上でNode-REDフローエディタの環境構築が済んでいること
    - もし環境構築が済んでいない場合は、[こちらの記事](https://qiita.com/RyogaTakao/items/337079e85d4e7304c142)を参考に環境構築

#準備手順
##LINE Messaging API
###LINE Developersにログイン
[こちら](https://developers.line.biz/ja/)からLINE Developersサイトを開きます。
LINE Developersサイトの右上の「ログイン」ボタン(下記画像の赤枠部分)をクリックします。
![LINEDevelopers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/568e9482-ed7b-2007-ab07-e5bfb6382e34.png)
「ログイン方法選択」画面に遷移します。
そして、「LINEアカウントでログイン」ボタン(下記画像の赤枠部分)をクリックします。
![LINEDevelopers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/250d121f-25c2-488d-7a1a-fdc669a84dc0.png)
LINEアカウントで設定しているメールアドレスとパスワードを入力するか、もしくはQRコードログインを使用してLINEアカウントでログインしてください。
![LINEDevelopersログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/0124bca8-03b7-6b8a-7c04-0480f2e1f560.png)

###LINE Messaging API channelの作成
Providersの横の「Create」ボタン(下記画像の赤枠部分)をクリックします。
![Provider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/0a7a6606-5a9e-b0e9-3bae-305d87485864.png)
「Provider name」を入力し、「Create」ボタン(下記画像の赤枠部分)をクリックします。
![CreateProvider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/993abf69-a95c-6af7-0dc6-0ac42180dccd.png)
「Channels」タブを選択します。
![Channels.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/35fbf72c-59c9-cd51-9894-0214ea3751ae.png)
「Create a Messaging API channel」(下記画像の赤枠部分)を選択します。
![CreateMessagingAPIChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/b6fcd9e5-404b-e245-f19c-f4ed979ec0f6.png)
下記画像の「Create a channel」ページに遷移し、次の必須項目を入力する。

- Channel name：チャンネル名
- Channel description：チャンネル概要
- Category：LINE Botの利用種類
- Subcategory：Categoryを細分化したもの

![CreateChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/58a35080-f403-0c49-4872-c5ff566f3760.png)
2つの利用規約を確認し、同意してチェックします。
そして、「Create」ボタン(下記画像の赤枠部分)をクリックします。
![ChannelCreate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/6fb314b6-76e5-432b-8329-3bfcc65617e4.png)
内容を確認し「OK」ボタン(下記画像の赤枠部分)をクリックします。
![CreateChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/698ed07a-8aa3-4b84-a301-2226c84d02a3.png)
内容を確認し「同意する」ボタン(下記画像の赤枠部分)をクリックします。
![CreateChannelAgree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/a8588f27-8681-f6fd-7cf4-0bf2ff81aeab.png)
「Basic setting」タブを選択し、次の項目を設定します。

- Channel Secret：再発行(後に使用するため、メモ帳にコピー)

![BasicSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/a183a34b-014c-9983-f404-64b1ae303c3a.png)
「Messaging API setting」タブを選択し、次の項目を設定します。

- QRコード：スマホで読み込んで友達登録
- Webhook URL：後ほどNode-REDで取得するURL(https://<"Node-REDのホスト名">.mybluemix.net/line)を設定
- Use webhook：オン
- Auto-reply messages：応答メッセージをオフ
- アクセストークン：後に使用するため、メモ帳にコピー
![MessagingAPISetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/c2d441d9-e6f8-6305-80bf-18ff6de4add5.png)

##Node-RED
###IBM Cloudにログイン
[ログイン画面](https://cloud.ibm.com/login)にIBMid(登録メールアドレス)とパスワードを入力し、IBM Cloudにログインします。
ログインすると、ダッシュボード(下記画像)が表示されます。
![IBMCloudログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/1648419f-129c-b376-537a-63e93f111b8b.png)

###Node-REDにLINE Bot SDKをセットアップ
「リソースの要約」カードの「Apps」(下記画像の赤枠部分)を選択します。
![apps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/570cd7a7-2830-7e27-25b1-5a8f9796450d.png)
作成したNode-REDのApps(下記画像の赤枠部分)を選択します。
![app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/572eae69-b4bc-ca69-711b-9e426ceff1eb.png)
作成したNode-REDのAppsの「アプリの詳細」画面から「デプロイメント自動化」カードの「名前」項目(下記画像の赤枠部分)を選択します。
![Node-REDApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/c2fd2cae-0a90-2498-444c-88d5d10eccc1.png)
「Eclipse Orion Web IDE」カードを選択します。
![Eclipse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/78896887-8c0d-7743-2ff4-76c260331b24.png)
「package.json」を開きます。
![package.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/478f21e8-659f-791e-afd3-57715ba2d645.png)
下記項目を追記します。
「dependencies」の中に以下を追加

```
"@line/bot-sdk": "*"
```

「bulemix-settings.js」を開きます。
![bluemix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/5f97cc80-3dbb-a9f1-d8af-7a1d0d1a5be4.png)
下記項目を追記します。
「functionGlobalContext」の中に以下を追加

```
linebot: require('@line/bot-sdk')
```

左のメニューバーからGitを選択し、「コミットメッセージ」を入力し、右上の「コミット」ボタンをクリックします。
![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/154be2a9-b528-6888-e786-30cc3a403792.png)
「アクティブ・ブランチ(master)」カードの「プッシュ」ボタンをクリックします。
![push.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/e85012c5-0973-67f0-ef70-ac25e0c5dde7.png)
「Delivery Pipeline」カードが「成功」になるまで待ちます。
「成功」になれば、Node-REDでLINE Bot SDKの利用が可能になります。
![Delivery.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/13c93050-9aea-644b-7692-2759568236e9.png)

###Node-REDエディタ
「リソースの要約」カードの「Cloud Foundryアプリ」(下記画像の赤枠部分)を選択します。
![Resource.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/c91512fa-a3c7-8d82-5d68-7b9bfa1e447a.png)
「リソース・リスト」から「Node-REDアプリ」(下記画像の赤枠部分)を選択します。
![ResourceList.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/3d6c70fb-7b07-c8de-f68d-b3b1d24bf855.png)
「アプリURLにアクセス」(下記画像の赤枠部分)をクリックします。
![NodeREDApp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/565cbb4c-2b8c-d3e3-a469-ffa9d29ea3ed.png)
Node-REDのトップ画面(下記画像)に遷移します。
![NodeRED.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/0bd42b02-d880-4560-21ab-9c06509ece8b.png)
「Go to your Node-RED flow editor」ボタン(下記画像の赤枠部分)をクリックします。
![NodeRED.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/c937e9d3-31e3-d811-18ad-6c4135f81647.png)
「ユーザ名」と「パスワード」を入力し、「ログイン」ボタン(下記画像の赤枠部分)をクリックします。
![NodeREDLogin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/371fd31a-ecd2-1b8d-83c1-b2b47ebbf405.png)
Node-REDフローエディタ(下記画像)が立ち上がります。
![Flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/66671206-b339-e49a-c1c3-543d8ba7d765.png)

###オウム返しBotの作成
ノード置き場から以下のノードを取り出し取り出し、下記の項目を作業エリアに配置・設定します。

- 「ネットワーク」エリアにある「http」ノード
    - POSTに設定
    - URL欄にWebページの表示用のアドレス (今回は "/line") を入力
    - 「完了」をクリック
- 「機能」エリアの「switch」ノード
    - 中身を以下のように設定し、「完了」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/a6b52167-f449-d807-0df6-b36923306f22.png)
- 下の分岐
    - 「機能」エリアにある「function」ノード
        - 中身を以下のように記載
            - [LINE Messaging API channelの作成](#line-messaging-api-channelの作成)で発行した「チャンネルシークレット」と「チャンネルアクセストークン」を```<YOUR_TOKEN>```と```<YOUR_SECRET>```に入力します。

```
const line = context.global.linebot;
const config = {
  channelAccessToken: '<YOUR_TOKEN>',
  channelSecret:  '<YOUR_SECRET>',
};
const client = new line.Client(config);
const event = msg.payload.events[0];
const received_msg = event.message.text;
var massage = { type: 'text', text: received_msg };
client.replyMessage(event.replyToken, massage);
return msg;
```

- 上下共通
    - 「ネットワーク」エリアにある「http response」ノード
そして、右上のデプロイをクリックします。
![flows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505689/325747a0-009a-9a87-24b6-9ecfa9021725.png)

これでオウム返しBotの作成が完了しました。
ラインのアプリからメッセージを送ると、送ったメッセージがそのまま返ってきます。

#参考書籍
[はじめてのNode-RED[ver.1.3.0対応版]](https://www.kohgakusha.co.jp/books/detail/978-4-7775-2150-0)