9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

NoodlAdvent Calendar 2019

Day 10

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

Last updated at Posted at 2019-12-09

この記事は、ノンコーディングIoTパーティー(クリスマス版)のNoodlパートの解説です。

#0.事前準備(初めての方)

  1. ここからNoodl1.3をダウンロード&インストール
  2. 個人用アカウントを作る。
スクリーンショット 2019-12-03 22.05.59.png スクリーンショット 2019-12-03 22.06.03.png *パスワードが厳しいので注意:8文字以上、大文字/小文字/数字を最低一つずつ含める。 このあとメールで送られてくる数字のコードを入力して登録完了になります。 3. ログインする

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

##1.Noodlのプロジェクトを読み込む

  1. ここからプロジェクトをダウンロードして、zipファイルを解答、わかり易い場所に移動してください。
  2. 「Add external project」(外部プロジェクト追加)を押す
スクリーンショット 2019-12-03 22.05.45.png
  1. 先程ダウンロードしたファイルのフォルダ(christmas_enebular)を選択し、開く

##2.トナカイのID/名前/鼻の色を変更する
1.左のメニュー(コンポーネント一覧)から「コントローラーを選択」
スクリーンショット 2019-12-03 22.16.47.png

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

3.idを、IoTキットのテープに書かれているIDに変更する(enebularに合わせる)
スクリーンショット 2019-12-03 22.14.59.png

4.色を好きな色に変更する
スクリーンショット 2019-12-03 22.14.59 2.png

5.「名前」ノードを選択し、トナカイに名前を付けてあげる
スクリーンショット 2019-12-03 22.18.45.png

###補足: Noodlの基本操作(mac/win)

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

##3.MQTTブローカーの設定
歯車アイコンを押し、external brokerにチェックを入れ、ブローカー情報を入れます。
mqtt://052dd888:8dfcd457688ff656@broker.shiftr.io
スクリーンショット 2019-12-03 22.13.14.png

##4.トピックを入力する

  1. 「トナカイ」コンポーネントを選択
スクリーンショット 2019-12-03 22.29.21.png 2. 右の方にある「Send Message」ノードを選択し、トピックを以下に書き換える。 `/christmas2019/noodl/NAME01/pub` スクリーンショット 2019-12-03 22.29.30.png

##5.試してみる!

  • トナカイのボディーをクリック: click
  • トナカイのボディーを長押し: long
  • トナカイの鼻を掴んで左右に素早く揺らす: shake

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

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

##2.「一覧」コンポーネントの中身を編集する

  1. Receive Messageノードのトピックを以下のように書き換え
    /christmas2019/noodlAll
スクリーンショット 2019-12-03 22.40.14.png
  1. Collectionノードの「items」を、For eachノードの「items」につなぐ
スクリーンショット 2019-12-03 22.40.14.png
  1. ダミーの静的データが繋がっているので、「一覧ダミー」ノードと「For each」ノード間の麺を切ります。
スクリーンショット 2019-12-03 22.44.09.png

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

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?