|
|---|
HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapのコンパス機能と加速度センサーを使ってiPhoneアプリを作成します。
コンパス機能といえば、HTML5のGeolocation APIにも、方角を示すheadingプロパティがあります。
- Geolocation API
- http://www.w3.org/TR/geolocation-API/
PhoneGapではGeolocation APIも使用できますが、Geolocation APIでは一定速度度で移動したときにしか方角が取得できません。一方、PhoneGapのコンパスAPIは、iPhoneを動かしたときに、すぐに方角に対応した値を返しますので、リアルタイムで方角を知りたい場合はPhoneGapのコンパスAPIが適しています※1。
今回は、iPhoneに標準で入っているコンパスアプリをPhoneGapとHTML5+JavaScriptで再現してみましょう。
※1 iOS 5からはリアルタイムでコンパスの値を取得できる機能が追加されました。後の連載で解説します。
PhoneGapプロジェクトの作成
最初に作成するのは、方角の値をリアルタイムで表示するだけのシンプルなアプリです。その後、方角を示すコンパスの画像を回転させます。
まず、Xcodeを起動し、これまでと同様に新規プロジェクトを作成します（関連記事）。
 |
|---|
| ファイルメニューから「新規プロジェクト...」を選択 |
 |
|---|
| PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック |
 |
|---|
| 作成するプロジェクト名を入力し保存 |
新規プロジェクトが作成されたら準備完了です。コンパスAPIは標準で用意されているので、特にプラグインなどを入れたりする必要はありません。
ソーシャルリアクション
この連載の記事
- 第77回 もうFlashは要らない!?スマホ用CSS3アニメを作ろう
- 第76回 iPhoneでも動くアニメが作れるSencha Animatorの使い方
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- 第71回 iPhoneがPhoneGapで簡易電子書籍リーダーに
- 第70回 PhoneGapでMapKitを使って地図アプリを開発
- 第69回 HTML5+CSS3でiPhone用動画アプリを作ろう
- 第68回 iPhone/iPad両対応！PhoneGapで作るアルバムアプリ
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
