一覧画面と詳細画面を容易に実現するAppView
AppView（wijappview）はWijmoが備えるモバイルWebページ専用ウィジェットの一つで、スマートフォンでは一覧画面と詳細画面を行き来するネイティブアプリのような表示になる一方、タブレットなど大画面では一覧画面と詳細画面を左右に出し分ける表示になります。jQuery Mobile単体でもレスポンシブデザインの手法を用いることで同じような表示を実現できますが、AppViewはウィジェットとして使いやすい形で提供される利点があります。
ブラウザ画面の大きさに応じて適用するCSSを切り替えるメディアクエリ、スマートフォンやタブレットにおけるページ表示幅や拡大率を指定するviewport、HTML要素の回り込みをCSSで指定するfloatプロパティなどを組み合わせて、画面サイズや表示デバイスの種類に応じてWebページの表示形式を変更する手法。PC、タブレット、スマートフォンなど異なる環境において、同一のWebページでそれぞれに最適化された見栄えを提供することができます。
AppViewを利用して一覧画面と詳細画面を表示する例をリスト3に示します。
<div data-role="page" data-theme="b">
<!-- AppViewを指定 ... （1） -->
<div data-role="wijappview">
<!-- 初期表示コンテンツ ... （2） -->
<div data-role="appviewpage" data-title="Wijmoサンプル3（jQuery Mobile）">
<div data-role="header" data-position="fixed">
<h2>WijmoSample3</h2>
</div>
<div data-role="content">
<p>初期表示コンテンツです。</p>
</div>
</div>
<!-- メニューリスト ... （3） -->
<div data-role="menu" class="ui-body-a">
<ul data-role="listview" data-theme="a">
<li><a href="003_jqmobile_appviewpage1.html">シンプルなページ</a></li>
<li><a href="003_jqmobile_appviewpage2.html">LinearGaugeウィジェット</a></li>
<li><a href="003_jqmobile_appviewpage3.html">LineChartウィジェット</a></li>
</ul>
</div>
</div>
</div>
（1）でdiv要素のdata-role属性にwijappviewを指定してAppViewを使用するよう記述しています。（2）はWebページ表示直後の詳細画面ページです。（3）でページのリストを記述しています。リストでリンク指定されるHTMLファイルはhtml、head、bodyタグが必要なく、data-role属性にappviewpageが指定されたdiv要素を最上位として記述します（リスト4）。
<div data-role="appviewpage" data-title="シンプルなページ">
<div data-role="header" data-position="fixed">
<h2>シンプルなページ</h2>
</div>
<div data-role="content">
<p>シンプルなページの例です。</p>
</div>
</div>
リストでリンク指定されるHTMLファイル内でJavaScriptの処理を行う場合は、wijappviewpageinitイベントリスナーの内部に記述します（リスト5）。各詳細ページが表示される初回の一度だけイベントが実行されるようにするため、jQueryのoneメソッドを用います。oneメソッドは、あるイベントに対して一度だけ呼び出されるリスナーを設定するためのメソッドです。
<div data-role="appviewpage" data-title="LineChart">
<script type="text/javascript">
// $(document).oneで1度だけ呼び出されるイベントリスナーを定義する
$(document).one("wijappviewpageinit", function(event) {
$("#wijlinechart1").wijlinechart({
header:{text:"電池使用時の電圧変化"},
// 中略
seriesStyles:[ // データ表示形式
{stroke:"rgb(255, 0, 0)", "stroke-width":2}
]
});
});
</script>
<!-- 中略 -->
</div>
リスト3～リスト5を実行すると、スマートフォンでは図4のように一覧画面と詳細画面を切り替えて表示できます。
また、PCブラウザやタブレットのような大きな画面では、図5のように左半分に一覧画面、右半分に詳細画面が表示されるようになります。
なお、リスト3～リスト5のサンプルコード（003_jqmobile_appview.htmlおよびリンク先）では（Wijmoのドキュメントに従って）jQuery Mobile 1.4で非推奨とされている<div data-role="content">記法を使用しています。jQuery Mobile 1.4で推奨される代替記法（<div class="ui-content" role="main">）では詳細画面が表示されませんでした。
