年始に作成したトラックアップ地図を少しずつ機能を追加してきた。
デモモードを実装したので、iPhone/iPod touchを持っている人は是非見て欲しいと思う。
デモモードは現在地を内部的に変更し、トラックアップ地図が移動時にどのような挙動を示すのかを確認する事ができる。
デモムービーを撮っては見たけどボケててみにくい。
デモムービーを撮っては見たけどボケててみにくい。
実際に使用するには次のリンク先を使って欲しい。
主な機能と技術的なことについて書いてみる。特出して目新しい機能はないが、注目して欲しいのはブラウザ上で動いているということ。Webアプリでもここまでできる。
地図の拡大縮小
Safariの独自イベントであるgesture系のものを使い、ピンチアウト/ピンチイン(二本指で画面に触れ、指を広げる/狭める操作)で「地図の拡大縮小」ができる。拡大縮小にはGoogle MapsのAPIを使用している。ズームの比率が表示されないのは既知の不具合。ロジック的には問題はないはずだけど原因は不明。
地図の回転
常に北を上に表示する「ノーズアップ機能」、常に進行方向を上に表示する「トラックアップ機能」(ヘディングアップ機能と言われることもある)がある。この両方の機能をオフにすると、ピンチ(二本指で画面に触れ、回転させる操作)で視点の方向を自由に変更できるようになる。位置情報取得に使っているgeolocationというAPIでは、位置情報だけでなくheadingプロパティで向いている方向もわかるはずだが、Safari mobile for iPhoneOSでは対応していないようだ。このため、トラックアップ機能は、現在地と直近の位置から向いている方向を推定している。ピンチの検出にはSafari mobileのgesture系のイベントを利用し、地図の回転にはCSSのTransformのrotateを使用している。
バーズアイビュー機能
「バーズアイビュー機能」カーナビのように、進行方向後方上空から、現在地を見下ろすように表示する機能。この機能がオフの場合、現在地の上空から真下を見下ろすような視点となる。バーズアイビューはCSSのTransform 3Dで実現している。
地図の表示位置変更
「現在地の自動追尾機能」をオンにすると、現在地を常に画面の中心(バーズアイビュー機能では画面下方)に表示する。自動追尾をオフにすると、ドラッグ操作(もしくは画面を指で弾くフリック操作)で表示位置を変更できる。ドラッグ操作はSafari独自イベントのtouch系のイベントで検出し、表示位置の変更にはGoogle MapsのAPIを使用している。
問題点等
地図の回転等のスクラッチで実装した部分は操作が機敏だけど、地図の表示位置変更と拡大縮小は動きが遅い。これは、Google MapsのAPIを想定されていない使い方をしているためだと思う。特に、地図の中心位置を変更するsetCenterやpanBy,panToはパンのアニメーションが入ってしまう(正確には、setCenterは移動距離が短い場合のみパンとなる)。
以前のバージョンの一番の問題は著作権表示で、地図を回転させる事で著作権表示が画面外に出てしまっていた。表示領域に外接するように地図のサイズを変更していたので、回転角が90度の倍数に近い場合は表示されていたが、逆にいうとそれ以外では表示されていなかった。今のバージョンでは地図を二枚重ねにしてなんとか表示させている。ただし、まだ問題が残っていて、ユーザの操作をイベントとして受け取るDIV要素が全画面を覆っているため、著作権表示部分のリンクをクリックできない。これもなんとかしたい。
以前のバージョンの一番の問題は著作権表示で、地図を回転させる事で著作権表示が画面外に出てしまっていた。表示領域に外接するように地図のサイズを変更していたので、回転角が90度の倍数に近い場合は表示されていたが、逆にいうとそれ以外では表示されていなかった。今のバージョンでは地図を二枚重ねにしてなんとか表示させている。ただし、まだ問題が残っていて、ユーザの操作をイベントとして受け取るDIV要素が全画面を覆っているため、著作権表示部分のリンクをクリックできない。これもなんとかしたい。
位置情報をこちらに送信したくない場合は、Githubに公開しているソースを自分のサーバに設置するか、iPhone/iPod touch内に保存して利用して欲しい。(といっても、コードを見てもらうとわかると思うけど、こちらに位置情報を送信するような処理は入っていない。)