古籏一浩の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()
この連載の記事
- 第27回 BridgeのGUIをJavaScriptで操ろう！
- 第26回 Photoshopを超えた!?BridgeとJSで作る画像フィルター
- 第25回 画像の自動アップロードもJavaScriptにお任せ！
- 第24回 JavaScriptでRSSからPhotoshop画像を生成！
- 第23回 Adobe BridgeのJavaScriptでXMLを操作しよう
- 第22回 JSでWeb制作を自動化するAdobe Bridge活用入門
- 第21回 飛び出すカルーセルをUIZE Frameworkで作る（後編）
- 第20回 飛び出すカルーセルをUIZE Frameworkで作る（前編）
- 第19回 JS超えた!? UIZE Frameworkの特殊効果を見せます！
- 第18回 JSで超ド派手なアニメが作れる「UIZE Framework」入門
- この連載の一覧へ
![うしまん [デジタル写真集]](http://ecx.images-amazon.com/images/I/51X-TDatRGL._SL75_.jpg "うしまん [デジタル写真集]")
