HTML5時代のPCサイトHTMLコーディングを真剣に考えてみた

HTML5がほぼIE以外のブラウザで動く時代になっているので、IEユーザが少ないサイトではそろそろ積極的に使っていくべきだと思ってます。YoutubeやTwitterやnanapiがHTML5に振り切ったというのは、ユーザがよく使うサイトこそHTML5化することでユーザビリティを高められるという事実だと思うし(話題性だけだったらGoogleは動かないだろうし)、B2Bのコーポレートサイト以外はもうHTML5オンリーでいいんじゃないかな、と思ってきました。
だけど、実際にお仕事となるとIEユーザは無視できないし、IEユーザ=リテラシ低め=だけど売り上げを上げるにはこの層はやっぱり取り込む必要あるよね、という話になるのでフルHTML5で書くのは2011年現在でも気が引けます。
ではどうするかというと、互換性のあるタグを使えばいい、というだけのことのように思えてきたのでまとめます。


**そもそもの話
そもそもHTML5はどこで使われているかというと、最も利用度が高いのがスマートフォンです。&br;iPhoneならSafari、AndroidでもSafariやその他webkitベースのブラウザが載ってるから、HTML5をフルに使えます。だけど僕はここに落とし穴があると思っていて、スマートフォンでは「スマートフォン対応サイト」が求められているのであってHTML5準拠かどうかは全くどうでもいいことです。&br;
実際はこれこそが最先端ブラウザだろうしITリテラシもそこそこ高いことを期待していいユーザだけだろうし、がんがん最先端技術は投入していくべきだと思っているんですが、ただ、スマートフォンのブラウザではPCサイトも同じように表示できるので、普通にHTML5対応するとなるとPCでも使えるHTML5だよね、という妥協点が見えてくるのが落とし穴です。
「どうせHTML5サイトを作るんだからPCでも同じように見えるのがいいはず」って思ったとしたら、その時点で感性が古いんだろう、と僕は思います。僕も含めて。
いままでHTMLコーディングは、IEもFirefoxもChromeも何もかも同じように見えること/使えることが良いこととされてきたし、実際CSSも2.1をIEで使える程度でしか使わない人がほとんどだと思っています。それは今までは正解だったけど、これからは多分、違ってくるんじゃないかな。
**スマートフォン対応を考える
スマートフォンではスマートフォンに合わせたUIを持つサイトが必要だと思っています。ボタンや、リストや、ヘッダフッタなどね。それって実はデザイン性が無くてもいいってことなんじゃないか、と気づきました。
なぜどうやって気づいたかというと、jQuery Mobileを使ってみたからです。
スマートフォンのサイトでは、もう、デザインなんていらない。共通化されたUIがあれば迷わず使えるし閲覧にストレスが無いんだから、それをあえて取り入れずにオリジナルで勝負なんてしようと思うなら、GoogleだのAppleだののUIエンジニアなりアーキテクトなりに真っ向勝負して勝てると踏んだ人だけがやればいいと思うんです。
*ここまでのまとめ
-スマートフォンサイトではjQuery Mobileを使ってシンプルに作ろう
**これからのPCサイトの作り方
上記でPCサイトのフルHTML5化は否定してみたんですが、だからといってPCサイトとスマフォサイトで二重の作業を発生させていたらそれこそアホです。だからこれからは、「スマフォサイトのHTMLに合わせてPCコーディングすべき」だと思いました。
具体的には、<section>や<article>などのpure HTML5タグを使わずに、あくまでdivによって解決すべきということです。
使わないタグはたとえばこちら。
-header
-footer
-article
-section
-hgroup
-nav
これらを「使わない」という判断をするだけで、HTML4やXHTMLと同じようにしかマークアップできなくなります。ということは、今までのコーディングがそのまま通用する世界になるわけです。どうせHTMLのセマンティックさなんてSEOにしか役立たないし、SEOも内部的な構造を良くすることより外から爆発的なアクセスを稼ぐ方が効果高いんだから、気にしなくてOKというわけです。
で、このままではXHTMLと同じになってしまうので、スマフォサイトの決まり事を持ち込みます。
まず、ボタンは<button>ではなく<a>だけでもなく、<a data-role=”button”>です。HTML5のdata属性を取り入れることで、タグというレイヤーではなく、意味によってコーディングできます。あれ、それって前述のセマンティックHTMLそのものじゃないか。ということで採用。
*ここまでのまとめ
-サイトではHTML5タグを使わない
-スマートフォンサイトではjQuery Mobileを使ってシンプルに作ろう
-PCサイトではHTML5の属性を使う
さて、この段階で、jQuery Mobileを読み込むと、data-role属性が付いた要素は自動的にデザインが当たります。jQuery Mobileって、jQueryのモバイル版ではなくてjQuery UIのモバイル版なので、デザインやインタラクションの装飾をしてくれるライブラリなのです。はいスマフォサイトができた。HTMLもできた。あとはPCサイトだけど、これはいつも通りにコーディングすればオッケーですね。
で、両者ともjavascriptが普通に動いてくれるので(っていうかJS使える前提で話をしてOK。JSが使えないユーザはリテラシが高いことを自慢するような馬鹿だから全力でdisっていいと思ってます)、じゃあ最後の課題は何かというと、同じHTMLなんだから、アクセスによってPCサイトとスマフォサイトを切り替えることができれば完了、ということ。
**やっと本題
そこで、やっとこのエントリを書くに至ったスクリプトを紹介します。&br;
「smartphone.switch.js」です。&br;
これは何かというと、アクセス元のブラウザによってスマフォのCSS/JSを読み込むか、PC用のCSS/JSを読み込むかを判別するJSです。
**なんで作ったか
いままでは、CSSの属性振り分けで(min-widthとか)640pxまでならスマフォCSSを読む、とかっていう機能は、CSSレベルで出来ていました。
>@media screen and (min-width: 751px) and (max-width: 999px) {}&br;
とかこんな感じです。&br;
でも、それってCSSしか読み込めないやん、と気づきました。完全にコーダーの発想です。JSを使うことは考えてない。前述の通り、スマフォサイトはjQuery Mobileを使います。でもPCサイトは使いません。ということはこの時点で切り替えが必要ということですよね。じゃあCSSだけ760px用のを読み込んでも意味がありませんし、JSを読み込むために同じような判定をするなら二度手間になります。&br;
ということで、そもそもをJSで切り替えればいいんちゃうか、と思ったのがきっかけです。
**使い方
> var browsers = [‘iPhone’,’iPod’,’Android’];
> browsers.push(‘Chrome’);
この例ではiPhone/iPod/Androidに加え、Chromeでのアクセス時を真としようとしています。要は変数browsersに入っているブラウザ名によってスマフォ対応しようというわけです。&br;
やってることは、上記browsersのときはjquery Mobileを読み込み、そうでないときは別のJSなりCSSを読み込むというだけのシンプルな作りです。読み込みっていうか、document.writeでタグを書き出している強引な作りになっています。でも現状では別にこれでいいと思ってます。あとでマジに使うときに書き換えようかなと。
*ということでまとめ
-サイトではHTML5タグを使わない
-スマートフォンサイトではjQuery Mobileを使ってシンプルに作ろう
-PCサイトではHTML5の属性を使う
-JSでスマフォとPCそれぞれに読み込むリソースを変えよう
***サンプルファイル
こちらにサンプルファイルを置いておきます。PC用にインポートしてるCSSは、960.cssというCSSフレームワークです。別にこれはお気に入りじゃないけど、参考資料として使ってるだけです。
サンプルファイル(zip)
サンプルページ
とはいっても、現時点で実体はこれくらいです。

