このページの本文へ

PROGRAMMING 古籏一浩の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()
書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング