ノンコーディングIoTパーティー（クリスマス版）Noodlパートの解説

この記事は、[ノンコーディングIoTパーティー（クリスマス版）](https://enebular.connpass.com/event/154428/)のNoodlパートの解説です。

#0.事前準備（初めての方）
1. [ここからNoodl1.3をダウンロード＆インストール](https://classic.getnoodl.com/download)
2. 個人用アカウントを作る。
<img width="1312" alt="スクリーンショット 2019-12-03 22.05.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/ce816cb7-21c8-85b7-92c6-0c37761be07b.png">
<img width="1312" alt="スクリーンショット 2019-12-03 22.06.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/40dfed4a-a9a8-7683-c2aa-515671b50d1d.png">
*パスワードが厳しいので注意:8文字以上、大文字/小文字/数字を最低一つずつ含める。
このあとメールで送られてくる数字のコードを入力して登録完了になります。
3. ログインする

#1. Noodlからobnizをコントロールするための準備

##1.Noodlのプロジェクトを読み込む
1. [ここからプロジェクトをダウンロード](https://cdn.glitch.com/5390cc41-3cfc-46f0-a043-931a39eff04e%2Fchristmas_enebular.zip?v=1575377912960)して、zipファイルを解答、わかり易い場所に移動してください。
2. 「Add external project」（外部プロジェクト追加）を押す
<img width="1312" alt="スクリーンショット 2019-12-03 22.05.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/203eed04-34a1-0d28-1735-aa7cd91f5643.png">

3. 先程ダウンロードしたファイルのフォルダ（christmas_enebular）を選択し、開く

##2.トナカイのID/名前/鼻の色を変更する
1.左のメニュー（コンポーネント一覧）から「コントローラーを選択」
<img width="1312" alt="スクリーンショット 2019-12-03 22.16.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/abdf6e46-302f-5de6-ea6d-02c9f9136442.png">

2.「トナカイ」ノードを選択
*シングルクリックで選択します。ダブルクリックすると中に入ってしまうので注意！

3.idを、IoTキットのテープに書かれているIDに変更する（enebularに合わせる）
<img width="1312" alt="スクリーンショット 2019-12-03 22.14.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/f10425b2-eaf3-c29b-97b1-dc7d23a5a76a.png">

4.色を好きな色に変更する
<img width="1312" alt="スクリーンショット 2019-12-03 22.14.59 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/8603472d-0abf-d0a0-3706-35369b5c4448.png">

5.「名前」ノードを選択し、トナカイに名前を付けてあげる
<img width="1312" alt="スクリーンショット 2019-12-03 22.18.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/8acee22e-dbc4-b42d-2f0b-5da023770190.png">

###補足: Noodlの基本操作（mac/win）
- コピー: ⌘+c/ctrl+c
- ペースト: ⌘+v/ctrl+v
- 一つ戻る: ⌘+z/ctrl+z
- 拡大縮小: スクロール
- 作業位置の調整: 指2本でドラッグ/右クリックしながらドラッグ
- 新しいノード作成: 指２本でタップ/右クリック
- 麺を消す: 麺を2回クリック
- プレビューを更新: ⌘+r/ctrl+r

##3.MQTTブローカーの設定
歯車アイコンを押し、`external broker`にチェックを入れ、ブローカー情報を入れます。
`mqtt://052dd888:8dfcd457688ff656@broker.shiftr.io`
<img width="1312" alt="スクリーンショット 2019-12-03 22.13.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/e55ef79a-0e86-693c-bd85-3c758624c593.png">

##4.トピックを入力する
1. 「トナカイ」コンポーネントを選択
<img width="1312" alt="スクリーンショット 2019-12-03 22.29.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/402dd1e4-5df8-1990-cfa8-a4e20ce058ec.png">
2. 右の方にある「Send Message」ノードを選択し、トピックを以下に書き換える。
`/christmas2019/noodl/NAME01/pub`
<img width="1312" alt="スクリーンショット 2019-12-03 22.29.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/9d786605-2875-1a9f-5335-ea444ce6cc29.png">


##5.試してみる！
- トナカイのボディーをクリック: click
- トナカイのボディーを長押し: long
- トナカイの鼻を掴んで左右に素早く揺らす: shake

#2. みんなのトナカイ一覧を見てみよう
今回使用しているMQTTにパブリッシュしているみんなのトナカイの情報を一覧で取得できる仕組みを用意しています。
一覧取得のAPIは、別のenebularプロジェクトとして作成して起動しています。

##1. 牧場にいく
「Go to park」 ボタンを押すと牧場に移動します。

##2.「一覧」コンポーネントの中身を編集する
1. Receive Messageノードのトピックを以下のように書き換え
`/christmas2019/noodlAll`
<img width="1312" alt="スクリーンショット 2019-12-03 22.40.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/231f1797-4b11-469a-2a71-0d277dece8e3.png">

2. Collectionノードの「items」を、For eachノードの「items」につなぐ
<img width="1312" alt="スクリーンショット 2019-12-03 22.40.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/7f11bc69-19ca-a6a6-672a-209be912087c.png">

3. ダミーの静的データが繋がっているので、「一覧ダミー」ノードと「For each」ノード間の麺を切ります。
<img width="1312" alt="スクリーンショット 2019-12-03 22.44.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/4513c065-5040-bab1-e322-d0f369ef7156.png">

みんなのトナカイが表示されていれば成功です！