RemoteControl

リモートコントロール

このサンプルアプリは、マジックリモートコントロール、従来のリモートコントロール、外部キーボードなどのユーザー入力を処理する方法を示しています。このサンプルを使用して、リモートコントロールのキーコード全体を把握できます。 Magic Remote Controlの詳細については、Magic Remoteを参照してください。

基本的なリモートコントロール動作

次のリストでは、リモートコントロールのユーザー入力の基本的な処理原則について説明します。

• 選択可能なUI要素は、スクリーンカーソルと4ウェイナビゲーションキー（上、下、左、右）で完全にナビゲーション可能でなければなりません
• 選択可能なUI要素は、画面カーソルによって制御され、OKボタンで制御されたときに同じように動作する必要があります。
• UI要素の1つに焦点を合わせる必要があります。これは開発者が犯す一般的な間違いですので、以下を確認してください。
  • ナビゲーションキーを入力してカーソルが画面から消えるとき、カーソルのフォーカスをナビゲーションキーによってフォーカスに切り替える必要があります。
  • 上記とは反対に、カーソルがアクティブ化され、UI要素に移行する場合、ナビゲーションキーによる焦点は、現在の位置のカーソルによってフォーカスに切り替える必要があります。
• どの要素がアクティブ化されているかを示すために、選択効果が必須です。可能な選択効果は、アニメーション、ハイライト、色、またはサイズの変更などです。
• ページとリストスクロールは、魔法のリモートのホイールを使用して適切に制御できます。

UIガイドラインの詳細については、UXチェックリストを参照してください。

イベントリスナーの追加

キーコードを見つける方法

keydownイベントリスナーを追加することにより、キーイベントの重要なコードを取得できます。

 document . addEventListener (
  "keydown" ,
  function ( event ) {
    console . log ( "keydown" , event . keyCode ) ;
  } ,
  false
) ;

マジックリモートを処理する方法

ポインティングデバイス（魔法のリモートまたはマウス）を使用して、カーソルを要素またはその子要素の1つに移動すると、 mouseoverイベントが発生します。 mouseoverイベントを処理するには、イベントリスナーをドキュメント要素に追加します。

 document . addEventListener (
  "mouseover" ,
  function ( event ) {
    console . log ( "mouseover" , event . target . id ) ;
  } ,
  false
) ; 

WebOSテレビになります

サンプルアプリをインストールして、次の画像のように、WebOSテレビでサンプルアプリの結果を確認できます。

やらないでください

• このサンプルアプリは、WebOS TVデバイスまたはWebos TVシミュレーターでテストします。
• TV Powerキーのキーコードを見つけようとしないでください。 WebOSテレビはそれを提供しません。

参照

4ウェイナビゲーションキーによるUI要素間のフォーカスを移動するには、空間ナビゲーションが使用されます。