https://bmxug.connpass.com/event/134792/

1. テトリスを作ってスマホで振って遊ぼう！
2019.07.13 #bmxug #bmxgg

2. 今回作るもの
IoT
スマホをコントローラーにして使

3. 大まかな流れ
0. 諸準備
• IBM Cloud へログイン
• Node-RED 環境構築
• Node-RED 解説
1. 画面の用意
• テトリスゲーム画面
• スマホ操作画面
• 動作確認
2. データ連携
• スマホのセンサーデータをゲーム画面へ送信
3. 難易度調整

4. 0. 諸準備

5. システム構成
Node-RED
テトリス
画面
スマホ
画面 IoT

6. IBM Cloud へログイン (1)
https://cloud.ibm.com/

7. IBM Cloud へログイン (2)自分のアカウント名になっていることを確認

8. Node-RED の準備 (1)
Node-RED を未作成の場合

9. Node-RED の準備 (2)

10. Node-RED の準備 (3)

11. Node-RED の準備 (4)

12. Node-RED とは？
• IBM 英国 Hursley 研究所を中心に開発されたデータフローエ
ディタ
• 各種データの流れと処理を定義するもの
• HTTP や MQTT 、 WebSocket といったプロトコルに対応
• 現在はオープンソース化されて、 Linux Foundation 傘下で開発が続い
ている
• ほぼプログラミングすることなく、データ処理を定義する
https://nodered.org/

13. IoT(Internet of Things)
パブリッシャー ブローカー サブスクライバー

14. Node-RED の準備 (5)

15. Node-RED の準備 (6)
初回のみ

16. Node-RED の準備 (7)
初回のみ

17. Node-RED の準備 (8)
初回のみ

18. Node-RED の準備 (9)
初回のみ

19. Node-RED へのログイン (1)

20. Node-RED へのログイン (2)

21. Node-RED へのログイン (3)
パレット
キャンバス
情報タブ
デバッグタブ
デプロイボタン
個々の四角を「ノード」と呼ぶ

22. 1. 画面の準備

23. ハンズオン用ソースコード
git clone する人はここからhttps://bit.ly/2K4OjYe

24. ゲーム画面作成 (1)
パレットの入力カテゴリから http を選んで、
キャンバスにドラッグ＆ドロップ

25. ゲーム画面作成 (2)
パレットの機能カテゴリから template を選んで、
キャンバスにドラッグ＆ドロップ

26. ゲーム画面作成 (3)
パレットの出力カテゴリから http response を選んで、
キャンバスにドラッグ＆ドロップ

27. ゲーム画面作成 (4)
３つのノードを線で結合する

28. ゲーム画面作成 (5)
http ノードをダブルクリック
メソッド： GET
URL: /tetris
と指定
「完了」ボタン

29. ゲーム画面作成 (6)
http ノードの見た目が指定内容に合わせて変わることを確認

30. ゲーム画面作成 (7)
https://bit.ly/2Zc7Jhj
この内容をコピー

31. ゲーム画面作成 (8)
template ノードをダブルクリック 名前： テトリス に変更
テンプレート： 先程コピーした内容（ペースト）
「完了」

32. ゲーム画面作成 (9)
「デプロイ」ボタンをクリック

33. ゲーム画面作成 (10)
PC ブラウザで https:// （アプリケーション名） .mybluemix.net/tetris にアクセス
テトリスが動いている！
左移動： 左矢印
右移動： 右矢印
回転： 上矢印
落下： 下矢印

34. スマホ操作画面作成 (1)
２本目のフローを同様に作成する：
入力カテゴリーの http ノード、
機能カテゴリーの templete ノード、
出力カテゴリーの http response ノード
をドラッグ＆ドロップして、線で繋げる。

35. スマホ操作画面作成 (2)
http ノードをダブルクリック
メソッド： GET
URL: /publish
と指定
「完了」

36. スマホ操作画面作成 (3)
https://bit.ly/2K45qJG
この内容をコピー

37. スマホ操作画面作成 (4)
template ノードをダブルクリック
名前： スマホ に変更
テンプレート： 先程コピーした内容（ペースト）
「完了」

38. スマホ操作画面作成 (5)
「デプロイ」ボタンをクリック

39. スマホ操作画面作成 (6)
スマホのブラウザで https:// （アプリケーション名） .mybluemix.net/publish にアクセス
スマホの傾きに応じて、
画面内の数値が変更されることを確認

40. ここまでのシステム構成
Node-RED
テトリス
画面
スマホ
画面
後はここだ
け

41. 2. データ連携

42. データ連携 (1)
３本目のフローを同様に作成する：
入力カテゴリーの ibmiot ノード、
機能カテゴリーの function ノード、
出力カテゴリーの debug ノード
をドラッグ＆ドロップして、線で繋げる。

43. データ連携 (2)
function ノードをダブルクリック
名前： 変換
内容：
msg.payload = msg.payload.d.ori;
return msg;
と変更
「完了」

44. データ連携 (3)
ibmiot ノードをダブルクリック
スマホ画面の上部に書かれている
１６桁の文字列をそのまま Device id に指定
「完了」

45. データ連携 (4) 「デプロイ」ボタン
「デバッグ」タブに切り替え
デバッグタブにスマホの傾きが表示される
debug ノード右のボタンで
表示／非表示を切り替える
（表示を止めておく）

46. データ連携 (5)
出力カテゴリーの websocket ノードをドラッグ＆ドロップして、
ibmiot ノードと接続する

47. データ連携 (6)
websocket ノードをダブルクリック
鉛筆マークをクリック

48. データ連携 (7)
パス : /ws/sensor
と入力して、「追加」ボタン
１つ前の画面に戻るので「完了」

49. データ連携 (8)
「デプロイ」ボタン

50. データ連携 (9) 左： 「左右」を -50 以下に
右： 「左右」を 50 以上に
回転： 「前後」を 0 以上 30 以下に

51. 難しすぎる？

52. 難易度調整 (1)
機能カテゴリーの delay ノードをドラッグ＆ドロップして、
ibmiot ノードと websocket ノードの間に接続する

53. 難易度調整 (2)
delay ノードをダブルクリック
動作： メッセージの流量制限
流量： 2 メッセージ 1 秒
「中間メッセージを削除」にチェック
に設定する。
※ この設定だと１秒間に２回だけ動かせる
細かく調整しやすいが、素早く動かすことはできない
「完了」

54. 難易度調整 (3) 「デプロイ」をボタンを押して試してみる
必要に応じて、流量を調整する

55. 他のスマホを使う場合
他のスマホでスマホ画面を表示
Node-RED を開いて、 ibmiot ノードを開き、
そのスマホ画面に表示されている
Device id の値に書き換えて、完了
デプロイしてからゲーム画面を開く

56. 楽しかったですか？
• 感想を #BMXUG タグを付けて SNS で教えてください。
• 今後の運営の参考にさせていただきます。