HTML5 Conference 2013の資料まとめ

2013/12/2

Stocker_jp

CSS,HTML,HTML5,コーディング

HTML5 Conference 2013 は、昨年に引き続きとても有意義なセッションが沢山ありました。スタッフの皆様、講演者の皆様、大変ありがとうございました。

この記事では、各セッションの資料（スライド等）、動画、ツイート等をまとめています。
今年はかなり大量の資料があるため、この記事は7ページに分割しています。

セッションの動画は、ルームごとに1つの動画になっています（つまり5つのセッションが1つの動画になっています）が、観やすいようにそれぞれのセッションごとに頭出し再生されるように埋め込んでいます。

オープニングセッション（基調講演）
現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ
Responsive Web Design 〜Basic understanding〜
CSS Regionsを使った新しいCSSレイアウトを作る方法
モダンなCSS設計パターンを考える
今どきのGruntを使ったフロントエンド開発（HTML/CSS編）

ルーム2A

ようこそ、HTML5裏APIの世界へ
HTML5とIE11とWindows 8.1
Canvas/WebGLを活用したインタラクティブ表現〜CreateJS、Three.js、Away3D.js〜
HTML5 run anywhere
Web Audio API実践的プログラミング

ルーム5A

モバイル時代のフロントエンド開発レシピ
実践的なモバイルHTML5テクニック
満足させるハイブリッドアプリを作るための実践テクニック
地下鉄 x サクサク x これからのWebゲームアプリが備えるべき8つの機能
Webフロントエンドのレンダリングパフォーマンスと最適化Tips

ルーム5B

真面目なアニメーション
オフラインWebアプリケーションの「選択肢」
マルチデバイス時代のHTML5 & WAI-ARIA
ブラウザとMIDIの出会いが拓くWebとMusicの新しい世界
エンタープライズ x HTML5 ～旧来型から次世代型へ、進化するWeb開発～

ルーム5C

Markup Maniax – マークアップ部が語り合うHTML5仕様のいま・これから
モバイルフロンティア：フロントエンドエンジニアとデザイナーのためのモバイルユーザーエクスペリエンス
Spec EditorとContributorが語るWeb標準化と開発者への期待
(白石俊平と) カッコいいやつら番外編「スタートアップのススメ」
通信キャリアプロフェッショナルが語る HTML5 への期待

ルーム6A

WebSocket, WebRTC, Socket API, … 最新Webプロトコルの傾向と対策
次世代テレビを知る！ハイブリッドキャスト×HTML5
HTTP/2.0がもたらすWebサービスの進化
進化を続ける JavaScript 〜次世代言語のステキな機能と高速化の行方〜
Web をまともにしたいので Shadow DOM と Web Components をつくってます

スペシャルセッション（ライトニングトーク）

HTML&CSS3で電子書籍も紙の本も作れるという話
html5j eコマース部はじめます
とあるISPの異端者（ハードウェア）
HTML5 Conference 2013ネットワークのお話
Knockoutを用いた大規模JavaScript 開発
みんなで楽しく負荷試験
レーザレンジスキャナーとWebGL　街の形をクルマから取り込んでみた

過去のHTML5 Conference:HTML5カンファレンス2012の資料まとめ

オープニングセッション（基調講演）

村井純さん、及川卓也さん、白石俊平さん

資料:HTML5スライド

※再生開始数秒後から音が出ます。

現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ

株式会社サイバーエージェント　大谷剛さん、船ヶ山慶さん

Responsive Web Design 〜Basic understanding〜

魚津システム/デジタルハリウッド講師　山崎大助さん

資料:PDF形式

「PCではなくスマートフォン、タブレットをWeb閲覧のメインデバイスとして使用する時代がくる。例えば、自宅で何か調べものをするときに、PCを開くか？スマートフォン、タブレットで済ませることが多いのでは。」これはまさにそうであるなぁ。家でPC開くのは仕事だけ。#html5j_1a
— あき (@my_color_is_xxx)2013, 11月 30

マルチデバイス対応の手法としてUAで振り分けると新たなデバイスが出たときの対応が大変だしソースが複数になって管理が大変。そこでワンソースでCSSで対応させるのが今はおすすめ。#html5j_1a
— わたこ (@dreamjunkie666)2013, 11月 30

レスポンシブデザインにおいては、スマートフォンを基準にするのがおすすめ。スマートフォン→タブレット→PCの順番で決める。スマートフォンのほうが画面が小さいため表示される情報量が少ない。そのため、そのサイトにおける情報の優先順位を考えながらサイトを作れる。#html5j_1a
— あき (@my_color_is_xxx)2013, 11月 30

CSS Regionsを使った新しいCSSレイアウトを作る方法

アドビシステムズ株式会社　轟啓介さん

資料:SlideShare　Adobe Edge Reflow CC（プレビュー版）

CSS Regions を使うと、雑誌の段組のようなものや、ハート型の中にテキストを流し込んだりできます。

CSS Regions の話。まだまだ決まり切ってないので変わる可能性は高い。実際この1週間で変わった#html5j_1a
— SHOGO (@shogogg)2013, 11月 30

CSS RegionsのサポートはSafari6.1とiOS7 Safariで標準サポートでChromeはflag有効化必要なのね#html5j_1a
— komacchi (@komacchi)2013, 11月 30

コンテンツとレイアウトを分離するというのが、CSS Reagionsの基本的な考え方。#html5j #html5j_1a
— まわたりなおと (@mawatarin)2013, 11月 30

サンプルたくさん#html5j_1a / “Regions – a collection by Adobe Web Platform – CodePen”http://t.co/Xckkjgxgoj
— ぽよし (@poyosi)2013, 11月 30

モダンなCSS設計パターンを考える

株式会社サイバーエージェント　谷拓樹さん

資料:SlideShare　SMACSS – Scalable and Modular Architecture for CSS (日本語)

良いCSSの設計とは– 予測しやすい– 再利用しやすい– 保守しやすい– 拡張しやすい#html5j #html5j_1a
— まわたりなおと (@mawatarin)2013, 11月 30

米yahoo!デベロッパー著のモジュールCSSに関する電子書籍#html5j_1a ＜SMACSS – Scalable and Modular Architecture for CSS (日本語)http://t.co/VyFHASW3gX
— FLAT サトウハルミ (@uzu)2013, 11月 30