jquery.mobileとHTML5のdata-role


Ballettoつい先日jquery.mobileがβ版にバージョンアップされましたね。あれ使うとホント、スマホ用ページが「スマホらしい動き」をするUIに簡単に変えることができるんですよね。

重たいのが難点ですけど・・・。ただそもそも使っていくうちに重たい以上に根本的な疑問点が浮かんでくるんです。

<div data-role=””> のdata-roleってHTML5で許可されてるの?

結論から言うとdata-roleはHTML5の拡張要素らしいですよ。

というより何よりHTML5では、data-○○として、○○の中には何を指定してもよいという素晴らしい仕様になっています。なので<div data-test1=”test”> でもいいし、<div data-info=”aaa”> でもいいんです。

情報のソースはこちら・・・HTML5の独自データ属性 http://www.html5.jp/tag/attributes/data.html

これってすごい便利になりますよね!今までJavascriptで<div>等のタグにCSSを後付けしたりonclickイベントをつけたりする時、ID(getElementById)やclass名で要素を指定したりしていましたが、HTML5からはこのルールで要素を指定することができます。

もちろんJavascript自体にdata-○○を指定する関数がないので、そこは自作になってしまいますが、そこはあれ、Jqueryという素晴らしいライブラリがあるじゃないですか!

HTML5は技術者寄りの仕様更新、なんて言われますけど、まあそのとおりなのかもしれませんね。実際data-○○なんてHTMLを見る側にとっては何の影響もない部分だし。

今までjquery.mobileのタグの正当性が不透明で敬遠気味だったんですが、調べてみるものです。タグが正当と分かればSEOにだって影響はないし、むしろフォーマットが決まってるから、もしかしたらSEOに有利になる、とも考えられるし。

ま、それでも実際ソースが見づらくなるんですよね。divでくくって中にdata-roleで区切って。なんかほとんどのレイアウトをdivでくくってそう。なのでどうなのかは使ってみて、3カ月ぐらいたたないとSEO効果ってわからないですけれど。

でも試してみる価値はあるなぁ・・・今度作ってみよう。