古籏一浩のJavaScriptラボ ― 第80回

iOS 5の新機能で作る「パノラマビュー」アプリ

2012年01月20日 10時00分更新

古籏一浩

ツイートする

　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の機能を利用するのも悪くはありません。

前へ 1 2 3 4 5 次へ