Node-REDを使ってノーコーディングでLINE botを作ってみよう!! (05_LINEから受信したデータの詳細を見てみよう)

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

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

当該記事はオウム返し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)

#5. LINEから受信したデータの詳細を見てみよう概要
前回までで"Node-REDからメッセージを送信する"・"Node-REDでメッセージを受け取る"という基本的な最初と最後のやり取りができました。
次はその間のデータ加工をしていこうと思います。
しかしデータを加工するためには加工対象のデータの中身を知る必要があります。
今回はLINE Messaging API経由で受信したデータの中身を見ていきましょう。

本記事は以下の順番で解説していこうと思います。
1．データの確認方法（debugノードの説明）
2．LINEから受信したデータのデータ構造
3．テキストデータにアクセスする
4．LINE Messaging API

#5-1. データの確認方法（debugノードの説明）
bot作る前に、まず初めにLINEから受信しているデータの中身について見ていきましょう。
[前回の記事](https://qiita.com/VulpeS404/items/640b075b0a9eaaad249f)ではそのまま送信するだけなのでデータの中身については気にしませんでした。
しかしデータの加工がはいってくるとそうはいきません。
前回作成したNode-REDにdebugノードを追加していきます。

###1. debugノード
debugノードはパレットの共通にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/e39c7122-34e2-a626-adb7-a472e67b07c3.png)

追加すると初期設定では"msg.payload"のデバッグになります。
今回はhttp inでmsg.payloadに入ってきた中身をみたいので設定はそのままです。
対象と出力先を設定することで、何をみたいのか・どこに結果を出すかを設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/6ef58ca2-31e3-693b-dd5f-0b7cc92a42f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/d9ae04f4-d0e0-997a-272f-362284fd268f.png)

###2. 実装
以下のようにhttp inからノードを繋げ、デプロイします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/5b52162c-0864-4f7b-1794-7221a9dedcdc.png)

今回の出力先であるデバッグウィンドウはデプロイボタン下の虫のようなマークをクリックすると見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/8ff70d88-2eab-4a37-4f5b-e375d480fe15.png)

###3. 確認
デプロイしたらbotにメッセージを送信します。
今回はテキストと送信してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/c4865164-b7aa-891c-8679-12581d93275c.png)

送信後デバッグウィンドウをみるとなにか表示されているのがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/57bb84f8-f236-79d3-e258-0d59c7b7a9b3.png)

#5-2. LINEから受信したデータのデータ構造
左の▶を開け中身を全て見てみると以下のようになります。
最終的に○○ : "××"のような形をしていると思います。
この○○は箱の名前で××が箱に入っている中身になります。
なにか中身を取り出す際に入っている箱を指定してあげるとその情報だけ取得することができます。
![スクリーンショット (1361).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/6d8e03a5-b5b0-3949-23f9-deafc0683090.png)

データ構造を整理してみると以下のようになります。
この構造を"."で繋げてあげることで下階層のデータに直接アクセスできます。
基本的にデータ形式がObjectですが、eventsの中身はarrayなので、events配下0は指定する時に間に.は必要なくevents[0]という記述になります。
今回botに送信した"テキスト"というメッセージが格納されている場所は以下になります。
msg.payload.events[0].message.text
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/6c93cf72-14ad-b8c1-1a45-de5244c72ce8.png)

#5-3. テキストデータにアクセスする
実際にbotにそうしたメッセージが格納されている箱にアクセスしてみましょう。
debugノードの対象をmsg.payload.events[0].message.textに変更し、デプロイします。(msg.は既に設定されています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/966cfe15-c163-f7c7-a7fa-650f67ce38f6.png)

今回は"データの確認"とbotに送信してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/020d72e4-119c-bde9-fad6-c05198a2ad43.png)

デバッグウィンドウを確認するとbotに送信したメッセージのみ取得できていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395385/934b1863-d314-6849-1055-723d1ecefed2.png)

#5-4. LINE Messageing API
こちらの[Messaging API](https://developers.line.biz/ja/docs/messaging-api/)にてMessaging APIの詳細を確認することができます。
例えばこちらの[Messaging APIリファレンス-メッセージタイプ](https://developers.line.biz/ja/reference/messaging-api/#text-message)を参照すると、それぞれの箱の詳細等記載されています。
またどの箱が必要で何を入れればよいか把握できればテキストのみでなく、画像や動画、スタンプの送信も可能になります。

#おわりに
今回はLINEから受信したデータの構造についての解説と公式LINE Messaging APIサイトの紹介を行いました。
次回は今回の内容を基に実際にデータを加工する工程を追加したbotを実装していきます。