MT5で各種デバイス対応考～その５jQueryMobileでスマートファン対応 (タスクマザー)

前回「MT5で各種デバイス対応考～その４スマートフォン」に続いて、スマートフォン対応Webサイトが手軽に制作できるjQueryMobileについての考察。

まずはMT構築サイトをjQuery Mobileを利用してスマートフォン対応してみました。
テスト用ですので、動きがおかしいところはご愛嬌(^^;

PCの方は、そのままMTのデフォルトテンプレートで表示されます。

スマートフォンでアクセスすると、

「このサイト「MovableTypeでCMS構築しよう」にはスマートフォン用のサイトがあります。表示しますか？」

というメッセージウィンドウが表示され、スマートフォン表示か通常のWeb表示か選択できます。

ページ下部に、「PC｜スマートフォン」の切り替えタブがあるので変更が可能です。
同様にPCでの閲覧でも、スマートフォン表示(http://cms.taskmother.jp/sp/)に切り替えが可能です。

jQueryMobileで書くコードは、とてもシンプル。
HTML5を基本としているので簡単。
スマートフォン用のデザインがすでに組み込まれており、基本、CSSを書かなくてもよい。

jQueryMobile、本家サイトは英語なのですが、ここ数ヶ月でかなり日本語での情報が増えてきます。
ASCII.jpでもようやくjQuery Mobileを扱った特集がでてきました。

とはいえ、大枠を理解するためにも、「jQueryMobileのデモ・ドキュメント」を見ることをお薦めします。

ここでデザインやナビゲーションなど具体的な表示と動きをみることができます。
Javascriptで動いているので、画面遷移のURLは独特です(PCで動作確認した場合のURLにチェック)

例えば、jQuery mobileのサイトのデモ画面の「Components」リストで、ボタンやバーなどのパターンをみることができ、それに対応したドキュメント(タグ) が書かれています。

ただ、説明が英語表記なので、コード以外を理解しずらいかもしれません。

その場合は、ドキュメントの表示ページのソース(HTMLタグ)をあわせて見るほうが簡単な場合もあります。

そのソースは、
GitHub.comの jquery /jquery-mobileで、みることができます。

(直接デモページのソースをみても、Javascriptで動いているので、HTMLソースを見ることはできません。)

例えば、

「Components」＞Grouped buttonsをタップ(クリック)すると、以下のページが表示されます。

http://jquerymobile.com/demos/1.0a4.1/#docs/buttons/buttons-grouped.html

このURLのディレクトリ階層をみて、GitHub.com(https://github.com/jquery/jquery-mobile)で

docs＞buttons＞buttons-grouped.htmlのページへ遷移していくとコードが表示されています。

実際のコードは、

https://github.com/jquery/jquery-mobile/blob/master/docs/buttons/buttons-grouped.html

にあります。

少し難しくなりましたが、表示させたいパターンのサンプルを選択して、そのコードを提要させていきます。
jQuery MobileのバージョンもAlpha 4になり、かなり進化して安定してきています。

さて、このjQuery MobileをMTのテンプレートに対応するのも基本は簡単。
大枠を作って、あとはMTタグを加えるだけ。

次回は、具体的にMTのテンプレートコードを公開してみます。

タスクマザー