#BMXUG IT 勉強会＠市川 2019-10-19 資料

1. 地図データでレースゲームを作って遊ぼう！
2019.10.19 #bmxug #bmxgg

2. １１月２日（いいフタの日）
マンホールナイト #11
＠ 江東区東大島文化センター３F
マンホールマップの新バージョンの
機能紹介と開発秘話を紹介する予定
お申し込みは
http://manholenight.info/
マンホール好きが集まって、
キャッキャウフフするイベント

3. 2020 年度以降の大学入試
• 「大学入試センター試験」から「大学入学共通テスト」の施行へ(2020 年度)
• 変更点
• マークシートに加えて、記述式の導入（国語総合、数学Ⅰ）
• 民間英語検定試験の活用（英検、ケンブリッジ英語、GTECなど）
• 「情報」が基礎科目として追加
• 国立大のAO入試・推薦入試を入学定員の30%まで拡大（目標）
• → 調査書、志望理由書、面接の重視割合が増える
• 「主体性を持って多様な人々と協働して学ぶ態度」が重要
• 「大学入学希望者学力評価テスト（仮称）」(2024 年度)
• CBT(Computer Based Testing) の導入を検討
• パソコンで試験を受ける
• 2020 年度からは小学校教育でのプログラミング必修化
• 中学入試
• 首都圏中学入試における「プログラミング」入試の増加

4. 今回作るもの
IoT
スマホをコントローラーにして使う！
２台で協力プレイ！

5. 大まかな流れ
0. 諸準備
• IBM Cloud へログイン
• Node-RED 環境構築
• Node-RED 解説
1. 画面の用意
• ゲーム画面
• スマホ操作画面
• 動作確認
2. データ連携
• スマホのセンサーデータをゲーム画面へ送信
3. おまけ
• 難易度調整
• ２人協力プレイ

6. 0. 諸準備

7. システム構成
Node-RED
レース
画面
スマホ
画面

8. IBM Cloud へログイン(1)
https://cloud.ibm.com/

9. IBM Cloud へログイン(2) 自分のアカウント名になっていることを確認

10. Node-RED の準備(1)
Node-RED を未作成の場合

11. Node-REDの準備(2)

12. Node-REDの準備(3)

13. Node-REDの準備(4)

14. Node-RED の準備(5)
※他の人が使わない名前（例： 名前-20191019-race）

15. Node-RED の準備(6)

16. Node-RED とは？
• IBM 英国 Hursley 研究所を中心に開発されたデータフローエディタ
• 各種データの流れと処理を定義するもの
• HTTP や MQTT、WebSocket といったプロトコルに対応
• 現在はオープンソース化されて、Linux Foundation 傘下で開発が続いている
• ほぼプログラミングすることなく、データ処理を定義する
https://nodered.org/

17. IoT(Internet of Things)
パブリッシャー ブローカー サブスクライバー

18. OpenStreetMap(OSM)
• 誰でも自由に地図を使えるよう、オープンデータの地理情報を作る
プロジェクト
• 誰でも参加可能、誰でも編集可能
• API が公開されていて、誰でもアプリケーション開発に利用可能
• 無料
• 今回のアプリケーションでも利用
https://openstreetmap.jp

19. Leaflet
• Web 地図を便利に扱うための JavaScript ライブラリ
• Google MAPs, OpenStreetMap, 国土地理院などの地図に対応
• Foursquare(Swarm), Pinterest, Flickr などで使われている
• GeoJSON 対応のスタイリングやマーカーなどに対応
• 使用例
<div id="map"></div>
<script>
// "map" divに地図を作成し、指定した場所とズームで表示する
var map = L.map( 'map' ).setView( [ 35.726207, 139.927341 ], 13 );
// OpenStreetMapタイルレイヤーを追加する
L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo( map );
</script>
https://leafletjs.com/

20. Node-RED の準備(7)

21. Node-RED の準備(8)
初回のみ

22. Node-RED の準備(9)
初回のみ

23. Node-RED の準備(10)
初回のみ

24. Node-RED の準備(11)
初回のみ

25. Node-RED へのログイン(1)

26. Node-RED へのログイン(2)

