長野県で講演した際に使用した資料です。

1. HTML5時代の
フロントエンド開発入門
2014/8/29
白石俊平
株式会社オープンウェブ・テクノロジー

2. 白石俊平（@Shumpei）
Community
Media
Company
Expert
• Web技術者コミュニティ「html5j」ファウ
ンダー
• 一般社団法人日本オープン・ウェブ・ア
ソシエーション（JOWA）代表理事
• HTML5 Experts.jp編集長
• 著書・監訳・寄稿多数
• 株式会社オープンウェブ・テクノロジー
代表取締役
• Google Developer Expert (HTML5)
• Microsoft Most Valuable Professional
• W3C Invited Expert

3. html5j
ビジョン: 「世界一Web技術者コミュニティ
が活発な国、日本」
メーリングリスト登録者数
6,000

4. HTML5 Conference開催規模
募集人数
2,000
セッション数
32
協賛企業数
54

5. 今年は2014/6/14(土)にやります！

6. html5j部活動
アクセシビ
リティ部
テスト部
Webプラッ
トフォーム
部
エンタメ技
術部
デザイン部
パフォーマ
ンス部

7. HTML5 Japan Cup 2014実績
最優秀賞賞金100万円
賞金総額350万円
応募作品総数289作品
スポンサー61団体
主催・関連イベント45件（<htmlday>含）
イベント参加人数1,449名（<htmlday>含）

8. 閑話休題

9. 最先端・・・？

10. 最先端は、ふたつある。
今ここトレンド近未来

11. トレンド

12. （引き続き）モバイルWeb
GRAVITATE

13. （引き続き）モバイルWeb

14. メディア要素
幅100%の画像を背景にするサイトが急増

15. メディア要素
動画を背景にするサイトも

16. 新たなUXの模索
スクロールによるナビゲーション

17. 新たなUXの模索
メガナビゲーションメニュー

18. フラットデザイン
HTML5 Experts.jp

19. フラットデザイン
HTML5時代のモバイルWEBアプリ
ケーションデザインより

20. フラットデザイン
マテリアルデザインにも注目

21. トレンドまとめ
• モバイルWeb
– レスポンシブWebデザイン、CSSフレームワーク、
幅100%のページ、...
• メディア要素
– img, video, audio...
• 新たなUXの模索
– JavaScript, CSS3...
• フラットデザイン
– グリッドレイアウト、Web Fonts、マテリアルデ
ザイン...
• ...

22. Webプラットフォームの力は、
こんなものか？

23. No!!
今ここトレンド近未来

24. Webプラットフォームの最新動向
HTML5
CSS3
JavaScript
API

25. HTML5の最新動向
HTML5仕様が、今年末に勧告される予定
2012/12/18 勧告候補に
2014/06/26 LCWDに差し戻し
2014/07/31 再び勧告候補に
2014/Q4 勧告予定

26. HTML5の最新動向
あなたが知らない（かも知れない）HTML5
勧告候補の新要素
<main>
文書の「主要部分」を表す。一文
書中に一度しか使えない
<data>
マシンリーダブルな値を表す。
value属性が必須。
<wbr> 改行可能な位置を表す要素
<template> テンプレート

27. HTML5の最新動向
あなたが知らない（かも知れない）HTML5
勧告候補からなくなった要素
<hgroup> <menuitem>
<details> <dialog>
<summary>
<menu>

28. HTML5の最新動向
あなたが知らない（かも知れない）、HTML5
勧告候補からなくなったinput要素のタイプ
datetime
datetime-local
week
month
timeもやばい。colorは無事だ！

29. HTML5の最新動向
レスポンシブイメージがそろそろ使えそう
<picture>
<source>と一緒に使い、メ
ディアクエリを使用して画像切
り替え
<source media="..."
srcset="...">
マシンリーダブルな値を表す。
value属性が必須。
<img src="..."
srcset="..." sizes="...">
改行可能な位置を表す要素
PictureFillというPolyfillもある。

30. HTML5の最新動向
<picture>の例（デモ）
<picture>
<source srcset="extralarge.jpg"
media="(min-width: 1000px)">
<source srcset="large.jpg"
media="(min-width: 800px)">
<img srcset="medium.jpg" alt="">
</picture>

31. CSS3の最新動向
• ここらを見よう
– 仕様の状況・・・W3C CSS Working Groupによ
るまとめページ
– 実装の状況・・・Can I UseのCSSカテゴリ

32. CSS3の最新動向
• 実装状況を俯瞰してみて興味深かったこと
– CSS Variables, Firefoxが実装してた
– <style scoped>はFirefoxにしか実装が残ってなかった
– vw, vh, vmin, vmaxはIE含む色んなブラウザが実装してた
– CSS Filter Effectsは、IE以外で割と実装されてた
– remはIE含む色んなブラウザが実装してた
– @supportsはFF, Chrome, Operaが実装してた
– calc()はほぼ全ブラウザが実装してた
– FlexBoxはほぼ全ブラウザが実装してた
– CSS3 Animation, Transitionはほぼ全ブラウザが実装してた
– CSS3 Border Imagesはほぼ全ブラウザが実装してた
– マルチカラムレイアウトはほぼ全ブラウザが実装してた

33. JavaScriptの最新動向
• ECMAScript 6/7の実装状況を知るには、こ
の表がベスト！

34. JavaScriptの最新動向
• 実装状況を俯瞰してみて興味深かったこ
と
ほぼ全ブラウザで使える
const, let (Safari除), Map (Safari除), Set (Safari除),
機能
Firefox, Chrome (Operaも)
で使える機能
=>, for..ofループ, yield, Promise, シンボル
Firefoxでのみ使える機能関数のデフォルト引数、rest parameters、配列や
文字列を「...値」で展開, computedプロパティ,
shorthandプロパティ, shorthandメソッド、テン
プレート文字列, destructuring, Array
comprehensions, Generator comprehensions
Chromeでのみ使える機能Object.observe
どこも未実装class, module

35. WebGL
Web Audio
API
Application
Cache
Web Storage
Indexed
Database API
WebRTC
Device APIs
Web
Components
Web
Components
Media Source
Extensions
Web Cryptography
API
Web Workers
APIの最新動向

36. 表現力がネイティブ並に
Emscriptenとasm.jsで3Dアクションゲームをブラウザ上に移植

37. ハイブリッドアプリがじわじわと
mobile-chrome-apps
ChromeアプリをAndroid / iOS上で動作させるためのツール群

38. オフラインWebアプリもじわじわと
"オフライン時の変更は、
オンラインに戻った時に
同期されます"
Google Slides
以前、こんなスライドも

39. リアルタイム・マルチメディアの活用
ストリーミング
WebRTC

40. UIのコンポーネント開発／MVC化
Polymerのデモ

41. オープンデータの促進（Web of Data）

42. Web of Things
Philips hue

43. 今後恐らく起きること
• 表現力がネイティブ並に
• ハイブリッドアプリがじわじわと
• オフラインWebアプリもじわじわと
• リアルタイム・マルチメディアの活用
• UIのコンポーネント開発／MVC化
• オープンデータの促進（Web of Data）
• Web of Things

44. このギャップは誰が埋める？
今ここ最新トレンド近未来

46. ご清聴ありがとうございました。