CodeZine(コードジン)

特集ページ一覧

jQuery Mobileを拡張する「Wijmo(ウィジモ)」モバイル対応機能

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

一覧画面と詳細画面を容易に実現するAppView

 AppView(wijappview)はWijmoが備えるモバイルWebページ専用ウィジェットの一つで、スマートフォンでは一覧画面と詳細画面を行き来するネイティブアプリのような表示になる一方、タブレットなど大画面では一覧画面と詳細画面を左右に出し分ける表示になります。jQuery Mobile単体でもレスポンシブデザインの手法を用いることで同じような表示を実現できますが、AppViewはウィジェットとして使いやすい形で提供される利点があります。

レスポンシブデザイン

 ブラウザ画面の大きさに応じて適用するCSSを切り替えるメディアクエリ、スマートフォンやタブレットにおけるページ表示幅や拡大率を指定するviewport、HTML要素の回り込みをCSSで指定するfloatプロパティなどを組み合わせて、画面サイズや表示デバイスの種類に応じてWebページの表示形式を変更する手法。PC、タブレット、スマートフォンなど異なる環境において、同一のWebページでそれぞれに最適化された見栄えを提供することができます。

 AppViewを利用して一覧画面と詳細画面を表示する例をリスト3に示します。

リスト3 AppViewを用いたモバイルWebページ(003_jqmobile_appview.html)
<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)。

リスト4 AppViewで表示する詳細ページの記述(003_jqmobile_appviewpage1.html)
<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メソッドは、あるイベントに対して一度だけ呼び出されるリスナーを設定するためのメソッドです。

リスト5 AppView詳細ページでJavaScript処理が必要な場合(003_jqmobile_appviewpage3.html)
<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のように一覧画面と詳細画面を切り替えて表示できます。

図4 一覧画面(写真=左)と詳細画面(写真=右)を切り替えて表示する(003_jqmobile_appview.html)
図4 一覧画面(写真=左)と詳細画面(写真=右)を切り替えて表示する(003_jqmobile_appview.html)

 また、PCブラウザやタブレットのような大きな画面では、図5のように左半分に一覧画面、右半分に詳細画面が表示されるようになります。

図5 iPadでの表示例。一覧画面と詳細画面が左右に表示される(003_jqmobile_appview.html)
図5 iPadでの表示例。一覧画面と詳細画面が左右に表示される(003_jqmobile_appview.html)

 なお、リスト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">)では詳細画面が表示されませんでした。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5