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

1. BMXUG 女子部ハンズオン
女性限定！”クラウド x IoT 勉強会” Bluemix とスマホでゲームを作ろう！
2017.Jun

2. 自己紹介
Twitter: @dotnsf
facebook: https://www.facebook.com/juge.me
Blog: http://dotnsf.blog.jp/
趣味： マンホール
木村 桂（きむら けい）
Bluemix エバンジェリスト
プログラマー

3. 今回のハンズオンで行うこと
MQTT ブローカー
スマホの傾きでゲームを操作
MQTT
WebSocket

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. 大まかな流れ
1. ハンズオン用ソースコードの入手
2. IBM Bluemix アプリケーションプロジェクト作成
3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成
4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成
5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成
この後のページの左上に表示

6. ハンズオン用ソースコードをダウンロード
①https://github.com/dotnsf/mqtttetris-handson にアクセス
② “Download ZIP” でソースコードをダウンロード＆展開
1. ハンズオン用ソースコードの入手

7. ハンズオン用ソースコードを入手
①mqtttetris-handson-master.zip を展開
② mqtttetris-handson-master フォルダ内のソースコードを確認
1. ハンズオン用ソースコードの入手

8. Bluemix にログイン
①http://bluemix.net/ にアクセス
2. IBM Bluemix アプリケーションプロジェクト作成
②IBM ID とパスワードを順に入力
③ログインできることを確認

9. データセンター地域、組織、スペースを確認
①画面右上の自分の IBM ID 部分をクリック
②データセンター地域、組織、スペースの内容を確認（異なっていたら変更）。
今回は組織は米国南部、組織は自分の ID、スペースは dev を想定。
2. IBM Bluemix アプリケーションプロジェクト作成

10. アプリケーションダッシュボードに移動
①画面左上のハンバーガーメニューから「アプリ」の「ダッシュボード」を選択
②アプリやサービスの一覧を確認できるダッシュボードページに移動する
2. IBM Bluemix アプリケーションプロジェクト作成

11. 「Node-RED スターター」アプリの作成
①ダッシュボード画面右上の「アプリの作成」をクリック
③固有のアプリ名※を入力して、「作成」をクリック
※kkimura-nodered-20170617 など
②ボイラープレート一覧の中から “Node-RED Starter” を選択
2. IBM Bluemix アプリケーションプロジェクト作成

12. Node-RED スターターアプリの確認
①Node-RED アプリが用意できるまで待つ間に・・・
②画面左のメニューから「概要」を選択
③指定した名前のアプリができたことを確認
④メモリ量やインスタンス数を調整する場合はここを変更
2. IBM Bluemix アプリケーションプロジェクト作成

13. 今回のハンズオンで行うこと
MQTT ブローカー
スマホの傾きでゲームを操作
MQTT
WebSocket

14. IBM Bluemix
IoT(Internet of Things)
様々なデバイス、センサー、およびゲートウェイと通信するためのメッセージングプラットフォーム
デバイス
（MQTT パブリッシャー）
データ中継点
（MQTT ブローカー）
アプリ
サーバー
アプリケーション
（MQTT サブスクライバー）
DB
サーバー
デバイスから MQTT ブローカーにデータを送りさえすれば、
後はプラットフォーム側に用意された仕組みが使える

15. Node-RED スターターアプリの初期設定
①ステータスが「実行中」になったことを確認して「Visit」
②別ウィンドウで Node-RED が起動。「Next」
2. IBM Bluemix アプリケーションプロジェクト作成
③”Secure your editor ..” を選択し、
ユーザー名とパスワードを指定して 「Next」＆「Finish」

16. Node-RED スターターアプリへのアクセス
①Node-RED 初期画面にアクセスしたらエディタへ移動
②ユーザー名とパスワードを指定した場合は入力してログイン
2. IBM Bluemix アプリケーションプロジェクト作成
③キャンバス画面を確認

17. Node-RED アプリ１作成(1)
①アプリの URL （アプリ名.mybluemix.net）/redにアクセス
②キャンバスに http の入力ノードを
ドラッグ＆ドロップで配置
3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成

18. Node-RED アプリ１作成(2)
③http 入力ノードをダブルクリックし、編集画面で URL を /publish に設定して「完了」
④ノードの表示文字が変わることを確認
3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成
⑤同様に template ノードと http 出力ノードを配置し、
横の○同士を線で（ドラッグ＆ドロップで）結ぶ

19. Node-RED アプリ１作成(3)
⑥template ノードをダブルクリックし、Name を「スマホ画面」、
Syntax Highlit を HTML、中身をダウンロードした mqttpublish.txt の中身をコピペして「完了」
⑦「デプロイ」をクリックして更新（＆保存）
3. スマホの挙動を Watson IoT Platform に送信する Node-RED アプリを作成
⑧スマホのブラウザで （アプリケーションのURL）/publish
にアクセスして、何かが動いていることを確認
⑨デバイス ID を確認

20. Node-RED アプリ２作成(1)
①同様にしてもう１度、http 入力ノード、template ノード、http 出力ノードを配置し、ノード同士を線で結ぶ
②http 入力ノードの URL を /tetris として「完了」
4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成
③template ノードのNameを「ゲーム画面」、
中身を tetris.txt のものをコピペして「完了」

21. Node-RED アプリ２作成(2)
4. スマホの情報を Watson IoT Platform から受信して動くゲーム画面を作成
④キャンバスが図のようになったことを確認して「デプロイ」
⑤PC のブラウザで
http://（サーバー名）/tetris にアクセスして動作確認
※https ではなく http で

22. （確認）ここまでにやったこと
MQTT ブローカー
スマホの傾きでゲームを操作
○
○
○
×

23. Node-RED アプリ３作成(1)
①キャンバスに IBM IoT のインプットノードを配置
5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成
②IBM IoT インプットノードをダブルクリックして、
DeviceId 欄にスマホ画面で確認したデバイス ID を入力して「完了」

24. Node-RED アプリ３作成(2)
5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成
③debug アウトプットノードをキャンバスに追加し、
IBM IoT ノードと線をつなぐ
④debug アウトプットノードをダブルクリックし、
Output を msg.payload.d.ori に変更して、「デプロイ」
⑤Debug タブにスマホの傾き情報が
流れてくることを確認

25. Node-RED アプリ３作成(3)
5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成
⑥WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ
⑦WebSocket ノードをダブルクリックし、
鉛筆アイコンをクリック。
Path の値を /ws/sensor に変更して「更新」＆「完了」
⑧最後に「デプロイ」

26. Node-RED アプリ３作成(4)
⑩テトリス画面とスマホ画面をリロードし、
スマホの動きに合わせてゲームが動くことを確認
5. 自分のスマホの情報を WebSocket に送信する Node-RED アプリを作成
スマホテトリス完成！

27. 完成！
MQTT ブローカー
スマホの傾きでゲームを操作
○
○
○
×○

28. （補足）ソースコードの解説 – mqttpublish.txt
:
:
if( window.DeviceMotionEvent ){
window.addEventListener( "devicemotion", deviceMotion );
}
if( window.DeviceOrientationEvent ){
window.addEventListener( "deviceorientation", deviceOrientation );
}
:
:
deviceMotion（スマホが移動）イベントや、deviceOrientation（傾いた）イベントに
反応して、その時の状態を集めています。

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. （補足）ソースコードの解説 – 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 の値を見て、右や左にコントロールする