Description

ABEMA の「試合データ」機能をアプリ内 WebView で動かすために行った WebView の内部環境の調査方法や、品質を担保するために整えた開発基盤などについて話しました。

トークテーマ

• 試合データ機能を WebView で提供することになった経緯
• 既存のアプリサポート範囲をカバーできる WebView ブラウザバージョンの調査
• レガシーブラウザで動作しない実装を弾く Linter を自作
• Storybook / Visual Regression Testing をレガシーブラウザで動かす環境を Docker 上に構築
• Node.js 上でもブラウザ上でも同じ単体テストを動かせる仕組み
• モダンブラウザには JavaScript を最適化して出しわけ

参考リンク

• fireos-archive/fireos-archive: https://github.com/fireos-archive/fireos-archive
• #ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 | CyberAgent Developers Blog: https://developers.cyberagent.co.jp/blog/archives/38640/
• amilajack/eslint-plugin-compat: https://github.com/amilajack/eslint-plugin-compat
• 3846masa/stylelint-browser-compat: https://github.com/3846masa/stylelint-browser-compat
• mdn/browser-compat-data: https://github.com/mdn/browser-compat-data
• Deploying ES2015+ Code in Production Today — Philip Walton: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/
• 3846masa/babel-plugin-polyfill-custom: https://github.com/3846masa/babel-plugin-polyfill-custom

音声書き起こし

https://github.com/CyberAgent/muddy-web/tree/main/podcast/%233

※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。

ファシリテーター

• 株式会社シロク 石井 勇生 (@YukiIshii10)

ゲスト

• 株式会社AbemaTV 宮代 理弘 (@3846masa)

コンポーザー

• @kirillovlov