このページの本文へ

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

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

文●古籏一浩

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

PhoneGapでアプリ化

 最後に、PhoneGapを使ってアプリ化します。今回はXcode 4.2.1とPhoneGap ver 1.2.0を使ってビルドしています。図のようにターゲットOSのバージョンを「iOS 5」に設定します。

【図】fig16.psd

iOS 5に設定する

 サンプル4をアプリ化して実行すると、ページ移動後、画面が真っ白になってしまうことがあります。ブラウザーであれば戻るボタンで解決できますが、PhoneGapでアプリ化した場合は戻るボタンがないので、真っ白になったまま操作できません。

 画像データが読み込まれていないことが原因ですので、サンプル5のように、imgタグで幅を小さくすることであらかじめ画像を読み込ませておきます。これでPhoneGapでアプリ化しても問題なく動作するようになります。

 実際にアプリ化して動かしてみるとブラウザーのときよりも多少スムーズに動作します。ただ、deviceorientationイベントの発生回数が多いせいか反応が悪いときもあります。ローパスフィルタなどを利用するのもよいかもしれません。

 それでは、また次回。

【図】fig17.jpg

起動直後の画面。リスト項目をタップすると該当する場所のパノラマ画像が表示される

指定した場所のパノラマ画像になる。iPhoneを動かすと方角にあわせて画像が動く。ブラウザーで動作させている時よりも多少スムーズに動作する

■サンプル5


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content= "initial-scale=1, user-scalable=no">
    <title>パノラマ</title>
    <link rel="stylesheet" href="css/jquery.mobile.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/panorama.js"></script>
    <script src="js/jquery.mobile.js"></script>
  </head>
  <body>
    <!-- トップページ -->
    <div data-role="page">
      <div data-role="header">
        <h1>パノラマビュー</h1>
      </div>
      <div data-role="content"> 
        <ul data-role="listview" id="stationList">
          <li><a href="#photo" data-no="1.jpg">長野県 日出塩駅周辺</a></li>
          <li><a href="#photo" data-no="2.jpg">長野県 贄川駅周辺</a></li>
          <li><a href="#photo" data-no="3.jpg">長野県 奈良井駅周辺</a></li>
        </ul>
      </div>
    </div>
    <!-- パノラマページ -->
    <div data-role="page" id="photo" data-add-back-btn="true" data-back-btn-text="戻る">
      <div data-role="header">
        <h1>長野県 日出塩駅周辺</h1>
      </div>
      <div data-role="content"> 
        <div id="clipArea"><img src="images/1.jpg" width="2880" height="176" id="panoImage"></div>
        <div id="result">0</div>
        <img src="images/2.jpg" width="1" height="1">
        <img src="images/3.jpg" width="1" height="1">
      </div>
    </div>
  </body>
</html>

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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