2012/9/8に行われた「HTML5 Conference 2012」のレビュー
私が参加したセッションの内容に絞ってまとめておきます
HTML5の文書構造
HTML5は厳密な文書構造を持っている。
HTML4でのdivの乱用などは許されないので、正しいマークアップをすることが重要。
HTML5の文書構造を視覚的に解析してくれるサイト: HTML 5 Outliner
Chromeアドオン: HTML5 Outliner
パララックスなWebサイト
スクロールでぐりぐり動く、いま流行りのWebサイトデザイン
http://www.nike.com/jumpman23/aj2012/
PCサイトでの実装は比較的簡単そうだが、スマホなどマルチデバイスでも問題なく動作することを考えるとかなり大変そう。
スピーカーの白石氏が制作ディレクションを行った、シーエーモバイルのサイトがレスポンシブでパララックスなサイトとして紹介されていました。
jQueryMobileの是非
結論としては「“クリエイティブなサイト以外”ならバンバン使っていい」
フレームワークを導入するということは”枠にはめる”ことを意味するので、デザイン性に拘るサイトや、コードレベルでのカスタマイズを前提とした”クリエイティブなサイト”では、むしろ手かせ足かせになることの方が多い。
中でもjQueryMobileがやっかいなのは、マークアップ構造が勝手に変化していくので、コンソール上でしか動きをつかめないこと。
フレームワークを使っているがゆえにできないことが増えるなら導入しない方がいい。
見極めが重要。
レスポンシブWebデザイン
『レスポンシブ・ウェブデザイン標準ガイド』の著者、こもりまさゆき氏とお話させていただいた結果、結局レスポンシブなどの”手法”はコンテンツありきで考えるべきであり、画像や動画の多いサイトには不向きだろうという見解。
WebGLとThree.js
個人的に注目している最新技術。
JavaScriptによる3Dレンダリングで、JavaScriptから直接ハード（GPU）に働きかけるすごい技術。
僕がはじめてWebGLを知ったサンプル↓
Aquarium: http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
その他たくさんのサンプルが公開されているので、興味がある人はググってみてください。
WebGLはデバイスに高い演算能力を求めるため、標準化されるのはもう少し先だと思われるが、確実にキテる技術だと思っている。
iOSとAndroidではまだ対応検討中段階。
WebGLを素でプログラミングしようと思うと非常に敷居が高い。
そこで登場したのが、WebGLフレームワーク「Three.js」three.hs/github
JavaScriptが分かれば直感的にプログラミングできるので、基本的にはこのThree.jsを使うことになる。
参考: HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門
LESS & Sass
LESSとSassは、いずれもCSS拡張メタ言語と呼ばれるもの。
どうしてもスパゲッティ状になりやすいCSSを汎用的にして再利用性を高めることが可能。
CSSで変数が使えたり、演算ができたり、入れ子にすることもできたりする。
オブジェクト指向CSS（OOCSS）と組み合わせて高度に設計されたCSSでは、可読性とメンテナンス性の向上が見込める。
Bootstrapなど、多くのCSSフレームワークで採用されている。
今後のWebサイト制作では、プログラムだけでなく、CSSなどでも設計が最重要となるので是非押さえておきたいところ。
本ブログでも何度か取り上げている。
CSSの再利用性を高める LESS dynamic stylesheet language/hijiriworld
OOCSS（オブジェクト指向CSS）のススメ
備考
HTML5 Conference 2012 当日のスライドはこちらのページに順次アップされるそうです。
http://events.html5j.org/conference/2012/09/program.html