「テトリスを作ってスマホで振って遊ぼう！」ハンズオン資料
Download as PPT, PDF0 likes1,059 views
https://bmxug.connpass.com/event/134792/
「テトリスを作ってスマホで振って遊ぼう！」ハンズオン資料
- 3. 大まかな流れ 0. 諸準備 • IBM Cloud へログイン • Node-RED 環境構築 • Node-RED 解説 1. 画面の用意 • テトリスゲーム画面 • スマホ操作画面 • 動作確認 2. データ連携 • スマホのセンサーデータをゲーム画面へ送信 3. 難易度調整
- 4. 0. 諸準備
- 6. IBM Cloud へログイン (1) https://cloud.ibm.com/
- 7. IBM Cloud へログイン (2)自分のアカウント名になっていることを確認
- 8. Node-RED の準備 (1) Node-RED を未作成の場合
- 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)
- 22. 1. 画面の準備
- 24. ゲーム画面作成 (1) パレットの入力カテゴリから http を選んで、 キャンバスにドラッグ＆ドロップ
- 25. ゲーム画面作成 (2) パレットの機能カテゴリから template を選んで、 キャンバスにドラッグ＆ドロップ
- 26. ゲーム画面作成 (3) パレットの出力カテゴリから http response を選んで、 キャンバスにドラッグ＆ドロップ
- 28. ゲーム画面作成 (5) http ノードをダブルクリック メソッド： GET URL: /tetris と指定 「完了」ボタン
- 31. ゲーム画面作成 (8) template ノードをダブルクリック 名前： テトリス に変更 テンプレート： 先程コピーした内容（ペースト） 「完了」
- 33. ゲーム画面作成 (10) PC ブラウザで https:// （アプリケーション名） .mybluemix.net/tetris にアクセス テトリスが動いている！ 左移動： 左矢印 右移動： 右矢印 回転： 上矢印 落下： 下矢印
- 34. スマホ操作画面作成 (1) ２本目のフローを同様に作成する： 入力カテゴリーの http ノード、 機能カテゴリーの templete ノード、 出力カテゴリーの http response ノード をドラッグ＆ドロップして、線で繋げる。
- 35. スマホ操作画面作成 (2) http ノードをダブルクリック メソッド： GET URL: /publish と指定 「完了」
- 39. スマホ操作画面作成 (6) スマホのブラウザで https:// （アプリケーション名） .mybluemix.net/publish にアクセス スマホの傾きに応じて、 画面内の数値が変更されることを確認
- 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 ノードと接続する
- 48. データ連携 (7) パス : /ws/sensor と入力して、「追加」ボタン １つ前の画面に戻るので「完了」
- 50. データ連携 (9) 左： 「左右」を -50 以下に 右： 「左右」を 50 以上に 回転： 「前後」を 0 以上 30 以下に
- 51. 難しすぎる？
- 52. 難易度調整 (1) 機能カテゴリーの delay ノードをドラッグ＆ドロップして、 ibmiot ノードと websocket ノードの間に接続する
- 53. 難易度調整 (2) delay ノードをダブルクリック 動作： メッセージの流量制限 流量： 2 メッセージ 1 秒 「中間メッセージを削除」にチェック に設定する。 ※ この設定だと１秒間に２回だけ動かせる 細かく調整しやすいが、素早く動かすことはできない 「完了」
- 55. 他のスマホを使う場合 他のスマホでスマホ画面を表示 Node-RED を開いて、 ibmiot ノードを開き、 そのスマホ画面に表示されている Device id の値に書き換えて、完了 デプロイしてからゲーム画面を開く
- 56. 楽しかったですか？ • 感想を #BMXUG タグを付けて SNS で教えてください。 • 今後の運営の参考にさせていただきます。