Mobile」の正式版がリリースされた。α版、β版の時代が長く続いていたので、手を付けるのをためらっていた人も多いのではないだろうか。「jQuery」という名がついているが、JavaScriptフレームワークであるjQueryとは内容も使い方も異なる。そのため、どのようなものなのかイメージがつかずに敬遠していた人もいるかもしれない。Mobileを「まずは使ってみる」ということに焦点を絞って解説していこう。Mobileは、JavaScriptフレームワークである「jQuery」のプラグインである。「Mobile」の名のとおり、スマートフォンやタブレットなどに対応したモバイルサイト制作に特化しており、驚くほど簡単な記述で、質の高いスマートフォンサイトを構築できるというのが最大の特徴だ(01)。Mobileでの制作は、「HTMLマークアップ+CSSスタイリング+JavaScriptスクリプティング」という通常のコーディングとは異なり、基本的なことはマークアップのみで完了する。スマートフォンサイトに必要なUIやAPIは一通り揃っているので、新たにJavaScriptを書いたり、プラグインを導入したりといった手間を最小限にとどめ、簡単な記述で優れたUIを実現できる。クロスプラットフォーム対応なので、iOSとAndroidのどちらでも問題なく動作し、制作したスマートフォンサイトは同時にタブレットやPCでも閲覧できる。Mobileを使用して制作されている。Mobileを使用して制作したサイトを紹介している。Mobileを用いたサイトはどれも似てきてしまうというデメリットもある。Mobile向けに用意された「ThemeRoller」を使う(03)などして対応していこう。Mobileを用いたサイト制作は、従来のコーディングとは異なる。よるスタイルの設定、JavaScriptによる動きの追加という3つの工程が、「data-role属性の設定」だけで完了してしまうのだ。それでは、HTMLファイル内はどのような構造になっているのかを見ていこう。Mobileでは、要素内で「data-role属性」を設定し、要素に「役割」を与える。ヘッダ、コンテンツ、フッタ、そしてコンテンツの中にボタンを一つ設けたページを考えてみよう。これは、01のような記述となる。Mobileが素晴らしいのは、このようにマークアップをした時点で、スタイルの設定、動きの設定までもが完了してしまうところだ。これをブラウザで確認すると、ヘッダとフッタはそれぞれ上端下端に幅いっぱいに配置され、真ん中のコンテンツ内には角丸処理がされたボタンが配置される(02)。このボタンにはタッチ状態のスタイルも備わっているので、スマートフォンサイトに必要な要件はほぼ満たしているといえる。要素の「役割」を決めるdata-role属性には、このほかにも03のような種類がある。pagediv1ページを定義するheaderdivヘッダcontentdivコンテンツfooterdivフッタbuttonaボタンcontrolgroupdiv複数のボタン、フォームパーツをグループ化するlistviewul、olリストlist-dividerliリスト内で見出しをつけるcollapsibledivタップで開閉するブロックcollapsible-setdiv複数の開閉ブロックをグループ化するnavbardivナビゲーション。子要素にリストを含め、headerもしくはfooterに格納する「data-role」属性を記述することで、各要素はスマートフォンサイトに最適化される。「data-role」属性を記述しなくても、input要素などは自動的に最適化されるマークアップ要素のカスタマイズ「data-role」が指定された要素をカスタマイズしたい時は、「data-role」ごとに用意された属性を設定する。先ほどの例では、生成されたボタンは属性を記述していないためデフォルトの角丸になっているが、data-corners属性を追加して値を「false」に設定すると、角丸が取れた四角いボタンとなる(04、05)。カスタマイズ用の属性は一つではなく、buttonであれば、影の有無、アイコンの有無、アイコンの位置、テーマカラーなど、数種類の属性が用意されている(06)。a要素やフォーム要素などの「data-role」が設定されていない要素であってもカスタマイズが可能な属性も存在する。04ボタンの角丸を解除するコード「data-corners」をfalseに設定すると角丸が外れる(05)。Mobileでは1ファイルに複数のページを定義することができる。スマートフォンなどのモバイル端末は通信状況が安定していないことも多いので、一度に複数ページを読み込んでしまうことで通信の谷間でのユーザーのストレスを軽減しようというわけだ。Mobile本体を読み込む必要がある。Mobileのダウンロードページで配布されているファイルを直接読み込んで使用している(01)。次に、data-role属性でソース内でのページの範囲を定義する。先のページで挙げた例では、data-role属性でヘッダ/コンテンツ/フッタを指定した要素を「data-role="page"」を指定したdivタグで囲んでいる。このまとまりを「ページコンテナ」と呼び、これが1ページとなる(02)。MobileはjQueryのプラグインなので、先にjQueryを読み込む。02単一ページの記述このように、ブラウザでは1ページと認識される。Mobileでは、1ファイルに複数のページを作成することができる。記述方法は簡単で、ページコンテナを複数作成し、それぞれにid属性を付加するだけだ(03)。Mobileでは通常のページ内リンクはできない)。ページタイトルを各ページで個別に設定したい場合、ページコンテナにdata-title属性を付加すれば、各ページでtitle要素以外のテキストをタイトルに設定できる。03複数ページの記述ページコンテナを追加することで、1ファイル内に複数ページを作成できる。Mobileの代表的な機能の一つに、ページ遷移の際の切替エフェクトがある。デフォルトの「slide」のほか、数種類のパターンが用意されており、簡単な設定でリッチなユーザーエクスペリエンスを提供できる。Mobileでは、ページ遷移の際にスライドやフェードなどのページを切り替えるエフェクトを設定できる。デフォルトではリンク先のページが右からスライドしてくる「slide」が設定されており、リンク先からブラウザの「戻る」ボタンで戻る際には、「slide」の逆再生エフェクトがかかる(01)。切替エフェクトには6つのパターンが用意されている。デフォルトの「slide」のほかに、ページが下からせり上がる「slideup」(02)、上から覆いかぶさる「slidedown」(03)、ディスプレイ奥から浮かび上がる「pop」(04)、クロスフェードの「fade」(05)、3Dに反転する「flip」(06)の5パターンがある。現時点では、「flip」はAndroid端末ではサポートされていない。01slideエフェクト02slideupエフェクト03slidedownエフェクト04popエフェクト05fadeエフェクト06flipエフェクトこのような演出が簡単な記述で実現できる。用途に応じて使い分けるとよいだろう。各エフェクトは、「data-direction="reverse"」を指定すると、最初から逆再生にできる(07)。CSSを編集してオリジナルのエフェクトを作成することも可能だ。07逆再生の記述このように「pop」を逆再生するという記述にすると、04とは逆に、画面の奥に消えていくエフェクトになる切替エフェクト開始時に一時的にページ先頭へ移動してしまうのを避けるページ切替エフェクトは、スタートすると、いったんページの先頭まで移動し、そこから切替のアニメーションが始まる。ページのコンテンツがすべてファーストビュー内に収まっているページであれば問題はないが、スクロールが必要なページでの切替エフェクトは決してスムーズとは言えない。Mobileの仕様だが、iOS5に限っては、右のような追加の記述をすることで回避できる。試験的な実装のようで、完全にサポートされているわけではないので、入念なチェックが必要だ。Reserved.特定商取引法に基づく表示プライバシーポリシーサイトマップ。