2011-03-25
jQuery Mobileを利用したケータイ向けページのスマートフォン対応化 概要篇
前々回、前回のjQuery Mobileネタに引き続き、 今回は実際のケータイ向けページに対するjQuery Mobileを利用したスマートフォン対応化について記述します。
尚、今回の一連の記事はjQuery Mobile Version1.0 Alpha3をベースにしていますが、カスタマイズの都合上コードの変更も行っている為、 jQuery Mobile自体のHOWTO的な記事とはなっていませんのでご注意を。
スマートフォン化対象サイト
今回スマートフォン対応を行うのは、以前ケータイ対応も行ったブログ情報サイトであるBlogara。
BlogaraのPC用ページは、処理を行うJavaScriptファイルとデータが記述されたJSONファイルをクライアント側に渡し、
ページ切替えやソート、Mouseoverでのブログ記事内容表示、Ajaxでのデータ取得やlocalStorageに保存した設定を元に表示選択を行う機能など、
その多くをクライアント側に実装した自称"高機能Webアプリケーションサイト"となっています。
テーマ:SKE48 PC用ページ
そこでJavaScriptの動作を前提に出来るスマートフォンでもそれらの機能を実装すべき所ですが、時間的な制約から今回は単純で静的なケータイ向けページを試験的にスマートフォンに対応するだけとなります。
が、フィーチャーフォンからスマートフォンへの移行が進んでいる現状においては、 このようなケータイ向けページのスマートフォン対応化は、 今後暫くjQuery Mobileの主要な利用法となる事が見込まれ、丁度良いテストになるのではないかとも考えています。
Blogaraでは作品やイベント、グループなどある区分に属する人物/サイトのデータと、 それらが所有するブログ/マイクロブログ/Newsなどの更新情報についてをテーマという括りで管理しています。
以前行ったケータイ向けや、今回行うスマートフォン対応化においても、そのテーマ毎のブログ更新情報を表示するページになります。
テーマ:SKE48 ケータイ向けページ
ページ構成
ケータイ向けページでは、テーマに属するブログなどの更新情報を時系列順に並べ、その全更新情報を表示する分の複数のページが存在するという構成となっています。
それらのページでは、人物名やブログタイトルなどでソートや抽出が出来る訳でも無く、単純に更新情報を表示させているだけなので、
パラメーターによって表示内容が変化する事も無い(実質的に)静的なページです。
また、Blogaraでは各人物の専用ページが存在していますが、ケータイ向けには対応していませんので、それらへのリンクもありません。
PC向け人物詳細ページ
今回のスマートフォン対応では基本的にケータイ向けページをベースとし、それにjQuery Mobileを利用したUIを実装するような形となります。 その上で今回スマートフォン対応ページの概要としては、
- 静的に生成された複数ページ構成
- ケータイ向けページと同様に、ブログ更新情報が時系列順に並んだ一連の複数ページ構成
- ページ間の移動はページ遷移を伴わないAjaxによるデータ取得
- ページ切替えはjQuery Mobileのデフォルトである、Ajaxを使ったページデータ取得とエフェクトを利用
- 一方、他のテーマのブログ更新情報ページに移動する場合には、ページ遷移を行う
- テーマの移動ではAjaxによるページ取得を行わない
- 人物/サイト名の詳細情報表示
- PC向けページとは別の、スマートフォン用の人物詳細情報ページを作成し、更新記事にその詳細情報ページへのリンクを設置する。 更新情報からのリンクではjQuery MobileのDialogとして表示される。
このように機能的には大した要素は無く、対応も簡単に完了するかと思われました。
が、jQuery Mobileが想定する利用法とは多少異なる機能やデザインを実装しようとする場合には、 それなりに手間の掛かる対応を行う必要があるというのが、今回の一連の記事の本題になります。
HTML - カスタムデータ属性を使った機能指定
jQuery Mobileでの基本単位であるPage
jQuery Mobileでは、data-role="page"が設定された要素(大抵は<div>)をPageと呼び、それが表示や管理での基本単位となります。
よって、スマートフォン対応ページでもまず<body>直下にPageを記述します。
<div data-role="page" data-theme="a" data-back-btn-text="戻る" data-pagenum='1'>
header/content/footer
Pageにはheaderやcontent,footerなどの項目が含まれます。 今回は、headerにはサイトのタイトル(と自動的に表示されるbackボタン)を設置し、contentにブログの更新情報データを記載、footerはとりあえず未使用とします。
<div data-role="header">
<h1>Blogara</h1>
</div>
<div data-role="content">
<div class="tpcHeader">
<h2>SKE48</h2>
</div>
<div class="contentArea">
<ul data-role="listview" data-dividertheme="a" data-inset="true" class="midList">
このように、data-roleなどのカスタムデータ属性で指定されるようなjQuery Mobileで特別な意味を持つ属性値と共に、 勿論、通常のHTMLページと同様に任意の要素やCSSのクラス名を利用出来ます。
List view
ブログ更新情報の表示には、jQuery MobileのList viewを利用します。
List viewでは、リストアイテム(<li>)中にリンク(<a>)が存在する場合には、リストアイテムの任意の場所のクリックでリンクに飛ぶ状態になり、 また操作可能UI要素らしいデザインが自動的に適用されるなど、jQuery MobileのDemoにおいても多用されている機能となります。
個々のブログ更新情報は元記事のブログへのリンクが設定されますので、まさにList viewが想定するような利用法になります。
また、List viewでは通常のリストアイテムとは別に、list-divider(data-role="list-divider")という一種のヘッダ扱いの要素を指定出来るので、 そこに更新日時のような補足情報とページ切替や更新などのコントロール部を設置します。
Select menu
ページ切替のUIとしては、ケータイ向けページではページ番号のリンクとaccesskeyを使ったショートカットを利用していましたが、
タッチ操作が基本となるスマートフォンではケータイと同様のUIという訳にもいきません。
そこで、前ページと次ページに移動するボタンを加えると共に、ページ番号を直接指定して移動するUIを<select>を利用したメニュー形式で実装します。
<select name="paseSel" data-transition="slide">
<option value="1" selected="selected">1ページ</option>
<option value="2" >2ページ</option>
<option value="3" >3ページ</option>
</select>
jQuery Mobileのデフォルトでは、<select>はブラウザ固有のUIを使うのでは無く、jQuery Mobile独自のSelect menuに置き換えて表示させています。
CSS - デザイン要素
CSSについては、使い勝手的にはこれまでのPC向けページとそう大差はありません。
策定段階のCSS3のプロパティを使う場合にはベンダ固有のprefix(-webkit-だとか-moz-だとか)を使う必要のあるケースが多く、 さらにそれぞれのブラウザでの実装レベルや、そもそも構文自体が異なっているケースもあるので、相変わらずといった感じです。
スマートフォン界で大きなシェアを持つWebKit系に特化するなら、よりCSS3を積極的に使っても良さそうですが。
CSS3 Gradient
そんな中で、jQuery MobileのCSSで積極的に利用されているのがCSS3のグラデーション効果。
グラデーションは、シンプルではあるがそれでいてデザイン面での付加要素として効果的である為、これまでも多くのサイトで用いられてきましたが、 それを画像ファイルを使わずCSS3の記述で実現出来るのは非常に便利です。
例えば、このようなヘッダ部分の背景も、
background-image: -moz-linear-gradient(top, #a6a6aa, #34343a 85%, #545454); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,#a6a6aa), color-stop(0.85,#34343a), color-stop(1,#545454));
というような指定で表現出来ます。ただこのように現時点ではGeckoとWebKitでは文法が異なっています。
このグラデーションと、以前から使われてきたCSS3のborder-radiusやbox-shadow,CSS2のtext-shadowを利用する事で、
デザインパーツとしての画像ファイルの削減が可能です。
# ただこれらのプロパティをサポートしていない環境では想定通りに表示されないという、お馴染な問題がありますが。
カスタマイズ
jQuery Mobileでは自動的に要素やclass属性値の追加が行われます。
それらのデザインを変更したい場合には、CSSでのより詳細度の高い設定が優先される性質を利用し、jQuery MobileのCSSファイル(jquery.mobile-1.0a3.css)を編集するのでは無く、 別CSSファイルを作成し、そこに変更したい設定を記述します。
jQuery Mobileでは大量のclass属性値が追加されますので、 実際にHTML/CSSファイルを見てどの指定が適用されているかを識別するのは時間の掛かる面倒な作業となります。
そんな場合には、各ブラウザで標準またはAddonとして存在するユーティリティの利用が非常に有効です。
例えばFirefoxの場合にはFirebugが定番となっています。
jQuery Mobileのテーマ
jQuery Mobileでは複数のデザイン/レイアウトをテーマとして管理(a-zの1文字で識別)し、同一ページ内の要素毎に使い分ける事が可能です。
よって、デフォルトで存在するテーマとは別のデザインにしたい場合にも、本来は新たなテーマを追加すべき所ですが、 今回はテーマに必要な全ての設定を記述するのも何ですので、黒ベースのテーマ"a"を上書きします。
.ui-body-a .ui-li-divider .ui-btn {
display: inline-block;
font-size: 13px;
margin: 0px;
}
.ui-body-a .ui-li-divider .ui-btn-right {
position: absolute;
top: 2px;
right: 2px;
}
.ui-body-a .ui-li .ui-btn-icon-right .ui-btn-inner {
padding: 0.7em 32px 0.7em 12px;
}
続く…
という訳で、この記事では今回のスマートフォン対応化の概要を書いてみましたが、 次回は、実際にどのような機能をどのように実装し、どのような変更をjQuery MobileのJavaScriptファイルに行う必要があったのかを書いてみます。
