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

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

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

古籏一浩

ツイートする

PhoneGapでアプリ化

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


iOS 5に設定する

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

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

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

　それでは、また次回。


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


指定した場所のパノラマ画像になる。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>