今すぐできる! HTML5への移行レベルの7ステップ

2010/12/01

HTML4またはXHTML1からHTML5へ移行するとき、いきなり実行しちゃうと古いブラウザ（IE）ユーザを置いてけぼりにしてしまうので、順を追って移行するのが現実的です。

でも、最近はHTML5対応のサイトが増えてきたので、いい傾向だと思ってます。

誰もが知ってるサイトやサービスがHTML5になっていけば、自然と今後は増えていきますよね。

ステップ1：CSS3をアクセントに使う

border-radius、text-shadow、box-shadow、gradientなど、大きなレイアウト崩れの原因にならない部分を移行します。

実際は、サイト内のボタンや小さいブロックをCSS3化していきます。
HTMLコーディング影響度はなんとゼロ。
CSSコーディングも現在の設定に追記するだけなので簡単。

実施しているサイト

Twitter,youtube

step1

ステップ2：HTML DOCTYPEをHTML5対応にする

実はDOCTYPEスイッチをHTML5対応にしてもブラウザの解釈は標準準拠モードなので、CSSできちんとレイアウトされていれば何ら問題ありません。

具体的には、以下のようなXHTMLのDOCTYPE宣言がシンプルになります。

//HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
//XHTML1.0 tranditional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↓こうなる

<!DOCTYPE html>

実施しているサイト

google検索、youtube、Twitte、apple、DELL

step2

ステップ３：CSS3をエフェクトに使う

transitions,transformプロパティです。
safariとchromeしかまだ（2010/12月現在）対応してません。ということは、iPhone専用サイトでは使っていいということですね。
ロールオーバー、フェードインなどが（いま想定されている）主な使いどころ。
アニメーションできるだけでFlashいらなくなる論がすぐ出てきますが、じゃあCSSだけで本格Flashアニメーション作ってみろよと言いたくなりますね。

アニメーションはJSでできるし、背景色変化やホバーなんかもアニメGIFとの組み合わせで現状オシャレにできるので、使いこなしてもそんなにメリットないんじゃないかなぁとも思います。

実施しているサイト

ごめん、わからない。TIPS以外であれば教えてほしいです。

ステップ４：header/footer/nav/sectionなどの新タグを使う

ここからは、HTMLタグそのものが違います。使うときは、対応していないブラウザを捨てる覚悟を持つか、互換してくれるjavascript(html5.jsなど)を使いましょう。

実施しているサイト

livedoor labs EDGE、
面白法人カヤックのデザイナーブログ　制作会社ワントゥテンの実績紹介サイト

step4

ステップ５：audio/videoタグを使う

Youtube、ニコ動で実験的にスタートしていますね。

Youtubeはこちらから使用するをONにすればHTML5バージョンになります。
右クリックすると「HTML5について」というコンテキストメニューが出ますね。

step5

ステップ６：canvasタグを使う

個人の実験以外でちゃんと使ってるところってあるんだっけ？　でも、canvasを使っただけでは何もできなくって、これをカンバスとしてJSでいろいろ描画してはじめてwebアプリになるということですね。

実施しているサイト

JSPaint

ステップ７：HTML5のAPIを使いまくる

ストレージ、ソケット通信、ブラウザ外からのドラッグドロップ、ローカルファイル操作など。

ドラッグはGmailで添付ファイルを選ぶのに使われていますね。

結論。

現状はまだステップ2の段階。
今すぐ導入できるのもステップ２まで（XHTMLコーディングにxml宣言つけちゃってるサイトはちょっと改修に時間かかるかもね）。ただしiPhoneサイト/アプリやadobeAIRで作るなら、いきなりフルHTML5も可能。

ほかにも

このサイトはこのステップにあるよ！というご指摘いただけると助かります。

Flasherとしての感想

Flashやる人としては（最近やってないけど）、HTML5 vs Flash みたいな話に持っていこうとする馬鹿にかく乱されるのは遣る瀬ないです。ただ、ちょっと考えてほしいです。近日公開を予定しているFlash Player10.2では、YoutubeなんてCPU効率が80%改善みたいな話も出てるし、そもそもFlash Playerのアップデートってブラウザのバージョンアップより頻繁です。
サービスのトレンドがIEのバージョン縛りだとしても、Flashはそれに縛られない。そもそもwebでビデオを見れるようになったFlash Player6のとき、ブラウザはTableレイアウト全盛でした。それに、この10年でIEはいくつバージョンが上がったか？それに比べてFlashは？と。そういう話です。

結局はFlash On HTML5で収束すると思うんです。そう思いたいというのもあるけど。スマートフォンがもっとメジャーブラウザになれば、PCとスマフォで作り分けるのが最適なはず。（縦長、横長の画面サイズ変更もできるし）

短絡的に考えればFlash On HTML5を体現しているのがAdobe AIRなんですが、意外と流行ってない。あ、silverlightって僕は見たこともないので割愛してますよ。
だけど、2001年に読んだなんかの本で、「将来ブラウザはデスクトップアプリとシームレスに統合して、デスクトップからのドラッグドロップを受けて起動したりリッチな体験をしたりできる」みたいな話が10年経ってようやく実現しようとしてることに微妙な気持ちになりながらもうれしく思ってます。まあ、作るの僕らなんだけど。

個人的には、そういうシームレスな未来が来たら、やっとPCは「デスクトップ」っていう机の上を模した表現から抜け出して、やっとPCらしいインタラクションや概念を手にするんじゃないかなぁ、と思っています。