デザイン思考のプロトタイピングツール"Noodl"でノンコーディングIoT！

#概要
"**Noodl**"というデザイン思考のプロトタイピングツールを知ったので使ってみました。
このNoodlは、フローベースでUIを作成できます。つまり、__ノンコーディング__！
Noodlについてはこちらを参照。
　[Noodl JP](https://tensorx.co.jp/noodl-jp/)


そして"**Node-RED**"という、クラウドやエッジの連携をフローベースで作成できるツールがあります。こちらもノンコーディング。
Node-REDについてはこちらを参照。
　[Node-RED 日本ユーザ会](https://nodered.jp/about/)

"**Noodl**"と"**Node-RED**"を連携して利用したら、ノンコーディングでIoTシステムが作れるのではないかと思い、挑戦してみました。

手始めにLチカするシステムを作成しました。

構成はこんな感じです。
![構成図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/6de28ed2-1954-8ded-3701-a92a6555bf5c.jpeg)

Noodlで作成したUIのボタンを押すと、Raspberry Piに接続したLEDがチカチカします。

↓実際に動かした様子。（LEDが分かりずらいと思います。m(__)m ）

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ノンプログラミングIoTできた！<br>Noodlで作った画面のボタンを押すと、ラズパイで実行しているNode-REDにMQTTでメッセージが送られます。<br>メッセージの内容を解釈してラズパイに接続した白色LEDがチカチカします！<br>整理できたらQiitaに記事あげます。<a href="https://twitter.com/hashtag/Noodl?src=hash&amp;ref_src=twsrc%5Etfw">#Noodl</a> <a href="https://twitter.com/hashtag/nodered?src=hash&amp;ref_src=twsrc%5Etfw">#nodered</a> <a href="https://t.co/7iKrtHQkS9">pic.twitter.com/7iKrtHQkS9</a></p>&mdash; まえぷー (@kmaepu) <a href="https://twitter.com/kmaepu/status/1147775378246602752?ref_src=twsrc%5Etfw">2019年7月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ここまで動かすために必要なソースコードを[github](https://github.com/kmaepu/Noodl_NodeRED_IoT)で公開しています。
ご興味ある方は使っていただけると嬉しいです。


以降は、githubで公開しているソースコードの使い方について記載しています。
[こちら](https://github.com/kmaepu/Noodl_NodeRED_IoT)からNoodl_NodeRED_IoTリポジトリをクローンorダウンロードしてください。

###環境
Noodl：v1.3.1
Node-RED：v0.20.6
Node.js：v10.15.2
デバイス：Raspberry Pi2 、Rasbian
MQTTブローカ：shiftr.io

#使い方
##Noodl編
###１．サンプルのプロジェクトを読み込む
Noodlを起動し、プロジェクトを読み込みます。
「Your projects」→「Add external project」を選択します。

<img width="326" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/f9016cdc-7a51-c1bf-59df-85f4d94dde11.png">

フォルダーの選択で、入手したリポジトリの下記フォルダを選択します。

```
Noodl_NodeRED_IoT/Noodl project/IoT demo
```
プロジェクトを読み込むと次のような画面となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d8c2b63a-1bd9-bfe6-6a90-a78a9bd35790.png)

###２．MQTTの設定
MQTTのブローカを用意し、接続トークンのURLをプロジェクトに設定します。

今回はMQTTブローカに**shiftr**を利用しました。
「shiftr」を利用する場合は、設定方法を別の記事にしたのでこちらを参照。
[MQTTブローカ"Shiftr.io" 入門](
https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6)

エディタ画面の歯車マークからプロジェクト設定を開きます。
<img width="215" alt="プロジェクト設定.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/170b8091-98b2-7ff8-e656-59a907b0dae1.png">

設定欄の下のほうにMQTT設定があります。
「Broker URL」欄に接続トークンのURLを入力します。

<img width="212" alt="接続トークン設定.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/a704ae72-da11-757f-4570-1495c55b3200.png">

以上でNoodlの準備は完了です。

##Node-RED編
用意したフローを読み込んで使用します。

###１．サンプルフローの読み込み
サンプルのフローファイルを用意してあるので、それをNode-REDに読み込みます。

Node-REDを起動してエディタを開きます。
<img width="608" alt="NodeRED_読み込み.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/e7d0cf11-6587-fc1f-46f9-abdec1be2245.png">

エディタ画面右上のリストから
「読み込み」→「クリップボード」と進み、
「読み込むファイルを選択～」からサンプルのフローファイルを選択して読み込みます。

<img width="355" alt="NodeRED_読み込み_ファイル選択.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/cbd7b64f-d85d-b045-8a7d-e4b0f281e94a.png">

読み込むファイルは、入手したリポジトリの下記ファイルを選択します。

```
Noodl_NodeRED_IoT/Node-RED flow/flows_raspberrypi.json
```

フローの読み込みに成功すると、フローの別のタブにサンプルフローが展開されます。

<img width="591" alt="NodeRED_読み込み後.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/ed708bea-d80d-fe3e-e811-ebf9389ee596.png">

###２．MQTTの設定
Noodlに設定した接続トークンのURLを”mqtt　inノード″にも設定します。

”mqtt inノード”の設定画面を開き、項目「サーバ」の入力アイコンをクリックします。

<img width="380" alt="NodeRED_2_MQTTノードの設定はじめ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/2b508bfe-8619-437c-6b56-d522851d81af.png">

項目「サーバ」欄にMQTT接続トークンのURLを入力して完了です。
ここまで進んだらフローをデプロイします。

<img width="481" alt="NodeRED_mqtt設定.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/9dbb0f19-3246-b3bd-585f-f39308b374b2.png">

MQTTの設定で問題なければ、”mqtt inノード”のステータスが”接続済”となります。

<img width="488" alt="NodeRED_フロー.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/5d79efe3-bcb7-5e4b-3343-3548494347a8.png">

###３．LED接続
Raspberry Piの好きなGPIOにLEDを接続します。
”rpi-gpio outノード”の設定を開き、LEDを接続したポートを選択します。

<img width="488" alt="NodeRED_LED設定.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/26f6cdb5-bdb5-bb8f-3a68-7190adc42dbd.png">

以上でLチカするようになります。


#おわりに
MQTTブローカは、次のバージョンのNoodlに実装されるようです。
外部ブローカを使用する手間が省けますね(^^)