まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:leaflet

OpenStreetMap とその API を使って簡易ドライブゲームを作って公開しました。

OpenStreetMap は誰でも無料&自由に使える地図や地理情報のオープンデータプロジェクトです。API も公開されており、位置情報アプリケーション開発時に利用することができます:
2019081707


この OpenStreetMap API を使ってドライブゲームを作って公開してみました。GitHub リポジトリはこちらです:
https://github.com/dotnsf/openmap_drive/

2019081708


実質的に index.html ファイル1つだけのプロジェクトなので GitHub Pages で公開もしています。実際に遊ぶには PC のブラウザでこちらを参照してください:
https://github.com/dotnsf/openmap_drive/

2019081702


パラメータを付けずにアクセスすると、デフォルトで三重県鈴鹿市の鈴鹿サーキットのメインストレートの一部が OpenStreetMap でブラウザ画面いっぱいに表示され、その中心に赤い車(この車でドライブします)が表示されます。

キー操作は以下の3つのみです:
 矢印キーの「下」: スタート/ストップ
 矢印キーの「左」: 左旋回
 矢印キーの「右」: 右旋回


とりあえず「下」を押すと動き出します(もう一度押すと止まります)。初期状態では5時の方角を向いているので右下方向に向かって移動を始めます(実際には車の位置は変わらず、地図部分がスクロールしていきます)。矢印の「左」や「右」を押して、なるべくコース上を走るようにしてみましょう:
2019081703
(↑ 1990年にセナとプロストが接触した1コーナー)


ぶっちゃけコースアウトしようが、何かと接触しようが車は動き続けます。なので「細かいことは忘れて」コースを走り続けましょう:
2019081704
(↑ 1989年にセナとプロストが接触したトライアングルシケイン、ここはこの赤い車でも難しい)


起動時に URL パラメータを与えることで初期位置と初期角度を変えることもできます:
 lat: 緯度
 lng: 経度
 anglelevel: 角度(何時の方向、という時計の短針の方角を示す。0~11 の整数)

下図は
 https://dotnsf.github.io/openmap_drive/?lat=43.733009&lng=7.4228981&anglelevel=4
にアクセスした時の様子です。画面下に有名なレストラン "La Rascasse(ラスカス)" が見えていますが、ここは F-1 モナコグランプリ市街地コース上です。これから最終コーナーに向かうラスカス・コーナーのあたり:
2019081705


地図で表示するのは必ずしもサーキットである必要はありません。こちら
 https://dotnsf.github.io/openmap_drive/?lat=35.6828558&lng=139.7596134&anglelevel=1
は日本の皇居前、内堀通りを走る状態からスタートします:
2019081706


実は以前に同様のゲームを Google MAPs API で作って教育目的に使っていたことがありました。他の地図 API と比較して多くの機能を持ち、今でも便利に使えると思ってはいるのですが、Google MAPs API は当時と異なり現在では API キーの取得が必要になってしまい、オープンな教材としては使いにくくなってしまったのでした。


という背景もあって、今回は Google MAPs API の API キーを使うのではなく、地図 API としてはOpenStreetMap API を、leaflet.js ライブラリを併用して使う形で作り直しました。加えて車の画像も「いらすとや」で公開されているものを直接参照し、CSS の transform で角度を変えて表示するように改良しました(この辺り、詳しくは index.html の内容を直接参照してください)。結果として(画像ファイルは不要になり)index.html ファイル1つだけで完結できるようになって、GitHub Pages で公開できる形にもなった、という副産物的なメリットも生まれました。


今回公開したファイルはあくまでテンプレートというか、「これを元に改良するための素」のつもりです。このゲームは上述のように3つのキーだけで(3種類の信号だけで)操作できるので、以前に紹介したキータッチと組み合わせて体感ゲームにしたり、IoT 的な要素を使ってデバイスからの信号を受け取れるようにしたり、身近なものをリモートコントローラー代わりにして使えたら面白いかな、と思っています。あと少し技術方向性は異なるけど、複数台の車を同時に走らせたりとかも面白そう。


マンホールマップなど、地図や位置情報を使ったアプリを何度か作ったことがあります。地図を扱うためのライブラリはいくつかありますが、leaflet.js というオープンソースのマップクライアントライブラリを使う機会がありました:
2017110901


leaflet.js 自体はオープンソースで提供された JavaScript によるマップ操作クライアントライブラリです。ここで扱うマップは OpenStreetMap だったり、国土地理院のものだったり、(プラグインを使えば)Google MAPs だったりを選ぶことができます。

使い方も簡単で、まずは(CDN などから)leaflet の css と javascript をロードしておきます(以下の例では leaflet 1.2.0 を使っています。また後で使うので jQuery もロードしています):
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>

HTML 内にマップを表示する部分を定義します。この例ではブラウザ画面全体に広がる <div id="demoMap"></div> を定義しています:
<style>
html, body  {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}
#demoMap {
	width: 100%;
	height: 100%;
}
</style>
  :
  :
<body>
<div id="demoMap"></div>
</body>

そしてメイン部分。上記の demoMap 内に地図を表示します。以下の例では OpenStreetMap を使って千葉県船橋市役所周辺の地図を表示し、市役所の位置にマーカーを置いて、2秒おきにマーカーをランダムウォークさせる、というものです:
<script>
//. 船橋市役所の緯度経度(初期位置)
var lat = 35.69471100;
var lng = 139.98262100;

var map = null;
var marker = null;

$(function(){
  //. 船橋市役所を中心とした地図を OpenStreetMap データで表示
  map = L.map('demoMap').setView( [ lat, lng ], 15 );
  L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a>',
      maxZoom: 18
    }
  ).addTo( map );
  
  //. 初期状態で市役所にマーカーを設置
  marker = L.marker( [ lat, lng ] ).addTo( map );

  //. マーカーを2秒おきにランダムウォークさせる
  setInterval( randomWalk, 2000 );
});

function randomWalk(){
  //. マーカー位置をランダムに移動
  lat += Math.random() / 100.0 - 0.005;
  lng += Math.random() / 100.0 - 0.005;
  var latlng = new L.LatLng( lat, lng );
  marker.setLatLng( latlng );
}
</script>


完成品の HTML はこちらに用意しました。全体を確認したい方はこちらから HTML ファイルをダウンロードしてください:
https://raw.githubusercontent.com/dotnsf/samples/master/leafletjs.html


ダウンロードした HTML をウェブブラウザで表示すると、以下のように船橋市役所を中心としたマップが表示され、青いマーカーが2秒おきにその場所を少しずつ変えて移動する様子が確認できると思います:
2017110901


こういったライブラリを使って地図アプリを作っておくと、利用する地図を変える(例えば OpenStreetMap だったり、Google MAPs だったりに変える)のが楽になりますね。

このページのトップヘ