メディア掲載_Web Designing

Web Designing 2012年2月号

執筆:丸茂朋弘 執筆:丸茂朋弘

SmartphoneLab.2012年2月号

jQuery Mobileはじめの一歩

先日、「jQuery Mobile」の正式版がリリースされた。α版、β版の時代が長く続いていたので、手を付けるのをためらっていた人も多いのではないだろうか。「jQuery」という名がついているが、JavaScriptフレームワークであるjQueryとは内容も使い方も異なる。そのため、どのようなものなのかイメージがつかずに敬遠していた人もいるかもしれない。今回は、jQuery Mobileを「まずは使ってみる」ということに焦点を絞って解説していこう。

正式版となったjQuery Mobileを使ってみよう!

jQuery Mobileは、JavaScriptフレームワークである「jQuery」のプラグインである。「Mobile」の名のとおり、スマートフォンやタブレットなどに対応したモバイルサイト制作に特化しており、驚くほど簡単な記述で、質の高いスマートフォンサイトを構築できるというのが最大の特徴だ(01)。
jQuery Mobileでの制作は、「HTMLマークアップ+CSSスタイリング+JavaScriptスクリプティング」という通常のコーディングとは異なり、基本的なことはマークアップのみで完了する。スマートフォンサイトに必要なUIやAPIは一通り揃っているので、新たにJavaScriptを書いたり、プラグインを導入したりといった手間を最小限にとどめ、簡単な記述で優れたUIを実現できる。また、クロスプラットフォーム対応なので、iOSとAndroidのどちらでも問題なく動作し、制作したスマートフォンサイトは同時にタブレットやPCでも閲覧できる。

01丸善&ジュンク堂スマートフォンサイト

01 丸善&ジュンク堂スマートフォンサイト

http://www.junkudo.jp/
jQuery Mobileを使用して制作されている。リストやフッタのナビゲーションなど、スマートフォン向けに設計されている

02jQuery Mobile Gallery

02 jQuery Mobile Gallery

http://www.jqmgallery.com/
jQuery Mobileを使用して制作したサイトを紹介している。CSSを駆使するなどして、「jQuery Mobile っぽさ」を回避したサイトも数多く紹介されている

一方で、jQuery Mobileを用いたサイトはどれも似てきてしまうというデメリットもある。これには、CSS3を駆使したり(02)、jQuery Mobile向けに用意された「ThemeRoller」を使う(03)などして対応していこう。

03ThemeRoller for jQuery Mobil

03 ThemeRoller for jQuery Mobil

http://jquerymobile.com/themeroller/
カラーや角丸など、jQuery Mobileのテーマの作成が簡単にできるWebアプリケーションだ

SECTION1 jQuery Mobileの構造

jQuery Mobileの構造

jQuery Mobileを用いたサイト制作は、従来のコーディングとは異なる。HTMLのマークアップ、CSS によるスタイルの設定、JavaScriptによる動きの追加という3つの工程が、「data-role属性の設定」だけで完了してしまうのだ。それでは、HTMLファイル内はどのような構造になっているのかを見ていこう。

jQuery Mobileでのマークアップ

jQuery Mobileでは、要素内で「data-role属性」を設定し、要素に「役割」を与える。たとえば、ヘッダ、コンテンツ、フッタ、そしてコンテンツの中にボタンを一つ設けたページを考えてみよう。これは、01のような記述となる。jQuery Mobileが素晴らしいのは、このようにマークアップをした時点で、スタイルの設定、動きの設定までもが完了してしまうところだ。 これをブラウザで確認すると、ヘッダとフッタはそれぞれ上端下端に幅いっぱいに配置され、真ん中のコンテンツ内には角丸処理がされたボタンが配置される(02)。さらに、このボタンにはタッチ状態のスタイルも備わっているので、スマートフォンサイトに必要な要件はほぼ満たしているといえる。 要素の「役割」を決めるdata-role属性には、このほかにも03のような種類がある。

