CodeZine(コードジン)

特集ページ一覧

「jQuery Mobile」を活用したスマートフォンサイト作成(前編)

「jQuery プラグイン」の利用(13)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/28 14:00
目次

 サンプルサイトのスクリプトを以下に示します。

[リスト2]サンプルの表示(jQuery_Mobile_sample2.html)
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />

<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1">

<title>jQuery Mobileサンプル</title>

<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.2.0.min.css" />

<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>

<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>
<!--5.ページの設定-->
<div data-role="page" data-theme="b">

<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
    <h1>jQuery Mobileサンプルページ</h1>
</div>

<!--7.ページ内容の設定-->
<div data-role="content">

    <!--7-1.ボタンコンポーネント設定-->
    <h2>あなたの血液型はA型?</h2>
    <a href="#" data-role="button" data-theme="e">はい</a>
    <a href="#" data-role="button" data-corners="false" data-theme="e">いいえ</a>

    <!--7-2.リストコンポーネント設定-->
    <h2>あなたの出身は?</h2>
    <ul data-role="listview" data-theme="a" data-inset="true">
        <li><a href="#">東日本</a></li>
        <li><a href="#">西日本</a></li>
    </ul>

    <!--7-3.フォームコンポーネント設定-->
    <h2>あなたの性別は?</h2>
    <div data-role="fieldcontain">
        <label for="flip-g">性別:</label>
        <select name"slider" id="flip-g" data-role="slider" data-theme="d" data-track-theme="e">
            <option value="f">女性</option>
            <option value="m">男性</option>
        </select>
    </div>
</div>

<!--8.フッターの設定-->
<div data-role="footer" data-theme="b">
    <h3>Codezine</h3>
</div>

</div>
</body>
</html>

 7-1.ボタンコンポーネント設定では、スマートフォンサイトでよく見られる他のページへのリンクボタンを呼び出します。「data-role="button"」でリンクボタンのスタイルが適用されます。「data-theme="e"」といった形でページで設定したスウォッチとは別のスウォッチを設定することもできます。「data-corners="false"」を設定すると、リンクボタンの角丸処理がなくなり、長方形のボタンになります。何も設定しない既定値はtrueなので、上の「はい」のボタンは角丸処理のあるリンクボタンとなっています。

 7-2.リストコンポーネント設定では、これもスマートフォンサイトでよく見られるリスト表示をします。ulタグ内で「data-role="listview"」を設定するとリストのスタイルを呼び出せます。通常は画面横幅いっぱいに広がりますが、「data-inset="true"」を設定することで、余白と角丸処理の付いたリストになります(既定値はfalse)。

 7-3.フォームコンポーネント設定では、スマートフォンで操作しやすい入力フォームを呼び出します。divタグ内の「data-role="fieldcontain"」は「label for="flip-g"」でlabel要素を定義した部分を、明確に他の入力フォームと区別できるよう表示できるようにするものです。横幅が480ピクセル以上のときは、ラベルとフリップスイッチの部分が1行のレイアウトになりますが、480ピクセル未満の時には、図6のようにラベルとフリップスイッチの部分が2行のレイアウトになり、「性別:」の部分がフリップスイッチの上に来ます。

図6 ラベルとフリップスイッチの部分が2行レイアウトになった画面
図6 ラベルとフリップスイッチの部分が2行レイアウトになった画面

 select要素で「data-role="slider"」を設定すると、スマートフォンサイトでよく見られるフリップスイッチを表示できます。ハンドル部分のスライドか選択肢部分のタップで値を切り替えることができます。「data-theme="d"」はハンドル部分のスウォッチを定義したもので、「data-track-theme="e"」は右側の選択肢部分のスウォッチを定義したものです。そして最初のoption要素である「女性」の方が右側に配置されます。

 8.フッターの設定では、divタグで「data-role="footer"」と設定し、フッターのスタイルを呼び出し、タグで囲んだ文字列を表示します。

 このようにごく簡単な記述によって、スマートフォンで見やすい形のサイトを作成することができます。「data-role」というカスタムデータ属性で、さまざまなコンポーネントを呼び出すのが特徴です。

まとめ

 今回はjQuery Mobileを使ってごく簡単なスマートフォン向けサイトを作成するところまでを取り上げました。簡単な記述で、スマートフォンに特化したUIのサイトが作成できることがお分かりいただけたのではないでしょうか。次回は、ポップアップウィジェットなどjQuery Mobile 1.2.0/1.3.0で採用された機能をより詳しく紹介し、ページ遷移のある、より複雑なスマートフォンサイトを作成してみます。

参考資料



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

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

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

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5