SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

一覧画面と詳細画面を容易に実現する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">)では詳細画面が表示されませんでした。

次のページ
ListViewはこれからの機能拡張に期待

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8046 2014/09/12 18:10

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング