Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2018 年の Web 標準 / Web Standards 2018

2018 年の Web 標準 / Web Standards 2018

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

Shogo Sensui

March 24, 2018
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. 2018年のWeb標準
    MANABIYA.TECH
    2018.03.24
    Shogo Sensui a.k.a @1000ch

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Service Worker

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. オンライン復旧を検知したり…
    Service Worker

    Background Sync
    メッセージ送信時にオフラインになったが、復旧時にリトライする。とか

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  21. ✅ ✅

    Service Worker のサポート状況

    View full-size slide


  22. ✅ ✅

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

    View full-size slide

  23. Safari 11.1 ships with iOS 11.3 and
    macOS 10.13.4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Web Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    `;
    }
    }
    customElements.define('fancy-button', FancyButton);

    View full-size slide

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

    View full-size slide

  33. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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 full-size slide



  41. Custom Elements
    Shadow DOM
    ES Modules
    ✅ ✅
    ✅ ✅




    Web Components のサポート状況




    View full-size slide



  42. Custom Elements
    Shadow DOM
    ES Modules
    ✅ ✅
    ✅ ✅




    Web Components のサポート状況




    Available on Mobile Web

    View full-size slide

  43. Web Components を本番投⼊する
    (2018年春)− EagleLand

    View full-size slide

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

    View full-size slide

  45. Web Payments

    View full-size slide

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

    View full-size slide

  47. ①クレジットカードの脆弱性

    拾った⼈が使えてしまう コントロールできない漏洩リスク

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 決済代⾏サービスに遷移する例
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  60. ✅ ✅

    Payment Request API のサポート状況

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

    View full-size slide

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

    View full-size slide

  62. Thank you ✨
    1000ch
    1000ch

    View full-size slide