Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料

291 views

Published on

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

Published in: Business
  • Be the first to comment

  • Be the first to like this

「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料

  1. 1. テトリスを作ってスマホで振って遊ぼう! 2019.07.13 #bmxug #bmxgg
  2. 2. 今回作るもの IoT スマホをコントローラーにして使
  3. 3. 大まかな流れ 0. 諸準備 • IBM Cloud へログイン • Node-RED 環境構築 • Node-RED 解説 1. 画面の用意 • テトリスゲーム画面 • スマホ操作画面 • 動作確認 2. データ連携 • スマホのセンサーデータをゲーム画面へ送信 3. 難易度調整
  4. 4. 0. 諸準備
  5. 5. システム構成 Node-RED テトリス 画面 スマホ 画面 IoT
  6. 6. IBM Cloud へログイン (1) https://cloud.ibm.com/
  7. 7. IBM Cloud へログイン (2)自分のアカウント名になっていることを確認
  8. 8. Node-RED の準備 (1) Node-RED を未作成の場合
  9. 9. Node-RED の準備 (2)
  10. 10. Node-RED の準備 (3)
  11. 11. Node-RED の準備 (4)
  12. 12. Node-RED とは? • IBM 英国 Hursley 研究所を中心に開発されたデータフローエ ディタ • 各種データの流れと処理を定義するもの • HTTP や MQTT 、 WebSocket といったプロトコルに対応 • 現在はオープンソース化されて、 Linux Foundation 傘下で開発が続い ている • ほぼプログラミングすることなく、データ処理を定義する https://nodered.org/
  13. 13. IoT(Internet of Things) パブリッシャー ブローカー サブスクライバー
  14. 14. Node-RED の準備 (5)
  15. 15. Node-RED の準備 (6) 初回のみ
  16. 16. Node-RED の準備 (7) 初回のみ
  17. 17. Node-RED の準備 (8) 初回のみ
  18. 18. Node-RED の準備 (9) 初回のみ
  19. 19. Node-RED へのログイン (1)
  20. 20. Node-RED へのログイン (2)
  21. 21. Node-RED へのログイン (3) パレット キャンバス 情報タブ デバッグタブ デプロイボタン 個々の四角を「ノード」と呼ぶ
  22. 22. 1. 画面の準備
  23. 23. ハンズオン用ソースコード git clone する人はここからhttps://bit.ly/2K4OjYe
  24. 24. ゲーム画面作成 (1) パレットの入力カテゴリから http を選んで、 キャンバスにドラッグ&ドロップ
  25. 25. ゲーム画面作成 (2) パレットの機能カテゴリから template を選んで、 キャンバスにドラッグ&ドロップ
  26. 26. ゲーム画面作成 (3) パレットの出力カテゴリから http response を選んで、 キャンバスにドラッグ&ドロップ
  27. 27. ゲーム画面作成 (4) 3つのノードを線で結合する
  28. 28. ゲーム画面作成 (5) http ノードをダブルクリック メソッド: GET URL: /tetris と指定 「完了」ボタン
  29. 29. ゲーム画面作成 (6) http ノードの見た目が指定内容に合わせて変わることを確認
  30. 30. ゲーム画面作成 (7) https://bit.ly/2Zc7Jhj この内容をコピー
  31. 31. ゲーム画面作成 (8) template ノードをダブルクリック 名前: テトリス に変更 テンプレート: 先程コピーした内容(ペースト) 「完了」
  32. 32. ゲーム画面作成 (9) 「デプロイ」ボタンをクリック
  33. 33. ゲーム画面作成 (10) PC ブラウザで https:// (アプリケーション名) .mybluemix.net/tetris  にアクセス テトリスが動いている! 左移動: 左矢印 右移動: 右矢印 回転:  上矢印 落下:  下矢印
  34. 34. スマホ操作画面作成 (1) 2本目のフローを同様に作成する: 入力カテゴリーの http ノード、 機能カテゴリーの templete ノード、 出力カテゴリーの http response ノード をドラッグ&ドロップして、線で繋げる。
  35. 35. スマホ操作画面作成 (2) http ノードをダブルクリック メソッド: GET URL: /publish と指定 「完了」
  36. 36. スマホ操作画面作成 (3) https://bit.ly/2K45qJG この内容をコピー
  37. 37. スマホ操作画面作成 (4) template ノードをダブルクリック 名前: スマホ に変更 テンプレート: 先程コピーした内容(ペースト) 「完了」
  38. 38. スマホ操作画面作成 (5) 「デプロイ」ボタンをクリック
  39. 39. スマホ操作画面作成 (6) スマホのブラウザで https:// (アプリケーション名) .mybluemix.net/publish  にアクセス スマホの傾きに応じて、 画面内の数値が変更されることを確認
  40. 40. ここまでのシステム構成 Node-RED テトリス 画面 スマホ 画面 後はここだ け
  41. 41. 2. データ連携
  42. 42. データ連携 (1) 3本目のフローを同様に作成する: 入力カテゴリーの ibmiot ノード、 機能カテゴリーの function ノード、 出力カテゴリーの debug ノード をドラッグ&ドロップして、線で繋げる。
  43. 43. データ連携 (2) function ノードをダブルクリック 名前: 変換 内容: msg.payload = msg.payload.d.ori; return msg; と変更 「完了」
  44. 44. データ連携 (3) ibmiot ノードをダブルクリック スマホ画面の上部に書かれている 16桁の文字列をそのまま Device id に指定 「完了」
  45. 45. データ連携 (4) 「デプロイ」ボタン 「デバッグ」タブに切り替え デバッグタブにスマホの傾きが表示される debug ノード右のボタンで 表示/非表示を切り替える (表示を止めておく)
  46. 46. データ連携 (5) 出力カテゴリーの websocket ノードをドラッグ&ドロップして、 ibmiot ノードと接続する
  47. 47. データ連携 (6) websocket ノードをダブルクリック 鉛筆マークをクリック
  48. 48. データ連携 (7) パス : /ws/sensor と入力して、「追加」ボタン 1つ前の画面に戻るので「完了」
  49. 49. データ連携 (8) 「デプロイ」ボタン
  50. 50. データ連携 (9) 左: 「左右」を -50 以下に 右: 「左右」を 50 以上に 回転: 「前後」を 0 以上 30 以下に
  51. 51. 難しすぎる?
  52. 52. 難易度調整 (1) 機能カテゴリーの delay ノードをドラッグ&ドロップして、 ibmiot ノードと websocket ノードの間に接続する
  53. 53. 難易度調整 (2) delay ノードをダブルクリック 動作: メッセージの流量制限 流量:  2 メッセージ 1 秒 「中間メッセージを削除」にチェック に設定する。 ※ この設定だと1秒間に2回だけ動かせる  細かく調整しやすいが、素早く動かすことはできない 「完了」
  54. 54. 難易度調整 (3) 「デプロイ」をボタンを押して試してみる 必要に応じて、流量を調整する
  55. 55. 他のスマホを使う場合 他のスマホでスマホ画面を表示 Node-RED を開いて、 ibmiot ノードを開き、 そのスマホ画面に表示されている Device id の値に書き換えて、完了 デプロイしてからゲーム画面を開く
  56. 56. 楽しかったですか? • 感想を #BMXUG タグを付けて SNS で教えてください。 • 今後の運営の参考にさせていただきます。

×