HTML5時代のフロントエンド開発入門
Download as PPTX, PDF10 likes3,028 views
長野県で講演した際に使用した資料です。
HTML5時代のフロントエンド開発入門
- 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
- 6. html5j部活動 アクセシビ リティ部 テスト部 Webプラッ トフォーム 部 エンタメ技 術部 デザイン部 パフォーマ ンス部
- 7. HTML5 Japan Cup 2014実績 最優秀賞賞金100万円 賞金総額350万円 応募作品総数289作品 スポンサー61団体 主催・関連イベント45件（<htmlday>含） イベント参加人数1,449名（<htmlday>含）
- 8. 閑話休題
- 9. 最先端・・・？
- 11. トレンド
- 13. （引き続き）モバイルWeb
- 21. トレンドまとめ • モバイルWeb – レスポンシブWebデザイン、CSSフレームワーク、 幅100%のページ、... • メディア要素 – img, video, audio... • 新たなUXの模索 – JavaScript, CSS3... • フラットデザイン – グリッドレイアウト、Web Fonts、マテリアルデ ザイン... • ...
- 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の最新動向
- 37. ハイブリッドアプリがじわじわと mobile-chrome-apps ChromeアプリをAndroid / iOS上で動作させるためのツール群
- 38. オフラインWebアプリもじわじわと "オフライン時の変更は、 オンラインに戻った時に 同期されます" Google Slides 以前、こんなスライドも
- 42. Web of Things Philips hue
- 43. 今後恐らく起きること • 表現力がネイティブ並に • ハイブリッドアプリがじわじわと • オフラインWebアプリもじわじわと • リアルタイム・マルチメディアの活用 • UIのコンポーネント開発／MVC化 • オープンデータの促進（Web of Data） • Web of Things
- 46. ご清聴ありがとうございました。