古籏一浩のJavaScriptラボ ― 第28回

加速度センサーで操縦する地図サイトを作ろう

2010年03月12日 11時00分更新

古籏一浩

ツイートする

※この記事は「古籏一浩のJavaScriptラボ」の第28回です。過去の記事も合わせてご覧ください。


Firefox 3.6とネット環境があれば、ノートPCの傾きで操作する地図が作れる（写真はイメージです）

Firefox 3.6の新機能で遊ぶ

　今年1月、Firefoxの最新版「Firefox 3.6」がリリースされました。FirefoxはHTML5を積極的にサポートするなど、開発者にとっては“遊びがい”のあるブラウザーの1つです。最新版の3.6でもいくつか興味深い機能が追加されています。

　注目は、iPhoneやゲーム機のコントローラーでおなじみの「加速度センサー」に対応したこと。加速度センサーを搭載したPCなら、本体の傾きに応じてJavaScriptの処理を実行できるようになりました。そこで今回のJavaScriptラボでは、Firefox 3.6の「加速度センサーAPI」とGoogleマップを使って、PCを傾けた方向にスクロールする地図を作ってみましょう。さらに、HTML5の「Geo Location API」を使い、地図のスタート地点（デフォルトの表示位置）を現在地に変更する機能も付けてみます。

加速度センサーはノートパソコンの一部に搭載されていますが、デスクトップマシンにはありません。また、加速度センサー搭載マシンのすべてで動作する保証はありませんのでご了承ください（著者および編集部ではMacBook、Think Pad X 61Sで動作を確認済み）。
現在利用できるGoogleマップにはバージョン2と3がありますが、ここではバージョン3を使用します。Googleマップバージョン3に関しては、本連載の第1回を参照してください。　なお、2010年3月現在、一部のメソッド名が以下のように変更されています。
- set_position()　　→　　setPosition()
- set_center()　　→　setCenter()