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
   

   View Slide

2. @1000ch
   ‣ Software Engineer
   ‣ Web Platform
   ‣ iOS, macOS, server-side
   ‣ Merpay / Mercari, Inc.
   

   View Slide

3. View Slide

4. 超速本、発売中です
   詳しくは https://webperf.guide まで
   @ahomu @1000ch
   書いた⼈
   

   View Slide

5. 2018 年の Web 標準ということで…
   ‣ Service Worker
   ‣ これからの Web において、導⼊しない理由がない
   ‣ Web Components
   ‣ たまにはライブラリに頼らず Web UI を構築してみたい
   ‣ Web Payments
   ‣ Web の決済は全て Web Payments に統⼀されるべき
   

   View Slide

6. Service Worker
   

   View Slide

7. Service Worker
   ‣ ブラウザにインストールさせる Web Worker
   ‣ JavaScript で実装できるネットワーク Proxy
   ‣ プッシュを受信したり、オンライン復帰時を検知したり
   

   View Slide

8. HTTP リクエスト/レスポンス
   HTML、CSS、JavaScript、画像、XHR、etc
   様々なリソースのリクエスト
   

   View Slide

9. キャッシュがあってもオフラインでは取得できない
   不確かなブラウザキャッシュ
   

   View Slide

10. Service Worker でバイパスする
    Cache API
    Service Worker
    

    View Slide

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
    

    View Slide

12. オンライン復旧を検知したり…
    Service Worker
    →
    Background Sync
    メッセージ送信時にオフラインになったが、復旧時にリトライする。とか
    

    View Slide

13. Service Worker
    プッシュデータを受信できる
    プッシュ通知はもちろん、更新データの送信も
    Web Push
    

    View Slide

14. FRESH!におけるWebプッシュ通知機
    能 〜機能設計編〜 − CyberAgent
    Developers Blog
    

    View Slide

15. ※⼤事なことなのでもう⼀度⾔います
    Service Worker は
    「オフライン対応のための技術」
    ではありません
    

    View Slide

16. Progressive Web Apps
    ‣ Google が提唱する次世代 Web アプリケーション
    ‣ ⾼速に動作する、インストールできる、エンゲージできる、etc
    ‣ Web の良さを活かしつつ、ネイティブアプリの⻑所を取り⼊れる
    ‣ 要するに Web をもっと前に進めようという動き
    

    View Slide

17. Parts of Progressive Web Apps
    Safe High Performance
    Installable
    Linkable
    Network Independent Re-Engageable
    

    View Slide

18. Linkable
    Safe High Performance
    Installable
    Network Independent Re-Engageable
    Service Worker related parts
    

    View Slide

19. Progressive Web Apps are here.
    What's the big deal? − The Firefox
    Frontier
    

    View Slide

20. Progressive Web Apps are here.
    What's the big deal? − The Firefox
    Frontier
    

    View Slide

21. Welcoming Progressive Web Apps to
    Microsoft Edge and Windows 10 −
    Windows Blogs
    

    View Slide

22. ✅
    ✅ ✅
    ✅
    Service Worker のサポート状況
    
    

    View Slide

23. ✅
    ✅ ✅
    ✅
    Service Worker のサポート状況
    Will be available on Mobile Web
    
    

    View Slide

24. Safari 11.1 ships with iOS 11.3 and
    macOS 10.13.4
    

    View Slide

25. Windows Insider build enables
    Service Worker by default in
    Microsoft Edge for the first time
    

    View Slide

26. 2018年は Service Worker を使おう
    ‣ なんといっても強⼒な機能
    ‣ オプトインで導⼊できるしキャッシュだけでも使う価値アリ
    ‣ もちろん PWA の⽂脈でも必須になってくる
    ‣ サポート状況が⼤きく好転
    ‣ Safari と Edge の普及状況次第だが、⼤きく前進するのは間違いない
    ‣ 特にモバイル Web の⾶躍に期待できる
    

    View Slide

27. Web Components
    

    View Slide

28. Web Components
    ‣ グローバルスコープな DOM にスコープが欲しい
    ‣ CSS を扱うのが難しい問題の解決
    ‣ Web の部品を再利⽤したい問題の解決
    ‣ コンポーネント化が定着してきた昨今の Web 開発
    ‣ React をはじめとしたビューライブラリの流れ
    

    View Slide

29. Web Components を司る Web 標準技術
    Custom Elements Shadow DOM ES Modules
    class FancyButton extends HTMLElement {
    constructor() { ... }
    connectedCallback() { ... }
    disconnectedCallback() { ... }
    attributeChangedCallback() { ... }
    }
    customElements
    .define('fancy-button', FancyButton);
    振る舞いを定義する
    カスタム要素を登録する
    

    View Slide

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 を参照する
    

    View Slide

31. Web Components を司る Web 標準技術
    Custom Elements Shadow DOM ES Modules
    export default class FancyButton {
    ...
    }
    import FancyButton from './fancy-button.js';
    モジュールを export する
    モジュールを import する
    

    View Slide

32. fancy-button.js
    export default class FancyButton extends HTMLElement {
    connectedCallback() {
    this.attachShadow({
    mode: 'open'
    }).innerHTML = `
    button { ……… }
    
    `;
    }
    }
    customElements.define('fancy-button', FancyButton);
    

    View Slide

33. ライブラリのお作法を思い出す
    React Angular
    Vue
    

    View Slide

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 ;
    }
    };
    

    View Slide

35. 周辺ツールは複雑化の⼀途
    React Component Browser
    AST
    CSS + JavaScript
    npm
    

    View Slide

36. 多段ビルドが当たり前な昨今…
    疲弊
    

    View Slide

