スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ）

jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる

　前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。

　新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、画面遷移の制御、ボタンに関する細かな指定、ナビゲーションバー、リストの検索フィルタ、基本的なHTMLスタイルと固定ポジションモードを紹介します。

サンプルファイルのダウンロード

　前回と同じものですが、サンプルファイルを用意してあります。こちらからダウンロードして利用してください。

• https://github.com/nonakaryuichi/jQueryMobileSite

お知らせページの参考画面イメージ

• サンプルサイト

お知らせページの設計

　まずお知らせページの設計から始めましょう。全体の構成、ファイル構成、各種画面構成を決めます。

全体の構成

　お知らせページは複数のカテゴリがあり、それにひも付く複数の記事から構成されています。

　お知らせトップには、すべてのカテゴリから最新の記事を3件表示し、各カテゴリアーカイブではそれぞれの最新記事を3件表示します。具体的には、以下のようなページ構成です。

ファイル構成

　全体構成がそのままディレクトリとファイル構成になります。

お知らせトップの画面構成

　お知らせトップ画面では、ヘッダにホームへ戻るボタンを配置し、カスタムツールバーを利用して3つのカテゴリアーカイブへ遷移するボタンを置きます。

カテゴリアーカイブの画面構成

　カテゴリアーカイブでは、ヘッダにお知らせトップへ戻るボタン、さらに右側にホームへ戻るボタンを配置します。こちらもトップと同様にカテゴリのアーカイブへ遷移するナビゲーションバーをヘッダ下部に配置します。

画面イメージ

個別ページの画面構成

　個別ページでは、ヘッダにカテゴリトップ、ホームへの戻るボタンを配置します。こちらもトップと同様にカテゴリのアーカイブへ遷移するナビゲーションバーをヘッダ下部に配置します。

画面イメージ

　単純な構成ですが、これで設計を終わります。

いよいよ実装開始！ jQuery Mobileで使えるTips10選も順に紹介

　ここからは、お知らせページの制作に取り掛かりましょう。この記事では前回同様すべてのソースは掲載せず、ポイントとなる部分を紹介していきます。サンプルサイトとサンプルソースコードを確認しながらポイント部分を読み進めてください。

　また、jQuery Mobileでスマホ向け企業サイトに使える実践的なコード例も以下のように出てきますので、参考にしてください。下記リストはリファレンス的に使えるように、インデックスになっています。