第2回 いまから始める、jQuery Mobileの基本

　jQuery Mobileを利用すると、簡単なHTMLを用意するだけでスマートフォンサイトを作成できます。今回はシンプルな会社案内サイトを実際に作りながら、jQuery Mobileの基本的な使い方を学習しましょう。

　以下のような会社案内サイトを作成します。


今回作成するサンプルメニューをタップすると詳細ページに移動する（画像をクリックするとサンプルを表示します）

　トップページのメニューをタップすると各ページへスライドして移動するシンプルなスマートフォンサイトです。まずはトップページ部分から作ってみましょう。

jQuery MobileとHTML5

　jQuery MobileはHTML5のカスタムデータ属性でさまざまな設定を定義するので、jQuery Mobileを利用するWebページはHTML5で記述します。HTML5と聞くとハードルが高そうですが、最低限の約束ごとさえ守れば決して難しくありません。

　次のようなHTMLを雛形として用意します。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>(タイトル)</title> 
</head>
<body>
  （本文）
</body>
</html>

　HTML5では、XHTMLに比べてDOCTYPE宣言が非常に短く、必要なmetaタグも少なくて済みます。Webページを作成する場合はほかにもいくつか気を付けるポイントがありますが、jQuery Mobile用のHTMLの場合はこれだけで下準備が完了です。

jQuery MobileとjQueryの読み込み

　jQuery Mobileは、「jQuery Mobileのスタイルシート」「jQueryのスクリプトファイル」「jQuery Mobileのスクリプトファイル」の3つのファイルをHTMLのhead要素内で読み込んで利用します。手軽なのは、jQueryのCDN※1にホスティングされているファイルを直接読み込む方法です。

CDNからファイルを読み込む

　CDNからファイルを読み込むためのコードは、jQuery Mobileのダウンロードページからコピー＆ペーストで取得できます。

03.png
jQuery Mobileのダウンロードページ。各CDNのURLを取得したり、ファイルをダウンロードしたりできる

　CDNからjQuery Mobileに必要なファイルを読み込むと次のようなコードになります。


<head>
  <meta charset="UTF-8">
  <title>(タイトル)</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>

ファイルをローカルにダウンロードして利用する

　CDNはインターネットにつながっているときしか利用できないので、オフライン環境でも利用したい場合は必要なファイルをローカルにダウンロードしておいて読み込むとよいでしょう。

　jQuery Mobileのファイルは先ほど紹介したダウンロードページから、jQueryのスクリプトは公式サイトからダウンロードできます。ダウンロードしたZIPファイルを開くと次のようなファイル／フォルダが展開されます。

  • jquery.mobile-1.0a4.1.css
  • jquery.mobile-1.0a4.1.min.css
  • jquery.mobile-1.0a4.1.js
  • jquery.mobile-1.0a4.1.min.js
  • imagesフォルダ

　拡張子の前に「.min」が付いているファイルは、変数名を短くし、コメントや空白、改行を削除してファイルサイズを抑えた圧縮版です。通常は圧縮版のファイルを使いましょう。imagesフォルダはスタイルシートから参照されるので、CSSファイルと同じフォルダに配置します（CSSが/cssなら/css/images）。

04.png
ダウンロードしたファイル一式

※1　Content Delivery Networkの略。Webコンテンツを配信するためのネットワーク。

jQuery Mobileにおけるページの考え方

　jQuery MobileでWebサイトを制作するとき、一般的なWebサイトの制作と大きく異なるが「ページ」の概念です。一般的なWebサイトの場合は1ページ＝1HTMLファイルですが、jQuery Mobileではカスタムデータ属性「data-role="page"」を持つdiv要素が1ページになります。

　たとえば、次のようなHTMLでは「data-role="page"」を持つdiv要素が5つあるので、全部で5ページのサイトを表しています。

■サンプル1[HTML]


