連載

2012年8月9日

スマホ対応初心者に送るjQuery Mobileの使い方“超”入門：jQuery Mobileでスマホ向け企業サイト構築（1）（2/2 ページ）

[野中龍一，＠IT] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

すぐ使える！ jQuery Mobileの読み込み方

　jQuery Mobileの読み込みは非常に簡単です。任意のエディタでHTMLファイルを作成し以下のサンプルコードを参考に、スタイルシートと2つのJavaScriptを読み込むよう記述します。

　また、モバイルデバイス向けにviewportという値を設定しておきます。ここで設定されている値の意味を簡単に説明しておきます。

　まず、「width=device-width」は、コンテンツの最大幅をデバイスのサイズに合わせるという指定です。「initial-scale=1」は「初期の拡大率を100％にする」という指定です。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="UTF-8" />
     <title>サイトタイトル</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
 
</body>
</html>

　「index.html」というファイル名で保存しましょう。これで、準備は完了です。

　なお、jQuery MobileはCDN（コンテンツデリバリーネットワーク）を利用するため、ダウンロードして保存する必要はありません。

jQuery Mobileの構造の基礎知識

　中身を記述する前に、jQuery Mobileの構造について紹介します。jQuery Mobileは1つのファイル内に「ページコンテナ」という箱を用意し、その中に中身を配置していきます。

　この「ページコンテナ」は1つのHTMLファイルに複数作る「複数ページ型」とすることもできますし、1つのHTMLファイルに1つの「単一ページ型」という作りにもできます。

単一ページテンプレート

複数ページテンプレート

　今回は、まず単一ページ型で、サンプルを作成してみます。

■ ヘッダ、コンテント、フッタ

　それでは、先ほど作成したHTMLファイルに1つのページコンテナとその中にヘッダ、コンテナ、フッタを入れてみましょう。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="UTF-8" />
     <title>サイトタイトル</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
    <div data-role="page">
        <header data-role="header">
            <h1>ページタイトル</h1>
        </header>
        <div data-role="content">
            <p>コンテント</p>
        </div>
        <footer data-role="footer">
            <h1>フッター</h1>
        </footer>
    </div>
</body>
</html>

　この状態でファイルを保存し、ChromeやSafariで確認してみましょう。正しく表示されれば成功です。

■ データ属性

　上記コードの中に「data-role="header"」このような記述があります。これがデータ属性の1つです。

　データ属性とはHTML5の独自データ属性を利用しています。jQuery Mobileでは要素に意味を持たせるためにdata-xxxという独自データ属性を使っています。今回初めて使った「data-role」というデータ属性はjQuery Mobileの各種コンポーネントを表すために指定します。忘れずに覚えておきましょう。

■ ボタンコンポーネント

　最後に、ボタンコンポーネントを使い、前半に覚えたページコンテナを2つ作りページを遷移させてみましょう。ボタンコンポーネントのdata-roleは「 data-role="button"」です。この指定をコンテントの中に記述して、ページを遷移できるようにしてみましょう。

<!DOCTYPE html>
<html>
     <head>
     <meta charset="UTF-8" />
     <title>サイトタイトル</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
     <div id="page1" data-role="page">
        <header data-role="header">
            <h1>複数ページ機構</h1>
        </header>
        <div data-role="content">
            <p>このページは1ページ目です。</p>
            <a href="#page2" data-role="button">2ページ目へ移動</a>
        </div>
    </div>
    
    <div id="page2" data-role="page">
        <header data-role="header">
            <h1>2ページ目</h1>
        </header>
        <div data-role="content">
            <p>このページは2ページ目です。</p>
            <a href="#page1" data-role="button">1ページ目へ戻る</a>
        </div>
    </div>
</body>
</html>

　まずは保存して動作を確認してみてください。それぞれのページを行き来できたら成功です。実際に動作するサンプルはこちらです。

　要点を説明します。jQuery Mobileでは、1つのHTMLファイルに複数のページコンテナが存在しても、それぞれ独立したページのように振る舞ってくれます。これを実現するには、各ページコンテナにIDを設定し、アンカー要素にそのIDを指定します。

　単一ページの場合は、単純にファイルを指定することで遷移できます。

次回から、企業サイト構築開始

　第1回は、jQuery Mobileとは何か、データ属性、ページ機構の基本について紹介しましたが、いかがでしたでしょうか。今回はサイト構築までは至りませんでしたが次回より、実際に企業サイト構築を詳しく紹介していきます。

著者プロフィール

野中龍一（のなか　りゅういち）

クラスメソッド株式会社で企画、制作、運用までやるWeb担当。広義のHTML5、JavaScript、jQuery、CSS3、PHP、Webデザイン、Linuxに興味があります。

ブログ

INDEX

jQuery Mobileでスマホ向け企業サイト構築（1）

スマホ対応初心者に送るjQuery Mobileの使い方“超”入門

Page1
jQuery Mobileを利用した企業サイトの構築【準備編】
スマホ対応の救世主「jQuery Mobile」とは
jQuery Mobileのメリット／デメリット
jQuery Mobileでのサイト制作に役立つツール6選

Page2
すぐ使える！ jQuery Mobileの読み込み方
jQuery Mobileの構造の基礎知識
次回から、企業サイト構築開始