Muddy Web Podcast

#3 レガシーブラウザは IE だけじゃない！？ABEMA 試合データ機能で培った WebView 開発ノウハウ

Listen Later

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
            • View all episodesView all episodes
            Download on the App Store
            Muddy Web PodcastBy Muddy Web