jQuery MobileによるUIの実装
コンパスの値の取得方法が分かったので、本題のパノラマビューアプリを作りましょう。原理は簡単で、あらかじめ画像を横に2つ並べてつなげたパノラマ画像を用意しておき、プログラムで座標を設定するだけです（この方法は簡単な代わりに、画像の容量が増え、読み込みに時間がかかります）。
パノラマ画像を撮影したら横に2つ並べる。その後、北が左端になるように画像の位置を調整する
UIにはjQuery Mobileを利用します。jQuery Mobileについては以下の連載を参考にするとよいでしょう。以下の連載はベータ版で解説されていますが、今回は複雑な機能は使わないので、正式版でもほとんど変わりません。
- 西畑一馬のjQuery Mobileデザイン入門
- http://ascii.jp/elem/000/000/607/607366/
jQuery Mobileをダウンロードします。jQuery Mobileのページに移動し画面上部にある「Download」ボタンをクリックします。
Downloadボタンをクリックする
ダウンロードページに移動しますので、ページ中央にある「Zip File: jquery.mobile-1.0.zip (JavaScript, CSS, and images)」のリンクをクリックしてZIPファイルをダウンロードします。
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";
最初の画面。リスト項目をタップするとパノラマビューページに移動する
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);
});
