ウェブアプリ開発に関するベストプラクティス

HTMLとJavaScriptを使用して構築されたTV対応ウェブアプリは、通常、複数のプラットフォームで動作するように設計されています。ウェブ開発のベストプラクティスは、一般的にVega TVウェブアプリにも適用されます。このガイドでは、Vega環境でのウェブアプリ開発で最も関連性が高く、一般的に推奨されている方法に焦点を当てています。

フォーカスを処理する

開発者は、使いやすさとアクセシビリティの観点から、ウェブアプリのフォーカスを処理する必要があります。ウェブアプリの起動時には、必ずアクション可能な要素に最初にフォーカスを当ててください。これにより、ユーザーは最初のキーを押すだけでアプリの使用を開始できます。これは、AXのユーザーがアプリにアクセスできるようにするのにも役立ちます。初期フォーカスをWebViewに設定する方法については、こちらをクリックしてください。初期フォーカスを設定するには、WebViewに初期フォーカスを設定する方法を参照してください。

リモコンで操作する

リモートキーイベントを使用してアプリを完全に操作できることを確認してください。これには、方向キー（DPAD)、Enter、および Backボタンの適切な処理が含まれます。tabindexを使用してフォーカス管理を実装し、重要なイベントを処理してフォーカスを動的に移動させます。次のように、ウェブアプリレイヤーで主要なイベントを処理するのが最適です。

[戻る] ボタンとアプリ終了を処理する

[戻る] ボタンでページ履歴の前のページに移動させます。戻るナビゲーションが不可能な場合は、アプリを閉じる前にポップアップを表示します。戻るナビゲーションの最後に到達したことをポップアップで明示し、もう一度戻る操作をすると、アプリは終了します。これにより、偶発的な離脱を防ぐことでユーザーエクスペリエンスが向上し、ユーザーの期待に応えることができます。[閉じる] ボタンの処理については、onCloseWindowを参照してください。[戻る] ボタンの処理については、goBack()を参照してください。

エラーを処理する

ウェブアプリは、ネットワーク接続エラー、SSL証明書エラー、HTTPエラーなど、さまざまなエラーケースを処理することが想定されています。インタースティシャルページを表示して、ユーザーが再試行したり、必要な手順を実行してアプリを再ロードまたは終了したりできるようにすることをお勧めします。ページを表示して、ユーザーが再試行したり、必要な手順を実行してアプリを再ロードまたは終了したりできるようにします。

WebViewには、アプリが適切なアクションを実行できるように、onError、onHttpError、onSslErrorの各コールバックが用意されています。

メディアを再生する

デバイス間でスムーズにメディアを再生するには、ウェブアプリで再生を試みる前にデバイスのメディア機能を確認する必要があります。ウェブアプリでは、MediaCapabilities（英語のみ）またはcanPlayType() APIを使用してこれを実現できます。これにより、ランタイムエラー、再生エラー、ユーザーエクスペリエンスの低下を防ぐことができます。

サポートされている形式の一覧については、WebViewでサポートされるメディア形式を参照してください。

バックグラウンドアクティビティを処理する

ウェブアプリがバックグラウンドで再生中になったら、動画を停止してコンテンツ詳細ページに戻ります。また、システムでメモリなどのより多くのリソースが必要になると終了する可能性があるため、アプリがバックグラウンドに移行したときには、必要なアプリ状態の情報を保持するようにしてください。

このリクエストの背後にある動機は、ウェブアプリがバックグラウンドに移行したときの動画再生の処理方法に基づいています。このような場合、ビデオデコードに使用されるハードウェアデコーダーがリリースされ、他のアプリでも利用できるようになります。ウェブアプリがフォアグラウンドに戻ると、デコーダーが再初期化されてビデオフレームのレンダリングが再開される間、一時的に黒い画面が表示されることがあります。この処理には数秒かかる場合があります。ウェブアプリが動画再生を終了し、背景に戻る前にコンテンツ詳細ページに戻ると、黒い画面の問題は回避できます。

userAgentに頼らない

Vega WebView userAgentには、デバイス情報、OS情報、WebEngine情報を表す文字列が含まれています。この情報は、将来、デバイスのハードウェアによって変更される可能性があるため、どうしても必要な場合を除き、参考程度に留めておいてください。

例：

コードをコピー クリップボードにコピーしました。

アクセシビリティを考慮する

Vega向けのウェブアプリを開発する場合、すべての人にインクルーシブなユーザーエクスペリエンスを提供するために、アクセシビリティを重視する必要があります。タッチベースのインターフェイスとは異なり、TVアプリは方向ナビゲーション（DPAD）機能付きのリモコンを使用します。フォーカス可能なすべての要素にアクセス可能で、論理的なフォーカス順序に従っていることを確認してください。tabindex属性を使用してフォーカスを定義および管理し、どの要素がアクティブであるかをユーザーが追跡できるように常にフォーカスインジケーターを表示します。

<button>、<nav>、<form>などのセマンティックHTML要素は、アクセシビリティを高める上で重要な役割を果たすため、可能な場合は、<div>や<span>などの一般的なコンテナよりも優先する必要があります。スクリーンリーダーをサポートするには、ARIA（アクセシブルリッチインターネットアプリケーション）のロール、ラベル、属性を利用して、特にカスタムコンポーネントに意味のあるコンテキストを提供してください。ウェブアプリのタイトルを設定して、アプリの起動時にスクリーンリーダーで読み上げるようにします。

Vegaメディアコントロールを有効にする

ユーザーは、さまざまな入力方法、リモコン、音声コマンド、モバイルリモートアプリなどのコンパニオンデバイスを使用してアプリを操作する可能性があります。これらすべてのモダリティでシームレスなメディア再生の制御ができるようにします。これをサポートするには、Vega Media Controls APIと統合してください。これにより、各入力メソッドで一貫したメディア制御機能が可能になります。実装の詳細と統合手順については、アプリのコードでVegaMediaControlを統合する例を参照してください。

関連トピック

• Vegaウェブアプリの概要
• ウェブアプリのパフォーマンスに関するベストプラクティス
• ウェブアプリのウェブワーカーに関するベストプラクティス
• ウェブアプリのWebGLに関するベストプラクティス

---

Last updated: 2025年10月7日