こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA

こえのブログでのPWA ~ 開発現場編 ~ / Koe-No-Blog PWA

Frontrend × Bonfire Frontend (https://frontrend.connpass.com/event/124995/) での発表資料です。

「こえのブログ」はアメブロに追加された音声配信機能です。新機能開発における技術選定、開発フローやドキュメント作成など「開発現場」に焦点を当ててお話します。

関連ブログ: https://developers.cyberagent.co.jp/blog/archives/20506/

2e0e89a34badf79dcff642cb7b5c126f?s=128

Kazunari Hara

April 16, 2019
Tweet

Transcript

  1. こえのブログでのPWA ~ 開発現場編 ~ 2019年4月15日 @Abema Towers Kazunari Hara

  2. ようこそ Abema Towersへ

  3. 原 一成 Hara Kazunari Web Developer @herablog

  4. 新卒12年目

  5. 新卒12年目

  6. 2008 HTML CSS

  7. 2010 JavaScript 2011 Node.js 2016 React, Redux, DevOps 2018 CDN

    HTML5 Web Applicationの つくりかた https://ameblo.jp/ca-1pixel/entry-1100959 8050.html アメブロ2016 ~ React/Reduxでつ くるIsomorphic web app ~ https://developers.cyberagent.co.jp/blog/archives/ 636/ Optimized Server-Side Web Application In 2018 https://developers.cyberagent.co.jp/blog/archi ves/16818/ Amebaプラットフォームの 作りかた https://www.slideshare.net/herablog/ameba-2 2035207
  8. 2019 HTML / CSS JavaScript Node.js Opts / Infra CDN

    and PWA
  9. 喋るだけで ブログになる

  10. Demo: https://voice.ameba.jp/embed/kuroaroma-day/7q9eG1SVdlZrgUCtCUDl

  11. なぜ今、音声投稿なのか モバイル テキスト +α

  12. スマホの個人利用率 (30代, 2016) 90.4% http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html

  13. データ消費量は増加 (一人, 月間) 約5倍 http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html

  14. 本人の”声”でコンテンツ価値向上 https://voice.ameba.jp/emb ed/kobayashi-maya/rxxqHm 6s4iAqYRP4mjK5 https://voice.ameba.jp/e mbed/kose-sports/eaxzb 5mP6vMlw3FWpqX9 https://voice.ameba.jp/e mbed/toshl-official/9nzC7 iAFn6IDKHPerj6P

  15. なぜWebアプリなのか クロスプラットフォーム 小さくリリースできる ブラウザ機能の充実

  16. ネイティブアプリ のように動く

  17. CSRで高速な アプリを目指す

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

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

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

  21. Rendering on the Web: https://developers.google.com/web/updates/2019/02/rendering-on-the-web Network JS GET / render

    GET /bundle.js FCP TTI
  22. Network JS GET / render TTI FCP GET /bundle.js

  23. Network JS GET / TTI GET /lazy.js GET /bundle.js FCP

    render
  24. Network JS GET / FCP TTI GET /bundle.js GET /lazy.js

    render
  25. PRPL Pattern (Push, Render, Pre-cache, Lazy load) CDN

  26. None
  27. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell

    Lazy Load Fragment PRPL Pattern <script type=”module”> await import(); await import(); await import();
  28. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell

    Lazy Load Fragment (P) HTTP/2 Server Push
  29. index.html voice-app.js voice-editor.js voice-home.js lazy-resources.js shared dependencies Entrypoint App Shell

    Lazy Load (P) Pre-cache with Service Worker
  30. ブラウザ機能対応率 (こえのブログへのアクセスから, WebViewは除く) Service Worker 84.9% Static Import 88.9%

  31. https://www.fastly.com/blog/optimizing-http2-server-push-fastly “Fastly’s server push mechanism won’t push the same resource

    twice over the same h2 connection”
  32. Origin Servers Client DB CDN Edge CDN Edge CDN Edge

    CDN活用 計算量が多い
  33. Origin Servers Client DB CDN Edge CDN Edge CDN Edge

  34. できるだけ長く CDNキャッシュ する

  35. Web Components with LitElement CSRのWebアプリ モバイルター ゲット コンポーネント Web標準 Web

    Components
  36. コンポーネント指向での開発 記述内容の影響が絞られている事 による 「捨てやすさ > 再利用性」

  37. コンポーネント指向での開発 <voice-app> <voice-header> <button type=”button”> メニューを開く</button> </voice-header> <voice-mic recording> </voice-mic>

    </voice-app> class VoiceMic extends LitElement { render() { const label = this.recording ? ‘停止する’ : ‘開始する’; } } class VoiceHeader extends LitElement { render() { return html` <slot></slot> `; } }
  38. :host { --mic-size: var(--voice-mic-size, 72px); } .mic { height: var(--mic-size);

    } .icon { … } font-family: sans-serif; <voice-mic> <voice-editor> voice-mic { --voice-mic-size: 100px; } Custom Property Cascading Scoped
  39. https://www.webcomponents.org/

  40. 166 KB (gzip, style込み)

  41. Lighthouseでhttps://voice.ameba.jp/をMobile、Simulated Fast 3G、4x CPU Slowdown、ローカル環境で測定しました。

  42. WebでAudio Recording?

  43. ブラウザの マイクを利用 navigator.mediaDevices .getUserMedia({ audio: { autoGainControl: false, channelCount: 1,

    echoCancellation: true, noiseSuppression: true, }, }) .then((stream) => { // use the stream }) .catch((err) => { // NotAllowedError or // NotFoundError });
  44. マイクパー ミッション を取得 const installMicPermissionWatcher = async callback => {

    const permissionStatus = await navigator.permissions .query({ name: 'microphone' }); // granted or prompt or denied callback(permissionStatus.state); permissionStatus .addEventListener('change', () => callback(permissionStatus.state) ); };
  45. マイクパー ミッション を取得

  46. 音声を圧縮 WAV MP3

  47. https://github.com/Kagami/vmsg Kagami/vmsg

  48. https://developers.cyberagent.co.jp/blog/archives/20506/ 詳細は・・・ CDN/PWA/Speech Recognition/WASM/Web Components/Service Worker/Performance Budget etc...

  49. 開発フロー

  50. デザイン 実装 仕様 餅つき開発 細かい粒度でプルリクエスト 違ったら直せばいい 早い共通化より捨てやすい構造にする

  51. None
  52. 餅つきの結果 1,000コミット超え

  53. 最速で プロトタイプ 改善サイクルを回せ、品質が向上する 無駄になることを恐れない Firebaseをフル活用

  54. 2.5ヶ月 HTML + Pure JS Component すぐ

  55. 2.5ヶ月 HTML + Pure JS Component すぐ

  56. アクセシビリティ も標準対応 最初から対応するほうが簡単 ガイドラインにのっとり開発 https://openameba.github.io/a11y-guidelines/

  57. None
  58. None
  59. https://www.slideshare.net/MarinaToki/ss-135424096 詳細はスライ ドで

  60. デプロイ 心理的安全性 簡単にデプロイできることは、 プロダクト改善に役立つ サーバレス利用でめったに失敗しない

  61. デプロイ 心理的安全性 932デプロイ

  62. Perf Budget システム性能は時間とともに劣化す るもの 財政予算に見立てて、システム指標 を管理していく TTI Budget

  63. Budgetの種類 (例) Timing: FCP、TTI、SpeedIndexなど Resource: ファイルサイズ、リクエスト数など Original: Time to Tweet

  64. Budgetの決め方 (こえのブログの例) 1. 計測するページを決め、計測する 2. 競合を定義し、計測する 3. 最速だったので、競合より20%早い値を算出 4. それでも現状のが早かったので現状を維持す

    るBudgetを設定 (劣化を早い段階で防ぐ)
  65. FCP: 1.8s -> 1.5s (Updated) TTI: 4s -> 3s (Updated)

    App shell JS size: 120KB Chunk JS size: 20KB
  66. https://github.com/siddharthkp/bundlesize siddharthkp/bundlesize https://github.com/siddharthkp/bundlesize Front-End Performance Checklist 2019 https://twitter.com/katiehempenius/status/107547 8356311924737 Example

    of how perf budgets change by network connection
  67. None
  68. OSSのように 開発する 数カ月後の自分は他人・・・ 「共通言語」でいつでも開発者が 参加できる