ハンズオン：bluemix とスマホでゲームを作ろう！

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

2017.Feb

自己紹介

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 となる

•組織は自分の ID と同じ組織、スペースは dev を使うものとする

•自分のスマホ(iPhone/Android)• ジャイロセンサー付きのもの

大まかな流れ

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

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

3. ソースコード管理機能を追加

4. ソースコードにハンズオン用コードを追加

5. 追加したコードをアプリケーションに反映

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

7. スマホでゲームをコントロールするアプリ完成

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

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

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


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

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


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


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

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

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

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

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


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

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

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


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

①ダッシュボード画面右上の「アプリの作成」をクリック ③固有のアプリ名を入力して、「作成」をクリック

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


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

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

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

④必要であればメモリ量やインスタンス数を調整


IBM DevOps サービスに Git リポジトリ追加①「Git の追加」をクリック（注「有効化」ではない）

②「接続」をクリック

③「閉じる」をクリック


IBM DevOps サービスのWeb IDE に移動①元の画面の「コードの編集」をクリック

②セットアップを待つ

③Web IDE に移動


ソースコードにゲーム用機能を追加①public フォルダを右クリックし、インポート –ファイルまたは zip アーカイブを選択

②mqtttetris からダウンロード＆展開したファイルを全て指定

③mqtttetris のファイルがインポートされたことを確認


（おまけ）ソースコードを変更

①public フォルダ内の tetris.html を選択

②<title>タグ内の文字列を変更

<!DOCTYPE html><html>

<head><title>スマホでテトリス</title><link rel='stylesheet' href='style.css' />

</head><body onload="connect()">

<audio id="clearsound" src="pop.ogg" preload="auto"></audio>

<canvas width='300' height='600'></canvas><script src='tetris.js'></script><script src='controller.js'></script><script src='render.js'></script>

</body></html>


ソースコードを更新して、アプリケーションにデプロイ

①画面左端上から３番目の Git アイコンをクリック

②変更コメント（テトリス追加、など）を入力して、「コミット」をクリック

③コミット後、「プッシュ」をクリック


デプロイ成功を確認①画面右上の “BUILD & DEPLOY” を選択

③両方成功することを確認

②Build Stage と Deploy Stage の様子を確認しながら待つ


（一旦）動作確認①スマホからアプリの URL （アプリ名.mybluemix.net）/publish.html にアクセス

③PC からアプリの URL （http://アプリ名.mybluemix.net）/tetris.html にアクセス

②画面上部中央に表示されている文字列（deviceId）を確認

※まだ操作はできません5. 追加したコードをアプリケーションに反映

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

②キャンバスに IBM IoT のインプットノードを配置


Node-RED アプリ作成(2)④debug アウトプットノードをキャンバスに追加し、ダブルクリック先の Output をmsg.payload.d.ori に変更して、IBM IoT ノードと線をつなぐ

③IBM IoT インプットノードをダブルクリックして、deviceId 欄にスマホ画面で確認した deviceId を入力して Done


Node-RED アプリ作成(3)⑥Debug タブに情報が流れてくることを確認⑤Deploy をクリックして、一旦実行

（スマホを動かしてみる）


Node-RED アプリ作成(4)⑧WebSocket ノードの出力先（鉛筆アイコンから）を

/ws/sensor に変更⑦WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ


Node-RED アプリ作成(5)⑩テトリス画面をリロードし、スマホの動きに合わせてテトリミノが動くことを確認

⑨再度 Deploy

7. スマホでゲームをコントロールするアプリ完成

完成！

（補足）ソースコードの解説 – tetris.js

:

:

var colors = [

‘cyan’, ‘orange’, ‘blue’, ‘yellow’, ‘red’, ‘green’, ‘purple’

];

:

:

７つのテトリミノの色を決めている配列変数（この中身を変えるとゲームの色も変わる）例：

‘#ff6a00’, ‘#ff7f7f’, ‘#ffd800’, ‘#00ffff’, ‘#00ff21’, ‘#ff006e’, ‘#e8ffeb’

（補足）ソースコードの解説 – controller.js

/*

キーボードを入力した時に一番最初に呼び出される処理

document.body.onkeydown = function( e ) {

// キーに名前をセットする

var keys = {

37: 'left',

39: 'right',

40: 'down',

38: 'rotate'

};

if ( typeof keys[ e.keyCode ] != 'undefined' ) {

// セットされたキーの場合はtetris.jsに記述された処理を呼び出す

keyPress( keys[ e.keyCode ] );

// 描画処理を行う

render();

}

};

*/

var socket;

var th = 5; //. しきい値

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();

:

元々のコードのキー入力判定部分をコメントアウト自身の /ws/sensor のWebSocket を監視し、何か送られてきた時はその中身から傾きの値を見てキー判定する

（補足）ソースコードの解説 – publish.html

:

:

function publishMessage(){

if( deviceid != null ){

var d = {};

if( lat != null ){

d[‘lat’] = lat;

$(‘#lat’).html( lat );

}

:

:MQTT パブリッシャー機能を JavaScript で実装。deviceMotion（スマホが移動）イベントや、deviceOrientation（傾いた）イベントに反応して、状態を IBM IoT Platform に送信しつつ、画面にも表示する。

ハンズオン：bluemix とスマホでゲームを作ろう！

Technology