jQuery Mobileを使ってみよう！ (3/5)
作成:2011-05-23 08:51
更新:2012-03-29 10:13
更新:2012-03-29 10:13
■jQuery Mobileを使ったWebページの基本形
では、どのように書けばjQuery MobileによるWebページを作れるのでしょうか。ごく簡単なサンプルを作って、試してみることにしましょう。
下のリスト欄に掲載したのが、サンプルページのHTMLソースコードです。これをHTMLファイルに記述し、Webサイトに公開してアクセスしてみましょう。パソコンのブラウザからでももちろんアクセスできますが、スマートフォン（iPhoneやAndroid）からアクセスしてどのように表示されるか、確認してみましょう。
画面の上には「Hello」という黒字に白文字のタイトルが表示され、その下にグレー表示されたページ内に「jQuery Mobileサンプル。」とテキストが表示されます。まぁ、スマートフォン用のWebページというほど面倒なものではなくて、ただ単にテキストを表示しているだけですが、「上にタイトルがあって下にテキスト」というスマートフォンらしい雰囲気になっているのはわかるでしょう。またページの拡大縮小を行ってもサイズは変わりません。スマートフォンで見やすいサイズを考え、それにあわせた文字サイズで表示されているのです。
では、作成したソースコードを整理してみましょう。ざっとタグの構造をチェックすると、以下のような形をしていることがわかります。
問題は、<body>部分です。ここでは以下のようなタグが置かれ、この中にすべての表示が造りこまれていることが分かります。それぞれのタグの役割を整理しておきましょう。
・pageタグ
ここでは、まず最初に<div id="home" data-role="page">というタグが用意されています。data-role="page"という属性を用意した<div>タグは、画面に表示する個々のページを示すものとして扱われます。このタグの中に表示内容を記述することで、このIDのページの表示内容を作成します。
ここでは、id="home"というようにIDが指定されていますが、これはとても重要です。IDに"home"と指定されたpageタグは、このWebページにアクセスすると最初に表示されるpageタグとなるのです。pageタグの中には、大きく整理すると３つのタグが用意されます。
・headerタグ
まずは、<div data-role="header">というタグです。このように、data-role="header"という属性を設定された<div>タグは、このページのヘッダーとして扱われます。ヘッダーというのは、サンプルページの上に黒い背景で「Hello」と表示されていた部分のことです。このように、jQuery Mobileでは、ページの一番上にヘッダーとしてページのタイトルなどを表示します。
・bodyタグ
そのページに表示する内容は、<div data-role="content">タグの中に記述されます。このdata-role="content"属性を記述されたタグが、ヘッダーの下にグレーがかった背景で表示されている部分です。ページに表示するコンテンツは、ここに用意します。
・footerタグ
ここでは使われていませんが、コンテンツの表示の下に、ヘッダー表示を用意することもできます。これは、<div data-role="footer">というタグとして用意します。このようにdata-role="footer"属性を指定されたタグは、ヘッダーと同じように、コンテンツとは違った背景とテキスト色で表示されます。
data-role="page"を指定したタグの中に、data-role="header"やdata-role="content"指定のタグを使ってタイトルやコンテンツの内容を書くと、それに従って画面にレイアウトされた状態で表示される。これがjQueryもボイルの基本なのです。
下のリスト欄に掲載したのが、サンプルページのHTMLソースコードです。これをHTMLファイルに記述し、Webサイトに公開してアクセスしてみましょう。パソコンのブラウザからでももちろんアクセスできますが、スマートフォン（iPhoneやAndroid）からアクセスしてどのように表示されるか、確認してみましょう。
画面の上には「Hello」という黒字に白文字のタイトルが表示され、その下にグレー表示されたページ内に「jQuery Mobileサンプル。」とテキストが表示されます。まぁ、スマートフォン用のWebページというほど面倒なものではなくて、ただ単にテキストを表示しているだけですが、「上にタイトルがあって下にテキスト」というスマートフォンらしい雰囲気になっているのはわかるでしょう。またページの拡大縮小を行ってもサイズは変わりません。スマートフォンで見やすいサイズを考え、それにあわせた文字サイズで表示されているのです。
では、作成したソースコードを整理してみましょう。ざっとタグの構造をチェックすると、以下のような形をしていることがわかります。
<html><head>部分でのポイントは、先にあげたjQuery Mobile関連のタグを用意する、という点だけです。他に考えるべきことは特にありません。
<head>
……必要なヘッダーのタグ……
……jQuery Mobile関連のタグ……
</head>
<body>
<div id="home" data-role="page">
……ここに表示内容を用意……
</div>
</body>
</html>
問題は、<body>部分です。ここでは以下のようなタグが置かれ、この中にすべての表示が造りこまれていることが分かります。それぞれのタグの役割を整理しておきましょう。
<div id="home" data-role="page">
<div data-role="header">
……ヘッダー部分の表示……
</div>
<div data-role="content">
……ここに用意するコンテンツの内容……
</div>
</div>
・pageタグ
ここでは、まず最初に<div id="home" data-role="page">というタグが用意されています。data-role="page"という属性を用意した<div>タグは、画面に表示する個々のページを示すものとして扱われます。このタグの中に表示内容を記述することで、このIDのページの表示内容を作成します。
ここでは、id="home"というようにIDが指定されていますが、これはとても重要です。IDに"home"と指定されたpageタグは、このWebページにアクセスすると最初に表示されるpageタグとなるのです。pageタグの中には、大きく整理すると３つのタグが用意されます。
・headerタグ
まずは、<div data-role="header">というタグです。このように、data-role="header"という属性を設定された<div>タグは、このページのヘッダーとして扱われます。ヘッダーというのは、サンプルページの上に黒い背景で「Hello」と表示されていた部分のことです。このように、jQuery Mobileでは、ページの一番上にヘッダーとしてページのタイトルなどを表示します。
・bodyタグ
そのページに表示する内容は、<div data-role="content">タグの中に記述されます。このdata-role="content"属性を記述されたタグが、ヘッダーの下にグレーがかった背景で表示されている部分です。ページに表示するコンテンツは、ここに用意します。
・footerタグ
ここでは使われていませんが、コンテンツの表示の下に、ヘッダー表示を用意することもできます。これは、<div data-role="footer">というタグとして用意します。このようにdata-role="footer"属性を指定されたタグは、ヘッダーと同じように、コンテンツとは違った背景とテキスト色で表示されます。
data-role="page"を指定したタグの中に、data-role="header"やdata-role="content"指定のタグを使ってタイトルやコンテンツの内容を書くと、それに従って画面にレイアウトされた状態で表示される。これがjQueryもボイルの基本なのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Sample</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div id="home" data-role="page"> <div data-role="header"> <h1>Hello</h1> </div> <div data-role="content"> <p>jQuery Mobileサンプル。</p> </div> </div> </body> </html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る