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

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

自己紹介
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 となる
• 組織は自分の 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）を確認
※まだ操作はできません

Node-RED アプリ作成(1)
①アプリの URL （アプリ名.mybluemix.net）/redにアクセス
②キャンバスに IBM IoT のインプットノードを配置

④debug アウトプットノードをキャンバスに追加し、
ダブルクリック先の Output を msg.payload.d.ori に変更して、
IBM IoT ノードと線をつなぐ
③IBM IoT インプットノードをダブルクリックして、
deviceId 欄にスマホ画面で確認した deviceId を入力して Done

⑥Debug タブに情報が流れてくることを確認⑤Deploy をクリックして、一旦実行
（スマホを動かしてみる）

⑧WebSocket ノードの出力先（鉛筆アイコンから）を
/ws/sensor に変更
⑦WebSocket アウトプットノードを追加し、IBM IoT ノードとつなぐ

⑩テトリス画面をリロードし、スマホの動きに合わせて
テトリミノが動くことを確認
⑨再度 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 とスマホでゲームを作ろう！

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

Similar to ハンズオン：Bluemix とスマホでゲームを作ろう！ (20)

More from softlayerjp

More from softlayerjp (20)

Recently uploaded

Recently uploaded (8)

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