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 標準ということで… ‣ Service Worker ‣ これからの Web

    において、導⼊しない理由がない ‣ Web Components ‣ たまにはライブラリに頼らず Web UI を構築してみたい ‣ Web Payments ‣ Web の決済は全て Web Payments に統⼀されるべき
  2. 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
  3. Progressive Web Apps ‣ Google が提唱する次世代 Web アプリケーション ‣ ⾼速に動作する、インストールできる、エンゲージできる、etc

    ‣ Web の良さを活かしつつ、ネイティブアプリの⻑所を取り⼊れる ‣ 要するに Web をもっと前に進めようという動き
  4. 2018年は Service Worker を使おう ‣ なんといっても強⼒な機能 ‣ オプトインで導⼊できるしキャッシュだけでも使う価値アリ ‣ もちろん

    PWA の⽂脈でも必須になってくる ‣ サポート状況が⼤きく好転 ‣ Safari と Edge の普及状況次第だが、⼤きく前進するのは間違いない ‣ 特にモバイル Web の⾶躍に期待できる
  5. Web Components ‣ グローバルスコープな DOM にスコープが欲しい ‣ CSS を扱うのが難しい問題の解決 ‣

    Web の部品を再利⽤したい問題の解決 ‣ コンポーネント化が定着してきた昨今の Web 開発 ‣ React をはじめとしたビューライブラリの流れ
  6. Web Components を司る Web 標準技術 Custom Elements Shadow DOM ES

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

    Modules export default class FancyButton { ... } import FancyButton from './fancy-button.js'; モジュールを export する モジュールを import する
  9. 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);
  10. 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} />; } };
  11. 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"> `; } }
  12. 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>`; } };
  13. ✅ ✅ Custom Elements Shadow DOM ES Modules ✅ ✅

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

    ✅ ✅ ✅ ✅ Web Components のサポート状況 ✅ ✅ Available on Mobile Web
  15. 2018年は Web Components を使おう ‣ Web 標準に⽴ち返ってみる ‣ ブラウザランタイムで動作する廃れにくい技術 ‣

    Web 開発を次のステップへ進めるために ‣ もちろん直接的なメリットもある ‣ ツールや作法への学習コストなど、使う障壁が⼩さい ‣ ライブラリのロードコストがなくなる
  16. PCI DSS というセキュリティ基準 ‣ Payment Card Industry Data Security Standard

    ‣ カード会員情報の保護を⽬的としたセキュリティの国際統⼀基準 ‣ ⼤⼿ペイメントブランド五社が共同で策定(アメリカン・エキスプレ ス、Discover、JCB、マスターカード、VISA) ‣ カード情報を扱うための厳しい基準 ‣ ネットワーク、データ保護、脆弱性管理、定期的な診断、etc
  17. 決済代⾏サービスに遷移する例 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!
  18. Web Payments のコンセプト ‣ そもそもカード情報をやりとりしなければいいのでは ‣ Payment App でトークンを発⾏しトランザクションを実⾏する ‣

    カード情報ではないので、万が⼀漏れても被害が⼩さい ‣ Payment Request API ‣ Web Payments の仕組みをブラウザで利⽤するための UI ‣ クレジットカードの⼊⼒インターフェースだけではない
  19. ネイティブの Payment App のフロー② EC サイト (Merchant) 決済代⾏会社 (PSP) クレジットカード会社

    ブラウザ Payment App 5. Token 6. Token 7. Token 10. Verify 9. Verify 8. Verify
  20. 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(); // ... })();
  21. You bought! Pay with PRA Payment Request API を使った例 Submit

    Card Number CVC 2. カード情報⼊⼒ 3. 決済確認 4. 決済完了 5. 完了 1. 商品選択
  22. ✅ ✅ ✅ ✅ Payment Request API のサポート状況 モバイル Safari

    は iOS 11.3 からサポート、Firefox は開発中 IE11 を考慮すると既存のリンクタイプとの共存が現実的
  23. 2018年は Web Payments を使おう ‣ 決済機能があるサービス事業者は是⾮ ‣ モバイル Web の決済体験がガラッと変わる

    ‣ PSP が提供する SDK を使っている場合は対応を待つ(対応されない場 合は PSP を急かす) ‣ フォームに⼊⼒するのが気持ち悪くなった(感想) ‣ PCI DSS の対応状況を⾒るようになってしまった