« 第30回マラソンに挑戦する会~フルマラソンはやっぱり大変・過酷でした! | メイン | 来年春の花粉症対策のため耳鼻咽喉科でアレルギー検査を受けてきました »

TOP> Webビジネスコラム, MTのプラグイン活用

MT5で各種デバイス対応考~その5jQueryMobileでスマートファン対応

jQuery mobileを利用してみよう

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

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

MovableTypeでCMS構築しよう

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

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

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

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

jQuerymobileを利用したスマートフォン対応サイト

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


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

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

参考:西畑一馬の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のテンプレートコードを公開してみます。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

トラックバック

このエントリーのトラックバックURL:
http://www.taskmother.jp/cgi-bin/taskmt/mt-tb.cgi/297

タスクマザーブログ
hrm_tskをフォローしましょう
Powered by FeedBurner

RSS2.0

最近のコメント

タスクマザー(taskmother)
  中野 治美

〒921-8806
  石川県野々市市北西部土地区画整理事業
     施工地区55街区3番202