<body>
  <div data-role="page" id="index">
    TOPページ
  </div>
  <div data-role="page" id="about">
    to-Rについて
  </div>
  <div data-role="page" id="seminar">
    セミナー情報
  </div>
  <div data-role="page" id="access">
    アクセス
  </div>
  <div data-role="page" id="contact">
    お問い合わせ
  </div>
</body>

　カスタムデータ属性「data-role="page"」を付けたそれぞれのdiv要素には、各ページを識別するためにid属性でページ名を定義しておきます。サンプル1では、「index」「about」「seminar」「access」「contact」と付けました。このdiv要素の中に、それぞれのページに表示したい内容（コンテンツ）を記述していくわけです。

　サンプル1をブラウザーで表示すると、最初にページとして定義している「TOPページ」のdiv要素（id="index"）だけが表示され、他のページは表示されません。

05.jpg
最初のページであるindexの内容のみがページとして表示される

ページ遷移

　jQuery Mobileでは複数のページを1つのHTMLに記述するので、ページ遷移にはページ内リンクを利用します。

　サンプル2は、TOPページ（id="index）から「to-Rについて」（id="about"）へのリンクを設定した例です。リンクをタップすると、a要素のhref属性に指定したidのページへ遷移します。

■サンプル2[HTML]


<div data-role="page" id="index">
  <h3>TOPページ</h3>
  <p><a href="#about">to-Rについて</a></p>
</div>
<div data-role="page" id="about">
  <h3>to-Rについて</h3>
  <p><a href="#index">TOPページ</a></p>
</div>

06.jpg,07.jpg
リンクをタップするとスライドしてページが切り替わる

ヘッダー／フッターの配置とレイアウトの定義

　jQuery Mobileでは、各ページ内のレイアウト領域もdiv要素にカスタムデータ属性を利用して定義します。ヘッダー領域なら「data-role="header"」、コンテンツ領域なら「data-role="content"」、フッター領域なら「data-role="footer"」と記述します。

■サンプル3[HTML]


<div data-role="page" id="index">
  <div data-role="header">
    <h1>to-R</h1>
  </div>
  <div data-role="content">
    <p>コンテンツの内容</p>
  </div>
  <div data-role="footer">
    <h4>&copy; 2011 to-R</h4>
  </div>
</div>

　サンプル3をブラウザーで表示すると、jQuery Mobileによって各パーツが自動的に装飾され、スマートフォンらしいスタイルに最適化されて表示されます。

08.jpg
ヘッダーやフッターがスマートフォン向けに最適化され表示される

デザインテーマの変更

　jQuery Mobileのデザインは、デフォルトでは黒を基調としたテーマ（スキン）が適用されていますが、ページ要素に対してカスタムデータ属性「data-theme」を指定することでテーマを変更できます。たとえば、「data-theme」の値に「b」を指定すると、iPhoneの標準UIのような見た目に変わります。

■サンプル4[HTML]


<div data-role="page" id="index" data-theme="b">

09.jpg
iPhoneのUIのようなデザインを適用する

　標準では「a」～「e」の5種類のテーマが用意されており、「data-theme」の値に指定するとそれぞれのデザインを確認できます（「a」がデフォルトのデザイン)。

10.jpg 11.jpg 12.jpg


左上から時計回りにデザインテーマ「c」「d」「e」

　執筆時点（2011年5月）で公開されているα4.1では、残念ながら「b」以外のデザインテーマにはバグが多く、うまく表示されないことがあります。本連載後半では独自のデザインテーマを作成する方法についても解説しますので、ひとまずはテーマbを利用しておきましょう。

スマートフォンらしいリスト表示

　jQuery Mobileを使ったスマートフォンサイトでよく用いられるのが、スマートフォンのUIでおなじみのリスト表示です。今回作成するサンプルサイトでも、トップページに利用しています。

　jQuery Mobileのリストは、コンテンツ領域内（data-role="content"）にul要素を記述し、ul要素に対してカスタムデータ属性「data-role="listview"」を指定することで表示できます。

■サンプル5[HTML]