(function(){
var isSmartPhone = false;
var browsers = ['iPhone','iPod','Android'];
//browsers.push('Chrome');
//browsers.push('Firefox');
for(var b in browsers){
if(navigator.userAgent.indexOf(browsers[b]) > 0){
isSmartPhone =true;
}
}
if (isSmartPhone) {
var jqmjs = 'http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js';
var jqmcss = 'http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css';
document.write('');
document.write('');
document.write(' ');
}else{
document.write(' ');
}
})();

**でもまだ完全じゃない
2011.05.16追記。

http://b.hatena.ne.jp/entry/ryow.net/blog_old/2011/05/04-221203.php

はてブのコメントでid:yamahigeさんからの一言。
それって「jQuery Mobileに合わせてPCコーディングすべき」ってことだよね。jQuery Mobileの仕様が変わって

やら使うようになったらどうすんの? > スマフォサイトのHTMLに合わせてPCコーディングすべき
お答えします。&br;
jQuery mobileのバージョンを指定しておけば問題ありません。ここでは「1.0a4.1」での作り方を想定している、ということです。また、headerやらsectionやらが導入されてもdata-*属性がなくなるとは思ってません。だとすると、移行期間があるはず。最初はdata属性ベースのコーディング、その次はdataでもhtml5タグでも、どちらでも使えるバージョンになるはず。で、メジャーバージョンアップでhtml5タグが推奨になり、その次くらいでdata属性は見た目に影響がなくなるものになる、と思っています。&br;
ただ、バージョンアップのスパンが予想できてないので、それが2年かかるのか2か月で実施されてしまうのかは謎でありリスクですね。
***まとめ
HTML5タグは使わないでjquery Mobile1.0a4.1で作るのが2011年前半のベターなコーディングではなかろうか。