jQuery Mobileをさわってみた
iPhoneやAndroidなどのスマートフォン対応サイトのUIを簡単に作ることができるjQueryプラグイン「jQuery Mobile」をさわってみました。
jQuery Mobileの特徴は、HTML5の拡張属性「data-role」などを使うことで、基本的にjavascriptを書かずに使えることです。
これによって、スマートフォン対応サイトのUIを本当に簡単に作ることができます。
例えば、
<a href="#" data-role="button" />ボタン</a>
という記述をすると、
↑のようになります。（このスクリーンショットはMac上のSafariで撮ったものです）
フォームなどではtype属性の指定だけで
<input type="search" placeholder="検索" />
↑のHTMLが↓のようになったりします。
とても簡単で、そして楽しいです。
しかし、いくつか気になる点もあります。
<div data-role="header">
<h1>ヘッダー</h1>
</div>
とか
<header data-role="header">
<h1>ヘッダー</h1>
</header>
のように書くことで、
↑のようにヘッダー用アピアランスが適用されるのですが、HTML5のheader要素を使った後者の場合、すでにheader要素として「ヘッダーであること」が宣言されているのに、data-role=”header”で二重に宣言しなければならないというのは、マークアップ的に気持ち悪いです。神経質すぎると言えば、そうなんでしょうけども。
header要素を書いた場合にはdata-role属性を書かなくても、ヘッダー用アピアランスが適用されて、header要素で書いてあるのだけどヘッダー用アピアランスを適用させたくないというケースに対して、何らかの記述法を用意して処理させるようになってくれれば、この気持ち悪さは解消されるように思います。
いくつかCSSの効果が綺麗にでてない箇所もあります。
まだ公開α版の段階ですので、これらの件に関しては正式版までの進化に期待したいところです。
あとで開発者にメールでも書いてみようかな。
あと、上のヘッダーのサンプルの左側にあるボタンを見てもわかるのですが、アピアランス的にiPhoneともAndroidとも微妙に違ったりするので、PhoneGapやTitaniumを使ってApp化する際には別のライブラリーを使用するか、CSSをいじるかして使ったほうがいいと思いました。
今回jQuery Mobileをさわるにあたって、参考にした資料↓
jQuery Mobile（Toru Yoshikawa氏）
