開発から運用まで Muddy に向き合う ABEMA における LP CMS 開発

ABEMA の番組・キャンペーン・コンテンツまとめをお伝えするための LP CMS 開発を行いました。
SSR など SEO 要件から WebView で各ネイティブアプリに展開するためのブラウザサポート対応、ネイティブアプリのバージョン互換性を考えた実装などさまざまな要件がありました。
また、運用の際には運用者からの問い合わせ対応の解決や管理画面でカバーしきれなかった部分の運用カバーなどさまざまなサポートが発生します。
これらにいかに Muddy に向き合ったかをお話します。Muddy な Tips のおもしろさだけでなく、パフォーマンス最適化、アクセシビリティを意識したキーカラーの色調整など広い範囲の Web の事例を伝える機会にできればと思っています。

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 開発から運用まで Muddy に向き合う ABEMA における LP CMS 開発 2023 December 12th Muddy Web #7 Ryuichi Sakagami / Shagamii
2. AbemaTV, Inc. All Rights Reserved
 Ryuichi Sakagami / Shagamii • 2020 年度新卒入社
 • 株式会社 AbemaTV Web Browser チーム
 • 「事業成果のためならなんでもやるエンジニア」
 • 今回発表するプロジェクトでは PM 兼任 エンジニア
 として要件・仕様の整理からプロジェクト進行も含め担当
 • X: @RyuichiSakagami
 • GitHub: @Shagamii
 2 Profile
3. AbemaTV, Inc. All Rights Reserved
 3 1. 今回の Muddy なプロジェクト 2. Muddy ① 幅広いサポート範囲への対応 3. Muddy ② a11y を考慮したキーカラーの色調整 4. Muddy ③ HeadlessCMS のリソース最適化 5. Muddy ④ 運用で価値を出すための取り組み INDEX
4. AbemaTV, Inc. All Rights Reserved
 今回の Muddy なプロジェクト 4
5. AbemaTV, Inc. All Rights Reserved
 LP CMS 化プロジェクトの機能 5 • HeadlessCMS ( microCMS ) にコンテンツを入稿 • モジュールを選択し、順に積み上げていく • ７月末リリース • 12月12日現在で 130 本以上公開
6. AbemaTV, Inc. All Rights Reserved
 LP を CMS で作成する LP 配信ドメインを abema.tv にする LP CMS 化プロジェクトの要件 6 • 既存の LP では別ドメインで 配信されていた • 以降 LP を abema.tv で配信する ことによって SEO を強化する • LP が必要になるたびにクリエイティブチーム が都度作成していた • 社内のクリエイティブチームで全て担当する ケースと場合によっては外注する場合もあっ た • 予算や期間の都合で作成できない場合も あった • CMS で作成することで運用・開発コストを削 減する
7. AbemaTV, Inc. All Rights Reserved
 Web ページの取得まで LP CMSの構成 7 • Preact による SSG ( PESPA ) • ビルドしたリソースを GCS に保存 • Fastly 経由で取得 • 画像リソースは ABEMA の画像配信基盤 ( Cloudflare ) を経由して取得 GET: https://abema.tv/lp/xxx GCS へプロキシ 画像配信基盤 ( Cloudflare ) 画像リクエスト Fastly Cloud Storage
8. AbemaTV, Inc. All Rights Reserved
 コンテンツ更新からビルドまで LP CMSの構成 8 • microCMS の更新・削除の Webhook による Github Actions 上 の単体ビルド ◦ コンテンツ更新後は Fastly キャッシュをパージ • コードベースの更新による Github Actions 上の全件ビルド ◦ ６分間のキャッシュ期限に任せる ◦ コンテンツは更新されていないので即座に反映させる必 要はない • GCS にデプロイ コンテンツビルド・削除処理 Cloud Storage 更新・削除通知（ Webhook） ソースコードのデプロイ コンテンツ全件ビルド 更新 更新・削除 Fastly パージ
9. AbemaTV, Inc. All Rights Reserved
 プロジェクト概要を踏まえて Muddy なお話し ここまでは Clean ( ? ) なお話し 9 • システムの構成自体は特別なことはない • LP 特有の要件やシステムの運用までをフォローすることによる様々な課題 • １つ１つにどういったアプローチを向き合ったかの Tips
10. AbemaTV, Inc. All Rights Reserved
 Muddy ① 幅広いサポート範囲への対応 10
11. AbemaTV, Inc. All Rights Reserved
 基づく設計 当初認識していた要件 幅広いサポート範囲への対応 11 • SEO へのモチベーションが高い ◦ SSR 対応 ( コンテンツを含ん だ HTML を返却) • 既存の abema.tv と同一の機構・ コードベースで開発 ◦ Node.js サーバーにて SSR
