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

TVer Web-based TVのリアーキテクチャ

TVer Web-based TVのリアーキテクチャ

TV 車載ブラウザを支える技術 - サブカル業界Developers#12 の登壇資料
https://subculturedev.connpass.com/event/388224/

Avatar for TVer Inc.

TVer Inc. PRO

April 01, 2026
Tweet

More Decks by TVer Inc.

Other Decks in Programming

Transcript

  1. ©2026 TVer INC.     TVer Web-based TV のリアーキテクチャ TV・車載ブラウザを支える技術

    - サブカル業界 Developers #12 永井洸気 株式会社TVer サービスプロダクト本部 フロントエンド開発部
  2. ©2026 TVer INC. 2 自己紹介 永井 洸気 株式会社TVer サービスプロダクト本部 /

    フロントエンド開発部 • 2024年3月にWebフロントエンジニアとしてTVerに入社 • Web-based TVの開発を行なっている • 趣味は、筋トレ、テニス、プロ野球(阪神タイガース) • フロントエンドに関するテストの本を今年出版します • X(@0906koki)
  3. ©2026 TVer INC. 4 TVerの紹介 01 02 03 見逃し配信だけでなく、地上波放送のリアルタイム配信も開始! 好きな環境で

    楽しめる! 番組放送終了から 約7日間見放題! リアルタイム配信 パソコン スマートフォン アプリ テレビアプリ タブレットアプリ すべて 無料 ※番組終了から配信までは、時間がかかることがあります ログインすれば 追っかけ再生 も!
  4. ©2026 TVer INC. 7 本日話すこと 01 Web-based TV と TVer

    02 現行アプリの課題 03 リアーキテクチャの内容 04 Web-based TVのフォーカス管理
  5. ©2026 TVer INC. 9 • HTML5 /CSS /JavaScript などの Web

    技術をTVア プリの主要実行基盤として使うテレビのこと • 各テレビメーカーごとに、搭載されているOS、 Webエンジンは異なるが、多いのはLinuxOSベース でChromium ◦ HisenseがVIDAA OS(Linuxベース)でChromium ◦ LGがWebOS(Linuxベース)で、Chromium • 代表的な端末は、REGZA、LG、Hisense、VIERA、 PS5など Web-based TVとは
  6. ©2026 TVer INC. • Hybridcast mentions the following three points

    especially as characteristics for web applications on TV that are different from applications on smartphones and tablet computers. • • Pointing device • Users expect that they can control TVs with traditional remote controllers, even though there are emerging remote-less technologies such as voice control. • Also, the use of pointing devices for PCs, such as a mouse or trackball, that indicates the specified positions on the display needs to be considered. • 10 feet UI • In general, TV is designed to be operated remotely unlike smartphones and tablet computers. The size and number of characters displayed need to be considered to be visible and readable from a distance. • Application implementation according to the temporal progress of the image sound • The application control information that manages the activation and termination of applications needs to be implemented according to change of programs and/or the temporal progress of audio-visual signals sent through broadcasting. • Switching web applications while continuously presenting broadcasting video content is not considered in W3C recommendations but needs to be considered. W3Cのハンドブックには以下のように記載されている 10 Web-based TVの特徴
  7. ©2026 TVer INC. • Hybridcast mentions the following three points

    especially as characteristics for web applications on TV that are different from applications on smartphones and tablet computers. • • Pointing device • Users expect that they can control TVs with traditional remote controllers, even though there are emerging remote-less technologies such as voice control. • Also, the use of pointing devices for PCs, such as a mouse or trackball, that indicates the specified positions on the display needs to be considered. • 10 feet UI • In general, TV is designed to be operated remotely unlike smartphones and tablet computers. The size and number of characters displayed need to be considered to be visible and readable from a distance. • Application implementation according to the temporal progress of the image sound • The application control information that manages the activation and termination of applications needs to be implemented according to change of programs and/or the temporal progress of audio-visual signals sent through broadcasting. • Switching web applications while continuously presenting broadcasting video content is not considered in W3C recommendations but needs to be considered. 11 Web-based TVの特徴 テレビはスマートフォンと異なり、離れた場所から操 作されることを前提に設計される。表示される文字の サイズや文字数は、離れた距離から見えること・読め ることを考慮する必要がある。 アプリケーションの起動と終了を管理するアプリケー ション制御情報は、番組の切り替えや、放送を通じて送 出される映像音声信号の時間的進行に応じて実装される 必要がある。 W3Cのハンドブックには以下のように記載されている ユーザーは従来型のリモコンでテレビを操作できること を期待している。また、マウスやトラックボールといっ たPC向けポインティングデバイス操作についても考慮 する必要がある。
  8. ©2026 TVer INC. 12 Web-based TVの特徴 • テレビは一般的に買い換えスパンが長く、10年前のテレビを利用しているユーザーも沢山い る。そうした古い端末は低スペックであり、レンダリングエンジンのバージョンも古いこ とが多い。そうしたユーザーにも快適なUXを提供するための対応がサービス提供者として

    は必要 ◦ e.g. 2023年以前のVIERAはChromiumバージョンが51系で、JavaScript Heap、ローカル ストレージの制限があったりする • メーカーごとで若干の処理や仕様の差異があり、個別対応が必要 • フォーカス管理がUXの肝であるが、Web標準APIや体系化されたUXガイドラインはない。 そのため、独自でフォーカス管理のロジックを組む必要がある
  9. ©2026 TVer INC. 13 WebOS (LG) を例に、Web-based TVの内部アーキテクチャ (https://webostv.developer.lge.com/discover) •

    Linux上にChromiumベースのWebエンジン を組み込み、HTML/CSS/JSで書かれた Webアプリをテレビ上でネイティブ同様に 実行する • System Bus(Luna Bus)を介してメディア 再生・通知・デバイス制御などのOSサービ スを呼び出す。製品版のwebOS TVではこ れに加えDRM・放送チューナー制御・LG独 自サービスなどのレイヤーが追加されてい る
  10. ©2026 TVer INC. 14 TVer と Web-based TV • VIERA

    : 2019年以降発売の4Kビエラから対応開 始。現在は2017年モデル以降が推奨環境 • REGZA : 22年に対応して、23年に18年〜21年モデ ルに対応 • Hisense : 2023年から一部モデル対応を開始。2022 年モデル以降が推奨 • LG : 2023年モデルから対応開始、その後2020〜 2022年モデルにも順次対応。2020年モデル以降が 推奨 • PS5 : 2025年9月に対応開始 https://tver.co.jp/news/20250912-01.html
  11. ©2026 TVer INC. 16 現行アプリの技術スタック • BFFサーバー: Node.js + Express

    • テンプレートエンジン : EJS • クライアント : TypeScript + Webpack + SCSS
  12. ©2026 TVer INC. 17 現行アプリの技術スタック • BFFサーバー: Node.js + Express

    • テンプレートエンジン : EJS • クライアント : TypeScript + Webpack + SCSS • Node.js サーバーでAPIフェッチ, レンダ リングを実行し、クライアントに返すよ くあるSSR方式の構成 • クライアント側は特にフレームワークは 使わず、素のTypeScriptで実装
  13. ©2026 TVer INC. 19 現行アプリの課題 • 全体的に画面遷移ごとのロードは遅く、競合サービスと比較しても劣後 している • フォーカス移動のカクツキがあり、快適なリモコン操作ができない(古

    い端末だと顕著) • 動画配信サービスにとって、いかにストレスなく目的の動画を視聴でき るかが事業上重要。その意味でパフォーマンスを改善し、ユーザーがよ り多くのコンテンツを快適に楽しんでもらうために改善が必要 • Web-based TVのユーザーも増加してきており、このタイミングで改善に 踏み切りたい
  14. ©2026 TVer INC. 21 現状分析① • 競合サービスとの比較からスタート ◦ プロフィール選択画面 →

    ホーム画面 ◦ ホーム画面 → エピソード画面 • NewRelic等のモニタリングサービスやテレビ端末でChrome Developer Toolsを他社サービスに対して利用することができないため、原始的に 実機でスマホで動画撮影して検証(3回計測して平均を取る) ※ 参考 ABEMA スマートテレビアプリケーションのパフォーマンス改善 〜業界トップクラスを目指して〜 / Performance Improvements on ABEMA Smart TV App
  15. ©2026 TVer INC. 29 Chrome Developer Toolsでのボトルネック調査 ① ② •

    画面を描画する時に、サイドバー以外のコンテンツ をiframeで描画する構成 • ページレンダリングがSSRであり、ページ遷移ごと に2重(親①、子フレーム②)でレンダリングを実 行 • 子フレームのJS実行、画像ロードが完全に完了する までローディングUIを描画 • クライアント側での不要なAPIフェッチもあり、描 画が遅延
  16. ©2026 TVer INC. 32 NewRelicを利用した、現状の詳細分析 • トップ、VODページが表示されるまでの時間 として、DOM processing =(JS実行や画像

    ロード時間)が支配的 • 一部の古いモデル、それに付随した古い Chromiumのバージョンの端末におけるロー ド時間が1.7 ~ 2倍ほど遅い
  17. ©2026 TVer INC. • iframeによる2重構成で処理の複雑化と2重SSR実行、FCPまでの不必要な 待機処理によるロード時間の増加が支配的 • さらに、古い端末だと新しい端末と比較して1.7 ~ 2倍近くまでロード時間

    が増加する • ロード時間以外に、フォーカス移動のたびに大量のScripting, Rendering が実行され、リモコン操作にカクツキが生まれていた 33 現状分析② 分析結果
  18. ©2026 TVer INC. • 前述のスライドで記載した課題が新しいアーキテクチャで解消されているか • メモリ制約のある低スペック端末(JSヒープ64MB)でも安定して動作するか • 対象の技術が会社 /

    チームにマッチしているか、その技術のエコシステムやメンテナンスに継続 性があるか 36 プロトタイプ検証 プロトタイプ検証の観点 プロトタイプ作成にあたり • ホームを含む複数の画面を用意し、仕様やUIは技術ごとで同じにする • 基本的にClaude Codeで自動生成する
  19. ©2026 TVer INC. 38 プロトタイプ検証結果 - 全体 項目 現状 (Vanilla

    JS) React Preact SolidJS Svelte JSヒープ(Max) 29.4MB 41.0MB 40.0MB 16.3MB 12.7MB バンドルサイズ (Max) 113kB 94.7kB 29.7kB 51.2kB 51.1kB 操作の快適さ 重い 普通 軽い 軽い 軽い チームの適応度 低い 高い 高い 中程度 低い エコシステム - 最も充実 充実 充実 充実
  20. ©2026 TVer INC. 39 プロトタイプ検証結果 - 全体 項目 現状 (Vanilla

    JS) React Preact SolidJS Svelte JSヒープ(Max) 29.4MB 41.0MB 40.0MB 16.3MB 12.7MB バンドルサイズ (Max) 113kB 94.7kB 29.7kB 51.2kB 51.1kB 操作の快適さ 重い 普通 軽い 軽い 軽い チームの適応度 低い 高い 高い 中程度 低い エコシステム - 最も充実 充実 充実 充実 • JSヒープサイズは仮想DOMを利用しているReact/Preactが高く、そ れ以外は低く収まっている • バンドルサイズは現行アプリ、Reactが大きく、Preactが一番小さい • 操作の快適さは実装による部分が大きい(現行も改善可能)
  21. ©2026 TVer INC. 40 プロトタイプ検証結果 - ページ遷移速度 項目 現状 (Vanilla

    JS) SPA平均 改善率 プラポリ同意画面 → ホーム 約3.3s 約190ms 94%改善 ホーム → エピソード 856ms 約80ms 91%改善
  22. ©2026 TVer INC. 41 プロトタイプ検証結果 - ページ遷移速度 項目 現状 (Vanilla

    JS) SPA平均 改善率 プラポリ同意画面 → ホーム 約3.3s 約190ms 94%改善 ホーム → エピソード 856ms 約80ms 91%改善 • SPAでCSRによるページ遷移になる以外に、前述のスライド で記載した通り、2重iframeの解消、画像配信の最適化などに 対応して遷移速度は大幅に改善 • ※ SSR自体が遅いわけではなく、既存アーキテクチャによる ものが大きい
  23. ©2026 TVer INC. • SolidJSを採用 • 仮想DOMを使わず、バンドルサイズも小さい。そして、Fine-grained ReactivityシステムでDOM更 新もオーバーヘッドが少なく、低スペックなテレビ端末でも操作できる •

    チームとしてもPC、VegaOS TV(Fire Stick 4K Select)でReact / React Nativeを利用しており、 今後チームとしての流動性がある前提で、普段Reactを書いているエンジニアでも学習コスト少な く開発できる • エコシステムとしてもフロントエンド開発で必要なツールは対応(Vitest, Storybook等)してお り、SolidStartなどのメタフレームワークも存在する。コミュニティ主導でのメンテナンスだが、 継続して開発はされている 42 技術選定
  24. ©2026 TVer INC. • SolidJSを採用 • 仮想DOMを使わず、バンドルサイズも小さい。そして、Fine-grained ReactivityシステムでDOM更 新もオーバーヘッドが少なく、低スペックなテレビ端末でも操作できる •

    チームとしてもPC、VegaOS TV(Fire Stick 4K Select)でReact / React Nativeを利用しており、 今後チームとしての流動性がある前提で、普段Reactを書いているエンジニアでも学習コスト少な く開発できる • エコシステムとしてもフロントエンド開発で必要なツールは対応(Vitest, Storybook等)してお り、SolidStartなどのメタフレームワークも存在する。コミュニティ主導でのメンテナンスだが、 継続して開発はされている 43 技術選定 • 現行アプリのALBの前段にCloudFrontを配置し、特定のパス でアクセスした場合にリアーキテクチャのアプリケーション (S3 + CloudFront)に向けて配信する • 既存開発を止めずに1ページずつ置き換えている最中で、近 日あるページがリリース予定 🎉
  25. ©2026 TVer INC. • Android TV ◦ Design for TV

    > Focus System • Apple TV ◦ About focus interactions for Apple TV • Vega OS TV ◦ Vega Developer Docs > Focus Management 45 各プラットフォームのフォーカス管理 • 2026年現在、Web-based TVにはフォーカス管理に関する体系的なガイドラインがない • 一方、各プラットフォームにはフォーカスに関する公式ガイドラインが存在する Design for TV > Focus System
  26. ©2026 TVer INC. • Android TV ◦ Compose for TV

    ◦ Google は Leanback(Views ベース)からの移行を推進中 • Apple TV ◦ Apple tvOSのSwiftUIにあるFocusState等を利用する • Vega OS TV ◦ focusableな要素に対してデカルトフォーカス管理 ◦ @amazon-devices/react-native-kepler にある FocusManagerを利用 46 各プラットフォームのフォーカス管理 • また、それに付随してWeb-based TVにはフォーカス管理に関するデファクトなライブ ラリも存在しない。そのため、基本的にはフォーカス管理の実装をフルスクラッチで実 装する必要がある。
  27. ©2026 TVer INC. 47 フォーカス管理 / Web標準の動き • 一方で、Web 全体での方向フォーカス移動に

    は、W3C の CSS Spatial Navigation Level 1 と いう標準化の試みもある • リモコン / 矢印キーを使ってWebページ上の フォーカスを「方向」で移動できるようにす る仕組みを標準化しようとしたもの • CSS プロパティ、JavaScript API、イベント の3つの側面から構成 https://www.w3.org/TR/css-nav-1/
  28. ©2026 TVer INC. 49 フォーカス管理 / Web標準の動き • 最新公開版は 2019/11/26

    の Working Draft • Editor’s Draft(最終更新が2024年7月) や issue ベースでは議論継続中 • ただし未解決論点が残っており、広く安定し た共通基盤とは言いにくい • そのため実務では、各プラットフォームのガ イドライン や 独自のフォーカス管理実装 が 必要になる https://github.com/w3c/csswg-drafts/issues/3387
  29. ©2026 TVer INC. • 画面上の要素の物理的な位置(座標とサイズ)をもとに、リモコンの方向に対して最も近い フォーカス可能な要素を算出して遷移先を決定 ◦ tvOS、VegaOSがこのアプローチがベース。先ほどのCSS Spatial Navigationもこれ

    50 フォーカス管理のアプローチ Spatial Navigation Explicit Navigation • 次のフォーカス先を、システムの自動判定に任せず、開発者が明示的に決める方式 • 例えば、Aからリモコンで↑を押した時に、Bへ移動させると明示的に指定する Grid-based Navigation • 各要素にrowとcolの座標を開発者が明示的に割り当て、方向キーの入力をその座標上の移動として処理 • たとえばボタンAが row=0, col=0、ボタンBが row=0, col=1 なら、Aにフォーカスがある状態で「右 キー」を押すと、同じrow=0でcol+1のBに移動する
  30. ©2026 TVer INC. • 画面上の要素の物理的な位置(座標とサイズ)をもとに、リモコンの方向に対して最も近い フォーカス可能な要素を算出して遷移先を決定 ◦ tvOS、VegaOSがこのアプローチがベース。先ほどのCSS Spatial Navigationもこれ

    51 フォーカス管理のアプローチ Spatial Navigation Explicit Navigation • 次のフォーカス先を、システムの自動判定に任せず、開発者が明示的に決める方式 • 例えば、Aからリモコンで↑を押した時に、Bへ移動させると明示的に指定する Grid-based Navigation • 各要素にrowとcolの座標を開発者が明示的に割り当て、方向キーの入力をその座標上の移動として処理 • たとえばボタンAが row=0, col=0、ボタンBが row=0, col=1 なら、Aにフォーカスがある状態で「右 キー」を押すと、同じrow=0でcol+1のBに移動する どちらか1つというより、Hibridに両者を選択するアプロー チがbetter。例えば、基本的なフォーカス移動はSpatial Navigationで任せつつ、意図的にある場所へフォーカスを 当てたいケースなどは、Explicit Navigation で対応するこ とも可能
  31. ©2026 TVer INC. • 画面上の要素の物理的な位置(座標とサイズ)をもとに、リモコンの方向に対して最も近い フォーカス可能な要素を算出して遷移先を決定 ◦ tvOS、VegaOSがこのアプローチがベース。先ほどのCSS Spatial Navigationもこれ

    52 フォーカス管理のアプローチ Spatial Navigation Explicit Navigation • 次のフォーカス先を、システムの自動判定に任せず、開発者が明示的に決める方式 • 例えば、Aからリモコンで↑を押した時に、Bへ移動させると明示的に指定する Grid-based Navigation • 各要素にrowとcolの座標を開発者が明示的に割り当て、方向キーの入力をその座標上の移動として処理 • たとえばボタンAが row=0, col=0、ボタンBが row=0, col=1 なら、Aにフォーカスがある状態で「右 キー」を押すと、同じrow=0でcol+1のBに移動する TVerではGrid-based Navigationをベースに、不揃いなGrid の場合にはSpatial Navigation, 明示的にダイアログに フォーカスを移動させたい場合はExplicit Navigationにする など、ケースによってアプローチを変更できるように対応