クリスマス電子工作ハンズオン！「もくもくサンタさん」を召喚しよう

## 概要

IoTLTアドベントカレンダー10日目となります。よろしくお願いします！
もうすぐクリスマスですね。この記事では先日開催されました[クリスマス電子工作ハンズオン！Noodlもくもく会](https://noodl-mokumoku.connpass.com/event/191002/) 
そこでサンプル用に準備した「もくもくサンタさん[^1]」を紹介します。
当日のもくもく会でも色々とVerUPしていましたので、どんどん改造して遊んでみてください。
 [^1]: このサンプルはNoodlもくもく会のメンバーで作成しました。とてもエモいイラストを描いてくださったきさいちさんありがとうございます。

## もくっと召喚されるサンタさんはこちら

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Noodl%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#Noodlもくもく会</a> もくもく会で作ったサンタさん <a href="https://t.co/A2uOsF6Zpp">pic.twitter.com/A2uOsF6Zpp</a></p>&mdash; macolent (@macolent1) <a href="https://twitter.com/macolent1/status/1335053315831259136?ref_src=twsrc%5Etfw">December 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 画面構成
携帯・PCの窓に映る雪景色と1つのもみの木。
手元のボタン(M5Stack)を押すとひょこっとサンタさんがプレゼントをもって現れます。
サンタさんにさわる(クリックする)と、サンタさんが窓の外のもみ木ライト、現実世界のLEDライト(Neopixel)を灯してくれます。
別のボタンを押すとサンタさんは帰っていきます。

![img0077_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/434a31f6-7ee1-dff9-a332-3e26a8cbfedb.png)

### システム構成
携帯・PC画面をビジュアルプログラミングツールNoodlで作成し。手元のボタンにM5Stackを使っています。
M5Stack側のボタンをトリガーとして、[MQTTメッセージをNoodl側に送信](https://qiita.com/macole/items/c59dd0ef4b62f8253712)しています。
今回はMQTTブローカに[shiftr.io]を使いました。
また、画面のクリック情報を検知しMQTTメッセージをM5Stackに返しています。
M5Stack側ではMQTTメッセージを受取ると、UNITとして取り付けたNeopixelのLEDを点灯させています。

![img0004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/d32099a7-f2a9-64cd-65c9-d68c52f6f1b7.jpeg)

## 用意するもの
以下の材料をお手元にご用意ください。

|材料	|種類	|購入先|
|:--|:--|:--|
|M5Stack本体|M5Stack、M5StickC、Atomなど	|[スイッチサイエンス](https://www.switch-science.com/catalog/list/771/)|
|NeoPixel互換LED|六角形ユニット、LEDテープなど|[スイッチサイエンス](https://www.switch-science.com/catalog/list/?keyword=Neopixel) [マルツオンライン](https://www.marutsu.co.jp/GoodsListNavi.jsp?path=&q=Neopixel)|

## サンプルファイルのダウンロード
Noodlもくもく会：Connpassページ下のほうにある資料欄の[サンプルデータ](https://noodl-mokumoku.connpass.com/event/191002/)をダウンロードしてください

![img0005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/3f4f87e4-06f1-5a30-c3f2-53c039f13a84.jpeg)

## 開発環境
今回はM5Stack、PC・携帯画面どちらもビジュアルプログラミング環境を使います。

### UIFlowの環境構築
UIFlow自体は[オンライン環境](https://flow.m5stack.com/)があるので環境構築は不要ですが、
M5Stack自体は以下リンクを参考に最新のフィームウェアの書込み、Wi-Fi設定、M5StackAPIキーの確認をしてください。

- [UIFlow日本語ドキュメント](https://m5stack.github.io/UIFlow_doc/ja/)
- [UIFlow ＋ M5Stack Core2 を試す（ファーム： Beta2-core2）【準備編＋α】](https://qiita.com/youtoy/items/8d257e49326bb41e3eda)

UIFlowのバージョンはどちらでも構いません。右側のBeta版は新しくおすすめです。
![img0006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/b29a1a57-b0fb-fd10-1d44-7978fe091105.jpeg)

### M5Stack側の設定

サンプルプログラムにはNeoixclの種類テープ型、Hex型のSampleデータが2つあります。手持ちの環境に合わせて選択して下さい
> tape_LED_neopixel_sample.m5f
> hex_LED_neopixel_sample.m5f

次にダウンロードしたサンプルをUIFlowの環境でファイルを読み込みます。今回はNeopixelがテープ型として進めます。

![img0007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/b3200d69-ce06-14db-3e69-1afa6fa139b3.jpeg)

### ハードウェアの設定：Neopixelの設定
Unitに表示されている「RGB LED」アイコンをクリックすると、接続しているM5のポートPortや、NeopixcelのLEDの数を変更することができます。
後はM5StackとNeopixelをGroveポートで繋げばOKです。

![img0008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/6fa7cce8-3d64-9bfa-4e69-dc2c2351e73b.jpeg)

### ソフトウェアの設定：MQTT通信の設定
使用するMQTTブローカに合わせてMQTTの設定を修正します。
今回は無料のMQTTブローカshiftr.ioを使用するので下記の部分を修正します。「Shiftr」の設定については[こちら](https://qiita.com/pentake/items/1b974e27d24cc33b682f)を確認ください。

|例|サーバ|ポート|ユーザID|パスワード|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
|例1|broker.shiftr.io|1883|自身のユーザID|パスワード|
|例2|xxxx.cloud.shiftr.io|1883|自身のユーザID|パスワード|

![img0020.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/8eaf8dc9-bafd-8bac-6c25-d1cecec8dac4.jpeg)

### プログラムの実行
プログラムの実行は、右から2番目の矢印マーク(Run)でM5Stackへプログラムを転送・実行します。
この方法ではプログラムは電源を落とすと消えます。
電源を落としてもまたプログラムを実行したい場合は一番右のDownload：ダウンロードをしてください。M5Stackにファイルとしてプログラムが書き込まれます。

## Noodlの開発環境構築
Noodlは、webアプリケーションをLow-codeで開発できるプラットフォームです。
ブラウザで動くwebアプリケーション（HTML / CSS / JavaScript / React で構築されたもの）が、「少ないコード記述」or「コード記述なし」で開発できます。
以下リンク先をご参考に、Noodlのインストールをお願いします。

![Noodl](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F192442%2F5b98b017-8b05-034a-f78a-bbe4ec7d796e.jpeg?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=834431f22b8672f60e99cefc5a84f9e7)

- [Noodl 2.1 ベータ版に参加しよう！](https://noodl-tokyo.connpass.com/event/191012/)
- [ビジュアルプログラミングツールNoodl学習の情報源](https://qiita.com/macole/items/b5b4b52b4045b54f8ea7)

###　サンプルプログラムを開く
Noodl環境が準備できたら、下記手順に沿って先ほどダウンロードしたサンプルプロジェクトを開きます。

1. プロジェクトのインポートをします：Import existing project
2. 保存を選択します。今回はローカルを選択します:Save locally
3. プロジェクト名は任意でOKです:Projectname
4. ダウンロードしたプロジェクトを選択します。:Pick project folder

![img0016.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/3c1c8b23-82ad-87fc-6407-f472b33c1dd8.jpeg)

Noodlプログラムは3つの部品(コンポーネント)で構成されています。

![img0018.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/7ab9d7ad-f6ce-4b88-ba52-7116ea289844.jpeg)

![img0019.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/597db210-f4eb-b5de-ca66-20596894d00e.jpeg)

### MQTTサーバの設定を変更する
M5Stackと同じく、Noodl側のMQTTサーバ設定を行います。画面左のアイコンでギアマークがProjectSettingとなります。MQTT>BrokerURLを設定します。

![img0023.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/82f40741-dde6-01e0-ee8d-bd3534f26946.jpeg)

>broker.shitfr.ioの場合はプロトコルにmqtt://
>新しいxxxx.cloud.shitfr.ioの場合はプロトコルにmqtts://　を設定する必要があります

### 携帯やタブレットから確認する
MQTT設定をすれば、Noodlのプレビュー画面から動作を確認することができます。
また、Preview in Browserに表示されているURLを携帯やタブレットで開くとNoodlの画面が表示されます。
DeployToFolderをするとHTML&Javascriptファイルを書き出すこともできるため、Webサーバにフォルダごとアップロードしてアプリケーションとしてそのまま利用することができます。

![img0021.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/4972c436-de47-7ce8-d401-1c8860b36a14.jpeg)

##　おまけ
[当日のもくもく会楽しかった！](https://togetter.com/li/1632245)
Connpassに[Noodlもくもく会](https://noodl-mokumoku.connpass.com/)のページがあるので興味のある方は確認してみてください。
最後に、もくもく会のサンプルを改造した例を紹介して終わります。
ここまでお付き合いいただきありがとうございました。

- @youtoy さん：[IFTTTを組み合わせてAlexaやGoogleアシスタントからサンタさんを召還されています。](https://qiita.com/youtoy/items/ab6747622d137fcadead)
- @kisaichi07　さん:[JSON BOXとの連携で、MQTTメッセージのLogをCloud上に保存されています](https://qiita.com/kisaichi07/items/2b8b7682cb9e7bb3a17e)
- @macole ：[UIFlowプログラムを改造しました。サンタさんでレインボー/サンタさんでゲーム。](https://github.com/macole/NoodlMokumoku)
- Hex型のNeopixelサンプルでは雪の結晶が光ります[^2]

[^2]: Hex型LEDの写真は豊田さんのツイッターから。ぺんたけさんデザインの綺麗な雪の結晶です。


**Hex型のNeopixelを光らせた場合**
![](https://pbs.twimg.com/media/Eob2oHhVEAMKjCX.jpg:medium)

**サンプルを改造したもくもくサンタさんレインボーとゲームのUiflowプログラム**
![img0059_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/9e7ec34b-6e10-57c4-27c8-fba55997b4dd.png)

明日は @Inoue_Minoru さんの投稿です。お楽しみに！