37. Web Components
    export default class LogoImage extends HTMLElement {
    connectedCallback() {
    this.attachShadow({
    mode: 'open'
    }).innerHTML = `
    <br/>img {<br/>width: 200px;<br/>height: 200px;<br/>}<br/>
    
    `;
    }
    }
    

    View Slide

38. ビルドを限りなく単純化
    npm Web Components Browser
    

    View Slide

39. 描画パフォーマンスが
    気になるあなたに…
    

    View Slide

40. Polymer/lit-html
    HTML templates, via JavaScript
    template literals
    

    View Slide

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`Name: ${this.getAttribute('name')}`;
    }
    };
    

    View Slide

42. ✅
    ✅
    Custom Elements
    Shadow DOM
    ES Modules
    ✅ ✅
    ✅ ✅
    
    ✅
    ✅
    
    Web Components のサポート状況
    ✅
    
    ✅
    
    

    View Slide

43. ✅
    ✅
    Custom Elements
    Shadow DOM
    ES Modules
    ✅ ✅
    ✅ ✅
    
    ✅
    ✅
    
    Web Components のサポート状況
    ✅
    
    ✅
    
    Available on Mobile Web
    

    View Slide

44. Web Components を本番投⼊する
    （2018年春）− EagleLand
    

    View Slide

45. 2018年は Web Components を使おう
    ‣ Web 標準に⽴ち返ってみる
    ‣ ブラウザランタイムで動作する廃れにくい技術
    ‣ Web 開発を次のステップへ進めるために
    ‣ もちろん直接的なメリットもある
    ‣ ツールや作法への学習コストなど、使う障壁が⼩さい
    ‣ ライブラリのロードコストがなくなる
    

    View Slide

46. Web Payments
    

    View Slide

47. Web Payments
    ‣ Web 上の決済を、もっと便利で安全にしたい
    ‣ クレジットカードは便利だけど、紛失時のリスクが⼤きい
    ‣ Web サービス利⽤時の⼊⼒も、双⽅にリスクがある
    ‣ Payment Request API
    ‣ ブラウザで UI を提供して、決済体験のギャップを減らしたい
    

    View Slide

48. ①クレジットカードの脆弱性
    ♂
    拾った⼈が使えてしまう コントロールできない漏洩リスク
    

    View Slide

49. PCI DSS というセキュリティ基準
    ‣ Payment Card Industry Data Security Standard
    ‣ カード会員情報の保護を⽬的としたセキュリティの国際統⼀基準
    ‣ ⼤⼿ペイメントブランド五社が共同で策定（アメリカン・エキスプレ
    ス、Discover、JCB、マスターカード、VISA）
    ‣ カード情報を扱うための厳しい基準
    ‣ ネットワーク、データ保護、脆弱性管理、定期的な診断、etc
    

    View Slide

50. クレジットカード取引におけるセキュ
    リティ対策の強化に向けた実⾏計画
    2017を取りまとめました − 経済産業省
    

    View Slide

51. 経産省「カードの取扱気をつけてね」
    ①頑張って PCI DSS に準拠する ②カード情報を扱わない
    

    View Slide

52. EC 側でカード情報を扱わないフロー
    決済代⾏会社 (PSP)
    クレジットカード会社
    EC サイト (Merchant)
    ブラウザ
    1. 購⼊
    3. 決済処理
    4. 遷移
    2. 遷移
    

    View Slide

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!
    

    View Slide

54. Web Payments のコンセプト
    ‣ そもそもカード情報をやりとりしなければいいのでは
    ‣ Payment App でトークンを発⾏しトランザクションを実⾏する
    ‣ カード情報ではないので、万が⼀漏れても被害が⼩さい
    ‣ Payment Request API
    ‣ Web Payments の仕組みをブラウザで利⽤するための UI
    ‣ クレジットカードの⼊⼒インターフェースだけではない
    

    View Slide

55. ネイティブの Payment App のフロー①
    EC サイト (Merchant) 決済代⾏会社 (PSP)
    クレジットカード会社
    ブラウザ
    Payment App
    2. 起動
    1. 購⼊
    3. Token 要求
    4. Token
    

    View Slide

56. ネイティブの Payment App のフロー②
    EC サイト (Merchant) 決済代⾏会社 (PSP)
    クレジットカード会社
    ブラウザ
    Payment App
    5. Token 6. Token
    7. Token
    10. Verify 9. Verify
    8. Verify
    

    View Slide

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();
    // ...
    })();
    

    View Slide

58. You bought!
    Pay with PRA
    Payment Request API を使った例
    Submit
    Card Number
    CVC
    2. カード情報⼊⼒
    3. 決済確認
    4. 決済完了
    5. 完了
    1. 商品選択
    

    View Slide

59. ②バラバラなフォーム UI
    

    View Slide

60. Payment Request API demo on
    FRESH! (デモ動画)
    

    View Slide

61. ✅
    ✅ ✅
    ✅
    Payment Request API のサポート状況
    
    モバイル Safari は iOS 11.3 からサポート、Firefox は開発中
    IE11 を考慮すると既存のリンクタイプとの共存が現実的
    
    

    View Slide

62. 2018年は Web Payments を使おう
    ‣ 決済機能があるサービス事業者は是⾮
    ‣ モバイル Web の決済体験がガラッと変わる
    ‣ PSP が提供する SDK を使っている場合は対応を待つ（対応されない場
    合は PSP を急かす）
    ‣ フォームに⼊⼒するのが気持ち悪くなった（感想）
    ‣ PCI DSS の対応状況を⾒るようになってしまった
    

    View Slide

63. Thank you ✨
    1000ch
    1000ch
    

    View Slide