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.

"クラウド × IoT 勉強会" Bluemix とスマホでゲームを作ろう!ハンズオン

571 views

Published on

Bluemix Girls Group 勉強会での資料です。
2017/06/17 【福岡】女性限定!"クラウド × IoT 勉強会" Bluemix とスマホでゲームを作ろう!

Published in: Technology
  • Be the first to comment

"クラウド × IoT 勉強会" Bluemix とスマホでゲームを作ろう!ハンズオン

  1. 1. BMXUG 女子部ハンズオン 女性限定!”クラウド x IoT 勉強会” Bluemix とスマホでゲームを作ろう! 2017.Jun
  2. 2. 自己紹介 Twitter: @dotnsf facebook: https://www.facebook.com/juge.me Blog: http://dotnsf.blog.jp/ 趣味: マンホール 木村 桂(きむら けい) Bluemix エバンジェリスト プログラマー
  3. 3. 今回のハンズオンで行うこと MQTT ブローカー スマホの傾きでゲームを操作 MQTT WebSocket
  4. 4. 用意するもの/前提環境 • IBM Bluemix アカウント • ウェブブラウザの優先言語は日本語 • Bluemix データセンターは us-south (ドメインは mybluemix.net)を使う • eu-gb データセンターの場合、ドメインは eu-gb.mybluemix.net となる • au-syd データセンターの場合、ドメインは au-syd.mybluemix.net となる • eu-de データセンターの場合、ドメインは eu-de.mybluemix.net となる • 組織は自分の ID と同じ組織、スペースは dev を使うものとする • 自分のスマホ(iPhone/Android) • ジャイロセンサー付きのもの
  5. 5. 大まかな流れ 1. ハンズオン用ソースコードの入手 2. IBM Bluemix アプリケーションプロジェクト作成 3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成 4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成 5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成 この後のページの左上に表示
  6. 6. ハンズオン用ソースコードをダウンロード ①https://github.com/dotnsf/mqtttetris-handson にアクセス ② “Download ZIP” でソースコードをダウンロード&展開 1. ハンズオン用ソースコードの入手
  7. 7. ハンズオン用ソースコードを入手 ①mqtttetris-handson-master.zip を展開 ② mqtttetris-handson-master フォルダ内のソースコードを確認 1. ハンズオン用ソースコードの入手
  8. 8. Bluemix にログイン ①http://bluemix.net/ にアクセス 2. IBM Bluemix アプリケーションプロジェクト作成 ②IBM ID とパスワードを順に入力 ③ログインできることを確認
  9. 9. データセンター地域、組織、スペースを確認 ①画面右上の自分の IBM ID 部分をクリック ②データセンター地域、組織、スペースの内容を確認(異なっていたら変更)。 今回は組織は米国南部、組織は自分の ID、スペースは dev を想定。 2. IBM Bluemix アプリケーションプロジェクト作成
  10. 10. アプリケーションダッシュボードに移動 ①画面左上のハンバーガーメニューから「アプリ」の「ダッシュボード」を選択 ②アプリやサービスの一覧を確認できるダッシュボードページに移動する 2. IBM Bluemix アプリケーションプロジェクト作成
  11. 11. 「Node-RED スターター」アプリの作成 ①ダッシュボード画面右上の「アプリの作成」をクリック ③固有のアプリ名※を入力して、「作成」をクリック ※kkimura-nodered-20170617 など ②ボイラープレート一覧の中から “Node-RED Starter” を選択 2. IBM Bluemix アプリケーションプロジェクト作成
  12. 12. Node-RED スターターアプリの確認 ①Node-RED アプリが用意できるまで待つ間に・・・ ②画面左のメニューから「概要」を選択 ③指定した名前のアプリができたことを確認 ④メモリ量やインスタンス数を調整する場合はここを変更 2. IBM Bluemix アプリケーションプロジェクト作成
  13. 13. 今回のハンズオンで行うこと MQTT ブローカー スマホの傾きでゲームを操作 MQTT WebSocket
  14. 14. IBM Bluemix IoT(Internet of Things) 様々なデバイス、センサー、およびゲートウェイと通信するためのメッセージングプラットフォーム デバイス (MQTT パブリッシャー) データ中継点 (MQTT ブローカー) アプリ サーバー アプリケーション (MQTT サブスクライバー) DB サーバー デバイスから MQTT ブローカーにデータを送りさえすれば、 後はプラットフォーム側に用意された仕組みが使える
  15. 15. Node-RED スターターアプリの初期設定 ①ステータスが「実行中」になったことを確認して「Visit」 ②別ウィンドウで Node-RED が起動。「Next」 2. IBM Bluemix アプリケーションプロジェクト作成 ③”Secure your editor ..” を選択し、 ユーザー名とパスワードを指定して 「Next」&「Finish」
  16. 16. Node-RED スターターアプリへのアクセス ①Node-RED 初期画面にアクセスしたらエディタへ移動 ②ユーザー名とパスワードを指定した場合は入力してログイン 2. IBM Bluemix アプリケーションプロジェクト作成 ③キャンバス画面を確認
  17. 17. Node-RED アプリ1作成(1) ①アプリの URL (アプリ名.mybluemix.net)/redにアクセス ②キャンバスに http の入力ノードを ドラッグ&ドロップで配置 3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成
  18. 18. Node-RED アプリ1作成(2) ③http 入力ノードをダブルクリックし、編集画面で URL を /publish に設定して「完了」 ④ノードの表示文字が変わることを確認 3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成 ⑤同様に template ノードと http 出力ノードを配置し、 横の○同士を線で(ドラッグ&ドロップで)結ぶ
  19. 19. Node-RED アプリ1作成(3) ⑥template ノードをダブルクリックし、Name を「スマホ画面」、 Syntax Highlit を HTML、中身をダウンロードした mqttpublish.txt の中身をコピペして「完了」 ⑦「デプロイ」をクリックして更新(&保存) 3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成 ⑧スマホのブラウザで (アプリケーションのURL)/publish にアクセスして、何かが動いていることを確認 ⑨デバイス ID を確認
  20. 20. Node-RED アプリ2作成(1) ①同様にしてもう1度、http 入力ノード、template ノード、http 出力ノードを配置し、ノード同士を線で結ぶ ②http 入力ノードの URL を /tetris として「完了」 4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成 ③template ノードのNameを「ゲーム画面」、 中身を tetris.txt のものをコピペして「完了」
  21. 21. Node-RED アプリ2作成(2) 4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成 ④キャンバスが図のようになったことを確認して「デプロイ」 ⑤PC のブラウザで http://(サーバー名)/tetris にアクセスして動作確認 ※https ではなく http で
  22. 22. (確認)ここまでにやったこと MQTT ブローカー スマホの傾きでゲームを操作 ○ ○ ○ ×
  23. 23. Node-RED アプリ3作成(1) ①キャンバスに IBM IoT のインプットノードを配置 5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成 ②IBM IoT インプットノードをダブルクリックして、 DeviceId 欄にスマホ画面で確認したデバイス ID を入力して「完了」
  24. 24. Node-RED アプリ3作成(2) 5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成 ③debug アウトプットノードをキャンバスに追加し、 IBM IoT ノードと線をつなぐ ④debug アウトプットノードをダブルクリックし、 Output を msg.payload.d.ori に変更して、「デプロイ」 ⑤Debug タブにスマホの傾き情報が 流れてくることを確認
  25. 25. Node-RED アプリ3作成(3) 5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成 ⑥WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ ⑦WebSocket ノードをダブルクリックし、 鉛筆アイコンをクリック。 Path の値を /ws/sensor に変更して「更新」&「完了」 ⑧最後に「デプロイ」
  26. 26. Node-RED アプリ3作成(4) ⑩テトリス画面とスマホ画面をリロードし、 スマホの動きに合わせてゲームが動くことを確認 5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成 スマホテトリス完成!
  27. 27. 完成! MQTT ブローカー スマホの傾きでゲームを操作 ○ ○ ○ ×○
  28. 28. (補足)ソースコードの解説 – mqttpublish.txt : : if( window.DeviceMotionEvent ){ window.addEventListener( "devicemotion", deviceMotion ); } if( window.DeviceOrientationEvent ){ window.addEventListener( "deviceorientation", deviceOrientation ); } : : deviceMotion(スマホが移動)イベントや、deviceOrientation(傾いた)イベントに 反応して、その時の状態を集めています。
  29. 29. (補足)ソースコードの解説 – mqttpublish.txt : : client = new Messaging.Client("quickstart.messaging.internetofthings.ibmcloud.com", 443, clientID ); : : phoneData.publish = function(){ var message = new Messaging.Message( phoneData.toJson() ); message.destinationName = pubTopic; client.send( message ); } : : MQTT パブリッシャー機能を JavaScript で実装。
  30. 30. (補足)ソースコードの解説 – controller.js (tetris.txt から呼ばれているモジュール) : : var wsUrl = 'ws://' + location.hostname + '/ws/sensor'; function connect(){ socket = new WebSocket(wsUrl); socket.onmessage = function(e) { var sensorData = JSON.parse(e.data); //console.log( sensorData ); if( sensorData.d.ori.tiltLR >= 50 ){ keyPress( 'right' ); render(); }else if( sensorData.d.ori.tiltLR <= -50 ){ keyPress( 'left' ); render(); : : (Node-RED のサーバー)/ws/sensor に送られてくるデータを監視し、 送られてきた場合は、d.ori.tiltLR の値を見て、右や左にコントロールする

×