01シンプルなページのHTMLソース

01 シンプルなページのHTML ソース

ヘッダ/コンテンツ/フッタ/ボタンは、「data-role」属性を適用すると、このような記述となる

02シンプルなスマートフォン向けページ

02 シンプルなスマートフォン向けページ

01の記述だけで、自動的にこのようなレイアウトになる

03data-role属性値の概要

data-role属性値
対象要素
概要
page
div
1ページを定義する
header
div
ヘッダ
content
div
コンテンツ
footer
div
フッタ
button
a
ボタン
controlgroup
div
複数のボタン、フォームパーツをグループ化する
listview
ul、ol
リスト
list-divider
li
リスト内で見出しをつける
collapsible
div
タップで開閉するブロック
collapsible-set
div
複数の開閉ブロックをグループ化する
navbar
div
ナビゲーション。子要素にリストを含め、headerもしくはfooterに格納する

「data-role」属性を記述することで、各要素はスマートフォンサイトに最適化される。また、「data-role」属性を記述しなくても、input要素などは自動的に最適化される

マークアップ要素のカスタマイズ

「data-role」が指定された要素をカスタマイズしたい時は、「data-role」ごとに用意された属性を設定する。先ほどの例では、生成されたボタンは属性を記述していないためデフォルトの角丸になっているが、data-corners属性を追加して値を「false」に設定すると、角丸が取れた四角いボタンとなる(0405)。 カスタマイズ用の属性は一つではなく、buttonであれば、影の有無、アイコンの有無、アイコンの位置、テーマカラーなど、数種類の属性が用意されている(06)。また、a要素やフォーム要素などの「data-role」が設定されていない要素であってもカスタマイズが可能な属性も存在する。

04ボタンの角丸を解除するコード

04 ボタンの角丸を解除するコード

「data-corners」をfalseに設定すると角丸が外れる(05)。「data-shadow」をfalseに設定すると、ボタンにかかっているドロップシャドウが消える

05角丸が解除されたボタン

05 角丸が解除されたボタン

04の記述で表示されたボタン

06カスタマイズ属性と概要

カスタマイズ対象要素
カスタマイズ属性
概要
aタグ
data-transition
ページ切替エフェクト種類選択
data-direction
切替エフェクト逆再生ON/OFF
data-role="button"
data-corners
角丸ON/OFF
data-shadow
ドロップシャドウON/OFF
data-icon
アイコン種類選択
data-iconpos
アイコン表示位置
data-theme
テーマ選択
data-role="listview"
data-filter
検索フィルターON/OFF
data-inset
リストを左右の端から離して表示
data-theme
テーマ選択

カスタマイズ用の属性は、「data-role」によって種類も数も異なる

SECTION2 ページを作ってみよう

ページを作ってみよう

通常のコーディングでは1ファイルまたは複数のファイルで1ページを形成するが、jQuery Mobileでは1ファイルに複数のページを定義することができる。スマートフォンなどのモバイル端末は通信状況が安定していないことも多いので、一度に複数ページを読み込んでしまうことで通信の谷間でのユーザーのストレスを軽減しようというわけだ。

ページを作る

jQuery Mobileでページを作成するには、jQuery MobileのCSSファイル、jQuery本体、jQuery Mobile本体を読み込む必要がある。今回はjQueryとjQuery Mobileのダウンロードページで配布されているファイルを直接読み込んで使用している(01)。
次に、data-role属性でソース内でのページの範囲を定義する。先のページで挙げた例では、data-role属性でヘッダ/コンテンツ/フッタを指定した要素を「data-role="page"」を指定したdivタグで囲んでいる。このまとまりを「ページコンテナ」と呼び、これが1ページとなる(02)。

01各ファイルの読み込み

01 各ファイルの読み込み

jQuery MobileはjQueryのプラグインなので、先にjQueryを読み込む。

