Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

地図データでレースゲームを作って遊ぼう!

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

  • Login to see the comments

  • Be the first to like this

地図データでレースゲームを作って遊ぼう!

  1. 1. 地図データでレースゲームを作って遊ぼう! 2019.10.19 #bmxug #bmxgg
  2. 2. 11月2日(いいフタの日) マンホールナイト #11 @ 江東区東大島文化センター3F マンホールマップの新バージョンの 機能紹介と開発秘話を紹介する予定 お申し込みは http://manholenight.info/ マンホール好きが集まって、 キャッキャウフフするイベント
  3. 3. 2020 年度以降の大学入試 • 「大学入試センター試験」から「大学入学共通テスト」の施行へ(2020 年度) • 変更点 • マークシートに加えて、記述式の導入(国語総合、数学Ⅰ) • 民間英語検定試験の活用(英検、ケンブリッジ英語、GTECなど) • 「情報」が基礎科目として追加 • 国立大のAO入試・推薦入試を入学定員の30%まで拡大(目標) • → 調査書、志望理由書、面接の重視割合が増える • 「主体性を持って多様な人々と協働して学ぶ態度」が重要 • 「大学入学希望者学力評価テスト(仮称)」(2024 年度) • CBT(Computer Based Testing) の導入を検討 • パソコンで試験を受ける • 2020 年度からは小学校教育でのプログラミング必修化 • 中学入試 • 首都圏中学入試における「プログラミング」入試の増加
  4. 4. 今回作るもの IoT スマホをコントローラーにして使う! 2台で協力プレイ!
  5. 5. 大まかな流れ 0. 諸準備 • IBM Cloud へログイン • Node-RED 環境構築 • Node-RED 解説 1. 画面の用意 • ゲーム画面 • スマホ操作画面 • 動作確認 2. データ連携 • スマホのセンサーデータをゲーム画面へ送信 3. おまけ • 難易度調整 • 2人協力プレイ
  6. 6. 0. 諸準備
  7. 7. システム構成 Node-RED レース 画面 スマホ 画面
  8. 8. IBM Cloud へログイン(1) https://cloud.ibm.com/
  9. 9. IBM Cloud へログイン(2) 自分のアカウント名になっていることを確認
  10. 10. Node-RED の準備(1) Node-RED を未作成の場合
  11. 11. Node-REDの準備(2)
  12. 12. Node-REDの準備(3)
  13. 13. Node-REDの準備(4)
  14. 14. Node-RED の準備(5) ※他の人が使わない名前(例: 名前-20191019-race)
  15. 15. Node-RED の準備(6)
  16. 16. Node-RED とは? • IBM 英国 Hursley 研究所を中心に開発されたデータフローエディタ • 各種データの流れと処理を定義するもの • HTTP や MQTT、WebSocket といったプロトコルに対応 • 現在はオープンソース化されて、Linux Foundation 傘下で開発が続いている • ほぼプログラミングすることなく、データ処理を定義する https://nodered.org/
  17. 17. IoT(Internet of Things) パブリッシャー ブローカー サブスクライバー
  18. 18. OpenStreetMap(OSM) • 誰でも自由に地図を使えるよう、オープンデータの地理情報を作る プロジェクト • 誰でも参加可能、誰でも編集可能 • API が公開されていて、誰でもアプリケーション開発に利用可能 • 無料 • 今回のアプリケーションでも利用 https://openstreetmap.jp
  19. 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. 20. Node-RED の準備(7)
  21. 21. Node-RED の準備(8) 初回のみ
  22. 22. Node-RED の準備(9) 初回のみ
  23. 23. Node-RED の準備(10) 初回のみ
  24. 24. Node-RED の準備(11) 初回のみ
  25. 25. Node-RED へのログイン(1)
  26. 26. Node-RED へのログイン(2)
  27. 27. Node-RED へのログイン(3) パレット キャンバス 情報タブ デバッグタブ デプロイボタン 個々の四角を「ノード」と呼ぶ
  28. 28. 1. 画面の準備
  29. 29. ハンズオン用ソースコード git clone する人はここからhttps://bit.ly/2mcTCds
  30. 30. ゲーム画面作成(1) パレットの入力カテゴリから http を選んで、 キャンバスにドラッグ&ドロップ
  31. 31. ゲーム画面作成(2) パレットの機能カテゴリから template を選んで、 キャンバスにドラッグ&ドロップ
  32. 32. ゲーム画面作成(3) パレットの出力カテゴリから http response を選んで、 キャンバスにドラッグ&ドロップ
  33. 33. ゲーム画面作成(4) 3つのノードを線で結合する
  34. 34. ゲーム画面作成(5) http ノードをダブルクリック メソッド: GET URL: /drive と指定 「完了」ボタン
  35. 35. ゲーム画面作成(6) http ノードの見た目が指定内容に合わせて変わることを確認
  36. 36. ゲーム画面作成(7) https://bit.ly/2kOpK70 この内容をコピー (Ctrl+A, Ctrl+C)
  37. 37. ゲーム画面作成(8) template ノードをダブルクリック 名前: ドライブ に変更 テンプレート: 先程コピーした内容(ペースト : Ctrl+V) 「完了」
  38. 38. ゲーム画面作成(9) 「デプロイ」ボタンをクリック
  39. 39. ゲーム画面作成(10) PCブラウザで https://(アプリケーション名).mybluemix.net/drive にアクセス レースゲームが動いている! スタート/ストップ: 下矢印 左: 左矢印 右: 右矢印
  40. 40. (おまけ)コードの紹介(1) <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. 41. (おまけ)コードの紹介(2) //. 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. 42. スマホ操作画面作成(1) 2本目のフローを同様に作成する: 入力カテゴリーの http ノード、 機能カテゴリーの templete ノード、 出力カテゴリーの http response ノード をドラッグ&ドロップして、線で繋げる。
  43. 43. スマホ操作画面作成(2) http ノードをダブルクリック メソッド: GET URL: /publish と指定 「完了」
  44. 44. スマホ操作画面作成(3) https://bit.ly/2kggGr8 この内容をコピー (Ctrl+A, Ctrl+C)
  45. 45. スマホ操作画面作成(4) template ノードをダブルクリック 名前: スマホ に変更 テンプレート: 先程コピーした内容(ペースト) 「完了」
  46. 46. スマホ操作画面作成(5) 「デプロイ」ボタンをクリック
  47. 47. スマホ操作画面作成(6) スマホのブラウザで https://(アプリケーション名).mybluemix.net/publish にアクセス スマホの傾きや振動に応じて、 画面内の数値が変更されることを確認
  48. 48. ここまでのシステム構成 Node-RED レース 画面 スマホ 画面 後はここだけ
  49. 49. 2. データ連携
  50. 50. データ連携(1) 3本目のフローを同様に作成する: 入力カテゴリーの ibmiot ノード、 機能カテゴリーの function ノード、 出力カテゴリーの debug ノード をドラッグ&ドロップして、線で繋げる。
  51. 51. データ連携(2) function ノードをダブルクリック 名前: 変換 内容: msg.payload = msg.payload.d.ori; return msg; と変更 「完了」
  52. 52. データ連携(3) ibmiot ノードをダブルクリック スマホ画面の上部に書かれている 16桁の文字列をそのまま Device id に指定 「完了」
  53. 53. データ連携(4) 「デプロイ」ボタン 「デバッグ」タブに切り替え デバッグタブにスマホの傾きが表示される debug ノード右のボタンで 表示/非表示を切り替える (表示を止めておく)
  54. 54. データ連携(5) 出力カテゴリーの websocket ノードをドラッグ&ドロップして、 ibmiot ノードと接続する
  55. 55. データ連携(6) websocket ノードをダブルクリック 鉛筆マークをクリック
  56. 56. データ連携(7) パス: /ws/sensor と入力して、「追加」ボタン 1つ前の画面に戻るので「完了」
  57. 57. データ連携(8) 「デプロイ」ボタン
  58. 58. データ連携(9) 左: 「前後」を 135 以上に 右: 「前後」を 45 以下に
  59. 59. 難しすぎる?
  60. 60. 難易度調整(1) 機能カテゴリーの delay ノードをドラッグ&ドロップして、 ibmiot ノードと websocket ノードの間に接続する
  61. 61. 難易度調整(2) delay ノードをダブルクリック 動作: メッセージの流量制限 流量: 2 メッセージ 1 秒 「中間メッセージを削除」にチェック に設定する。 ※この設定だと1秒間に2回だけ動かせる 細かく調整しやすいが、素早く動かすことはできない 「完了」
  62. 62. 難易度調整(3) 「デプロイ」をボタンを押して試してみる 必要に応じて、流量を調整する
  63. 63. 他のスマホを使う場合 他のスマホでスマホ画面を表示 Node-RED を開いて、ibmiot ノードを開き、 そのスマホ画面に表示されている Device id の値に書き換えて、完了 デプロイしてからゲーム画面を開く
  64. 64. 2人協力プレイ(1) 出力カテゴリーの websocket ノードをドラッグ&ドロップして、 delay ノードの後ろに配置し、delay ノードと接続する
  65. 65. 2人協力プレイ(2) 追加した websocket ノードをダブルクリックし、 パスを /ws/sensorL と書き換えて「更新」→「完了」
  66. 66. 2人協力プレイ(3) 4本目のフローを同様に作成する: 入力カテゴリーの ibmiot ノード、 機能カテゴリーの delay ノード、 出力カテゴリーの websocket ノード をドラッグ&ドロップして、線で繋げる。
  67. 67. 2人協力プレイ(4) ibmiot ノードの Device Id は もう一台のスマホで /publish ページを 表示した時の文字列を書き写し、 delay ノードの設定は同様に メッセージの流量制限 全てのメッセージ 2 メッセージ/1秒 中間メッセージを削除にチェック websocket ノードのパスを /ws/sensorR にして更新→完了 最後にデプロイ
  68. 68. 2人協力プレイ(5) /ws/sensorL 側: x, y, z いずれかが5以上で左、 /ws/sensorR 側: x, y, z いずれかが5以上で右
  69. 69. 楽しかったですか? • 感想を #BMXUG タグを付けて SNS で教えてください。 • 今後の運営の参考にさせていただきます。
  70. 70. IT に興味を持つきっかけに・・・ 感想、要望、等々・・・を #bmxug タグを付けてツイートしてください!

×