このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第78回

PhoneGapでiPhoneのコンパスアプリを再現

2011年11月30日 14時27分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapのコンパス機能と加速度センサーを使ってiPhoneアプリを作成します。

 コンパス機能といえば、HTML5のGeolocation APIにも、方角を示すheadingプロパティがあります。

 PhoneGapではGeolocation APIも使用できますが、Geolocation APIでは一定速度度で移動したときにしか方角が取得できません。一方、PhoneGapのコンパスAPIは、iPhoneを動かしたときに、すぐに方角に対応した値を返しますので、リアルタイムで方角を知りたい場合はPhoneGapのコンパスAPIが適しています※1

 今回は、iPhoneに標準で入っているコンパスアプリをPhoneGapとHTML5+JavaScriptで再現してみましょう。


※1 iOS 5からはリアルタイムでコンパスの値を取得できる機能が追加されました。後の連載で解説します。


PhoneGapプロジェクトの作成

 最初に作成するのは、方角の値をリアルタイムで表示するだけのシンプルなアプリです。その後、方角を示すコンパスの画像を回転させます。

 まず、Xcodeを起動し、これまでと同様に新規プロジェクトを作成します(関連記事)。

【図】1.png
ファイルメニューから「新規プロジェクト...」を選択
【図】2.png
PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック
【図】3.png
作成するプロジェクト名を入力し保存

 新規プロジェクトが作成されたら準備完了です。コンパスAPIは標準で用意されているので、特にプラグインなどを入れたりする必要はありません。

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

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

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

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

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

ランキング