メディア掲載_Web Designing

Web Designing 2012年8月号

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

SmartphoneLab.2012年8月号

jqMobiを実践的に使ってみよう

「jqMobi」は、jQueryと互換性を持ちながら、モバイルデバイス向けに特化し、ファイルサイズのコンパクト化、スクリプト処理の高速化を実現したライブラリだ。iOSやAndroidといったモバイルデバイス対応のWebサイトの制作時に気にしなければならないのが、ページ表示やスクリプトの処理速度だ。今回はその解決策の一つとなりうるjqMobiを用いた実践的な制作例を紹介していこう。

jQuery互換のモバイル向け軽量・高速フレームワーク「jqMobi」を使ってみる

jqMobi(01)は、HTML5をベースとしたモバイルデバイス向け開発フレームワークのコアモジュールだ。jQuery互換の文法を備えており、いくつかの例外をのぞけばjQueryの代替ライブラリとしても利用できる。実際のファイルサイズを比較すると、jQuery(1.7.2)の圧縮ファイルは約32KB、jqMobiの圧縮ファイルサイズは約5KBとなっており、非常に軽量なのがわかる。また、スクリプト処理においても2.2倍~3倍ほど高速であるというテスト結果も出ている。

01jqMobiオフィシャルサイト

01 jqMobiオフィシャルサイト

http://www.jqmobi.com/

ただし、軽量化・高速化がなされている反面、モバイルデバイス向けのベストプラクティスとしてのメソッドに絞られており、jQueryでは可能なことがjqMobiではできない、または異なるメソッドを用いなければならない場合もある。対応しているメソッドについては、jqMobiの公式のデモンストレーションサイトで紹介されているので、そちらを参照してもらいたい(02)。 また、jqMobiはカルーセルやポップアップなどのプラグインも標準で用意されている。こちらも、公式のデモンストレーションサイトを参照して、どのようなものがあるかを確認してほしい。
今回は、jqMobiを用いたサイト制作の紹介をしていこう(03)。

02jqMobi公式デモンストレーションサイト

02 jqMobi公式デモンストレーションサイト

http://www.jqmobi.com/testdrive/

03今回制作するサンプル

03 今回制作するサンプル

CSSの編集でデザインのカスタマイズを行い、カルーセルのプラグインを実装している。

SECTION1 jqMobiフレームワークでの基本的な構築

jqMobiフレームワークでの基本的な構築

jqMobiでは、「jqUi」というユーザーインターフェイス構築用のモジュールが用意されている。HTML5と組み合わせて構築することで、モバイルデバイス向けのユーザーインターフェイスの制作が可能になる。

ダウンロードと読み込み

jqMobiフレームワークに必要なデータはGitHubで公開されている(01)。それをダウンロードして展開すると、jqMobiとjqUi、そして各種プラグインが含まれている。まずは、HTMLに02のようにCSS/JavaScriptを読み込ませる。

01jqMobiのダウンロード先

01 jqMobiのダウンロード先

今回は「1.02a.zip」を使用している

02CSS/JavaScript読み込みの記述

02 CSS/JavaScript読み込みの記述

ここでは、今回必要となるファイルを順次読み込んでいる。ダウンロードしたファイルにはさまざまなデータが含まれているので、それらもチェックしておくとよいだろう

基本となる枠組み

jqUiの記述方法はjQuery Mobileと似ており、一つのHTMLファイルの中に複数ページの内容を記述することが可能だ。03を見るとわかるように、各ページ階層のdiv要素には「title」という属性が与えられている。title属性の内容が、各ページのh1要素として扱われる仕組みになっている。また、いずれかのページ階層のdiv要素に「selected="true"」と記述すると、そのdiv要素がトップページとして扱われる。

03jqUiでのHTML記述例

03 jqUiでのHTML記述例

各ページ階層のdiv要素に「panel」というclass名が付与することで、ページ扱いとなる。また、idを付与しており、それらのidへのアンカーリンクでページ遷移することになる

ナビゲーションボタンの設置

「id="content"」と指定したdiv要素と並列に、「id="navbar"」と指定したdiv要素を配置すると、フッタとしてページ下部に固定される。固定されたフッタ内には、jqUiのアイコンを付与しておこう(04)。

04フッタ記述例

04 フッタ記述例

「class="icon***"」という指定をa要素に記述すると、アイコンが表示される。icons.css内にアイコンの種類が記述されているので、それらもチェックしておくとよいだろう

ページ遷移の方式

ページ遷移の方式には、jQuery Mobileと同様のアニメーションが用意されている。a要素にdata-transition属性を付与し、値を指定することでアニメーションによるページ遷移が可能になる(04)。主な遷移アニメーションの指定値は、05を参照してほしい。

04アニメーション指定値

属性値
アニメーション
up
ページが下から上に移動してくる
down
ページが上から下に移動してくる
flip
ページが回転しながら切り替わる
fade
ページがフェードインしながら表示される
pop
ページが拡大しながら表示される
none
ページ遷移アニメーションなし

何も指定しなかった場合は、横スライドでの遷移となる

05サンプルの完成図

05 サンプルの完成図

CSSでのデザインカスタマイズをしていない状態。jqMobi公式デモンストレーションサイトと同一の見た目になっている。