27. Node-RED へのログイン(3)
パレット
キャンバス
情報タブ
デバッグタブ
デプロイボタン
個々の四角を「ノード」と呼ぶ

28. 1. 画面の準備

29. ハンズオン用ソースコード
git clone する人はここからhttps://bit.ly/2mcTCds

30. ゲーム画面作成(1)
パレットの入力カテゴリから http を選んで、
キャンバスにドラッグ＆ドロップ

31. ゲーム画面作成(2)
パレットの機能カテゴリから template を選んで、
キャンバスにドラッグ＆ドロップ

32. ゲーム画面作成(3)
パレットの出力カテゴリから http response を選んで、
キャンバスにドラッグ＆ドロップ

33. ゲーム画面作成(4)
３つのノードを線で結合する

34. ゲーム画面作成(5)
http ノードをダブルクリック
メソッド： GET
URL: /drive
と指定
「完了」ボタン

35. ゲーム画面作成(6)
http ノードの見た目が指定内容に合わせて変わることを確認

36. ゲーム画面作成(7)
https://bit.ly/2kOpK70
この内容をコピー
（Ctrl+A, Ctrl+C）

37. ゲーム画面作成(8)
template ノードをダブルクリック
名前： ドライブ に変更
テンプレート： 先程コピーした内容（ペースト : Ctrl+V）
「完了」

38. ゲーム画面作成(9) 「デプロイ」ボタンをクリック

39. ゲーム画面作成(10)
PCブラウザで https://（アプリケーション名）.mybluemix.net/drive にアクセス
レースゲームが動いている！
スタート／ストップ： 下矢印
左： 左矢印
右： 右矢印

40. （おまけ）コードの紹介（１）
<style>
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#demoMap {
width: 100%;
height: 100%;
}
:
地図をブラウザ全画面に表示
//. 初期位置を中心とした地図を OpenStreetMap データで表示
map = L.map('demoMap', { dragging: false, zoomControl: false, minZoom: zoomlevel, maxZoom: zoomlevel }).setView( [ lat, lng ], zoomlevel );
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a>',
maxZoom: zoomlevel
}
).addTo( map );
鈴鹿サーキットのスタート地点を中心とした OSM 地図を表示
function render(){
//. 車を描画
for( var i = 0; i < 12; i ++ ){
$('#car').removeClass( 'rotate' + i );
}
$('#car').addClass( 'rotate' + anglelevel );
//. 地図を移動
if( speed > 0 ){
var z = ( 3 - anglelevel ) * Math.PI / 6;
lat += 0.0001 * Math.sin( z );
lng += 0.0001 * Math.cos( z );
map.panTo( new L.LatLng( lat, lng ) );
}
}
setInterval( render, 500 );
0.5 秒ごとに車を画面中心に（角度を変えて）描画
＆地図を移動

41. （おまけ）コードの紹介（２）
//. keyboard
document.body.onkeydown = function( e ){
var keys = {
37: 'left',
//38: 'up',
39: 'right',
40: 'down'
};
if( typeof keys[e.keyCode] != 'undefined' ){
switch( keys[e.keyCode] ){
case 'left':
steering_left();
break;
case 'right':
steering_right();
break;
case 'down':
breaking();
break;
default:
break;
}
}
};
左右矢印キーか下矢印キーに対応するハンドラー
function steering_left(){
anglelevel --;
if( anglelevel < 0 ){
anglelevel += 12;
}
}
function steering_right(){
anglelevel ++
if( anglelevel > 11 ){
anglelevel -= 12;
}
}
function breaking(){
speed = ( speed == 0 ? 1 : 0 );
}

42. スマホ操作画面作成(1)
２本目のフローを同様に作成する：
入力カテゴリーの http ノード、
機能カテゴリーの templete ノード、
出力カテゴリーの http response ノード
をドラッグ＆ドロップして、線で繋げる。

43. スマホ操作画面作成(2)
http ノードをダブルクリック
メソッド： GET
URL: /publish
と指定
「完了」

44. スマホ操作画面作成(3)
https://bit.ly/2kggGr8
この内容をコピー
（Ctrl+A, Ctrl+C）

