2018 年の Web 標準 / Web Standards 2018

2018年3月23日、24日に開催された MANABIYA -teratail Developer Days- https://manabiya.tech の「2018 年の Web 標準」のセッション資料です。

Transcript

1. 2018年のWeb標準 MANABIYA.TECH 2018.03.24 Shogo Sensui a.k.a @1000ch
2. @1000ch ‣ Software Engineer ‣ Web Platform ‣ iOS, macOS, server-side ‣ Merpay / Mercari, Inc.
4. 超速本、発売中です 詳しくは https://webperf.guide まで @ahomu @1000ch 書いた⼈
5. 2018 年の Web 標準ということで… ‣ Service Worker ‣ これからの Web において、導⼊しない理由がない ‣ Web Components ‣ たまにはライブラリに頼らず Web UI を構築してみたい ‣ Web Payments ‣ Web の決済は全て Web Payments に統⼀されるべき
6. Service Worker
7. Service Worker ‣ ブラウザにインストールさせる Web Worker ‣ JavaScript で実装できるネットワーク Proxy ‣ プッシュを受信したり、オンライン復帰時を検知したり
8. HTTP リクエスト/レスポンス HTML、CSS、JavaScript、画像、XHR、etc 様々なリソースのリクエスト
9. キャッシュがあってもオフラインでは取得できない 不確かなブラウザキャッシュ
10. Service Worker でバイパスする Cache API Service Worker
11. self.addEventListener('fetch', e => { e.respondWith(preferCache(e.request)); }); async function preferCache(request) { // get cache via Cache API const cache = await caches.match(request); // request if cache is empty const response = cache || await fetch(request.clone()); return response; } service-worker.js Cache API Service Worker
12. オンライン復旧を検知したり… Service Worker → Background Sync メッセージ送信時にオフラインになったが、復旧時にリトライする。とか
13. Service Worker プッシュデータを受信できる プッシュ通知はもちろん、更新データの送信も Web Push
14. FRESH!におけるWebプッシュ通知機 能 〜機能設計編〜 − CyberAgent Developers Blog
15. ※⼤事なことなのでもう⼀度⾔います Service Worker は 「オフライン対応のための技術」 ではありません
16. Progressive Web Apps ‣ Google が提唱する次世代 Web アプリケーション ‣ ⾼速に動作する、インストールできる、エンゲージできる、etc ‣ Web の良さを活かしつつ、ネイティブアプリの⻑所を取り⼊れる ‣ 要するに Web をもっと前に進めようという動き
17. Parts of Progressive Web Apps Safe High Performance Installable Linkable Network Independent Re-Engageable
18. Linkable Safe High Performance Installable Network Independent Re-Engageable Service Worker related parts
19. Progressive Web Apps are here. What's the big deal? − The Firefox Frontier
20. Progressive Web Apps are here. What's the big deal? − The Firefox Frontier
21. Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 − Windows Blogs
22. ✅ ✅ ✅ ✅ Service Worker のサポート状況
23. ✅ ✅ ✅ ✅ Service Worker のサポート状況 Will be available on Mobile Web
24. Safari 11.1 ships with iOS 11.3 and macOS 10.13.4
25. Windows Insider build enables Service Worker by default in Microsoft Edge for the first time
26. 2018年は Service Worker を使おう ‣ なんといっても強⼒な機能 ‣ オプトインで導⼊できるしキャッシュだけでも使う価値アリ ‣ もちろん PWA の⽂脈でも必須になってくる ‣ サポート状況が⼤きく好転 ‣ Safari と Edge の普及状況次第だが、⼤きく前進するのは間違いない ‣ 特にモバイル Web の⾶躍に期待できる
27. Web Components
28. Web Components ‣ グローバルスコープな DOM にスコープが欲しい ‣ CSS を扱うのが難しい問題の解決 ‣ Web の部品を再利⽤したい問題の解決 ‣ コンポーネント化が定着してきた昨今の Web 開発 ‣ React をはじめとしたビューライブラリの流れ
29. Web Components を司る Web 標準技術 Custom Elements Shadow DOM ES Modules class FancyButton extends HTMLElement { constructor() { ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback() { ... } } customElements .define('fancy-button', FancyButton); 振る舞いを定義する カスタム要素を登録する
30. Web Components を司る Web 標準技術 Custom Elements Shadow DOM ES Modules const doc = document; const btn = doc.querySelector('button'); const shadowRoot = btn.attachShadow({ mode: 'open' // or 'close' }); // readonly property console.log(btn.shadowRoot); Shadow DOM を⽣やす Shadow DOM を参照する
31. Web Components を司る Web 標準技術 Custom Elements Shadow DOM ES Modules export default class FancyButton { ... } import FancyButton from './fancy-button.js'; モジュールを export する モジュールを import する
32. fancy-button.js export default class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }).innerHTML = ` <style>button { ……… }</style> <button><slot></slot></button> `; } } customElements.define('fancy-button', FancyButton);
33. ライブラリのお作法を思い出す React Angular Vue
34. React Component + CSS Modules .logo { width: 200px; height: 200px; } 
 import styles from './Logo.css'; import React from 'react'; export default class Logo extends React.Component { render() { return <img src="logo.svg" className={styles.logo} />; } };
