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

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. LinkableSafe High Performance
InstallableNetwork 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 AngularVue

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 BrowserAST
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 ECPay 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