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

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

## 概要

SORACOM Air サービスを使用して、センサーから取得して、モーションボードにデータを転送するまでの手順を説明します。

本書の構成は、大きく以下の1つずつで区切りになってします。
- MotionBoard Cloud へデータを直接転送する構成
- 拠点情報に住所を追加する
- アイテムのリレーション

## 目次

<!-- TOC -->

- [はじめに](#はじめに)
    - [概要](#概要)
    - [目次](#目次)
    - [事前準備](#事前準備)
    - [構成](#構成)
    - [MotionBoard Cloud へデータを直接転送する構成](#motionboard-cloud-へデータを直接転送する構成)
        - [温度モニタ用ボード作成](#温度モニタ用ボード作成)
            - [新規ボード作成](#新規ボード作成)
            - [データソース作成](#データソース作成)
            - [レイアウト作成](#レイアウト作成)
            - [GEO設定](#geo設定)
                - [データソース設定](#データソース設定)
                - [リアルタイム連携設定](#リアルタイム連携設定)
            - [チャート設定](#チャート設定)
            - [ボード設定を保存](#ボード設定を保存)
        - [ネットワーク設定](#ネットワーク設定)
            - [SORACOM Funnel設定](#soracom-funnel設定)
        - [デバイスプログラム](#デバイスプログラム)
            - [解説](#解説)
        - [実行結果確認](#実行結果確認)
    - [拠点情報に住所を追加する](#拠点情報に住所を追加する)
        - [enebular プロジェクト作成](#enebular-プロジェクト作成)
        - [Flow 作成](#flow-作成)
            - [ノード準備](#ノード準備)
            - [Flow配置](#flow配置)
        - [ネットワーク設定](#ネットワーク設定-1)
            - [SORACOM Beam設定](#soracom-beam設定)
        - [デバイスプログラム](#デバイスプログラム-1)
        - [MotionBoard設定再読込](#motionboard設定再読込)
            - [住所ステータスを追加](#住所ステータスを追加)
            - [ステータス再読込](#ステータス再読込)
    - [アイテムのリレーション](#アイテムのリレーション)
        - [リレーション設定](#リレーション設定)
        - [リレーション確認](#リレーション確認)

<!-- /TOC -->

## 事前準備

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

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

## 構成

温度センサーを使って、デバイス(WioLTE)から温度データをMotionBoard Cloudへデータを転送し、ボードで可視化していきます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/281420/fb27743e-64aa-b564-eecf-fcf478e5f8b8.png" alt="mbc-funnel-構成" width="80%" />

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

MotionBoardで温度データ可視化のボード作成
↓
SORACOMのネットワーク設定
↓
デバイスのプログラム
の順番で説明していきます。

### 温度モニタ用ボード作成

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

#### 新規ボード作成

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">

システム設定のリアルタイム連携画面が表示されるので、テンプレート選択右側にある`+`ボタンを選択してください。
テンプレートの新規作成ダイアログが表示されるので、テンプレート名を入力してください。
ここでは、`tmpr_template`としています。
なお、後ほどこのテンプレート名は<font color="red">SORACOMの設定で使用するため、控えておいてください。</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">SORACOMの設定で使用するため、控えておいてください。</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">

<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の新規作成ダイアログに戻ったら、「利用データタイプ」の`利用しない`にチェックします。
<img width="867" alt="115_geo_config_no_use_chart.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/c8a7a11e-4ff5-b94a-4fec-bbf6e6bb403c.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へ転送するための設定をしていきます。

#### SORACOM Funnel設定

SORACOMへログインしたら、左上のメニューから[Menu] - [SIMグループ]を選択します。

<img width="426" alt="SIMグループへ遷移" src="https://qiita-image-store.s3.amazonaws.com/0/281420/f1e0b0e1-b6b8-20a8-577e-9b9518b82cba.png">

SIMグループ画面で、`グループを作成する`を選択します。
<img width="991" alt="グループ作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/9c2a02a6-fdaf-16e5-d971-458da333a253.png">

グループ作成のダイアログで、グループ名を入力(ここでは`mb_funnel`)し、`グループを作成`ボタンを選択します。
<img width="600" alt="グループを作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4f5e649c-ba89-49bd-56a9-b9b1e7be3a72.png">

グループが作成されると、リストにグループの名前とIDが表示されるので、編集するグループを選択します。
<img width="941" alt="編集するグループを選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/2ea77982-d335-ad61-4ddb-503b31d05217.png">

グループの設定が表示されたら、`SORACOM Funnel 設定`を選択し、アコーディオンを開きます。

初めに`OFF` → `ON`へ切り替え以下項目を選択します。

| 項目          | 設定                                          |
|--------------|-----------------------------------------------|
| 転送先サービス | WingArc1st MotionBoard                        |
| 転送先URL     | https://iot-cloud.motionboard.jp/motionboard/ <br> (※自動で入力されるため、手動設定不要) |
| 送信データ形式 | JSON                                          |

次に「認証情報」の右側の`+`アイコンを選択します。

<img width="717" alt="005_SIM_グループ_-_SORACOM_ユーザーコンソール.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/e3555af2-9d84-21be-3542-a73ffaa81062.png">

セキュリティの認証情報登録のダイアログが表示されるので、以下内容を設定します。
設定が完了したら`登録`ボタンを選択します。

| 項目          | 設定                                          |
|--------------|-----------------------------------------------|
| 認証情報ID    | 任意 (ここでは`mbc_tmpr_cert`)                   |
| 概要         |  任意 (ここでは`MotionBoard温度モニタ`)            |
| テナントID | アカウント開設時に取得したテナントID <br>(※運営からIDをもらってください) |
| テンプレート名 | ボード作成時に控えたテンプレート名(ここでは、`tmpr_template`)
| 認証キー | ボード作成時に控えた認証キー |

<img width="1064" alt="認証情報設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/cfc5e0cc-1d60-8cc3-2422-129757415517.png">

設定が完了したら`保存`ボタンを選択します。
<img width="713" alt="007_SIM_グループ_-_SORACOM_ユーザーコンソール.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/485725d7-39de-3537-bfd2-5170b6a2f99f.png">

次に、作成したグループをSIMカードを結びつけます。
左上のメニューから[Menu] - [SIM 管理]を選択します。
<img width="493" alt="SIM管理" src="https://qiita-image-store.s3.amazonaws.com/0/281420/cbb99bac-0efc-3350-4a7c-69fd2b6cb082.png">

結びつけるSIMの左側にチェックを入れ`詳細`を選択します。
<img width="593" alt="詳細設定" src="https://qiita-image-store.s3.amazonaws.com/0/281420/29c7ca93-507f-28f9-27f5-67645b80bf94.png">

グループのプルダウンアイコンから作成したグループ(ここでは`mb_funnel`)を選択します。
設定したら、`閉じる`ボタンを選択します。
<img width="902" alt="010_group_assign.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/c199208a-8dbb-9f98-9f8f-b0103a9f062f.png">

結びつけが完了すると以下のように、グループに結びついがグループが表示されます。
<img width="472" alt="グループの結びつけ完了確認" src="https://qiita-image-store.s3.amazonaws.com/0/281420/519d10a0-9a53-2fd3-acf2-89dfbc2a16c6.png">

以上で、ネットワークの設定が完了です。

---

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

[IoT ハッカソン Wio LTE デバイス環境 設定手順](https://qiita.com/uhuru-hackathon/items/79ed370a4cd4899d4642#プログラム)のページから、
デバイスのプログラムの作成をして、一部コードを修正します。

```cpp
...(省略)...
  // 送信データを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 += "}";

    return result;
  }
...(省略)...
```

#### 解説

元のプログラムでは、温度データのみを送信していましたが、位置情報(緯度:lat、経度:lon)を追加しています。

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

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

### 実行結果確認

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

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

---

## 拠点情報に住所を追加する

拠点のデータに住所の情報を追加していきます。
そのために送信された位置情報を元に住所を取得したうえで、データを加工し、MotionBoard Cloudへ飛ばすように構成を変更していきます。
データ加工に[enebular](https://enebular.com/)、
住所問い合わせに[HeartRails](http://geoapi.heartrails.com/api.html#geolocation)のGEO APIを使用します。

![config2.png](https://qiita-image-store.s3.amazonaws.com/0/281420/5763eae6-9e1e-5122-454f-0e36c6d2e582.png)

### enebular プロジェクト作成

コンソールから[Create Projet]を選択し、プロジェクトを作成します。

![コンソール-プロジェクト作成](https://qiita-image-store.s3.amazonaws.com/0/281420/a514fdae-b0ff-13ca-1879-d8e7a3f681d2.png)

プロジェクト名には任意の名前をつけて、[Submit]を選択する(図では"iot-hackathon")

![プロジェクト名](https://qiita-image-store.s3.amazonaws.com/0/281420/7f203637-2464-fff9-858f-77aefb3857d8.png)

続いて作成したプロジェクトを選択し、フローを作成して行きます。

![プロジェクト選択](https://qiita-image-store.s3.amazonaws.com/0/281420/c2db0ce7-02cd-5ac6-130d-f6af2d587c8d.png)


enebular のプロジェクトの右下の +ボタンをクリックし、新しいフローを作成します。

![フロー作成](https://qiita-image-store.s3.amazonaws.com/0/281420/9ceac863-203f-d00e-6372-7a2cd64eb330.png)

フローに任意の名前を設定して、[Continue]を選択します。

![フロー設定](https://qiita-image-store.s3.amazonaws.com/0/281420/008bd1e9-71f4-a940-f919-5827cea93c22.png)

[Edit Flow]を選択して、フローを作成を開始します。

![フロー編集](https://qiita-image-store.s3.amazonaws.com/0/281420/0193a75f-08b8-3c98-69fa-d3a71e1ebda3.png)

### Flow 作成

#### ノード準備

Node-REDに以下のプラグインを追加していきます、
1. base64
2. MotionBoard

右側の[admin]タブから、検索欄に"base64"と入力し[install]ボタンを選択します。
※ 入力すると自動で"node-red-node-base64"と補完されます。

<img width="288" alt="base64ノードインストール" src="https://qiita-image-store.s3.amazonaws.com/0/281420/20356b22-e639-99aa-9e49-75eb6fd98a92.png">

同様に検索欄に"motionboard"と入力し[install]ボタンを選択します。
※ 入力すると自動で"node-red-contrib-motionboard"と補完されます。

<img width="305" alt="motionboardノードインストール" src="https://qiita-image-store.s3.amazonaws.com/0/281420/c9eba18d-ad0c-7b40-486b-083058bff8d7.png">


#### Flow配置

enebular の Flow から Node-RED を使用してフローを作成します。
設定は各ノードをダブルクリックすることで編集できます。
線は各ノードとノードをドラッグしてつなげ、削除はdeleteキーで削除できます。

*全体図*

<img width="829" alt="003_enebular_Flow_Editor.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/48b5b696-1e90-5be6-143a-b7473bd8c862.png">

各ノードの配置と設定は以下の通り

- [入力] - [http]
    - メソッド: POST
    - URL: /tmpr
    - 名前: SORACOM Beam
- [機能] - [function]
    - 名前: get_payload
    - コード: コードは後述
- [機能] - [base64]
    - Actionで"Convert Base64 to String"を選択
- [機能] - [function]
    - 名前: 退避・問い合わせ
    - コード: コードは後述
- [機能] - [http request]
    - メソッド: GET
    - URL: <空欄>
- [機能] - [json]
- [機能] - [function]
    - 名前: 住所追加
    - コード: コードは後述
- [MotionBoard] - [realtime api]
    - 名前: MotionBoardCloud
    - WebAPIのベースURL: https://iot-cloud.motionboard.jp/motionboard
    - テナント名: アカウント開設時に取得したテナントID (※運営からIDをもらってください)
    - テンプレート名: ボード作成時に控えたテンプレート(ここでは`tmpr_template`)
    - 認証キー: ボード作成時に控えた認証キー
- [出力] - [debug]
    - 対象: msg.payload
    - 出力先: debug tab

```javascript:get_payload
global.set("x_soracom_imsi", msg.req.headers["x-soracom-imsi"]);
msg.payload = msg.payload["payload"];
return msg;
```

```javascript:待避・問い合わせ
var payload = JSON.parse(msg.payload);
global.set("soracom_payload", payload); // メッセージ待避
msg.url = "http://geoapi.heartrails.com/api/json?method=searchByGeoLocation&x=139.744244&y=35.664001"; // ここで座標をパラメータで指定
return msg;
```

```javascript:住所追加
var loc = msg.payload.response.location[0];
var address = 
    loc.prefecture + " " +
    loc.city + " " +
    loc.town;

msg.payload = global.get("soracom_payload"); // 待避していたしていたデータしていたデータを復帰
msg.payload.id = global.get("x_soracom_imsi");
msg.payload.time = new Date().getTime(); // タイムスタンプ付与
msg.payload.address = address; // 住所

return msg;
```

---

### ネットワーク設定

データ転送先をMotionBoard Cloudからenebularに変更するため、転送サービスをSORACOM FunnelからSORACOM Beamに切り替えます。

#### SORACOM Beam設定

新しくグループの作成を行っていきます。
[Menu] - [SIM グループ]でグループ画面へ遷移します。
`+追加`ボタンを選択して、グループを作成します。

<img width="891" alt="グループ追加" src="https://qiita-image-store.s3.amazonaws.com/0/281420/8d9695d0-afae-2dc4-e8ba-3fc420ca5e01.png">

グループ名を入力(ここでは`mb_beam`)し、`グループ作成`ボタンを選択します。

<img width="589" alt="beam用グループ作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/e8280a7d-c48b-1be9-e9f6-87785cfa4c59.png">

グループの設定が表示されたら、SORACOM Beam 設定を選択し、アコーディオンを開きます。
[`+`] - [`UDP → HTTP/HTTPSエントリポイント`]を選択します。

<img width="987" alt="エントリーポイント追加" src="https://qiita-image-store.s3.amazonaws.com/0/281420/465876b8-689a-13cf-457b-5a5df43c0d2e.png">

ダイアログが表示されたら、以下の内容の設定を行っていきます。
設定が完了したら`保存`ボタンを選択します。

| 項目          | 設定                                          |
|--------------|-----------------------------------------------|
| 設定名        | 任意(ここでは`tmpr_enebular`)                   |
| プロトコル     | HTTPS                                        |
| ポート番号     | 443                                          |
| パス          | /tmpr                                        |
| IMSIヘッダ    | ON                                            |
| IMEIヘッダ    | ON                                            |
※ 上記以外はデフォルトから変更しない

<img width="607" alt="BEAM設定1" src="https://qiita-image-store.s3.amazonaws.com/0/281420/893fb17f-1655-6a08-0f03-a50cd8ffa7bd.png">
<img width="601" alt="BEAM設定2" src="https://qiita-image-store.s3.amazonaws.com/0/281420/a7757ecb-c388-202e-5d06-f0b02e368da6.png">
<img width="595" alt="BEAM設定3" src="https://qiita-image-store.s3.amazonaws.com/0/281420/573d9465-37b0-62c2-e407-70692edd0275.png">

---

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

データの送信先をFunnelからBEAMに変更し、デバイスへ書き込みます。

```cpp:変更前
#define USE_TARGET                TARGET_SORACOM_FUNNEL
```

```cpp:変更後
#define USE_TARGET                TARGET_SORACOM_BEAM
```

### MotionBoard設定再読込

住所のステータスがまだ存在していないため、追加し再読込します。

#### 住所ステータスを追加

メニューから[`管理`] - [`システム設定`] - [`接続/認証`] - [`リアルタイム連携`]を選択します。
<img width="1220" alt="リアルタイム連携を選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/1d40e88f-3b62-6f6f-b2e5-1d7de1febe59.png">

`ステータス`タブへ切り替えます。
「テンプレート選択」で`tmpr_template`が選択されていることを確認します。
`新規作成`を選択して、ステータスを追加します。

<img width="873" alt="ステータスタブへ移動" src="https://qiita-image-store.s3.amazonaws.com/0/281420/a8e20e3a-f8c2-1cb1-581b-c4f7602e8aeb.png">

新規ステータス作成のダイアログが表示されたら、以下内容で設定をしていきます。
設定が完了したら`OK`ボタンを選択します。

| 項目           | 設定      |
|---------------|-----------|
| ステータス名    | `address`  |
| MB IoT Agent  | 未設定     |
| データ型       | 文字列       |

<img width="343" alt="ステータスを作成" src="https://qiita-image-store.s3.amazonaws.com/0/281420/038017b8-8c4e-a5a3-8f29-8e868ba54030.png">

住所のステータスが追加されたら、`保存`ボタンを選択します。

<img width="874" alt="ステータスを保存" src="https://qiita-image-store.s3.amazonaws.com/0/281420/5d7756b4-c583-a9a1-83b7-6f96241a8eb7.png">

保存が完了した旨のダイアログが表示されたら、`OK`ボタンを選択してダイアログを閉じます。

<img width="445" alt="テンプレート保存完了ダイアログ" src="https://qiita-image-store.s3.amazonaws.com/0/281420/726ae777-9c6b-48d8-9737-bc4440dc02aa.png">

右上のバツボタンを押下して、システム設定を終了します。
<img width="876" alt="リアルタイム連携設定完了" src="https://qiita-image-store.s3.amazonaws.com/0/281420/dd03667b-c93a-2276-06ce-d29c5382a58e.png">

#### ステータス再読込

メニューから[`管理`] - [`ボード編集`]を選択します。

<img width="1224" alt="ボード編集開始" src="https://qiita-image-store.s3.amazonaws.com/0/281420/43b03bd3-b063-3392-c4d7-d4cf3852406c.png">

編集モードに移行したら、右ペインの温度チャートを1度クリックし、メニューを表示します。
表示されたメニューから`データソース編集`を選択します。

<img width="1222" alt="データソース編集開始" src="https://qiita-image-store.s3.amazonaws.com/0/281420/64d4f088-cda4-c1f0-2a20-411ee5360e5f.png">

データソースエディタが表示されたら、`データソース選択`をクリックします。

<img width="1028" alt="データソース選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/3402ab45-fce0-255c-4725-bdccb3c7e3a9.png">

作成したテーブル`tmpr_table`を選択し、`OK`ボタンを選択します。

<img width="924" alt="テーブル再読込" src="https://qiita-image-store.s3.amazonaws.com/0/281420/9b6d8795-f103-94a4-3229-db9c0cde715e.png">

設定の再読込は行われ、`address`が項目として追加されます。
確認が完了したら`OK`ボタンを選択して、データソースエディタを終了します。
<img width="1026" alt="210_setting_address.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4aea9291-2981-cbf1-6e03-1fce8138bfa6.png">

左画面の拠点のピンをクリックすると、吹き出しに住所が追加されていることが確認できます。

<img width="1224" alt="211_show_address.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/a349efa4-6ea4-e1c1-46cc-d8ee4c9a1935.png">

以上で、追加されていることが確認できました。

## アイテムのリレーション

ここでは複数の拠点に対応し、各拠点が選択されたらその拠点ごとの温度が表示されるようにします。
なお、既に複数拠点のデータが入力されている前提で、進めていきます。

### リレーション設定

左側ペインの右端にマウスカーソルをオーバーすると、右三角形が表示されるので、右側の温度チャートにドラッグ&ドロップします。

<img width="1298" alt="300_relation.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/0f88ec08-b8ad-7d60-e137-fbf381022a52.png">

リレーション設定の画面が表示されたら、以下項目を設定していきます。
設定が完了したら`OK`を選択します。

| 項目                    | 設定   |
|------------------------|--------|
| マウスクリック時アクション | 検索    |
| リアルタイムユーザーID    | `ID`   |

<img width="811" alt="302_relation_setting.png" src="https://qiita-image-store.s3.amazonaws.com/0/281420/4de7f3fb-3dee-d681-7337-9d410a5f2008.png">

設定画完了したら`保存`、`編集を終了`を選択してボードの編集を終了します。

### リレーション確認

*全表示*

<img width="1241" alt="未選択状態の全表示" src="https://qiita-image-store.s3.amazonaws.com/0/281420/56c2c044-5a2b-948c-b77d-3da4dabc0012.png">


*拠点1を選択*

<img width="1237" alt="拠点1を選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/7a81e350-5455-df5b-c547-ff21e59f44be.png">

*拠点2を選択*

<img width="1236" alt="拠点2を選択" src="https://qiita-image-store.s3.amazonaws.com/0/281420/6e8e6004-6cf4-94e4-953a-41887a276fa5.png">

選択した拠点を解除して、未選択状態に戻す場合は、メニューの[`検索`] - [`検索リセット`]で戻すことができます。
<img width="1213" alt="検索をリセット" src="https://qiita-image-store.s3.amazonaws.com/0/281420/8091bbd9-fdaf-20a9-befd-756f6003487a.png">