<div data-role="content">
  <ul data-role="listview">
    <li><a href="#about">
      <h3>to-Rについて</h3>
    </a></li>
    <li><a href="#seminar">
      <h3>セミナー情報</h3>
    </a></li>
    <li><a href="#access">
      <h3>アクセス</h3>
    </a></li>
    <li><a href="#contact">
      <h3>お問い合わせ</h3>
    </a></li>
  </ul>
</div>

13.jpg
リスト表示で各ページへのリンクを設定している

　サンプル5では、a要素の内側にh3要素を記述しています。XHTMLではa要素の内側にh3要素などのブロックレベル要素を記述できませんでしたが、HTML5ではa要素の内側にほとんどの要素を記述できます。ブロックレベル要素をa要素の内側に記述する「ブロックリンク」は非常に便利な手法ですので覚えておきましょう。

　リスト表示では、li要素にカスタムデータ属性「data-role="list-divider"」を付けることでリストを区切る「見出し」も表示できます。

■サンプル6[HTML]


<ul data-role="listview">
  <li data-role="list-divider">Menu</li>
  <li><a href="#about">
    <h3>to-Rについて</h3>
  </a></li>
  (中略)
</ul>

14.jpg
リストに「menu」という見出しを追加した状態

　ul要素にカスタムデータ属性「data-inset="true"」を付けると、角丸の立体的なメニューにもできます。

■サンプル7[HTML]


<ul data-role="listview" data-inset="true">

15.jpg
リスト表示に「data-inset=true」を追加した状態

　以上でスマートフォンサイトのトップページが完成しました。最後に、ここまでのサンプルコードを見ておきましょう。

■サンプル8[HTML]


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="UTF-8">
  <title>jQuery Mobile Sample</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
  <div data-role="page" id="index" data-theme="b">
    <div data-role="header">
      <h1>to-R</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Menu</li>
        <li><a href="#about">
          <h3>to-Rについて</h3>
        </a></li>
        <li><a href="#seminar">
          <h3>セミナー情報</h3>
        </a></li>
        <li><a href="#access">
          <h3>アクセス</h3>
        </a></li>
        <li><a href="#contact">
          <h3>お問い合わせ</h3>
        </a></li>
      </ul>
    </div>
    <div data-role="footer">
      <h4>&copy; 2011 to-R</h4>
    </div>
  </div>
  
  <div data-role="page" id="about" data-theme="b">
    <div data-role="header">
      <h1>to-R</h1>
    </div>
    <div data-role="content">
      <h3>to-Rについて</h3>
      <p>to-Rについて</p>
    </div>
    <div data-role="footer">
      <h4>&copy; 2011 to-R</h4>
    </div>
  </div>
  
  <div data-role="page" id="seminar" data-theme="b">
    <div data-role="header">
      <h1>to-R</h1>
    </div>
    <div data-role="content">
      <h3>セミナー情報</h3>
      <p>セミナー情報</p>
    </div>
    <div data-role="footer">
      <h4>&copy; 2011 to-R</h4>
    </div>
  </div>
  
  <div data-role="page" id="access" data-theme="b">
    <div data-role="header">
      <h1>to-R</h1>
    </div>
    <div data-role="content">
      <h3>アクセス</h3>
      <p>アクセス</p>
    </div>
    <div data-role="footer">
      <h4>&copy; 2011 to-R</h4>
    </div>
  </div>
  
  <div data-role="page" id="contact" data-theme="b">
    <div data-role="header">
      <h1>to-R</h1>
    </div>
    <div data-role="content">
      <h3>お問い合わせ</h3>
      <p>お問い合わせ</p>
    </div>
    <div data-role="footer">
      <h4>&copy; 2011 to-R</h4>
    </div>
  </div>
</body>
</html>

　jQuery Mobileは、ルールさえ覚えてしまえばHTMLを書くだけで簡単にスマートフォンサイトを作成できます。次回は、トップページ以下の詳細ページを作成していきます。


Comments