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

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

2017.Jun

自己紹介

Twitter: @dotnsffacebook: https://www.facebook.com/juge.meBlog: http://dotnsf.blog.jp/

趣味：マンホール

木村桂（きむらけい）

Bluemix エバンジェリスト

プログラマー

今回のハンズオンで行うこと

MQTT ブローカー

スマホの傾きでゲームを操作

MQTT

WebSocket

用意するもの／前提環境

• 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)• ジャイロセンサー付きのもの

大まかな流れ

1. ハンズオン用ソースコードの入手

2. IBM Bluemix アプリケーションプロジェクト作成

3. スマホの挙動をWatson IoT Platform に送信する Node-RED アプリを作成

4. スマホの情報をWatson IoT Platform から受信して動くゲーム画面を作成

5. 自分のスマホの情報をWebSocket に送信する Node-RED アプリを作成

この後のページの左上に表示

ハンズオン用ソースコードをダウンロード①https://github.com/dotnsf/mqtttetris-handson にアクセス

② “Download ZIP” でソースコードをダウンロード＆展開


ハンズオン用ソースコードを入手①mqtttetris-handson-master.zip を展開

②mqtttetris-handson-master フォルダ内のソースコードを確認


Bluemix にログイン①http://bluemix.net/ にアクセス


②IBM ID とパスワードを順に入力

③ログインできることを確認

データセンター地域、組織、スペースを確認

①画面右上の自分の IBM ID 部分をクリック

②データセンター地域、組織、スペースの内容を確認（異なっていたら変更）。今回は組織は米国南部、組織は自分の ID、スペースは dev を想定。


アプリケーションダッシュボードに移動

①画面左上のハンバーガーメニューから「アプリ」の「ダッシュボード」を選択

②アプリやサービスの一覧を確認できるダッシュボードページに移動する


「Node-RED スターター」アプリの作成

①ダッシュボード画面右上の「アプリの作成」をクリック

③固有のアプリ名※を入力して、「作成」をクリック※kkimura-nodered-20170617 など

②ボイラープレート一覧の中から “Node-RED Starter” を選択


Node-RED スターターアプリの確認①Node-RED アプリが用意できるまで待つ間に・・・

②画面左のメニューから「概要」を選択

③指定した名前のアプリができたことを確認

④メモリ量やインスタンス数を調整する場合はここを変更


今回のハンズオンで行うこと



MQTT

WebSocket

IBM Bluemix

IoT(Internet of Things)様々なデバイス、センサー、およびゲートウェイと通信するためのメッセージングプラットフォーム

デバイス（MQTT パブリッシャー）

データ中継点（MQTT ブローカー）

アプリサーバー

アプリケーション（MQTT サブスクライバー）

DBサーバー

デバイスからMQTT ブローカーにデータを送りさえすれば、後はプラットフォーム側に用意された仕組みが使える

Node-RED スターターアプリの初期設定①ステータスが「実行中」になったことを確認して「Visit」

②別ウィンドウで Node-RED が起動。「Next」


③”Secure your editor ..” を選択し、ユーザー名とパスワードを指定して「Next」＆「Finish」

Node-RED スターターアプリへのアクセス①Node-RED 初期画面にアクセスしたらエディタへ移動

②ユーザー名とパスワードを指定した場合は入力してログイン


③キャンバス画面を確認

Node-RED アプリ１作成(1)①アプリの URL （アプリ名.mybluemix.net）/redにアクセス

②キャンバスに http の入力ノードをドラッグ＆ドロップで配置


Node-RED アプリ１作成(2)③http 入力ノードをダブルクリックし、編集画面で URL を /publish に設定して「完了」

④ノードの表示文字が変わることを確認


⑤同様に template ノードと http 出力ノードを配置し、横の○同士を線で（ドラッグ＆ドロップで）結ぶ

Node-RED アプリ１作成(3)⑥template ノードをダブルクリックし、Name を「スマホ画面」、

Syntax Highlit を HTML、中身をダウンロードした mqttpublish.txt の中身をコピペして「完了」

⑦「デプロイ」をクリックして更新（＆保存）


⑧スマホのブラウザで（アプリケーションのURL）/publishにアクセスして、何かが動いていることを確認

⑨デバイス ID を確認

Node-RED アプリ２作成(1)①同様にしてもう１度、http 入力ノード、template ノード、http 出力ノードを配置し、ノード同士を線で結ぶ

②http 入力ノードの URL を /tetris として「完了」


③template ノードのNameを「ゲーム画面」、中身を tetris.txt のものをコピペして「完了」

Node-RED アプリ２作成(2)


④キャンバスが図のようになったことを確認して「デプロイ」

⑤PC のブラウザでhttp://（サーバー名）/tetris にアクセスして動作確認

※https ではなく http で

（確認）ここまでにやったこと



○

○

○

×

Node-RED アプリ３作成(1)①キャンバスに IBM IoT のインプットノードを配置


②IBM IoT インプットノードをダブルクリックして、DeviceId 欄にスマホ画面で確認したデバイス ID を入力して「完了」

Node-RED アプリ３作成(2)


③debug アウトプットノードをキャンバスに追加し、IBM IoT ノードと線をつなぐ

④debug アウトプットノードをダブルクリックし、Output をmsg.payload.d.ori に変更して、「デプロイ」

⑤Debug タブにスマホの傾き情報が流れてくることを確認



⑥WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ

⑦WebSocket ノードをダブルクリックし、鉛筆アイコンをクリック。Path の値を /ws/sensor に変更して「更新」＆「完了」

⑧最後に「デプロイ」


⑩テトリス画面とスマホ画面をリロードし、スマホの動きに合わせてゲームが動くことを確認


スマホテトリス完成！

完成！



○

○

○

×○

（補足）ソースコードの解説 – mqttpublish.txt

::

if( window.DeviceMotionEvent ){window.addEventListener( "devicemotion", deviceMotion );

}if( window.DeviceOrientationEvent ){window.addEventListener( "deviceorientation", deviceOrientation );

}::

deviceMotion（スマホが移動）イベントや、deviceOrientation（傾いた）イベントに反応して、その時の状態を集めています。

（補足）ソースコードの解説 – 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 で実装。

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

Technology

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

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