02単一ページの記述

02 単一ページの記述

このように、ブラウザでは1ページと認識される。なお、1ファイル1ページの場合は「datarole="page"」は省略できる

複数ページを作る

jQuery Mobileでは、1ファイルに複数のページを作成することができる。記述方法は簡単で、ページコンテナを複数作成し、それぞれにid属性を付加するだけだ(03)。このファイルのデフォルトの表示ページは、一番最初に定義されたページコンテナだが、id属性をページ内リンクのように指定することで、その他のページにリンクすることができる(このような仕様のため、jQuery Mobileでは通常のページ内リンクはできない)。
また、ページタイトルを各ページで個別に設定したい場合、ページコンテナにdata-title属性を付加すれば、各ページでtitle要素以外のテキストをタイトルに設定できる。

03複数ページの記述

03 複数ページの記述

ページコンテナを追加することで、1ファイル内に複数ページを作成できる。その場合、各ページにはidを指定してリンクする

SECTION3 ページ遷移に切替エフェクトをつけてみよう

ページ遷移に切替エフェクトをつけてみよう

jQuery Mobileの代表的な機能の一つに、ページ遷移の際の切替エフェクトがある。デフォルトの「slide」のほか、数種類のパターンが用意されており、簡単な設定でリッチなユーザーエクスペリエンスを提供できる。

ページ切替エフェクトとは?

jQuery Mobileでは、ページ遷移の際にスライドやフェードなどのページを切り替えるエフェクトを設定できる。デフォルトではリンク先のページが右からスライドしてくる「slide」が設定されており、リンク先からブラウザの「戻る」ボタンで戻る際には、「slide」の逆再生エフェクトがかかる(01)。

切替エフェクトの種類

切替エフェクトには6つのパターンが用意されている。デフォルトの「slide」のほかに、ページが下からせり上がる「slideup」(02)、上から覆いかぶさる「slidedown」(03)、ディスプレイ奥から浮かび上がる「pop」(04)、クロスフェードの「fade」(05)、3Dに反転する「flip」(06)の5パターンがある。現時点では、「flip」はAndroid端末ではサポートされていない。

  • 01slideエフェクト

    01 slideエフェクト

  • 02slideupエフェクト

    02 slideupエフェクト

  • 03slidedownエフェクト

    03 slidedownエフェクト

  • 04popエフェクト

    04 popエフェクト

  • 05fadeエフェクト

    05 fade エフェクト

  • 06flipエフェクト

    06 flipエフェクト

このような演出が簡単な記述で実現できる。用途に応じて使い分けるとよいだろう。ただし、使いすぎると煩わしくなったりもするので、どのタイミングでどのエフェクトを使うべきなのかは、よく考えよう

切替エフェクトのカスタマイズ方法

各エフェクトは、「data-direction="reverse"」を指定すると、最初から逆再生にできる(07)。なお、CSSを編集してオリジナルのエフェクトを作成することも可能だ。

07逆再生の記述

07 逆再生の記述

このように「pop」を逆再生するという記述にすると、04とは逆に、画面の奥に消えていくエフェクトになる

切替エフェクト開始時に一時的にページ先頭へ移動してしまうのを避ける

ページ切替エフェクトは、スタートすると、いったんページの先頭まで移動し、そこから切替のアニメーションが始まる。ページのコンテンツがすべてファーストビュー内に収まっているページであれば問題はないが、スクロールが必要なページでの切替エフェクトは決してスムーズとは言えない。
これは現時点におけるjQuery Mobileの仕様だが、iOS5に限っては、右のような追加の記述をすることで回避できる。ただし、まだ試験的な実装のようで、完全にサポートされているわけではないので、入念なチェックが必要だ。

jQuery Mobileの読み込み直前)に記述するコード

この記述は、jQueryの読み込み直後(jQuery Mobileの読み込み直前)に記述しなければならない

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