IoT ハッカソン enebular - MotionBoard Cloud 設定手順

# はじめに
本コンテンツは、IoT ハッカソンで使用する技術ハンズオンの資料です。
環境は参加者が自由選択できますので、参考としてご活用ください。

## 概要

本記事の構成では enebularからMotionBoard Cloud へデータを直接転送する構成 を紹介します。

## 事前準備

運営よりテナントIDとパスワードを受け取ってください。
[MotionBoard Cloudのマニュアルページ](https://cloud.motionboard.jp/motionboard/manual/mbcloud/)から、
`MBC-1-1　使用前の準備をする`を参考にログインできる状態にしておいてください。

MotionBoard クラウドサービスログインページ: 
https://cloud.motionboard.jp/motionboard/

## 構成

温度センサーを使って、デバイスから温度データをMotionBoard Cloudへデータを転送し、ボードで可視化していきます。
以下に2種類のデバイスからHTTP(POST)を通じ、enebular → Motion Board Cloudの構成を示します。

![構成1.png](https://qiita-image-store.s3.amazonaws.com/0/281420/dd7870f3-8960-892c-ab32-4180b8cc1efa.png)

![構成3.png](https://qiita-image-store.s3.amazonaws.com/0/281420/eadab2c2-225d-0c71-f2c5-0b4795d3dcad.png)

## MotionBoard Cloud へデータを転送する構成

本章では、以下の順番で手順を示していきます。

1. [MotionBoard Cloudで温度データ可視化のボード作成](#1温度データ可視化のボード作成)  
↓
2. [デバイスのプログラム](#デバイスプログラム)  
↓
3. [enebularフロー作成](#enebularフロー作成)

の順番で説明していきます。

### 1.温度データ可視化のボード作成

本資料では、地図上にピンを表示して、そのポイントの温度をグラフに表示するボードを作成していきます。

#### 新規ボード作成

MotionBoard Cloudへログインします。
メニューから`スタートナビ`を選択します。
次に`新規作成`を選択してボードを作成していきます。

<img width="90%" alt="スタートナビ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4d13def7-7175-564d-fde2-a770e4e4400c.png" />

<img width="90%" alt="ボード新規作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/ccaf2b41-368e-3d5c-53fc-1afc9835a98d.png">

ボード新規作成のダイアログが表示されたら、名称を入力し`OK`を選択してください。
ここでは名称を`温度モニタ`とします。
<img width="90%" alt="新規作成ボードの編集" src="https://qiita-image-store.s3.amazonaws.com/0/281420/d8bbb2db-7844-94b1-d0e2-ba0624260779.png">

#### データソース作成

次にアイテムウィザートのウインドウが表示されるので、新しいデータソースを作成していきます。
アイテムウィザートが表示されたら、`+`記号を選択します。
<img width="924" alt="データソース作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/0b617220-ea87-a35f-1675-f155bf55eaa9.png">

システム設定が表示されるので、メニューから[`接続/認証`] - [`リアルタイム連携`]を選択してください。
<img width="877" alt="リアルタイム連携設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/d6236506-29fb-02d6-4bee-ba5acf3a2021.png">


システム設定のリアルタイム連携画面が表示されるので、`永続化先DB`タブを選択して、作成したテンプレートと保存先のDBを指定していきます。
左側のリスト一覧から、外部接続先名:`DataStorage` - タイプ:`Dr.Sum`を選択します。
真ん中にデータベース名一覧が表示されるので、`DataStorage`を選択します。
選択すると、右側の変更後の設定に以下設定がされていることを確認してください。

| 項目          | 設定値       |
|--------------|-------------|
| 外部接続先名   | DataStorage |
| データベース名 | DataStorage |

![永続化先DBを選択](https://qiita-image-store.s3.amazonaws.com/0/281420/598f2a2f-4beb-4048-560c-0c0bfdff9c72.png)

続いて、`リアルタイム`タブを選択肢、テンプレート選択右側にある`+`ボタンを選択してください。
テンプレートの新規作成ダイアログが表示されるので、テンプレート名を入力してください。
ここでは、`tmpr_template`としています。
なお、後ほどこの**テンプレート**名は<font color="red">enebularのノード設定で使用するため、控えておいてください。</font>
<img width="876" alt="新規テンプレートを作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/c3a8dd67-3905-6ea7-6c91-cd5fd3db9d65.png">

<img width="400" alt="テンプレート名ダイアログ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/9a1c1d3f-5a5f-4b6f-7337-75774c3c5bb2.png">

テンプレートを作成したら、以下項目の設定をしてください。

| 項目           | 設定              |
|---------------|-------------------|
| Web API       | 利用するにチェック   |
| 永続化         | 利用するにチェック   |
| 保存先テーブル名 | `tmpr_table`      |
| 実行ユーザー    | <各アカウントの名前> |

実行ユーザーは、`検索`ボタンを押下して右側のドロップダウンリストから選択します。
認証キーの`自動生成`ボタンを押下してください。
生成された**認証キー**は先程のテンプレート名同様<font color="red">enebularのノード設定で使用するため、控えておいてください。</font>

<img width="874" alt="リアルタイム連携設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/ca5a08e0-5452-4c9b-3df4-ea6f4bd55efa.png">

続いて`ステータス`タブを選択し、テーブルのステータスを作成します。
`新規作成`ボタンを選択して、ダイアログが表示されたら以下内容に従って、設定してください。
設定が完了したら`OK`を選択してダイアログを閉じます。

| 項目           | 設定      |
|---------------|-----------|
| ステータス名    | `tmpr_c`  |
| MB IoT Agent  | 未設定     |
| データ型       | 数値       |

<img width="873" alt="ステータス設定一覧" src="https://qiita-image-store.s3.amazonaws.com/0/281420/3e712bc9-8d1c-1c73-8d12-742873a1d589.png">

<img width="344" alt="温度値のステータス設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/584c88d7-6e84-1f98-22e5-663a10c87704.png">

設定が完了したら、`保存`を選択してテンプレートの作成を終了します。
<img width="874" alt="保存ボタンを選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/2ef6ee5c-c1e2-fcfb-f8c2-1d57ba4bfc69.png">

<img width="446" alt="テンプレート保存完了ダイアログ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/856b652d-10b5-0cf3-adb7-ddea1fb90bad.png">

最後にテンプレート作成・設定、永続化先DBの設定が完了したら、右上のバツボタンを選択して、リアルタイム連携の設定を完了します。

<img width="874" alt="右上のバツを押下してテンプレート編集終了" src="https://qiita-image-store.s3.amazonaws.com/0/281420/44bad796-5365-ac64-7cbd-d0d56163885a.png">

アイテムウィザート画面に戻ったら、データソースの一覧から作成したテーブル`tmpr_table`を選択します。
ツリーを展開して表示されなかった場合、接続先の右にある回転のアイコンを選択肢、更新してください。
テーブルを選択したら、`次へ`を選択します。
<img width="921" alt="データソースのテーブル選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/b978b1bd-3fe7-e702-c2fc-7c5089a09474.png">

アイテムウィザートの2つ目で、アイテムの種類を選択しますが、
まず先に画面のレイアウトを作成するため、ここでは`キャンセル`を選択しウィザードを終了します。
<img width="675" alt="ウィザード終了" src="https://qiita-image-store.s3.amazonaws.com/0/281420/3bb5ddbf-5aa9-d96d-92c6-75cf2424e67a.png">


#### レイアウト作成

ここまでの手順でアイテムのない空のボードが作成されました。
レイアウトの作成をしていきます。

ここでは、左右2つに50%-50%で分割し、左側のペインに`GEO`(地図)を右側のペインに`チャート`(折れ線グラフ)を表示していきます。
下に表示されている項目の一覧から、`レイアウト編集`のアイコンを選択肢画面レイアウトを編集していきます。
アイコンを選択したら、分割するページ左側にマウスカーソルを持っていき、表示されたアイコンをクリックします。

<img width="1113" alt="レイアウトのセパレータ設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/e8c0626f-9fef-7846-f2a1-98702e3e23cf.png">

分割されたら、左側に`GEO`を配置します。
<img width="1133" alt="102_board_layout_geo.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/0100d8a9-94ad-0fba-a394-2d37cfab1057.png">

#### GEO設定

`GEO`を配置するとGEO設定の画面が表示されるため、地図情報の画面を表示する設定をしていきます。

##### データソース設定

データソースの設定項目が固まっている位置の右側にある`新規作成`を選択します。
ダイアログが表示されるので、データソース名決めます。ここでは、`tmpr_ds`とします。
<img width="866" alt="データソース選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/5b0a66c2-4a7d-e482-5b08-feefb0db5e59.png">

<img width="395" alt="データソース名入力" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4b9ca804-0d6a-0229-3088-ca017ebd25eb.png">

データソースの設定をしていきます。
アイテムウィザードで作成した`tmpr_table`を選択して、`OK`を選択します。
<img width="922" alt="データソース選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/fd055867-3b62-c515-e4d1-938a154d5f6d.png">

データソースエディタでは、リアルタイムに更新させるため以下の順番で設定をしていきます。

1. ドリルアクションの機能OFF
2. リアルタイム分析を有効化
3. 見せるデータ項目を選択、設定

初めに、[ドリルアクションの機能](https://mbc-manual.motionboard.jp/motionboard/manual/mbcloud/p63543628/p63543922/p63544583/p63544585.html)と両立しないためOFFしていきます。

1. `ドリルアクション`を選択
2. ドリルダウンタブで`ドリルダウンしない`をチェック
3. ドリルスルータブで`ドリルスルーしない`をチェック
4. `OK`ボタンで設定終了

<img width="874" alt="114-1_122_drill_action_off.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/2b7722a1-f6f1-5f9b-0289-22179a1627df.png">

<img width="954" alt="ドリルダウンしない" src="https://qiita-image-store.s3.amazonaws.com/0/281420/c887d9b7-50fd-61a8-d919-09deb36dd858.png">

<img width="951" alt="ドリルスルーしない" src="https://qiita-image-store.s3.amazonaws.com/0/281420/162d9f69-76c1-6054-04b9-f3414d1fa4e2.png">

ドロップダウンリストで[`分析`] - [`リアルタイム分析`]を選択します。
表示されたリアルタイム分析ダイアログで、以下項目を設定します。データ更新間隔は任意ですが、ここでは5秒とします。
設定が完了したら`OK`ボタンを選択して設定を終了します。
「行列項目をリアルタイム分析用に変更します。...」と警告が表示されますが、`OK`を選択します。

| 項目              | 設定                 |
|------------------|----------------------|
| リアルタイム分析    | `有効にする`にチェック  |
| データ更新間隔(秒)  | 5                   |

<img width="898" alt="リアルタイム分析を選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/9040ced7-10ca-fd52-585c-11b535324463.png">

<img width="505" alt="リアルタイム分析を設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/6aaf59cf-02a3-a835-5943-a4a089cdc547.png">

各拠点(`ID`)ごとの温度データ('tmpr_c')を時系列(`DATETIME`)で表示するため、項目一覧から項目を以下のようにドラッグ&ドロップします。

- 列項目に`ID`
- 行項目に`DATETIME` (リアルタイム分析の対象項目で設定済み)
- 集計項目に`tmpr_c`

<img width="877" alt="項目一覧か項目を設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/dc164cce-c28d-d014-7132-85e134d28171.png">

集計項目の型と集計の方法を変更します。
集計項目のに設定した`tmpr_c`をマウスオーバーし、エンピツアイコンを選択します。
<img width="1042" alt="集計項目の型を変更" src="https://qiita-image-store.s3.amazonaws.com/0/281420/2e9c0aaa-9589-e3c7-f3ac-eb0fe4958e2e.png">

基本項目設定のダイアログが表示されるので、以下項目を設定し`OK`を選択します。

| 項目      | 設定   |
|-----------|-------|
| データ型   | 数値   |
| 集計方法   | 平均   |

<img width="524" alt="データ型と集計方法を設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/81c6cae1-9453-b97c-df2c-f63205eefa2b.png">

一通り設定が完了すると以下のような画面となります。
設定が完了したら`OK`を選択し、データソース設定を終了します。
<img width="877" alt="GEOデータソース設定完了" src="https://qiita-image-store.s3.amazonaws.com/0/281420/05667aa6-6aa4-23f3-f67b-fccf16c19ee4.png">

GEOの新規作成ダイアログに戻ったら、「利用データタイプ」で`明細データ`をチェックします。
次に「マッピングタイプ」に`緯度経度`チェックを入れます。

次に項目設定で、以下値を割り付けます。

| 項目名 |  種類   |
|-------|--------|
| ID    | 表示名  |
| LAT   | 緯度    |
| LON   | 経度    |

<img width="861" alt="Board.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/eb575efe-b1ee-8167-2e3f-58dec9307c4d.png">

<img width="323" alt="Board-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/87cbf274-4446-846f-14a4-4716808e1a63.png">

##### リアルタイム連携設定

次にリアルタイム連携を設定するため、`リアルタイム連携`タブを選択します。

<img width="864" alt="116_geo_config.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/0471ea1b-b6b7-0328-6bdf-7bb2129541dd.png">

設定画面が表示されたら、`「リアルタイムデータを重ねて表示する`にチェックを入れ、「テンプレート選択」で作成したテンプレート(ここでは`tmpr_template`)を選択します。

続いて、詳細の項目が有効になるため、以下設定をしていきます

| 項目                | 設定               |
|--------------------|-------------------|
| 適用方法             | 特定のステータスの値 |
| キーとなるステータス   | tmpr_c            |

色のリスト下側にある`追加`ボタンを選択
色を選択していきます。ここでは以下のように設定します。

| 項目      | 設定        |
|-----------|------------|
| 色        | 赤(#FF0000) |
| 最小      | 0           |
| 最大      | 100         |

設定が完了したら`OK`を選択します。

<img width="864" alt="リアルタイム連携を設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/88f9683f-4b5a-ce33-b35f-f7e1ed64a0fa.png">

#### チャート設定

レイアウト画面に戻ったら、右側に`チャート`を配置します。

<img width="1066" alt="チャートを配置" src="https://qiita-image-store.s3.amazonaws.com/0/281420/d1fad8b4-0615-6ebd-d3f3-0110cca76f05.png">

配置するとチャート新規作成の画面が表示されるので、作成済みの`tmpr_ds`が選択されていることを確認します。
下側のチャートのアイコン群から`折れ線`を選択します。
設定が終わったら`OK`を選択します。
<img width="676" alt="折れ線設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/6fde30ba-d73d-527d-2282-5a9edd5e375e.png">

#### ボード設定を保存

上記までの手順でレイアウトと各ボードのアイテムの設定が完了しました。
以下のような表示になるので、下側の`保存`アイコンを選択します。
確認のダイアログが表示されるので、`OK`を選択して、ボードの保存完了です。
<img width="1065" alt="レイアウト完了・保存" src="https://qiita-image-store.s3.amazonaws.com/0/281420/1f642f00-6481-536b-1878-c2bff572e580.png">

<img width="446" alt="ボード定義保存ダイアログ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/ade1373a-fb0d-9875-55e3-f79502ba46f1.png">

最後に、`編集を終了`アイコンを選択してボードの編集完了です。
<img width="1062" alt="ボード編集終了" src="https://qiita-image-store.s3.amazonaws.com/0/281420/f3c7014f-1cb4-36da-c386-99af5a95dcbf.png">

以上で、温度モニタ用ボード作成の作成が完了です。
次にデバイスからMotionBoard Cloudへデータを転送する箇所を作成していきます。

---

### enebularフロー作成

新しくenebularのフローを作成していきます。

#### フロー作成

- 作成したプロジェクトのASSETSから、`Flows`を選択します。
- Flowのリストから`+`ボタンを選択して、フローを作成していきます。
- ダイアログが表示されたら、最上段のname欄にフロー名を入力します。
  ここでは、"motionboard"としています。
  入力が終わったら、`Continue`ボタンを選択してください。
- 続いて、`Edit`ボタンを選択して、フローを編集していきます。

![フロー作成](https://qiita-image-store.s3.amazonaws.com/0/281420/8d3c9fe6-4dcb-4ec3-5ee0-0b1acd4ccc90.png)

#### フロー編集

以下の図のようなフローを作成していきます。

<img width="474" alt="enebular_Flow_Editor.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/daa005d4-1bab-6d27-d63e-d8d3d14fb477.png">

各ノードに以下の内容を設定していきます。

##### `入力` - `HTTP`

| 項目     | 値     |
|---------|--------|
| メソッド  | POST  |
| URL      | <font color="red">/tmpr</font><br>(※任意ですが、ここでは"/tmpr"としています) |

<font color="red">URLはデバイスの<エントリーポイントURL>で使用するため、控えておいてください。</font>

##### `機能` - `function`

| 項目        | 値        |
|------------|-----------|
| 名前        | 任意      |
| コード      | 下記を参照 |

```javascript
var newPayload = {
  id: msg.payload.imsi,       // IMSIをIDとして設定
  time: new Date().getTime(), // タイムスタンプ付与
  lat: msg.payload.lat,       // 緯度
  lon: msg.payload.lon        // 経度
};

msg.payload = newPayload;

return msg;
```

##### `機能` - `node red contrib mb iot rest`

| 項目         | 値                                           |
|-------------|----------------------------------------------|
| Name        | 任意                                          |
| URL         | https://iot-cloud.motionboard.jp/motionboard |
| Tenant      | アカウント開設時に取得したテナントID <br> (※運営からIDをもらってください) |
| Authkey     | MotionBoard Cloudで生成した**認証キー**         |
| テンプレート  | MotionBoard Cloudで作成した**テンプレート**     | 

##### `出力` - `http response`

| 項目           | 値        |
|---------------|-----------|
| 名前           | 任意      |
| 状態コード      | 200      |

状態コードはデバイスがPOSTしたリクエストに対して返すHTTPステータスコードで、任意の値です。ここでは**200**としています。

##### `出力` - `debug`

特に設定することはありません。

#### デプロイ

編集が完了したら、`デプロイ`を選択します。
<img width="80%" alt="enebular_Flow_Editor-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/84b02a6a-1b1d-474e-08a1-94b3e27c5794.png">

続いて、`i`アイコンにマウスカーソルを載せて<font color="red">転送先URLを控えてください。</font>
<img width="60%" alt="転送先URL" src="https://qiita-image-store.s3.amazonaws.com/0/281420/47045820-385e-5d7e-f239-6bb2b8e1c6b3.png">

以上で、デバイスからMotionBoard Cloudへの転送フロー作成が完了です。

---

### デバイスプログラム

#### IDと緯度経度を送信する機能を追加

デバイスのプログラムの作成をして、一部コードを修正します。
(元のコードは[こちら](https://qiita.com/uhuru-hackathon/items/7b3cf3ad9047958b80f0))
- JsonStringify()メンバ関数に緯度経度(ここでは固定値)のJSON要素を追加
- 拠点を識別するために、setup()関数にIMEI(端末識別番号)取得処理を追加

```cpp:wiolte_bg96_temperature2.ino
...(省略)...

// ===================================================
// グローバル変数
// ===================================================
WioCellular g_wio;
char imsi[20];  // ← ここの行を追加

...(省略)...

  // 送信データをJSON文字列へ変換
  String JsonStringify() const
  {
    String result("");
    char buf[32];

    sprintf(buf, "%d", static_cast<int>(this->temp));
    result += "{\"tmpr_c\":";
    result += buf;
    result += ",\"lat\":35.664001";    // ← ここの行を追加
    result += ",\"lon\":139.744244";   // ← ここの行を追加
    result += ",\"imsi\":";            // ← ここの行を追加
    result += imsi;                    // ← ここの行を追加
    result += "}";

    return result;
  }
};

// ===================================================
// 初期化処理
// ===================================================
void setup()
{
...(省略)...
  SerialUSB.println(TARGET_HOST);

  g_wio.GetIMSI(imsi, sizeof(imsi)); // ← ここの行を追加
  SerialUSB.print("IMSI:");          // ← ここの行を追加
  SerialUSB.println(imsi);           // ← ここの行を追加
}
...(省略)...

```

#### エントリーポイントの修正

新しくフローを作成するため、enebularのフロー作成で控えた転送先URLとエントリーポイントURLをそれぞれ設定してください。

```cpp
// データ送信先選択
#define TARGET_HOST       "<転送先URL>"
#define TARGET_URL        "<エントリーポイントURL>"

↓

// データ送信先選択
#define TARGET_HOST       "https://ev2-prod-node-red-＊＊＊＊＊.herokuapp.com/"
#define TARGET_URL        "/tmpr"
```

#### 解説

##### JsonStringify()メンバ関数に緯度経度(ここでは固定値)のJSON要素を追加
元のプログラムでは、温度データのみを送信していましたが、位置情報(緯度:lat、経度:lon)を追加しています。

```cpp
    result += ",\"lat\":35.664001";
    result += ",\"lon\":139.744244";
```

なお、ここでは**サンプルとして位置は固定の座標**としています。

##### 拠点を識別するために、setup()関数にIMEI(端末識別番号)取得処理を追加

本対応はデバイスを複数台、複数拠点に設置して運用を想定しての変更になります。
ここでは、拠点を識別するための手段としてIMEIを用いてデータに加えるようにしています。

まず、IMSIを格納するための領域を準備します。

```cpp
char imsi[20];
```

続いて、初期化関数にIMSIを取得するための処理を追加します。

```cpp
  g_wio.GetIMSI(imsi, sizeof(imsi));
  SerialUSB.print("IMSI:");
  SerialUSB.println(imsi);
```

---

### 実行結果確認

デバイスへプログラムを書き込み、温度データがと位置情報が転送されると、ボードに以下のように、ある地点での温度データが表示されます。

<img width="1219" alt="Board.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4ceb6ea2-742d-f365-c39e-78e6ead515ea.png">

----

### 応用

enebularの応用で[拠点ごとの住所取得サービスとの連携](https://qiita.com/uhuru-hackathon/items/bf6a90b300e4196af2df#%E6%8B%A0%E7%82%B9%E6%83%85%E5%A0%B1%E3%81%AB%E4%BD%8F%E6%89%80%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)など、デバイスから吸い上げたデータを加工することができます。

リンク先では、以下の内容を紹介しています。

- enebularのフローに住所機能追加
- MotionBoard アイテムのリレーション機能追加

----

#### enebularでのデバッグ 〜`debug`ノードの活用〜

全体を作成して期待する通りに可視化まで行かない場合があります。
そんなときは`debug`ノードを活用して、どこまで正しく動いているかを確認すると開発が捗ります。

#### デバイス → enebularにデータが転送しているかチェック

<img width="60%" alt="enebular_Flow_Editor-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/0b5ee1c9-4002-1bd7-97de-752ed0673004.png">

上記フローを作成、デプロイして正しく転送されると、`デバッグ`タブに以下内容が出力されます。
正しく転送されていなければ何も表示されません。

<img width="50%" alt="デバッグ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/7d0e7a5e-e434-3617-5264-ae04a2f5eb3e.png">

#### データ加工後のデータが正しいかのチェック

データ転送同様に、データが正しく加工されているかをチェックするために、functionノードの後にdebugノードを追加すると良いです。

<img width="60%" alt="enebular_Flow_Editor-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/6cabcf51-a91c-f42b-c1e5-8fa3be9b8b1c.png">

複数デバッグログを配置すると、ログがたくさん表示されます。
ログがどのノードで発生したものかを確認するには、ログの項目にマウスを乗せるとどのノードのログが分かります。

<img width="832" alt="複数デバッグログ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/d0d32e27-d582-ffd7-836e-91f4210299a7.png">

#### デバッグログを一時的に無効化する

デバッグが毎回表示され煩わしい場合は、デバッグノードの右端のタブをクリックすることで、ログを無効化できます。
こうすることで、ノード接続線を削除 → デプロイ や ノード削除 → デプロイなど
デプロイ操作無しに無効化することができます。

<img width="817" alt="enebular_Flow_Editor-4.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/33e82f2b-6977-3cf9-b384-20cd0a131eae.png">