このページの本文へ

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

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

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

古籏一浩

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

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

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

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

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

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

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

ランキング