|
|
|---|
iPhone 4Sの発売と同時にiOSがバージョンアップされ、「iOS 5」になりました。iOS 5の新機能といえばiCloudとの連携が有名ですが、WebブラウザーのSafariも改良され、コンパスの値をリアルタイムで取得する機能と、並列処理を実行できる「Web Workers」が追加されました（Web Workersについては本連載の第42回「JavaScriptで並列処理ができるWeb Workers」を参照してください）。
今回はコンパスの値をリアルタイムで取得する機能を使って、iPhone/iPadの方角に合わせた画像を表示する「パノラマビュー」アプリを作ってみましょう。1枚の画像を表示し、方角に合わせて位置をずらすだけのシンプルなアプリですが、観光地や室内の様子などを見せたい場合にはよいでしょう。
また、アプリのUIには、正式版がようやくリリースされた「jQuery Mobile 1.0」を利用します。
方角を求める3つの方法
本連載の第78回でも、コンパス機能を使ったiPhoneアプリを作りました。
- PhoneGapでiPhoneのコンパスアプリを再現
- http://ascii.jp/elem/000/000/652/652551/
第78回の記事ではPhoneGapのコンパス機能を利用しましたが、iOS 5+PhoneGapでは以下のような3種類のコンパス機能を利用できます。
| プラットフォーム | リアルタイム度 | 取得間隔 | 制限 | |
|---|---|---|---|---|
| PhoneGapのコンパス機能 | マルチプラットフォーム（ただしモバイルのみ） | 自由に設定可能 | 自由に設定可能 | アプリ化しないと動作検証できない |
| HTML5 Geolocationのコンパス機能 | マルチプラットフォーム（パソコンも含む） | 低い | 不定 | 一定速度で移動しないと方角が取得できない |
| iOS 5のコンパス機能 | iOS 5以降のみ | 高い | 設定不可 | イベントの発生頻度が高く負荷が高い |
3つそれぞれに、メリット／デメリットがあります。たとえば、HTML5 Geolocation APIは一定速度で移動しないと方角を返さないため、方角をリアルタイムで取得したい場合には使えません。また、誤差もかなり出ます。
PhoneGapの場合は、取得間隔を自由に設定できるので負荷を少なくできますが、当然ながらPhoneGapが必須であり、アプリ化しないと動作を検証できません。
iOS 5のコンパス機能はイベント型で、本体を少し動かしただけでイベントが発生します。HTML5 Geolocationとは逆に、非常に高い頻度でイベントが発生するため、負荷が高くなってしまうことがあります。その代わり、PhoneGapのようにアプリ化しなくてもブラウザーだけで動作を検証できます。
マルチプラットフォームを前提にするなら、PhoneGapに用意されている機能を利用するのがよいでしょう。逆にiOSだけをターゲットにするなら、プログラムの動作検証／デバッグが楽なiOS 5の機能を利用するのも悪くはありません。