触りながら覚えるスマホ向け企業サイト設計の基礎知識：jQuery Mobileでスマホ向け企業サイト構築（2）（2/3 ページ）
トップページの制作開始
ここからはトップページの制作に取り掛かりましょう。
※今回はオーサリングツールや確認環境の説明は省かせていただきます。
トップページの要素
スマートフォン向けサイトの場合、PC向けサイトとは違い画面のサイズが狭いため初期表示の画面に出せる項目はとても少なくなります。サイトのゴールに合わせて優先すべきコンテンツをよく検討しましょう。
本連載で作るのは企業サイトなので、各コンテンツの導線となるナビゲーションと「サービス」「お知らせ」といった順番でコンテンツを配置します。
- ヘッダ
- タイトル
- コンテンツ
- グローバルナビゲーション
- サービスの紹介
- 最新のお知らせ
- フッタ
それでは、上部から段階的に作り方とそこで利用されるコンポーネントについて説明していきたいと思います。
ベースとなるHTML
以下のソースコード（HTML5）をベースにページを作成していきます。
jQuery Mobileでは非同期通信を利用したページ読み込みを行います（オフにすることもできます）。その際、<head>タグの中は再読み込みされません。そのため、すべてのページで必要なスタイルやスクリプトを読み込んでおく必要があります。
特に、このサンプルではiOSのモバイルWebアプリに対応し、Google Mapsを使った地図表示を行うので、そのためのメタタグとスクリプトをすべてのページに記述します。
ソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, maximum-scale=1.5, minimum-scale=1.0,user-scalable=yes,initial-scale=1.0"/> <title>クラスメソッド株式会社</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div data-role="page"> </div> </body> </html>
<head>タグ内に含まれる各要素を説明していきます。
モバイル向けに重要なviewport指定
jQuery Mobileを正しく機能させるには、Viewportの指定が必要です。Viewportは最初に読み込まれたときの画面サイズや、ピンチイン／アウトの制御、拡大率を指定できます。
Viewport指定は、画面サイズを特定のサイズに限定すると、おかしなことになってしまうので、デバイスに合わせて自動でサイズを指定するようにします。
<meta name="viewport" content="width=device-width, maximum-scale=1.5, minimum-scale=1.0,user-scalable=yes,initial-scale=1.0"/>
jQuery Mobileの読み込み
jQuery MobileはCDN（コンテンツ・デリバリー・ネットワーク）を利用して読み込みます。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
ベースとなるHTMLができたところで、ここからは以下の3つを細かく解説していきます。
- ヘッダとフッタ
- グローバルナビゲーション
- コンテンツ
【1】ヘッダとフッタ
まずは、ヘッダとフッタについてです。ヘッダは、通常ページタイトルと2つのボタンからなり、「data-role="header"」を指定します。リンクをタイトルとなる<h1>タグの上下に置くことでボタンとなります。
サンプルのTOPページのヘッダ
サンプルの「サービス」ページのヘッダ
サンプルの「会社情報」ページのヘッダ<h1>タグを使い、タイトルを設定しましょう。連載の後半で画像に置き換えます。
また、フッタにはシンプルにコピーライトを表示します。フッタはヘッダよりも比較的自由に設定できるようになっています。明示的にフッタにするには「data-role="footer"」を指定します。
サンプルのフッタソースコード
<div data-role="header">
<h1>クラスメソッド（株）</h1>
</div>
<div data-role="content">
この中にコンテンツを記述
</div>
<div data-role="footer">
<h3>
Copyright c Classmethod.
</h3>
</div>
ヘッダやフッタなどのツールバーについて
ヘッダはページコンテナの最初、フッタはページコンテナの最後に来る要素です。この他に、任意の個所に独自のツールバーを設定することもできます。
data-roleの指定を行わず、標準的なツールバーの体裁を持ったバーの指定ができます。この方法はツールバーとなる要素のクラスに「ui-bar」とテーマの指定「ui-bar-x」を指定するだけです。
<div class="ui-bar ui-bar-b"> <a href="#">ナビ1</a> <a href="#">ナビ2</a> <a href="#">ナビ3</a> </div>
固定ポジションモード
固定ポジションモードは固定ヘッダ、フッタを実現できます。指定はヘッダ、フッタに対して、「data-position="fixed"」を指定するだけです。
<div data-role="page">
<header data-role="header" data-position="fixed">
<h1>固定ポジションモード</h1>
</header>
<div data-role="content">
</div>
<footer data-role="footer" data-position="fixed">
<h4>固定フッタ</h4>
</footer>
</div>
ナビゲーションバー
ナビゲーションバーは、ヘッダやフッタ、カスタムツールバーに最大5つまでのアイコン付きボタンを配置できます。ナビゲーションバーは「data-role="navbar"」を指定します。
また、ナビゲーションバーをヘッダに設置した場合、ヘッダの直下にナビゲーションバーが追加されます。
<div data-role="page">
<header data-role="header">
<h1>ナビゲーションバー</h1>
<div data-role="navbar">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
</ul>
</div>
</header>
<div data-role="content">
</div>
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
</ul>
</div>
</footer>
</div>
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。