このページの本文へ

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

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

文●古籏一浩

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

jQuery MobileによるUIの実装

 コンパスの値の取得方法が分かったので、本題のパノラマビューアプリを作りましょう。原理は簡単で、あらかじめ画像を横に2つ並べてつなげたパノラマ画像を用意しておき、プログラムで座標を設定するだけです(この方法は簡単な代わりに、画像の容量が増え、読み込みに時間がかかります)。

【図】fig06.png

パノラマ画像を撮影したら横に2つ並べる。その後、北が左端になるように画像の位置を調整する

 UIにはjQuery Mobileを利用します。jQuery Mobileについては以下の連載を参考にするとよいでしょう。以下の連載はベータ版で解説されていますが、今回は複雑な機能は使わないので、正式版でもほとんど変わりません。

西畑一馬のjQuery Mobileデザイン入門
http://ascii.jp/elem/000/000/607/607366/

 jQuery Mobileをダウンロードします。jQuery Mobileのページに移動し画面上部にある「Download」ボタンをクリックします。

【図】fig07.psd

Downloadボタンをクリックする

 ダウンロードページに移動しますので、ページ中央にある「Zip File: jquery.mobile-1.0.zip (JavaScript, CSS, and images)」のリンクをクリックしてZIPファイルをダウンロードします。

【図】fig08.psd

ZIPファイルをダウンロード

 ZIPファイルをダウンロードしたら展開します。ここでは-minと付いたファイル名を以下のように変更して使用しています。変更後、図のようにそれぞれのフォルダにファイルを入れます。

  • jquery.mobile-1.0.min.css → jquery.mobile.css
  • jquery.mobile-1.0.min.js → jquery.mobile.js

 あとはHTMLファイルを記述していきます。jQuery Mobileでは<div data-role="page">~</div>で囲んだ部分が1ページとみなされるので、1つのHTMLファイル内に複数のページを記述できます。リンクがタップされたときに該当ページへ移動するには、たとえば以下のように、あらかじめ<div data-role="page">のタグにID名を指定します。ID名はHTML5でのアンカーとして利用できるので、<a href="photo">とするだけで該当ページが表示されます。


<div data-role="page" id="photo">

 ページ移動後に前のページに戻るためのボタンを表示したい場合は以下のように記述します。


<div data-role="page" id="photo" data-add-back-btn="true" data-back-btn-text="戻る">

 これでページのヘッダー部分に「戻る」ボタンが表示されます。

 リスト項目をiPhoneライクなUIにするには、<ul data-role="listview">と指定します。data-role="listview"を書かなければ、従来通りのリストとして表示されます。

 肝心のパノラマビューの部分は以下のような構造になっています。<div id="clipArea">でクリッピング領域を用意し、その中に横長の画像を入れます。


<div id="clipArea"><img src="images/1.jpg" width="2880" height="176" id="panoImage"></div>

 あとは、コンパスの方角の値に合わせて画像のX座標を設定するとできあがりです。


document.getElementById("panoImage").style.left = -hd*4+"px";
【図】fig10.png

最初の画面。リスト項目をタップするとパノラマビューページに移動する

iPhoneを動かすと、方角に合わせて画像が動く

■サンプル3


<!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 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">
          <li><a href="#photo">長野県 日出塩駅周辺</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>
      </div>
    </div>
  </body>
</html>

■CSS


#clipArea {
  position: absolute;
  margin:0;
  padding:0;
  width: 290px;
  height: 176px;
  clip: rect(0px 290px 176px 0px);
}
#result {
  position: absolute;
  top: 260px;
}
#panoImage {
  position: absolute;
}

■JavaScript


$(function(){
  window.addEventListener("deviceorientation", function(e){
    var t = new Date();
    var hd = e.webkitCompassHeading;
    document.getElementById("result").innerHTML = (hd)+"<br>"+t;
    document.getElementById("panoImage").style.left = -hd*4+"px";
  }, false);
});

この連載の記事

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

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

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