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

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend

#insideFE slide with @tokimariri.

Web App Checklist😉:
💡Rendering patterns
💡CDN
💡Perf Budget
💡a11y
💡PWA
💡WASM in Web Worker
💡Monitoring tools
💡DX (including LGTM!)
and so on! 🙌

Kazunari Hara

May 18, 2019
Tweet

More Decks by Kazunari Hara

Other Decks in Technology

Transcript

  1. 高品質のWebアプリケーションをつくるために
    Web App Checklist - To make high quality app for better user experience
    2019.05.18 Inside Frontend @Abema Towers / Kazunari Hara & tokimari
    Web App Checklist

    View full-size slide

  2. 原 一成 Kazunari Hara
    Web Developer @ CyberAgent
    Twitterer
    Beer, Cat, Karting, Family
    @herablog

    View full-size slide

  3. ときまり tokimari
    Frontend Engineer @ CyberAgent
    Accessibility Police
    Beer, Cat, Knitting
    @tokimariri

    View full-size slide

  4. 喋るだけで
    ブログになる
    投稿機能
    Post function that
    creates blog entry just
    by speaking

    View full-size slide

  5. 幅広いユーザー
    投稿/閲覧スタイル
    Post function that creates
    blog entry just by speaking
    お風呂中にも子供を抱っこしていても、料理中でも寝
    ながらでも投稿、閲覧ができます

    View full-size slide

  6. 高品質のWebアプリケーションをつくるために
    Web App Checklist - To make high quality app for better user experience
    2019.05.18 Inside Frontend @Abema Towers / Kazunari Hara & tokimari
    Web App Checklist

    View full-size slide

  7. no genre title
    13 a11y 文字のコントラストは4.5:1以上
    14 a11y 色だけで説明しない
    15 a11y 要素の選択は適切に
    16 a11y キー操作だけで利用できる
    17 a11y,UX フォーカスを可視化する
    18 UX スクロール位置を復元
    19 UX,a11y 修正・削除ができる
    20 UX 継続的なモニタリング
    21 UX ストレスのない遷移とローディング
    22 UX レイアウトを固定する
    23 a11y,UX 突然音を出さない
    24 Security セキュリティ監査する
    no genre title
    1 UX 適切なレンダリングパターンを選択
    2 Perf 安定したサーバレスポンス
    3 Perf 圧縮したメディアフォーマットを利用
    4 Perf,UX リソースを必要なタイミングで読み込む
    5 Perf Webパフォーマンスを監視
    6 UX Off the main thread
    7 UX オフラインでも利用できる
    8 UX モバイルでもデスクトップでも使える
    9 PWA メタデータを提供
    10 DX OSSのように開発
    11 UX Progressive Enhancement
    12 a11y,SEO 画像に代替テキストを設定する
    Checklist: 36

    View full-size slide

  8. no genre title
    13 a11y 文字のコントラストは4.5:1以上
    14 a11y 色だけで説明しない
    15 a11y 要素の選択は適切に
    16 a11y キー操作だけで利用できる
    17 a11y,UX フォーカスを可視化する
    18 UX スクロール位置を復元
    19 UX,a11y 修正・削除ができる
    20 UX 継続的なモニタリング
    21 UX ストレスのない遷移とローディング
    22 UX レイアウトを固定する
    23 a11y,UX 突然音を出さない
    24 Security セキュリティ監査する
    no genre title
    1 UX 適切なレンダリングパターンを選択
    2 Perf 安定したサーバレスポンス
    3 Perf 圧縮したメディアフォーマットを利用
    4 Perf,UX リソースを必要なタイミングで読み込む
    5 Perf Webパフォーマンスを監視
    6 UX Off the main thread
    7 UX オフラインでも利用できる
    8 UX モバイルでもデスクトップでも使える
    9 PWA メタデータを提供
    10 DX OSSのように開発
    11 UX Progressive Enhancement
    12 a11y,SEO 画像に代替テキストを設定する
    Checklist: 36
    Today: only 20

    View full-size slide

  9. 適切なレンダリングパターンを選択
    Perf
    Checklist. 01
    Select appropriate rendering pattern for your app.

    View full-size slide

  10. Rendering on the Web
    https://developers.google.com/web/updates/2019/02/rendering-on-the-web

    View full-size slide

  11.   TTI = FCP
      Inflexible
    Server Side
    Rendering
    ロジックは
    サーバー側
    GET /
    Network
    JS
    TTIはJS構成
    に依存する
    Logics are in
    server side
    TTI depends on JS
    architecture

    View full-size slide

  12. Optimized Server-Side Web Application In 2018
    https://developers.cyberagent.co.jp/blog/archives/16818/

    View full-size slide

  13. Server Side Rendering Website
    アメーバニュース Ameba News
    はやいFCP
    https://news.ameba.jp/entry/20190516-669/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。
    Fast FCP

    View full-size slide

  14. SSR with hydration
      Flexible
      TTI >>>> FCP
    データを使ってク
    ライアントで描画
    GET /
    Network
    JS
    DATA={}
    bundle.js
    render(DATA)
    Client rendering
    with initial data

    View full-size slide

  15. アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~
    https://developers.cyberagent.co.jp/blog/archives/636/

    View full-size slide

  16. SSR with Hydration App
    アメーバブログ Ameba Blog
    https://ameblo.jp/ca-seo/entry-12458541240.htmlをMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定。
    TTIが遅くなりがち Slow TTI

    View full-size slide

  17. Client Side
    Rendering
      Flexible, Fast TTFB
      TTI >>>> FCP
    GET /
    FCP TTI
    Network
    JS
    bundle.js
    render()
    FCPはもっと遅く
    なることも

    View full-size slide

  18. GET /
    FCP TTI
    JS
    app.js
    render()
    ● H2 Server Push (Preload)
    ● Web Components ...
    こえのブログ
    はCSRを選択
    できるだけはやい
    CSRに挑戦
    JSの並列配信
    Parallel JS requests
    Our challenge was
    to make CSR app
    as fast as possible
    小さいJS
    Light JS

    View full-size slide

  19. Lighthouse
    Performance
    程々にはやいFCP
    とはやいTTI
    https://voice.ameba.jp/をMobile、Simulated Fast
    3G、4x CPU Slowdown、ローカル環境で測定。
    So-so fast FCP
    and fast TTI.

    View full-size slide

  20. 安定したサーバレスポンス
    Keep fast and consistent server response.
    Perf
    Checklist. 02

    View full-size slide

  21. Server response is
    fundamental for web
    performance.
    サーバレスポンス
    は根本的
    サーバレスポンスが遅い
    と何も表示されない
    Waiting with blank page
    when server response is too
    slow.

    View full-size slide

  22. Reasons for
    server-side latency.
    サーバ遅延の要因
    ● 地理 Location
    ● 計算量 Computation
    ● キャパシティ Capacity
    ● リダイレクト Redirect
    ● DBクエリ DB Queries
    ...

    View full-size slide

  23. Use CDN for edge
    side caching.こえのブロ
    グで利
    CDNキャッシュ
    の利用
    高キャッシュヒット率で
    オリジンサーバーに
    1度しかリクエストしない
    Only requests content to the origin server
    once because of high cache hit ratio.

    View full-size slide

  24. Cache content in CDN
    as long as possible.
    できるだけ長く
    CDNキャッシュ
    長いTTLと
    Surrogate Keyを指定
    JavaScript
    TTL: 30days
    Key: web/release
    Entry data
    30days
    blogger/${ID}
    entry/${ID}
    Setting long TTL and Surrogate Key

    View full-size slide

  25. Event-driven cache
    purging.
    イベント駆動
    キャッシュパージ
    onDeploy onUpdate
    Purging with Surrogate Key
    web/release entry/${ID}

    View full-size slide

  26. Edge-side
    computing.
    エッジサイド
    コンピュー
    ティング
    URLからSurrogate Key
    を抽出
    sub vcl_fetch {
    declare local var.SurrogateKey STRING;
    if (req.http.x-url ~
    "/([a-z0-9-]{3,24})/([a-zA-Z0-9]+)") {
    set var.SurrogateKey = var.SurrogateKey + "
    blogger/" + re.group.1 +
    " entry/" + re.group.2;
    // e.g. ogger/abcde", "entry/12345"
    }
    set beresp.http.Surrogate-Key =
    var.SurrogateKey;
    }
    Extracting surrogate keys from URL

    View full-size slide

  27. 圧縮したメディアフォーマットを利用
    Select optimized media format.
    Perf/UX
    Checklist. 03

    View full-size slide

  28. According to Lighthouse, the size
    of images could still be reduced.
    まだまだ減らせる画像容量

    View full-size slide

  29. List of image file
    formats
    画像フォーマット
    ● JPEG
    ● Progressive JPEG
    ● PNG
    ● WebP
    ● SVG
    ● Animation GIF
    画質を指定して利用
    ファイルサイズに注意
    高圧縮
    動画のが軽いことも

    View full-size slide

  30. ImageOptim
    https://imageoptim.com/

    View full-size slide

  31. List of image CDN
    providers.
    Image CDN
    ● Akamai
    ● Cloudinary
    ● Imgix
    ● Fastly
    ● Hayabusa

    View full-size slide

  32. List of image CDN
    providers.
    Image CDN
    ● Akamai
    ● Cloudinary
    ● Imgix
    ● Fastly
    ● Hayabusa
    こえのブログ
    で利用

    View full-size slide

  33. サムネイルは低
    クオリティ指定
    自動判定で
    WebP配信
    Pixel ratio指定
    /image.jpg?auto=webp
    /image.jpg?dpr=${window.devicePixelRatio}
    /image.jpg?quality=60

    View full-size slide

  34. リソースを必要なタイミングで読み込む
    Load resources when necessity.
    Perf/UX
    Checklist. 04

    View full-size slide

  35. 画像の遅延
    読み込み
    Image lazy-loading
    無駄な画像を
    リクエストしない
    Reducing unnecessary
    image requests

    View full-size slide

  36. ブラウザ標準
    遅延読み込み
    Native lazy-loading

    View full-size slide

  37. Feature
    Detection
    if ('loading' in
    HTMLImageElement.prototype) {
    // Use Native lazy-loading
    } else {
    // Use Intersection Observer (or polyfill)
    }

    View full-size slide

  38. スクリプトの遅延読み込み
    index.html
    (Entrypoint)
    voice-app.js
    (App shell)
    voice-home.js
    (Fragment)
    voice-editor.js
    (Fragment)
    <br/>import(‘’)<br/>import(‘’)<br/>Script lazy-loading<br/>

    View full-size slide

  39. Webパフォーマンスを監視
    Monitor web performance constantly.
    Perf
    Checklist. 05

    View full-size slide

  40. Start Performance Budgeting
    https://addyosmani.com/blog/performance-budgets/

    View full-size slide

  41. パフォーマンス
    バジェットは
    超えちゃいけない制限
    Performance budget is a
    limit for pages which the
    team is not allowed to
    exceed.
    Timing
    Resource
    Rule
    カスタム指標もOK
    Custom metrics are also available

    View full-size slide

  42. “Performance budgets are not just thresholds. Much like a
    financial budget, they're something consciously spent.“
    Addy Osmani
    Perf指標を財政予算に見立てて管理

    View full-size slide

  43. こえのブログ
    Perf Budget
    Perf Budget Values.
    Entrypoint HTML <= 14KB
    App Shell JS <= 120KB
    Chunk JS <= 20KB
    FCP on Fast 3G <= 1.5s
    TTI on Fast 3G <= 3s
    品質劣化をはやめに検知する
    ため、アグレッシブな設定
    Aggressive budgets to find out quality deterioration
    予算オーバーすると
    デプロイできない CI stops deployment if resource size exceeds
    the budget

    View full-size slide

  44. Off the main thread
    Perf
    Checklist. 06

    View full-size slide

  45. メインスレッド
    Main Thread
    ロングタスクは
    ユーザー操作をブロックする Long-task blocks user input

    View full-size slide

  46. Web Worker上
    のWASMで
    音声変換
    Audio transcoding by
    WASM in Web Worker
    WAV MP3

    View full-size slide

  47. Comlink
    https://github.com/GoogleChromeLabs/comlink

    View full-size slide

  48. オフラインでも利用できる
    Respond with a 200 when offline.
    UX
    Checklist. 07

    View full-size slide

  49. 回線が常にあるとは
    限らない
    Network is not always
    available.
    常にはやいと
    も限らない
    Network is not
    always fast.

    View full-size slide

  50. Service Worker
    Precache
    index.html
    Revision:adcoaeo
    voice-app.js
    Revision:4f39dn3
    logo.svg
    Revision:mfj48dj
    Revision変
    わったファイ
    ルのみ再取得
    ビルドした全アセッ
    トをプリキャッシュ
    Precaching all assets Re-fetching only
    updated scripts

    View full-size slide

  51. Workbox.routing.registerNavigationroute(
    '/index.html', {
    whitelist: [
    /^\/editor/,
    /^\/embed/,
    ...
    ]
    },
    );
    特定パスへのナビゲー
    ションリクエスト時に
    プリキャッシュした
    index.htmlを返却する Return precache HTML when navigation request
    Service Worker
    Precache

    View full-size slide

  52. オフラインでの
    録音が可能
    Offline recording is
    available.

    View full-size slide

  53. モバイルでもデスクトップでも使える
    Usable on all devices.
    UX
    Checklist. 08

    View full-size slide

  54. and more devices...

    View full-size slide

  55. メディア
    クエリ
    Media Queries
    @media screen and (min-width: 1025px) {
    :root {
    --app-header-height: 60px;
    --app-page-background-color:
    var(--clr-whitesmoke);
    --app-drawer-width: 400px;
    }
    }
    カスタムプロパティで
    全体レイアウトを一箇
    所で指定 Set layout as custom properties in root selector.

    View full-size slide

  56. レスポンシブ
    画像
    Responsive Images
    src="toshi.jpg?size=80"
    srcset="
    toshi.jpg?size=160 2x,
    toshi.jpg?size=240 3x
    "
    />

    View full-size slide

  57. Image CDN
    /image.jpg?
    width=640&
    dpr=${window.devicePixelRatio}

    View full-size slide

  58. Desktop PWA
    でも使える
    Also available as
    Desktop PWA

    View full-size slide

  59. メタデータを提供
    Provide app meta data.
    PWA
    Checklist. 09

    View full-size slide

  60. Web App
    Manifest
    {
    “name”: “こえのブログ by Ameba”,
    “description”: “「こえのブログ」は...”,
    “lang”: “ja-JP”,
    “icons”: [...],
    “background_color”: “#fff”,
    “theme_color”: “#fff”,
    “start_url”: “/?source=homescreen”,
    “scope”: “/”,
    “display”: “standalone”
    }
    iOS 12.2での対応により
    スタンドアローンで
    OAuthも利用可能に OAuth is available in standalone mode on later iOS 12.2

    View full-size slide

  61. Meta for Social
    Media.




    content="https://voice.ameba.jp/share.jpg">


    content="https://voice.ameba.jp/embed/">

    content="https://voice.ameba.jp/share.jpg">
    SNS用
    メタデータ

    View full-size slide

  62. The new evergreen Googlebot
    https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html
    SEOハックに
    さようなら
    Goodbye SEO Hacks.

    View full-size slide

  63. OSSのように開発
    Have OSS-like development style.
    checklist. DX DX
    Checklist. 10

    View full-size slide

  64. CONTRIBUTING.md

    View full-size slide

  65. CHANGELOG.md

    View full-size slide

  66. よいLGTM
    Good LGTM makes
    developers
    comfortable.

    View full-size slide

  67. LTTM (Chrome Extension)
    https://chrome.google.com/webstore/detail/lttm/jdidcgkdggndpodjbipodfefnpgjooeh

    View full-size slide

  68. Progressive Enhancement
    Checklist. 11 UX

    View full-size slide

  69. こえのブログの”投稿”
    =アメブロのプラスの投稿機能
    投稿の推奨環境を制限
    ● iPhone Safari 11.3~
    ● Android Chrome 61~
    “Posting by voice” is an additional feature of Ameblo.
    Limit browsers:

    View full-size slide

  70. ● IE11~
    ● Edge
    ● Android OS 5~
    ● iOS11~
    こえのブログの”閲覧”
    =アメブロの標準機能
    “Browsing” Koe-no-blog is a standard feature of
    Ameblo. User can experience it by followings browsers:

    View full-size slide

  71. Progressive Enhancement
    Graceful Degradation
    動作しないブラウザを起点に機能を考えない
    Don't think the feature based on the legacy browser that doesn’t work.
    Kazunari Hara

    View full-size slide

  72. {
    "builds": [
    {
    "name": "esm-bundled",
    "browserCapabilities": ["es2015","modules"],
    "js": { "minify": true },

    "bundle": true,
    "addServiceWorker": false
    }, {
    "name": "es5-bundled",
    "js": {
    "compile": "es5",
    "minify": false,
    "transformModulesToAmd": true
    },

    "bundle": true,
    "addServiceWorker": false
    }
    ]
    }
    ● ES Modules bundled file
    ● ES5 bundled file
    CDNで別の
    ファイルを配信
    Deliver another assets file by CDN.
    Method 1

    View full-size slide

  73. PASS ./build/es5-bundled/src/components/voice-app.js: 124.69KB < maxSize 140KB
    PASS ./build/esm-bundled/src/components/voice-app.js: 77.81KB < maxSize 120KB
    PASS ./build/es5-bundled/src/components/voice-embed.js: 21.49KB < maxSize 25KB
    PASS ./build/esm-bundled/src/components/voice-embed.js: 18.61KB < maxSize 20KB
    PASS ./build/es5-bundled/src/components/lazy-resources.js: 17.36KB < maxSize 20KB
    PASS ./build/esm-bundled/src/components/lazy-resources.js: 12.26KB < maxSize 15KB
    PASS ./build/es5-bundled/index.html: 9.47KB < maxSize 14KB
    PASS ./build/esm-bundled/index.html: 3.15KB < maxSize 14KB
    File size reduced: -37%
    ESModules bundle < ES5 bundle
    CDNで別の
    ファイルを配信
    Method 1
    Deliver another assets file by CDN.

    View full-size slide

  74. ● Web Share API
    ● Network Information API
    ● Intersection Observer
    ● Vibration API
    ● etc...
    Provide better experience with
    new technologies
    新しい技術を
    より良い体験に
    Web Share API Original Dialog
    Method 2

    View full-size slide

  75. ● Web Share API Only Safari,
    Android chrome
    新しい技術を
    より良い体験に
    Method 2

    View full-size slide

  76. 画像に代替テキストを設定する
    Checklist. 12 a11y, SEO
    Provide text alternatives for any non-text content.

    View full-size slide

  77. 画像の内容を伝える
    あらゆるユーザーエージェントに
    Provide content of images to various user agents.

    View full-size slide

  78. Screen reader, Google bots, etc...
    画像の内容を伝える
    あらゆるユーザーエージェントに
    Provide content of images to various useragents.

    View full-size slide

  79. 画像の”内容”を伝える
    Convey “content” of images.

    View full-size slide

  80. マイページ
    投稿する
    alt=”投稿”
    画像の”内容”を伝える
    Convey “content” of images.
    新規タブで開く

    View full-size slide

  81. 下で説明
    投稿のイメージ画像
    alt=””
    ”意味”を持たない場合
    Some images have no meaning.

    View full-size slide

  82. 文字のコントラストは4.5:1以上
    Checklist. 13 a11y
    The text has a contrast ratio of at least 4.5: 1.

    View full-size slide

  83. 閲覧の状況で見え方は違う
    How user sees it depends on the situation.
    ● 視力 Sight
    ● 色覚異常 Color blindness
    ● 外出先 Outside
    ● etc…

    View full-size slide

  84. 画像引用:
    信号機に夕日が差し込み反射すると何色かまったくわからないことがある
    https://dm2.co.jp/2015/11/shingouki.html
    Situation to view ?
    閲覧の状況?

    View full-size slide

  85. とはいえ現実はキビシイ
    But the reality is so difficult.

    View full-size slide

  86. Ameba Green: 4.26:1
    とはいえ現実はキビシイ
    But the reality is so difficult.
    Dark Green
    Green
    Light Green

    View full-size slide

  87. Too low (2.8:1)→ little higher (4.3:1)
    Use high contrast color for text
    ● Ameba Green: for logo, icon / 4.26:1
    ● Dark Green: for text / 4.66:1
    1か0かではなく、まずは向上する
    At first, we improve contrast a little more than now.

    View full-size slide

  88. 色だけで説明しない
    Checklist. 14 a11y
    Do not convey information only with visual color meaning.

    View full-size slide

  89. Which is active ?
    Before

    View full-size slide

  90. Which is active ?
    Before /
    in monochrome

    View full-size slide

  91. Which is active ? 1.08:1

    View full-size slide

  92. 色の見え方は人それぞれ
    色の違いなしに見分けられるのが良い
    → モノクロで確認する
    Make identification possible without color distinction. So, check in monochrome.
    Depending on the person, the way they see color changes.

    View full-size slide

  93. 画像引用:
    信号機に夕日が差し込み反射すると何色かまったくわからないことがある
    https://dm2.co.jp/2015/11/shingouki.html
    and situation to view
    閲覧の状況

    View full-size slide

  94. Which is active ?
    After

    View full-size slide

  95. Which is active ?
    After /
    in monochrome

    View full-size slide

  96. 要素の選択は適切に
    Checklist. 15 a11y, SEO
    Select appropriate elements according to the specification.

    View full-size slide

  97. クロちゃんのブログ
    クロちゃんのブログ
    Machine Readability
    Bot, Screen Reader, RSS, SNS medias, ...

    View full-size slide

  98. ,
    ● Keyboard accessible
    ● Visible focus
    「らしさ」を再実装しない
    Do not redevelopment it’s “likeness”.

    ● nothing

    View full-size slide

  99. キー操作だけで利用できる
    Checklist. 16 a11y
    Make all functionality available from keyboard.

    View full-size slide

  100. まだ見ぬ未来のデバイス、ちょっと変わったUI
    キー操作できる
    If it can be operated with the keyboard,

    色々なデバイスで操作できる
    it can be operated with various devices

    View full-size slide

  101.             ちょっと変わったUI
    Slightly odd UI component

    View full-size slide

  102. 操作対象が移る場合、特に注意
    Be especially careful when the operation target changes.
    Example 1

    View full-size slide

  103. Accessible Samples
    WAI-ARIA Authoring Practices 1.1
    https://www.w3.org/TR/wai-aria-practices

    View full-size slide

  104. page navigation
    on SPA
    Example 2

    View full-size slide

  105. if (prevPage && prevPage !== currentPage) {
    const title = `${title} | ${siteName}`;
    const announcer =
    document.getElementById('js-announcer');
    window.document.title = title;
    if (announcer) {
    announcer.innerHTML = documentTitle;
    }
    document.body.focus();
    }




    Move focus,
    Read title
    Example 2

    View full-size slide

  106. Move focus,
    Read title
    Example 2

    View full-size slide

  107. フォーカスを可視化する
    Checklist. 17 a11y, UX
    Visualize keyboard focus
    indicator.

    View full-size slide

  108. focusは
    何を操作するか
    The focus indicates what to
    operate.

    View full-size slide

  109. a, button {
    outline: none;
    }
    focusを
    可視化する
    Visualize the focus style.

    View full-size slide

  110. focusを
    可視化する
    a, button {
    outline: none;
    }
    Visualize the focus style.

    View full-size slide

  111. .drawer-list > a {
    color: var(--app-dark-text-color);
    font-size: 1.4rem;
    -webkit-tap-highlight-color:
    var(--app-focus-background-color);
    outline: none;
    text-decoration: none;
    }
    .drawer-list > a:focus {
    background-color:
    var(--app-focus-background-color);
    }
    スタイル適用
    → 標準スタイル削除
    Apply your own focus style and then
    remove the default style.

    View full-size slide

  112. .drawer-list > a {
    color: var(--app-dark-text-color);
    font-size: 1.4rem;
    -webkit-tap-highlight-color:
    var(--app-focus-background-color);
    outline: none;
    text-decoration: none;
    }
    .drawer-list > a:focus {
    background-color:
    var(--app-focus-background-color);
    }
    スタイル適用
    → 標準スタイル削除
    Apply your own focus style and then
    remove the default style.

    View full-size slide

  113. スクロール位置を復元
    Checklist. 18 UX
    Restore scroll position when returning to the page.

    View full-size slide

  114. 非同期コンテンツでは
    うまくいかない?
    Can't restore scroll position with
    asynchronous rendering?

    View full-size slide

  115. janpaul123/delayed-scroll-restoration-polyfill

    View full-size slide

  116. if (isChrome) {
    if ('scrollRestoration' in window.history) {
    // ブラウザの復元処理を使わない
    window.history.scrollRestoration = 'manual';
    }
    var scriptEl = document.createElement('script');
    scriptEl.setAttribute('src',
    'node_modules/delayed-scroll-restoration-polyfill/
    index.js');
    scriptEl.setAttribute('defer', 'defer');
    document.body.appendChild(scriptEl);
    }
    基本は
    ブラウザ任せ
    Use browser's standard
    process.

    View full-size slide

  117. if (isChrome) {
    if ('scrollRestoration' in window.history) {
    // ブラウザの復元処理を使わない
    window.history.scrollRestoration = 'manual';
    }
    var scriptEl = document.createElement('script');
    scriptEl.setAttribute('src',
    'node_modules/delayed-scroll-restoration-polyfill/
    index.js');
    scriptEl.setAttribute('defer', 'defer');
    document.body.appendChild(scriptEl);
    }
    マニュアル
    操作にする
    Use manual operation if
    possible.

    View full-size slide

  118. 修正・削除ができる
    Checklist. 19 UX, a11y
    Can be edited and deleted.

    View full-size slide

  119. 人間は間違える生き物
    UIも最適じゃないかもしれない
    完璧よりも、ミスを許容できることが重要
    Human beings make mistakes.
    It’s important to be able to fix mistakes.

    View full-size slide

  120. ● 重要なデータはindexedDBへ保存
    ● ブラウザバック時に保存を提示
    記事更新時に保存→提示
    Save to indexdDB every time important data is updated,
    and restore it at the required timing.

    View full-size slide

  121. 継続的なモニタリング
    Checklist. 20 UX, Perf
    Reduce monitoring cost by automation.

    View full-size slide

  122. System
    Configuration
    GCS
    /api/*
    /assets/*
    PURGE

    View full-size slide

  123. Datadog
    https://app.datadoghq.com/

    View full-size slide

  124. Stackdriver
    https://cloud.google.com/stackdriver/

    View full-size slide

  125. System
    Configuration
    Error
    GCS
    /api/*
    /assets/*
    PURGE

    View full-size slide

  126. Alert to Slack

    View full-size slide

  127. Sentry
    https://sentry.io/

    View full-size slide

  128. Speedcurve
    https://speedcurve.com/

    View full-size slide

  129. Firebase Performance Monitoring
    https://firebase.google.com/docs/perf-mon/
    Trying out firebase

    View full-size slide

  130. GCS
    /api/*
    /assets/*
    PURGE
    社内
    ログシステム
    System
    Configuration
    投稿監視
    チーム
    DELETE
    PATCH
    Error
    pub/sub
    Error Error

    View full-size slide

  131. Good Night
    However, until you hear an alert

    View full-size slide

  132. no genre title
    13 a11y 文字のコントラストは4.5:1以上
    14 a11y 色だけで説明しない
    15 a11y 要素の選択は適切に
    16 a11y キー操作だけで利用できる
    17 a11y,UX フォーカスを可視化する
    18 UX スクロール位置を復元
    19 UX,a11y 修正・削除ができる
    20 UX 継続的なモニタリング
    21 UX ストレスのない遷移とローディング
    22 UX レイアウトを固定する
    23 a11y,UX 突然音を出さない
    24 Security セキュリティ監査する
    no genre title
    1 UX 適切なレンダリングパターンを選択
    2 Perf 安定したサーバレスポンス
    3 Perf 圧縮したメディアフォーマットを利用
    4 Perf,UX リソースを必要なタイミングで読み込む
    5 Perf Webパフォーマンスを監視
    6 UX Off the main thread
    7 UX オフラインでも利用できる
    8 UX モバイルでもデスクトップでも使える
    9 PWA メタデータを提供
    10 DX OSSのように開発
    11 UX Progressive Enhancement
    12 a11y,SEO 画像に代替テキストを設定する
    Web App Checklist
    http://bit.ly/web_app_checklist

    View full-size slide

  133. ● アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
    https://developers.cyberagent.co.jp/blog/archives/20506/
    ● アクセシブルなブログ開発、 その後どうなったの
    https://www.slideshare.net/MarinaToki/ss-135424096
    ● こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA - Speaker Deck
    https://speakerdeck.com/herablog/koe-no-blog-pwa
    ● こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4
    https://speakerdeck.com/herablog/pwa-night-vol-dot-4
    Related Slides

    View full-size slide

  134. AMA B-4
    Thank you!
    https://app2.sli.do/event/ppjicyvn/live/questions

    View full-size slide