はじめに
本連載では過去数回にわたり、jQueryのスマートフォン向けUIライブラリ「jQuery Mobile」を活用したスマートフォン作成についてさまざまな作例を紹介してきました。スマートフォンはPCやタブレットに比べ画面が小さいため（最近は大画面化してきていますが）、見せたいコンテンツを拡大して表示するような工夫が常に必要です。
そこで本記事では、コンテンツ一覧から画像をユーザーに選択させ、拡大表示するようなWebページを、jQuery Mobileを用いて作っていきます。PhotoSwipeプラグインを利用した方法と、jQuery Mobile自身が備える「ポップアップウィジェット」を利用した方法を紹介します。PhotoSwipeプラグインを用いることにより、全画面表示した画像を左右フリックで切り替えるといった、よりスマートフォン的な操作方法を実現できます。一方、jQuery Mobileのポップアップウィジェットは単純なポップアップ表示ですが、jQuery Mobileがサポートする幅広い環境で動作するメリットがあります。
対象読者
- jQuery Mobileに興味があり、活用してみたい方
- HTMLが最低限記述できるものの、もう少しステップアップしてみたい方
- スマートフォンサイトをお手軽に作りたい方
- スマートフォンやタブレットが大好きな方
必要な環境
jQuery Mobileは執筆時点の最新版である1.3.2を使用します。jQuery Mobileと組み合わせるjQueryは、jQuery MobileのWebページで推奨されている1.9.1を使用します。
今回は以下の環境で動作を確認しています。
-
iOS 7.0.3
- iPhone 5 32GB SoftBank版
- Safari
-
Android 4.2.2
- Xperia Z SO-02E
- Google Chrome 30.0.1599.92
PhotoSwipeプラグインは画像の切り替えに対応
PhotoSwipeプラグインは、http://www.photoswipe.com/においてMITライセンスで配布されています。指定された画像を選択した時に画面全体に画像を表示し、左右フリックや画面上のボタン操作で画像の切り替えが可能です。それでは、PhotoSwipeプラグインを利用した例を紹介していきます。
最初にWebページの全コードをリスト1に示します。
（jqmobile_photoswipe.html）
<!DOCTYPE html>
<html>
<head>
<!-- 文字コード、viewportの設定 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<!-- jQuery、jQuery Mobileの導入 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- PhotoSwipeの導入 ......（1） -->
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/lib/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script>
/**
* jQuery Mobileの初期化処理
*/
$(document).on("pageinit", function(event) {
// PhotoSwipe対象のHTML要素を指定 ......（2）
var myPhotoSwipe = $("ul.gallery a").photoSwipe({ enableMouseWheel: true , enableKeyboard: true });
// リストの選択状態を解除させるコード ......（3）
$("ul.gallery a").on("click", function(event){
setTimeout(function(){
$("ul.gallery li").removeClass("ui-btn-active");
}, 100);
});
});
</script>
<title>PhotoSwipeによる写真表示</title>
</head>
<body>
<!-- ページ -->
<div data-role="page">
<!-- ヘッダー -->
<header data-role="header" data-position="fixed">
<h1>PhotoSwipe</h1>
</header>
<!-- コンテンツ本体 ......（4） -->
<div data-role="content">
<ul data-role="listview" class="gallery">
<li>
<a href="img/001.jpg" rel="external">
<img alt="ヤギ" src="img/001_thumb.jpg"/>
<h1>ヤギ</h1>
<p>ヤギです...よね...多分...。</p>
</a>
</li>
<li>
<a href="img/002.jpg" rel="external">
<img alt="Xperia" src="img/002_thumb.jpg"/>
<h1>Xperia</h1>
<p>Android 4.2アップデート記念。</p>
</a>
</li>
<!-- 以下リストが続くが省略 -->
</ul>
</div>
</div>
</body>
</html>
まず（1）で、PhotoSwipeを読み込む記述をHTMLのheadタグに追加します。PhotoSwipeは内部的に「klass.min.js」に依存しているため、そちらも併せて追加します。次に（2）において、jQuery Mobileのページ初期化イベントであるpageinitの実行時にPhotoSwipeの初期化処理を行うよう記述します。jQueryセレクタ$("ul.gallery a")で特定されるaタグに対して、href属性で指定された画像がPhotoSwipeで表示されます。
PhotoSwipeにはさまざまなオプションがあり、photoSwipeメソッドの引数にJSON型式で指定可能です。オプションの詳細については、PhotoSwipeのREADMEを参照してください。
| 設定値 | 設定内容 | デフォルト値 |
|---|---|---|
| enableMouseWheel | マウスホイールによる画像切り替えの有効／無効 | true |
| enableKeyboard | キーボード操作による画像切り替えの有効／無効 | true |
| captionAndToolbarHide | タップ時に表示される画面上下のツールバーを隠すかどうか | false |
| slideSpeed | 左右スライドの速度 | 250 |
また、リストを押下してPhotoSwipeを表示した時にリストの押下状態（青い表示）が元に戻らなくなる事象を回避するために、押下後一定時間で押下状態を強制的に解除する処理を（3）に追加しておきます。
（4）のコンテンツ部はjQuery Mobileの一般的なリスト表示です。（2）で指定したjQueryセレクタ「$("ul.gallery a")」に対応するように記述します。
