メディア掲載_Web Designing

Web Designing 2012年6月号

執筆:伊藤洋介 執筆:伊藤洋介

SmartphoneLab.2012年6月号

jQuery Mobileのオリジナルテーマを作成する

jQuery Mobileはスマートフォン向けのサイトを手軽に構築することが可能である反面、デフォルトの状態のデザインは画一的なものになりがちだ。今回は、jQuery Mobileでオリジナルテーマを作成するアプローチの一つとして、HTML/CSSを編集する方法を解説していこう。

jQuery Mobileの機能を活用しつつ、自由にデザインテーマを作成する。

jQuery Mobileを使うと、HTMLのマークアップのみで簡単にスマートフォン向けのサイトを作成できる。しかし、jQuery Mobileのデフォルトテーマには5種類のカラーパターンしかないため(01)、カスタマイズをしない状態だとどれも似通ったデザインになってしまいがちだ。

01jQuery Mobileデフォルトテーマ

jQuery Mobileデフォルトテーマ

5種類のカラーパターンが用意されているが、似通ったデザインになりがちだ

jQuery MobileのUIは、「共通CSS」と「テーマCSS」で定義されており、それらを編集したり新たにCSSを追加したりすることでオリジナルのテーマ・デザイン(02)を実現できる。

02今回作成するオリジナルテーマ

02 今回作成するオリジナルテーマ

ヘッダ内の文字要素の位置やフッタの装飾、コンテンツ内部のレイアウト/装飾など、jQuery Mobileのデフォルトとは異なった形になっている

また、jQuery Mobileのテーマカスタマイズの役に立つのが、「ThemeRoller」(03)だ。ヘッダやフッタ、ボタンのカラーなど、オリジナルテーマの基礎となる要素の作成が簡単にできるWebアプリケーションで、編集したHTML/CSSのダウンロードも可能だ。ここで作成してダウンロードしたものを基盤としたオリジナルテーマの編集方法を解説しながら、トップページと下層ページを作成してみよう。

03ThemeRoller for jQuery Mobile

03 ThemeRoller for jQuery Mobile

http://jquerymobile.com/themeroller/
カラーパレットでの色の設定など、直感的な操作が可能なWebアプリケーション

SECTION1 基盤となるHTML/CSSを作成する

SECTION1 基盤となるHTML/CSSを作成する

「ThemeRoller」では、「ヘッダ」「フッタ」「ページ背景」「ボタン」など、基本的な要素をカスタマイズしたテーマを簡単に設定することが可能だ。そして、設定したHTML/CSSがダウンロードできるので、一からコーディングする必要がなく非常に効率的だ。まずは、ThemeRollerで基盤となるHTML/CSSを作成し、ヘッダ・フッタを調整していこう。

STEP1 各要素の設定

「ThemeRoller」にアクセスすると、3つのスマート向けフォンサイトのレイアウトが並んでいる。これらは「A」「B」「C」とラベル付けされていて、「Swatch」と呼ばれている。これらを個別に設定することで、一つのテーマ内に複数のカラー設定を持たせることも可能になる。
まずはサイト左側のカラムの[Global]というタブで共通項目を設定し(共通項目の内容は01を参照)、次にSwatch Aの設定(Swatchの項目内容は02を参照)を行う。なお、設定項目の詳細はサンプルデータに同梱しているので、ダウンロードして確認してほしい。

01共通項目の内容

Font Family
使用するフォントを設定
Active State
ボタンのアクティブ時のスタイルを設定
Corner Radii
ボタン要素の角丸を設定
Icon
各ボタン要素のアイコンスタイルを設定
Box Shadow
各ボックス要素の陰影のスタイルを設定

ここで指定した値は、各Swatchのすべてに反映される

02Swatchの項目内容

Header/Footer Bar
ヘッダ/フッタ要素のスタイルを設定
Content Body
コンテンツ部分の要素のスタイルを設定
Button: Normal
通常時のボタンスタイルを設定
Button: Hover
ホバー時のボタンスタイルを設定
Button: Pressed
押下時のボタンスタイルを設定

Swatch[A]だけでなく、[B][C]の設定をしておくと、一つのテーマ内で複数のカラーパターンを持たせることもできる

STEP2 データのダウンロード

[Download]ボタンをクリックすると、テーマ名を入力する項目が表示される。今回は「type01」というテーマ名とし、[DownloadZip]をクリックする。
ダウンロードしたHTMLファイルをブラウザで見ると、基本的な要素がカスタマイズされているのがわかる。

STEP3 ヘッダとフッタの調整

次にHTML/CSSを編集し、ヘッダとフッタを調整する。今回の調整用のCSSファイルとして「type01.adjust.css」を作成して、読み込ませる(HTML記述例は03、CSS記述例は04を参照)。
Firefoxの「Firebug」などのWebデベロッパーツールでページのソースコードを見ると、ファイル内のHTMLの記述とは異なっている。これは、「data-role」属性の値によってjQuery Mobileが記述を書き換えているためだ。CSSの編集は、書き換えられた後のクラス名を踏まえる必要がある。

03HTMLの記述

03 HTMLの記述