12. AbemaTV, Inc. All Rights Reserved
 幅広いサポート範囲への対応 12 見逃していた WebView 対応 • 一般的なブラウザと WebView のブラウザの サポート範囲が異なる ◦ Webアプリはブラウザのバージョンベースのサ ポート範囲 ◦ iOS・Android は OS のバージョンベースのサ ポート範囲 • WebView でも使える → iOS・Android のサ ポート範囲を満たす ◦ iOS 13.x / Android 5.x （ 開発当時 ） ◦ iOS Safari 13.x / Chrome v37 今開発してる新しい LP っ てサービス内部に導線を 置くことも想定しているよ ね？ はい！ アプリの WebView でも 使えるね！
13. AbemaTV, Inc. All Rights Reserved
 幅広いサポート範囲への対応 13 過去の事例を踏まえた WebView サポート • 試合データ機能も WebView 対応 ( abema-webview ) ◦ WebView 対応する際の開発環境やビルド設定を共有する設計 ▪ .browserslistrc などサポート環境の設定 ▪ サポート範囲に応じた言語機能を使うための Lint 設定 • https://github.com/3846masa/stylelint-browser-compat ▪ サポート範囲に応じた VRT ・単体テスト環境等 ◦ #3 レガシーブラウザは IE だけじゃない！？ABEMA 試合データ機能で培った WebView 開発ノウハウ
14. AbemaTV, Inc. All Rights Reserved
 幅広いサポート範囲への対応 14 CSR のみの WebView 環境の SSR 対応 • SSR 対応 ( コンテンツを含んだ HTML を返却) をどうするか ◦ abema-webview では CSR の実装されていた ◦ 既存実装を流用できる設計コストの低さ から SSR 用の Node.js サーバーを 立てることも検討 ▪ サーバーの監視など運用コストが増加することから選択肢から外した ◦ パーソナライズや動的更新の要件はなかったこともあり SSG の方針で決定
15. AbemaTV, Inc. All Rights Reserved
 幅広いサポート範囲への対応 15 管理画面で設定したキーカラーを各モジュールで参照する • CSS custom properties `--key-color` を使うことでアプリケーション 全体で共通のキーカラーを参照するにしたい • PostCSS を使っているため CSS custom properties が最も相性が よい • CSS をビルドする時点では `--key-color` 決定されていない ◦ 既存の WebView ではビルド時に CSS custom properties を実数に置き換える想定 • CSS custom properties をブラウザ上で使う必要性
16. AbemaTV, Inc. All Rights Reserved
 幅広いサポート範囲への対応 16 CSS custom properties に対応していない環境でのキーカラー対応 • CSS custom properties の対応 Chrome バージョン v49 > v37 😇 • Chrome v49 未満で柔軟にキーカラーを設定することを諦める ◦ Progressive Enhancement ( MDN ) • `--default-key-color` を固定値にする ◦ CSS ビルド時に `--default-key-color` は置き換えられる ◦ `--key-color` で上書きする ▪ v49 以上であれば上書き、未満は `--default-key-color` のまま https://caniuse.com/css-variables
17. AbemaTV, Inc. All Rights Reserved
 Muddy ② a11y を考慮した キーカラーの色調整 17
18. AbemaTV, Inc. All Rights Reserved
 キーカラーの a11y を開発側で担保する a11y を考慮したキーカラー 18 • キーカラーは自由に設定できるが、運用者が a11y のコントラスト比を意識しながら設定す るのは難しい • 入稿時に計算することを促すとしてもコストになり、機能しない可能性 • 開発側で入稿されたキーカラーを a11y が担保される配色に置き換えて担保する方針 ◦ 試合データ機能でチームカラーを調整した知見があり、デザイナーも比較的自由 度が高い色入稿の際の色調整による a11y の担保するモチベーションがある状 態 ◦ #ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 コントラスト比が低いキーカラーの例
19. AbemaTV, Inc. All Rights Reserved
 キーカラーの調整ロジック a11y を考慮したキーカラー 19 • #ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 ◦ ２つの色を同化させないためには 3:1 程度の輝度の差を作る ◦ 試合データ同様 CIE LCh 色空間で色調整 ▪ 3:1 程度の輝度 • 白：輝度 L = 60 程度 • 黒：輝度 L = 40 程度 ▪ 青系統の色が紫っぽくなるため彩度 Cを 1.3 倍 • 実装ロジック ◦ テーマカラーが白の時 ： L < 60, c * 1.3 ◦ テーマカラーが黒の時 ： L > 40, c * 1.3 Before After
