WCAN 2009 Autumn レポート| SESSION-2 : 60分できる！実践 HTML5 & CSS3ウェブサイト

菊池崇さん

HTML5のウェブサイトをいかに、実装できるのか、簡単なステップにそって、jsの実装、reset.cssの作成方法を教えます。また、CSS3を効果的に実装しワークフローを効率アップさせる方法について説明をします。

所感

html5の記述は美しく理にかなっている。と思える。
webサイト高速化（最適化）を突き詰めていくとおもしろそうだ。

以下、SESSION-2のレポートなり。

日本とhtml5の話

html5が盛んに討論されているのは日本だけで、なんか〜も〜、バズワード化してっぜ！
10月からくるぜ！ってよく聞いたけど、まだまだ作っている最中なので、海外ではそれほど盛んではない。
そもそもw3cがフィードバックほしさに仕組んだ。あ、そーだったのか、やべぇ、知らなかった。

そもそもhtml5誕生した理由: googleのHixie (Ian Hickson)が頑張ってる。

えいえいおー。

そもそもhtml5誕生した理由: XHTML 2.0は2009年に解散

大きくなりすぎた。まったく互換性がなかった。
新しいwebの夢は、XHTML+SVG+SMIL+XFORMとか、やりすぎちゃったぜ。

あ、黒歴史。

そもそもhtml5誕生した理由: ブラウザのパーサ問題。

htmlパーサーとxmlパーサーがあるのは問題ないが、
IE以外のモダンブラウザはhtmlパーサー、xmlパーサー共に処理可能。
しかーし、IEは（IE8ですら）htmlパーサーでしか処理できない。（ある意味、漢、一筋、一途、むしろKY）

だ・か・ら！

<!-- 強制的にhtmlパーサーで処理 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

あー、だから上記の必要なんだ。
俺の中では、おまじないだったもんで、、、スルーしてましたよ。気づけてよかった。
まぁ、焼酎甲類ビッグマンのつくり方知らなくても、まずさは理解できるしなぁ。だいじょうぶしょ。

そもそもhtml5誕生した理由: ブラウザのエラーの扱い問題

ブラウザはエラーをハンドリングすると負担がかかるんです。
たとえちょっとしたエラーでもブラウザはギャース！となるのです。

Markupルールが厳しすぎる！

早い話、ちょっとしたMarkupのミスは許す！ということ。
関係ないけど、ブラウザとサウザーて似てるね。

ちょっとしたミスの例

<img src=hoge.png alt="引かぬ！" />
<img src='hoge.png' alt='媚びぬ！' />
<img src="hoge.png" alt="省みぬ！" >

ダブルクォーテーションがなかったり、シングルクォーテーションだったり、閉じカッコの前にスラッシュがなかったり。でも！もう大丈夫。心の広いhtml5は見逃してくれます。
ちなみに、html5ではimgのaltは必須ではないです。（理由: 単なる模様等の画像にはaltは書けない）

明らかなミスの例

<li><a>お師様・・・</li></a>

タグが逆すぎる。
html5でも、さすがにこれはエラーになります。

html5の基本

DOMを基準にする。

DOMはIE5〜最新IEやモンダンブラウザ全てがサポートしている。
そぅ、html5はdomを重要視している。

html5の追加機能

とりあえず概要のみをチェック。

web workers（またはWeb Worker Threads）

Javascriptでマルチスレッドプログラミングができるようになる。きちんと動くようなら、ユーザサイドの処理がガリガリいけそうね。

web socket

Javascriptから生TCP socketのようなもの使えるようにできるもの？

web storage

クッキー以外でブラウザ側に蓄積する仕組み。UXの向上に役立つとか。非常に大量のデータを蓄積できるらしい。

geolocation API

緯度経度のあれっしょ？

web database

ん、web storageと一緒に考えられていたらしいが、切り離されたんか。W3Cの中では答え出るかな、そろそろ。[

html5の記述例: DOCTYPE

xhtml 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

はい、毎回コピペです。

html5

<!DOCTYPE html>

あら、スッキリ！でも、本当はすら取ってしまおうとしたらしいが、、、
がないとIEが各互換モードというへんちくりんなことになるらしい。本当、IEには楽しませてもらうぜ。

html5の記述例: section要素の記述例と説明

html5はDOMを重要視しているので、必ず見出しをつける（sectioning）こと！
初めてしったんだけど、h1は1回でなくてもいいんだね。全部h1でMarkupしたらSPAMかぃ？

article要素

<article>
    <header>
        <h1>焼酎甲類ビッグマン</h1>
    </header>
    <p>リッター400円の定番のうまさ！</p>
    <footer>お酒は二十歳になってから。ビッグマンはアル中になってから。</footer>
</article>

feedのようにひと括りで意味がわかるものは、articleで囲える。
ポイントとして、articleの中でもheaderやfooterを記述できる。俺の解釈でもちっちゃなwebページなイメージ。

small要素

<footer>
    <small>
        &copy; hogehogehoge.
    </small>
</footer>

copyrightにどうぞ。

html5 検証ツール

validator.nu

Validator.nu (X)HTML5 Validator

mozillaと同じレンダリングエンジン搭載

ブラウザの html5 実装状況

対応: safari、chrom、ff、opera
未対応: IE（対応方法は下記参照）

IEにhtml5の新要素を適応する方法

Remy Sharp氏が公開したhtml5.jsを読み込む

<!--[if let IE 8]-->
<script src="html5.js" type="text/javascript"></script>
<!--[endif]-->

CSS3

今から実践のときらしい。CSS3はプログラム的に楽できるから楽しいよね。
CSS3と併せて、Javascriptの勉強しまっしょい。

templete layout moduleの実勢デモ見た。

CSS3より前はレイアウトプロパティがなかったから、floatとかでやってるもん。

webサイトの高速化（最適化）

インラインイメージをやろう！
OOCSSでCSSを減らそう！
CSS Spritいいんでない。

ちなみに菊池さんのwebサイトでは0.4ms以内に表示されるように実験と検証を繰り返しMarkupしてある。

速度は品質

高速化されていない場合、直帰ユーザ率が増えてくる。そうすると、損失が発生する。これは危険だ。
菊池さんは日々、実験して、調査してを繰り返して独自で高速化の理論をつくりあげ、立証している。

そうか、jscsscompのようなもの使って、httpリクエストを1回で済ませれれば、すぐに高速化につながりそうね。この辺りのライブラリ等は調べておこう！

高速化におけるFlashについて

Flashに関してはキャッシュさせるしかない。もちろんhttpリクエストは1回で済ますように。
ECサイト等、直接損失に繋がるwebサイトではFlashは厳しいかもね。（そもそも設置しないか

参考リンク

菊池さんとえいば、俺が最近よんだ記事はこれだゎ。
スマートフォンを持ち始めてからwebページ最適化に興味しんしん。

菊池 崇さん

所感