CSSは読み込まれた順が後の設定が優先されるため、今回の調整用CSSファイル「type01.adjust.css」を作成し、「type01.css」「jquery.mobile.structure-1.1.0.min.css」の後に記述する(01

04type01.adjust.css記述例

04 type01.adjust.css記述例

実際のHTMLには記述されていないクラス名があるが、これはJavaScriptで書き換えられた後のHTMLのクラス名に対して属性を与える必要があるためだ

SECTION2 トップページの編集

SECTION2 トップページの編集

トップページには「メイン画像」「ブロック型ボタン」「リスト型ボタン」を配置する。jQuery Mobile特有の「data-role=""」が、どのタイミングで使用されるのかを見ながら解説していこう。

STEP01 コンテンツエリア

コンテンツエリアは、jQuery Mobileの「data-role="content"」の部分だ(01)。メイン画像部分は、スライドショーといったjQueryプラグインなどと共存させることも工夫次第で可能だ。

01コンテンツエリアとメイン画像

01 コンテンツエリアとメイン画像

01 コンテンツエリアとメイン画像

メイン画像エリアはスライドショーなどの機能でプレゼンタブルに仕上げたいが、挙動が重くならないように気をつけよう

STEP02 ブロック型ボタン

ブロック型ボタンは、「data-role="controlgroup"」と「data-role="button"」で作成されるボタンのCSSを編集してレイアウトを調整していく(02)。SECTION1のSTEP3と同様に、ブラウザの開発者ツールなどでソースで見ると、a要素に「ui-btn」というクラス名が付与されているのがわかる。また、ホバー時には「ui-btn-hover-a」、クリック(タップ)時には「ui-btn-down-a」といったように、それぞれのアクション時にクラス名が変わるので、それらのクラスに対して個別にスタイルを適用することも可能だ。

02ブロック型ボタン

02 ブロック型ボタン

02 ブロック型ボタン

02 ブロック型ボタン

JavaScriptで書き換えられた後のクラスのスタイルを調整していく

STEP03 リスト型ボタンの配置

リスト型ボタンは「data-role="listview"」で作成が可能になる(03)。STEP02のブロック型ボタンでは「ui-btn」というクラス名が付与されたことを解説したが、このリスト型ボタンにも「ui-btn」というクラスが存在している。これはjQuery Mobileではボタン要素に同一のクラス名を付与するためだ。個別にスタイルを適用したい場合は、親要素からの継承を利用しよう。
また、ここではページ遷移の方法としてjQuery Mobileの「data-transition="slide"」というスライド形式を採用しているが、「data-transition="エフェクト名"」でさまざまなエフェクト方法を設定できる(04

03リスト型ボタン

03 リスト型ボタン

03 リスト型ボタン

01の記述のように、特定クラスを持った要素内のみでスタイルを適用することにより、ユニークなデザインの設定も可能になる

03 リスト型ボタン

04jQuery Mobileのページ遷移エフェクト

動作
slide
ページが横にスライド(デフォルトアニメーション)
slideup
ページが下から上にスライド
slidedown
ページが上から下にスライド
pop
ページがポップアップ(拡大しながらフェードイン)
fade
ページがフェードイン
flip
ページが回転して切り替わる
none
アニメーションオフ

jQuery MobileのアニメーションはAndroid端末では正常に動作しないケースもあるため、実装するアニメーションは念入りに選定しよう

SECTION3 下層ページを作る

SECTION3 下層ページを作る

jQuery MobileではAjax通信によって、同一のHTMLファイルに複数ページを持たせることが可能だ。実際のHTMLの記述がどのようになるのかを見ながら解説していこう。

STEP01 下層ページの記述

SECTION2で作成したトップページのHTMLに「<div data-role="page" id="index" data-theme="a">」というdiv要素がある。このdata-role="page"という属性を持ったdiv要素がjQuery Mobileにおける1ページの扱いとなる。並列に複数記述することで、同じファイル内に複数のページを持たせることも可能だ。

01下層ページhtml記述例

01 下層ページhtml記述例

「<div data-role="page" id="ページID" data-theme="a">」といった記述をすれば、それがページ扱いとなる

STEP02 パンくずリストの設定

閲覧しているページの階層を把握しやすくする役割を担うのが「パンくずリスト」だ。ここでは、閲覧ページ階層が直感的に把握できるように、jQuery Mobileの「data-direction="reverse"」で逆方向へのスライドを設定してみよう。トップページから下層ページへの遷移は右方向にスライドし、下層ページからトップページへの遷移は左方向にスライドするので、スマートフォンらしい動きとなる。

02パンくずリスト

02 パンくずリスト

02 パンくずリスト

この記述によって、トップページから下層ページへは右から左へ遷移し、下層ページからトップページへ戻る時は左から右へ遷移するようになる。階層が深くなるコンテンツなら、この手法はより効果的だ

02 パンくずリスト

STEP03 コンテンツの作成

下層ページのコンテンツを記述して完成だ。STEP01からの手順と同様に、「data-role="page"」の属性を持ったdiv要素を用いて必要なページを制作していこう。また、jQuery Mobileでは、「href="#ページID"」のように、アンカーで記述してページ遷移を行う。もちろん、ファイル間での遷移も可能だ。

03下層ページコンテンツ

03 下層ページコンテンツ

03 下層ページコンテンツ

jQuery Mobileにおけるページ遷移は、「href="#page01"」のように基本的にはアンカーで行う

03 下層ページコンテンツ

jQuery Mobileの使いどころ?

jQuery Mobileはスマートフォン向けのサイトを簡便に制作できる非常にパワフルなフレームワークだ。しかし、カスタマイズ量が増えれば当然制作の工数も増えるため、jQuery Mobileを使用しない時よりも制作作業が増えてしまう場合も出てくるかもしれない。jQuery Mobileの「簡便に制作ができる」「スマートフォンらしいページアニメーションが用意されている」といったメリットを活かすバランスの見極めが大事になってくる。

お問い合わせはこちらからどうぞ