35. 周辺ツールは複雑化の⼀途 React Component Browser AST CSS + JavaScript npm
36. 多段ビルドが当たり前な昨今… 疲弊
37. Web Components export default class LogoImage extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }).innerHTML = ` <style> img { width: 200px; height: 200px; } </style> <img src="logo.svg"> `; } }
38. ビルドを限りなく単純化 npm Web Components Browser
39. 描画パフォーマンスが 気になるあなたに…
40. Polymer/lit-html HTML templates, via JavaScript template literals
41. Web Components using lit-html import { html, render } from './lit-html.js'; export default class MyName extends HTMLElement { constructor() { super(); } connectedCallback() { this.attachShadow({ mode: 'open' }); render(this.template, this.shadowRoot); } get template() { return html`<p>Name: ${this.getAttribute('name')}</p>`; } };
42. ✅ ✅ Custom Elements Shadow DOM ES Modules ✅ ✅ ✅ ✅ ✅ ✅ Web Components のサポート状況 ✅ ✅
43. ✅ ✅ Custom Elements Shadow DOM ES Modules ✅ ✅ ✅ ✅ ✅ ✅ Web Components のサポート状況 ✅ ✅ Available on Mobile Web
44. Web Components を本番投⼊する （2018年春）− EagleLand
45. 2018年は Web Components を使おう ‣ Web 標準に⽴ち返ってみる ‣ ブラウザランタイムで動作する廃れにくい技術 ‣ Web 開発を次のステップへ進めるために ‣ もちろん直接的なメリットもある ‣ ツールや作法への学習コストなど、使う障壁が⼩さい ‣ ライブラリのロードコストがなくなる
46. Web Payments
47. Web Payments ‣ Web 上の決済を、もっと便利で安全にしたい ‣ クレジットカードは便利だけど、紛失時のリスクが⼤きい ‣ Web サービス利⽤時の⼊⼒も、双⽅にリスクがある ‣ Payment Request API ‣ ブラウザで UI を提供して、決済体験のギャップを減らしたい
48. ①クレジットカードの脆弱性 ♂ 拾った⼈が使えてしまう コントロールできない漏洩リスク
49. PCI DSS というセキュリティ基準 ‣ Payment Card Industry Data Security Standard ‣ カード会員情報の保護を⽬的としたセキュリティの国際統⼀基準 ‣ ⼤⼿ペイメントブランド五社が共同で策定（アメリカン・エキスプレ ス、Discover、JCB、マスターカード、VISA） ‣ カード情報を扱うための厳しい基準 ‣ ネットワーク、データ保護、脆弱性管理、定期的な診断、etc
50. クレジットカード取引におけるセキュ リティ対策の強化に向けた実⾏計画 2017を取りまとめました − 経済産業省
51. 経産省「カードの取扱気をつけてね」 ①頑張って PCI DSS に準拠する ②カード情報を扱わない
52. EC 側でカード情報を扱わないフロー 決済代⾏会社 (PSP) クレジットカード会社 EC サイト (Merchant) ブラウザ 1. 購⼊ 3. 決済処理 4. 遷移 2. 遷移
53. 決済代⾏サービスに遷移する例 Card Number CVC Confirm Submit Back to EC Pay on PSP 3. 決済確認 4. 決済完了 2. カード情報⼊⼒ 1. 商品選択 5. 完了 Card Number CVC 1111-1111-1111-1111 111 You bought!
54. Web Payments のコンセプト ‣ そもそもカード情報をやりとりしなければいいのでは ‣ Payment App でトークンを発⾏しトランザクションを実⾏する ‣ カード情報ではないので、万が⼀漏れても被害が⼩さい ‣ Payment Request API ‣ Web Payments の仕組みをブラウザで利⽤するための UI ‣ クレジットカードの⼊⼒インターフェースだけではない
55. ネイティブの Payment App のフロー① EC サイト (Merchant) 決済代⾏会社 (PSP) クレジットカード会社 ブラウザ Payment App 2. 起動 1. 購⼊ 3. Token 要求 4. Token
56. ネイティブの Payment App のフロー② EC サイト (Merchant) 決済代⾏会社 (PSP) クレジットカード会社 ブラウザ Payment App 5. Token 6. Token 7. Token 10. Verify 9. Verify 8. Verify
57. Payment Request API (async () => { const request = new PaymentRequest([ { supportedMethods: 'basic-card' }, { supportedMethods: 'https://apple.com/apple-pay' }, { supportedMethods: 'https://emerald-eon.appspot.com/bobpay' } ], details); const result = await request.canMakePayment(); await result.show(); // ... })();
58. You bought! Pay with PRA Payment Request API を使った例 Submit Card Number CVC 2. カード情報⼊⼒ 3. 決済確認 4. 決済完了 5. 完了 1. 商品選択
59. ②バラバラなフォーム UI
60. Payment Request API demo on FRESH! (デモ動画)
61. ✅ ✅ ✅ ✅ Payment Request API のサポート状況 モバイル Safari は iOS 11.3 からサポート、Firefox は開発中 IE11 を考慮すると既存のリンクタイプとの共存が現実的
62. 2018年は Web Payments を使おう ‣ 決済機能があるサービス事業者は是⾮ ‣ モバイル Web の決済体験がガラッと変わる ‣ PSP が提供する SDK を使っている場合は対応を待つ（対応されない場 合は PSP を急かす） ‣ フォームに⼊⼒するのが気持ち悪くなった（感想） ‣ PCI DSS の対応状況を⾒るようになってしまった
63. Thank you ✨ 1000ch 1000ch