複数のパノラマ画像を表示する
次に、複数のパノラマ画像を表示できるように改良しましょう。jQuery Mobileでは1つのHTMLファイルに複数のページを記述できるので、パノラマ画像の数だけページを増やすのも簡単です。
ここではサンプル3を少し改良して、タップしたリスト項目に応じてパノラマ画像を入れ換えてみます。なお、画像データの読み込みが完了していない場合、ページが白くなってしまうことがあります。とりあえず一度前のページに戻って再度移動すれば表示されます(*1)。
まず、リスト内にあるaタグにHTML5で利用できるカスタムデータ属性を使ってパノラマ画像のURL（ここではファイル名のみ）を記述します。カスタムデータ属性はdata-で始まる独自のHTML属性で、ここでは「data-no」という属性名を使用しています(*2)。
<a href="#photo" data-no="2.jpg">長野県 贄川駅周辺</a>
指定したdata-noの内容は「$(e.target).attr("data-no")」として読み出せます。読み出した内容をURLとしてパノラマ画像に設定します。
もう1つ、ページタイトルも入れ替える必要があります。リスト項目内のa要素に表示されている文字を読み出し、そのままページタイトルとして設定します。a要素の文字を読み出すには「$(e.target).text()」とします。
実際のプログラムはサンプル4です。リスト項目をタップすると該当するパノラマ画像に入れ替わります。iPhoneを動かせば、方角に合わせてパノラマ画像が動きます。
表示したい場所をタップする
タップした場所のパノラマ画像が表示される
■サンプル4
<!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" 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>
</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);
// リストをタップした時に画像を入れ替える
$("#stationList a").live("tap", function(e){
var imageURL = "images/"+($(e.target).attr("data-no"));
$("#panoImage").attr("src", imageURL);
var pageTitle = $(e.target).text(); // リンクの文字を読み出す
$("#photo h1").text(pageTitle); // ページタイトルに設定
});
});
*1 この現象はパソコンでは発生しません。また、Android携帯やiOS 4でも発生しません。iOS 5 (iPhone 4S/iPad 2)でのみ、なぜか発生します。
*2 今回のようなシンプルなものであれば、このように勝手に命名しても問題はありませんが、jQuery Mobileと他のライブラリーを組み合わせる場合や、複数人でアプリを開発する場合は、属性名が衝突してバグを引き起こす可能性があります。そのため、「data-名前」のような属性名ではなく、「data-識別子と名前」のように付けた方が安全です。識別子もドメイン名などを利用すれば名前の衝突を防げます。また、jQuery Mobileには、「data-識別子-名前」のようにした場合、識別子を設定する機能が用意されています。
