HTML5カンファレンス2012の講演資料のまとめです。
HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。
HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん）
HTML5 や CSS3 の新しいタグやプロパティについての解説。
でもその前に、W3C と WHATWG についての話。
一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。
W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。
セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。
HTML5仕様をめぐるW3CとWHATWGについて、Ian Hickson氏がメーリングリストに書いたこと － Publickey
HTML5 の勧告候補は来年あたりになりそう（？）
「勧告を早めたいW3C vs 長くかかっても互換性を高めたいメンバー」という話もありましたが、私は W3C が慎重になっているのかと思っていたので意外でした。
<dialog>
dialogタグは会話文の要素ではありません。アプリケーションのダイアログです。
ポップアップ、オーバーレイ、モーダルダイアログまでカバーしているので、JavaScript で色々やる必要なくなるそうです。
実際にブラウザで動いているところを早く見てみたいですね。
Responsive Images
解像度、ピクセルごとに画像を出し分ける仕組みだそうです。
<img sreset> WHATWG HTML の案
<picture> Community Group の案
今のところ実装はないそうです。
<input inputmode>
入力モード（スマートフォンなどの仮想キーボードの種類）を指定します。
マークアップ例:
携帯電話向けのコーディングをされていた方なら、似たような仕組みがあったことを覚えていらっしゃる方も多いかと思います。
携帯電話向けのものはキャリアごとに独自でしたが、標準化されるのは良いですね。
以下、CSS について。
Image Values
グラデーションなどを定義したモジュールで、4月勧告候補になったそうです。
そこで、グラデーションの角度変わる、つまり 0deg が上向きか右向きかが変わるとか…
ちょっとややこしいことになりそうですね。
object-fit
画像を縦横比を保ったまま伸ばす。レスポンシブなサイトで使えそうですね。
セッションで紹介されていたわけではありませんが、Opera のサイトに使用例がありました。
CSS3 の object-fit と object-position プロパティ – Dev.Opera
CSS4
任意の画像のクロスフェード、親セレクタなど欲しかった機能が。
例えば、a を子に持つ li を選択するのであれば、li の前に ! をつけて
ul > !li > a {}
のように書くとか。
:maches()
「このうちどれかを選択」するセレクタ。
:matches(article, section) {}
変数も使えるそうになるそうですが、$foo のように前に $ をつけるのではなく、
:root{
var-myBlue: #09c;
}
のように var-変数名 という形式になるのだとか。Twitter で皆さんの反応を見ていると不評なようですね。
$foo は他の変数ライクな機能を見据えて利用しないそうです。
Sassの@extend的なものを提供する機能もアイデアとして提案済みだとか。
他にもいろいろな話がありましたがこのあたりで…
※矢倉さんのセッションの資料がアップされていないか探しているのですが、今のところ見つけられておりません。
ご存知のかたは @Stocker_jp まで教えて頂けると幸いです。
HTML5時代のWebデザイン（こもりまさあきさん）
User Interface Design Pattern With CSS3
セッションで紹介されていた caniuse.com というサイトや mobilehtml5.org は、入力したタグやプロパティがどのブラウザのどのバージョンからサポートされているのか知ることができて便利ですね。
アニメーション可能なプロパティ一覧の記事 は随時アップデートされていて便利だそうです。
HTML Web Platform（dynamisさん）
dynamisさんは Mozilla Japan の方です。
私は WHATWG 版の HTML のことをなんと呼べばいいのかわからなくて困っていたのですが、19ページ目を見る限り、単に「HTML」と呼べば良いのでしょうか。
軽快なウェブアプリケーション開発教室（太田昌吾さん）
プレゼン資料はこちら。HTML5 + CSS3 でできているようですが、動きがとても派手で動作も軽快ですね。
WebGL and Three.js（@yomotsu さん）
WebGL はプラグインなしで、GPU 支援を受けてブラウザ上で 3DCG を表示することのできる標準仕様ですね。
余談ですが、Three.js のデモが Chrome では動くのに Mac の Safari では動かないーと思ってたら、「Safari環境設定＞詳細＞メニューバーに”開発”メニューを表示」をオンにして、「開発＞WebGLを有効にする」にチェックを入れるとちゃんと動きました。
HTML5マークアップ珍プレー集（Futomi Hatanoさん）
WebRTCとか勉強会（あんどうやすしさん）
WebRTCという技術を使うと、プラグイン無しでビデオチャットのようなことができるそうです。
資料はこちらです。
HTML5とIE10とWindows 8（@ykasugai さん）
実践Sass（Azusa Tomitaさん）
基調講演: What’s new in Chrome Apps / Extensions（及川卓也さん）
プレゼン資料はこちら（Google Docs）。たくさんの方が同時にアクセスすると見れなくなる場合があるようです。
以下LTです。
ピンチとチャンス（Hajime Ogushiさん）
HTML5はプログラマーが主役という感じになっていて、しかもやらなければいけない範囲がとても広いためノンプログラマーには大変そうですが、やるしかないですよねー
Porky（ぷりっぷりのおしりさん）
“Without coding test, test automation for JavaScript.” ということで、JavaScript のテストを書かずにテストの自動化を実現するテスティングツールだそうです。GitHub で公開されています。
日本語の解説はこちら。
テストを書かないテスティングツール「Porky」をリリースしました
ぷりっぷりのおしりさんは、HTML5のメーリングリスト であまりにも名前にインパクトがありすぎて気になっていたので、お目にかかれてよかったです。
そのことを Twitter でお伝えしたところ、
@stocker_jp 名前負けしていますが、その名にふさわしい人物になれるように精進します
— ぷりっぷりのおしりさん (@puriketu99) 9月 9, 2012
とのことです。これからも、ぷりっぷりのおしりさんから目が離せそうにありません。
あなたの知らないECMAScript（@kyo_ago さん）
プレゼン資料はこちら。HTML5 でできています。
ラベルとURLのくだりは思わず吹きましたw
セッションで紹介されていたわけではありませんが、JavaScript のラベルについて知りたい方はここが参考になるかもしれません。
break文とcontinue文でのラベル指定 – 繰り返し処理 – JavaScript入門
ttf.js（ynakajimaさん）
JavaScript で TrueType Font を解析して表示することができるそうです…！
GitHub はこちら。
D3.js （@muddydixon さん）
D3.js は、JavaScript で複雑なグラフを描くためのライブラリのようです。グラフは SVG で描画されているようで、Safari で拡大しても美しいです。これは使えそうですね。
以前知った 色合わせゲーム も、D3.js を使っていたようです。
HTML5クイズ
最後は HTML5 クイズがあっていたのですが、クイズの画面自体も HTML5 + CSS3 + WebSocket（？）を使っていたようで、回答者がスマートフォンなどでページにアクセスし、ボタンを押すとリアルタイムに集計されていてかなり興味深かったです。
追記
@hamashun さんがクイズの解説記事を書かれていました。問題もここで見れます。
hamashun.me : HTML5 Conference 2012 のクイズ大会に出た問題について
HTML5 Conference 2012 ニュース・レポート
公式のまとめ記事です。
HTML5 Conference 2012 ニュース・レポート
今からでも講演の動画を観たいと思った方へ
ニコニコのプレミアム会員であれば、ニコニコ生放送のタイムシフト視聴ができるようです（おそらく10/8まで）。
『HTML5 Conference 2012』午前の部-HTML5関連の最新トレンドを学べるWeb技術者の祭典- – ニコニコ生放送
さっそくHTML5を書いてみようと思った方へ
HTML5 を1から書く場合、DOCTYPE 宣言などが短くなったのはいいのですが、viewport の指定とか Google にホストされている jQuery を読み込んだりとか色々書くことが多くて、さっと書き始めようとしても意外と面倒ですよね。
かといって、ちょっと試しに書いてみるのに HTML5 Boilerplate は重いしなーと思っていたら、社会人のためのWebデザインスクール 卒業生の mizzz さんが HTML5テンプレートジェネレーター を作ってくれました。
必要なものはあって、余計なものは入ってないので個人的にすごく使いやすいです。
LocalStorage 対応のブラウザなら設定を保存できます。
HTML5カンファレンスで紹介されていたわけではないのですが、個人的にとても便利だと思っているので紹介させていただきました。
あと、いくつかのセッションの資料で、URLが分からないためここに掲載されていないものがあります。
ご存知のかたは、@Stocker_jp まで教えて頂けると幸いです。
