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