20. AbemaTV, Inc. All Rights Reserved
 タイトルをグラデーションにする色調整 a11y を考慮したキーカラー 20 • CSS の実装 ◦ background-clip: text / text-fill-color: transparent • キーカラーの色調整で扱った CIE LCh 色空間をもとに調整 ◦ 色相 h を調整 ◦ デザイナーと調整し、h = 20° ずらす ▪ 25 % ずつの５ポイントでグラデーションを計算 ◦ 彩度 C が低いと色相を変えても色味が変わらない ▪ 彩度 C > 5 となるように調整 https://luncheon.github.io/lch-color-wheel/ 彩度が低い場合 LCh 色空間の色相 h = 10 h = 20 h = 30 h = 180
21. AbemaTV, Inc. All Rights Reserved
 Muddy ③ HeadlessCMS のリソース最適化 21
22. AbemaTV, Inc. All Rights Reserved
 HeadlessCMS へのリクエストの最適化 HeadlessCMS のリソース最適化 22 • microCMS はプランごとに決められた転送量を超えると転送量の従量課金 • 想定していた Business 以上のプランでは 1TB まで定額 • 既存の LP の流入数から計算した１ヶ月単位の転送量 2TB 弱 ◦ より LP が作成されることが予想される • API リクエストは SSG の際にレスポンスを埋め込むためクライアントからは発生しない ◦ ビルド回数に依存する ◦ JSON なのでリソースサイズとしても特に懸念はない
23. AbemaTV, Inc. All Rights Reserved
 HeadlessCMS への画像リクエストの最適化 HeadlessCMS のリソース最適化 23 • ABEMA の画像配信基盤でプロキシ ◦ Monorepo for Cloudflare Workers ◦ microCMS の画像を Cloudflare でキャッシュする ◦ 画像配信基盤の特定のパスへのリクエストを microCMS へ転送する ◦ SSG の際に microCMS のドメインを画像配信基盤のドメインへと置き換える ▪ JSON.stringify の第２引数であるオブジェクトの key, value を受け取り整形することができる replacer 関数を利用 • MDN JSON/stringify#replacer • 利用規約としての問題はない • 月の転送量 30GB / 月 程度
24. AbemaTV, Inc. All Rights Reserved
 Muddy ④ 運用で価値を出すための取り組み 24
25. AbemaTV, Inc. All Rights Reserved
 画像の代替テキストのレギュレーション整備 運用で価値を出すための取り組み 25 • 画像の代替テキストは運用者が設定 • トーナメント表や料金表などページの重要情報を画像で表現する ユースケースが想定される ◦ ページにとって重要な情報が欠損する可能性 • 運用者が理解できる、運用可能な代替テキストのレギュレーション ◦ 運用するチーム・デザインを監修するチームとすり合わせ ◦ よくあるパターンと転用しやすい具体例を明記 ▪ 番組サムネイル / イラストなどで情報を伝える • 代替テキストはビジュアルで分からないのでレビューに組み込みづらいところが課題
26. AbemaTV, Inc. All Rights Reserved
 対応している画像形式のみ公開する対応 運用で価値を出すための取り組み 26 • WebP / AVIF のそれぞれにサポートしていないサポート環境が存在する ◦ WebP：iOS Safari 13.x 未サポート ◦ AVIF：Edge 未サポート / Crome v84 未サポート … • microCMS の画像 API ( imgix ) が AVIF から他の画像に変換されない ◦ 運用者は Chrome を使うことが多いので abema.tv で使われている画像を保存すると AVIF になることが多い • JPG / PNG をアップロードしてもらい、 JPG に変換する方針 • microCMS で拡張子を限定したアップロード機能がない ( 2023/12/11 現在 ) • 開発環境では画像の拡張子が JPG / PNG 以外であればそのことを伝える画像を表示 😇 ◦ JSON.stringify するタイミングでチェック
27. AbemaTV, Inc. All Rights Reserved
 まとめ 27
28. AbemaTV, Inc. All Rights Reserved
 Muddy Topic まとめ 28 • 幅広いサポート範囲への対応 ◦ 幅広いサポート範囲への設定 ◦ 古い環境へ対応しながら新しい環境へ最大限の機能提供 • a11y を考慮したキーカラーの色調整 ◦ 自由度の高い色入稿を踏まえた色調整 ◦ CIE LCh 色空間におけるグラデーション調整 • HeadlessCMS のリソース最適化 ◦ HeadlessCMS の画像リクエストの最適化 • 運用で価値を出すための取り組み ◦ 代替テキストのレギュレーション整備 ◦ 既存システムで担保できない部分へのアプローチ
29. AbemaTV, Inc. All Rights Reserved