初心者のためのWeb標準技術
75 likes17,665 views
2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。
![[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -](https://cdn.slidesharecdn.com/ss_thumbnails/mw10-170614050118-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to 初心者のためのWeb標準技術 (20)
More from Shogo Sensui (16)
初心者のためのWeb標準技術
- 1. 初心者のための Web標準技術2015秋 at HTML5ビギナーズ by 1000ch
- 2. 1000ch
- 4. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信
- 5. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信 https://frontendweekly.tokyo
- 10. そんな中でも 廃れにくい技術…
- 16. function Human(name) { if (name === undefined) { name = 'Taro'; } this.name = name; } Human.prototype.hello = function() { console.log('My name is ' + this.name); }; class Human { constructor(name = 'Taro') { this.name = name; } hello() { console.log(`My name is ${this.name}`); } } ES5 ES6
- 19. 2. CSS.next
- 21. CSS.next CSS :root { --primary-color: #E86100; --base-fontsize: 1rem; } h1 { font-size: calc(var(--base-fontsize) * 2); height: calc(100px - 2em); } body { font-size: var(--base-fontsize); } h1 { font-size: 2rem; height: calc(100px - 2em); } body { font-size: 1rem; }
- 23. 3. HTTP/2
- 28. Web Components ! ? ♥ HTML/CSS/JSのスコープ問題の根本的な解決 Web部品の再利用に向けた コンポーネント化の作法の標準化 ブラウザの実装以前に、仕様がFixしていない （特にShadow DOMとHTML Imports）
- 31. 基礎からわかる Web Components 徹底解説 https://html5experts.jp/series/web-components-2/
- 33. Service Worker ! ? ♥ サーバーPushの受信やオフライン化など Webにおけるユーザー体験を大きく変える Push API・Cache APIなどを担う 機能を実現する新たなWebの基盤技術 セキュアなWeb（HTTPS）でしか利用できない
- 39. How to fallback?
- 41. ES 2015 CSS.next HTTP/2 Web Components Service Worker Babel・CSSnext・Autoprefixerと いったような各種ツール使って、 非対応ブラウザでも実行できるよ うなJavaScriptに変換（トランス パイル）する
- 42. ES 2015 CSS.next HTTP/2 Web Components Service Worker クライアントとのエンドポイント サーバーにHTTP/2を対応させる （クライアントがHTTP/2に対応し ていればHTTP/2で通信し、非対応 であればHTTP/1.1に）
- 43. ES 2015 CSS.next HTTP/2 Web Components Service Worker WebComponents.jsというポリフィ ルを使うことで古いブラウザ （Safari 7+・IE11+）でもある程度 実行できるようになる
- 44. ES 2015 CSS.next HTTP/2 Web Components Service Worker オフライン対応もサーバーPushを 必須の要件としなければ、そもそ もオプトインとして導入しやすい。 対応しているブラウザに対してだ けでもユーザーエンゲージメント を高められる
- 47. ※ご利用は計画的に