45. スマホ操作画面作成(4)
template ノードをダブルクリック
名前： スマホ に変更
テンプレート： 先程コピーした内容（ペースト）
「完了」

46. スマホ操作画面作成(5) 「デプロイ」ボタンをクリック

47. スマホ操作画面作成(6)
スマホのブラウザで https://（アプリケーション名）.mybluemix.net/publish にアクセス
スマホの傾きや振動に応じて、
画面内の数値が変更されることを確認

48. ここまでのシステム構成
Node-RED
レース
画面
スマホ
画面
後はここだけ

49. 2. データ連携

50. データ連携(1)
３本目のフローを同様に作成する：
入力カテゴリーの ibmiot ノード、
機能カテゴリーの function ノード、
出力カテゴリーの debug ノード
をドラッグ＆ドロップして、線で繋げる。

51. データ連携(2)
function ノードをダブルクリック 名前： 変換
内容：
msg.payload = msg.payload.d.ori;
return msg;
と変更
「完了」

52. データ連携(3)
ibmiot ノードをダブルクリック
スマホ画面の上部に書かれている
１６桁の文字列をそのまま Device id に指定
「完了」

53. データ連携(4) 「デプロイ」ボタン
「デバッグ」タブに切り替え
デバッグタブにスマホの傾きが表示される
debug ノード右のボタンで
表示／非表示を切り替える
（表示を止めておく）

54. データ連携(5)
出力カテゴリーの websocket ノードをドラッグ＆ドロップして、
ibmiot ノードと接続する

55. データ連携(6)
websocket ノードをダブルクリック
鉛筆マークをクリック

56. データ連携(7)
パス: /ws/sensor
と入力して、「追加」ボタン
１つ前の画面に戻るので「完了」

57. データ連携(8) 「デプロイ」ボタン

58. データ連携(9) 左： 「前後」を 135 以上に
右： 「前後」を 45 以下に

59. 難しすぎる？

60. 難易度調整(1)
機能カテゴリーの delay ノードをドラッグ＆ドロップして、
ibmiot ノードと websocket ノードの間に接続する

61. 難易度調整(2)
delay ノードをダブルクリック
動作： メッセージの流量制限
流量： 2 メッセージ 1 秒
「中間メッセージを削除」にチェック
に設定する。
※この設定だと１秒間に２回だけ動かせる
細かく調整しやすいが、素早く動かすことはできない
「完了」

62. 難易度調整(3)
「デプロイ」をボタンを押して試してみる
必要に応じて、流量を調整する

63. 他のスマホを使う場合
他のスマホでスマホ画面を表示
Node-RED を開いて、ibmiot ノードを開き、
そのスマホ画面に表示されている
Device id の値に書き換えて、完了
デプロイしてからゲーム画面を開く

64. ２人協力プレイ（１）
出力カテゴリーの websocket ノードをドラッグ＆ドロップして、
delay ノードの後ろに配置し、delay ノードと接続する

65. ２人協力プレイ（２）
追加した websocket ノードをダブルクリックし、
パスを /ws/sensorL と書き換えて「更新」→「完了」

66. ２人協力プレイ（３）
４本目のフローを同様に作成する：
入力カテゴリーの ibmiot ノード、
機能カテゴリーの delay ノード、
出力カテゴリーの websocket ノード
をドラッグ＆ドロップして、線で繋げる。

67. ２人協力プレイ（４）
ibmiot ノードの Device Id は
もう一台のスマホで /publish ページを
表示した時の文字列を書き写し、
delay ノードの設定は同様に
メッセージの流量制限
全てのメッセージ
2 メッセージ／1秒
中間メッセージを削除にチェック
websocket ノードのパスを
/ws/sensorR
にして更新→完了
最後にデプロイ

68. ２人協力プレイ（５） /ws/sensorL 側: x, y, z いずれかが５以上で左、
/ws/sensorR 側: x, y, z いずれかが５以上で右

69. 楽しかったですか？
• 感想を #BMXUG タグを付けて SNS で教えてください。
• 今後の運営の参考にさせていただきます。

70. IT に興味を持つきっかけに・・・
感想、要望、等々・・・を
#bmxug タグを付けてツイートしてください！