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

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

自己紹介
Twitter: @dotnsf
facebook: https://www.facebook.com/juge.me
Blog: 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 アプリが用意できるまで待つ間に・・・
②画面左のメニューから「概要」を選択
③指定した名前のアプリができたことを確認
④メモリ量やインスタンス数を調整する場合はここを変更

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 の入力ノードを
ドラッグ＆ドロップで配置

③http 入力ノードをダブルクリックし、編集画面で URL を /publish に設定して「完了」
④ノードの表示文字が変わることを確認
⑤同様に template ノードと http 出力ノードを配置し、
横の○同士を線で（ドラッグ＆ドロップで）結ぶ

⑥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 を入力して「完了」

③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 の値を見て、右や左にコントロールする

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from softlayerjp

More from softlayerjp (20)

Recently uploaded

Recently uploaded (9)