html5時代のフロントエンド開発入門
DESCRIPTION
長野県で講演した際に使用した資料です。TRANSCRIPT
HTML5 時代のフロントエンド開発入門
2014/8/29白石 俊平
株式会社オープンウェブ・テクノロジー
白石 俊平（ @Shumpei ）
Community
Media
Company
Expert
• Web 技術者コミュニティ「 html5j 」ファウンダー
• 一般社団法人 日本オープン・ウェブ・アソシエーション（ JOWA ）代表理事
• HTML5 Experts.jp 編集長• 著書・監訳・寄稿多数
• 株式会社オープンウェブ・テクノロジー代表取締役
• Google Developer Expert (HTML5)• Microsoft Most Valuable
Professional• W3C Invited Expert
html5j
ビジョン : 「世界一 Web 技術者コミュニティが活発な国、日本」
6,000
メーリングリスト登録者数
HTML5 Conference開催規模
2,000
募集人数
32セッション数
54協賛企業数
今年は 2014/6/14( 土 ) にやります！
html5j部活動
テスト部
アクセシビリティ部
Webプラットフォーム部
エンタメ技術部
パフォーマンス部
デザイン部
HTML5 Japan Cup 2014 実績最優秀賞賞金 100 万円賞金総額 350 万円応募作品総数 289 作品スポンサー 61 団体主催・関連イベント 45 件（ <htmlday>
含）イベント参加人数 1,449 名（ <htmlday>
含）
閑話休題
最先端・・・？
最先端は、ふたつある。
トレンド 近未来今ここ
トレンド
（引き続き）モバイル Web
メディア要素
幅100%の画像を背景にするサイトが急増
フラットデザインHTML5時代のモバイルWEBアプリケーションデザインより
トレンドまとめ• モバイル Web
– レスポンシブ Web デザイン、 CSS フレームワーク、幅100% のページ、 ...
• メディア要素– img, video, audio...
• 新たな UX の模索– JavaScript, CSS3...
• フラットデザイン– グリッドレイアウト、 Web Fonts 、マテリアルデザイ
ン ...
• ...
Web プラットフォームの力は、こんなものか？
No!!
トレンド 近未来今ここ
Web プラットフォームの最新動向
HTML5
CSS3
JavaScript
API
HTML5 の最新動向HTML5 仕様が、今年末に勧告される予定
2012/12/18 勧告候補に
2014/06/26 LCWD に差し戻し
2014/07/31 再び勧告候補に
2014/Q4 勧告予定
HTML5 の最新動向あなたが知らない（かも知れない） HTML5 勧告候補の新要素
<main>文書の「主要部分」を表す。一文書中に一度しか使えない
<data>マシンリーダブルな値を表す。 value 属性が必須。
<wbr> 改行可能な位置を表す要素
<template> テンプレート
HTML5 の最新動向あなたが知らない（かも知れない） HTML5 勧告候補からなくなった要素
<hgroup> <menuitem>
<details> <dialog>
<summary>
<menu>
HTML5 の最新動向あなたが知らない（かも知れない）、 HTML5 勧告候補からなくなった input 要素のタイプ
datetime
datetime-local
week
month
time もやばい。 color は無事だ！
HTML5 の最新動向レスポンシブイメージがそろそろ使えそう
<picture><source> と一緒に使い、メディアクエリを使用して画像切り替え
<source media="..." srcset="...">
マシンリーダブルな値を表す。value 属性が必須。
<img src="..." srcset="..." sizes="...">
改行可能な位置を表す要素PictureFillという Polyfill もある。
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>
CSS3 の最新動向• ここらを見よう
– 仕様の状況・・・ W3C CSS Working Group によるまとめページ
– 実装の状況・・・ Can I UseのCSSカテゴリ
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はほぼ全ブラウザが実装してた– マルチカラムレイアウトはほぼ全ブラウザが実装してた
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
WebGL
Web Audio API
Application Cache
Web Storage
Indexed Database
API
WebRTC
Device APIs
Web Component
s
Web Component
sMedia Source
Extensions
Web Cryptography
API
Web Workers
API の最新動向
表現力がネイティブ並に
Emscriptenとasm.jsで3Dアクションゲームをブラウザ上に移植
ハイブリッドアプリがじわじわと
mobile-chrome-appsChrome アプリを Android / iOS上で動作させるためのツール群
オフライン Web アプリもじわじわと
" オフライン時の変更は、オンラインに戻った時に同期されます "
Google Slides
以前、こんなスライドも
リアルタイム・マルチメディアの活用
ストリーミング
WebRTC
UI のコンポーネント開発／MVC化
Polymerのデモ
オープンデータの促進（ Web of Data ）
今後恐らく起きること• 表現力がネイティブ並に• ハイブリッドアプリがじわじわと• オフライン Web アプリもじわじわと• リアルタイム・マルチメディアの活用• UI のコンポーネント開発／MVC化• オープンデータの促進（ Web of Data ）• Web of Things
このギャップは誰が埋める？
最新トレンド 近未来今ここ
ご清聴ありがとうございました。