SECTION2 CSSでデザインカスタマイズ

CSSでデザインカスタマイズ

SECTION1での基本的な構造を元に、各ページのHTML基盤を作成する方法と、CSSによるデザインカスタマイズを紹介していこう。

編集用のCSSを準備し、読み込ませる

jqMobiでは、jq.ui.cssを直接編集することでデザインのカスタマイズが可能だが、今回は編集用のadd.cssを用意し、そこにカスタマイズ用のスタイルを記述していく(01)。

01編集用CSSの読み込み

01 編集用CSSの読み込み

基本となるjq.ui.cssの後に、add.cssを読み込ませる

トップページの作成

SECTION1の02を元に、ページ階層のdiv要素内に内容を記述していく(02)。title属性(そのページのh1)、id属性(ページ遷移のアンカー先)、class属性(1ページ扱いとするために「panel」と記述)、selected属性(トップページ扱いとするために「true」と記述)を指定する。 次に、全体の背景色や#headerを調整したスタイルをadd.cssに記述していく(03)。HTML内に「header」というid名を持った要素は存在していないが、jqMobiでは自動的にDOM操作を実行し、「#header」というdiv要素を出力している。WebKit系ブラウザのデベロッパーツールを使うと、出力後のソースコードを確認することができる。

02トップページのHTML記述例

02 トップページのHTML記述例

ul要素にはjq.ui.cssでスタイルが指定されているが、スタイルを継承しつつ上書きするために、「index_list」という新しいclass名を付与している

03トップページスタイル記述例

03 トップページスタイル記述例

jq.ui.cssに記述されているスタイルを継承しつつ、デザイン調整が必要な部分をスタイリングしていく

下層ページの作成

selected属性で「true」を指定しないと、下層ページ扱いとなる(04)。その場合は、#headerと同様に、jqMobiのDOM操作によってヘッダ内に自動的にトップページへの遷移ボタンが設置される。この遷移ボタンには「#backButton」「.button」というid/class名が付与されているので、それらをスタイリングしていこう(05)。
ここで紹介しているスタイルの他にも調整をしている部分があるが、それについてはサンプルデータを参照してほしい。

04下層ページのHTML記述例

04 下層ページのHTML記述例

このコードを複製して並列に記述していくことで、複数のページを1ファイル内に収めることが可能になる

05下層ページ用スタイル記述例

05 下層ページ用スタイル記述例

「.button」は、#backButton以外でもjqMobi内で汎用的に使用されているため、バッティングを避けるために「#backButton.button」という指定をしておこう

06サンプルの完成図

06 サンプルの完成図

フッタのアイコンを活かしつつ、全体の背景色/ヘッダ/縦並びのリスト部分をカスタマイズしている

SECTION3 jqMobiのプラグイン「カルーセル」を実装する

jqMobiのプラグイン「カルーセル」を実装する

jqMobiには豊富なプラグインが用意されていることは既に述べたが、その中でも代表的なカルーセルの実装の方法を解説しよう。ここでは、上部の画像をフリックでスライドできるようにし、どの画像が表示されているのかを示すページング機能も実装している。

プラグインデータの読み込み

SECTION1でダウンロードしたデータ一式には「plugin」というディレクトリが含まれている。その中に「jq.carousel.js」というファイルが入っているので、それを読み込ませる(01)。なお、pluginディレクトリには他にもさまざまなプラグインが梱包されているので、ぜひチェックしてもらいたい。

01プラグインの読み込み

01 プラグインの読み込み

jqMobiのプラグインなので、必ず「jq.mobi.min.js」のあとに読み込ませる

02HTML記述例

02 HTML記述例

Carousel_dotsの中はCSSでスタイリングされているが、後述のCSS記述例(04)を参照してほしい

メイン画像をカルーセル化する

次にメイン画像をカルーセル化するためのHTMLを記述していこう。02を見ると、carouselというid名を持ったdiv要素の中に入れ子になったdiv要素がカルーセルの対象となる。個数に制限はなく、複数を設置することも可能だ。また、カルーセル内の画像の枚数を明示化するためのページング機能もあり、全部で何枚の画像がカルーセル内にあるのか、現在どの画像が表示されているのかを「carousel_dots」というid名の空div要素の中に出力させている。
次に、カルーセルを動作させるために、スクリプトを記述していく(03)。ページング機能をどこに出力するかのclass名を「pagingDiv」、ページング機能を出力した後のclass名を「pagingCssName」、ページングのアクティブ時のclass名を「pagingCssNameSelected」で定義している。
最後に、CSSでカルーセルとページングのスタイリングをしていく(04)。03で定義したclass名と整合させながら、各プロパティを調整していこう。
カルーセルは動作が重くなりがちなアニメーションだが、jqMobiでは非常に軽快に動作していることがわかるだろう。

03スクリプト記述例

03 スクリプト記述例

このコードを見てわかる通り、jQueryと互換性の高い記述方法となっている

04CSS記述例

04 CSS記述例

ページングのデザインは、CSS3の角丸を用いて丸状のアイコンを表現している

05サンプルの完成図

05 サンプルの完成図

メイン画像をカルーセル化し、その下にはどの画像が表示されているかを示すページング機能を追加している。

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