Opera TV Store アプリケーションにおけるファンクションキーの取り扱い

By Go Uehiro

Opera TV Store は、リモートコントロールにある基本的な 4 方向キーを空間ナビゲーションに使用するようにデザインされています。アプリケーションが Opera TV Store ブラウザに組み込まれたデフォルトの空間ナビゲーションを使用して問題なく機能するかどうかをテストしてください。

Opera の空間ナビゲーション機能は、ほとんどのブラウザで利用可能な、TAB をベースとした従来のキーボードアクセスと似たような方法で機能し、ユーザーはこの機能を使用して、フォーカスできる要素（リンク、フォームコントロール、画像マップ領域など）の間を移動することができます。また、空間ナビゲーション機能は、click および mouseover の JavaScript イベントが付与されている任意の要素にフォーカスすることができます。さらに名前からも推測できるように、Opera の空間ナビゲーション機能は、（TAB ナビゲーションのように）ソース順ではなく、画面の空間上での関連性をベースとした要素間の移動を可能にします。

ほとんどの場合、作成者はアプリケーションのコントロールのハンドリングを、単に Opera の空間ナビゲーションに依存するだけで行えます。さらに CSS3 を使用することで、シンプルなメカニズムを用いて TV ブラウジング向けに空間ナビゲーションを調整する ことができます。

また、アプリケーション作成者は、リモートコントロールでのキー操作を取得し、アプリケーションのナビゲーションをアプリ側でハンドリングするようにすることもできます。この場合、基本的な方向ボタン（上、右、下、左）のみに反応するだけでなく、機能をさまざまなショートカット・機能キー（戻る、情報、オプション、赤 ボタンなど）に関連付けることができます。リモートコントロールキーのキーコードはデバイスによって異なるため、Opera TV Store ブラウザは、現在のデバイスで使用されているハードウェア固有のコードにマップされた組み込みの グローバル定数 を提供しています。

利用可能な機能ボタンの一覧

ご注意： CONFIRM、EXIT、方向ボタンはデバイスメーカーにより必ず実装されなければならないため、エンドユーザーは、Opera TV Store が搭載されたデバイスのリモートコントロールを使用して常に利用することができます。各アプリケーションを終了できるように、EXIT キーはOpera TV Store ブラウザによりハンドリングされます。このため、VK_EXIT はアプリケーションには送信されません。

keypress イベントのハンドリング

キーイベントは、以下のように onkeypress 属性を要素に付与することでハンドリングできます（keypress は要素が実際にフォーカスを受け取った時にのみハンドリングされる点にご注意ください）。

<ELEMENT onkeypress="handler">

これはもちろん、直接 JavaScript を使用しても行えます。以下のように、onkeypress プロパティを追加するか、addEventListener を使用してください。

object.onkeypress = handler;
object.addEventListener("keypress", handler, useCapture);

handler 関数では、event.keyCode と Opera TV Store で提供される機能キー用のグローバル定数のセットを照合します。

function handler(event){
	…
	if (VK_RED == event.keyCode){
		/* VK_RED was pressed … do something useful */
	}
	…
}

アプリケーションによっては、ページ内の多数の要素に対して、それぞれ異なる多くのイベントハンドラを含めないようにした方がよいでしょう。イベントキャプチャと Event Delegation メカニズムを利用する代わりに、keypress ハンドラをトップレベルの要素（例： body）あるいはオブジェクト（window など）に設定します。

window.addEventListener("keypress", handler, useCapture);

この場合 handler 関数では、イベントが発生した要素を特定する必要があります。リファレンスは event.target から簡単に取得することができます。

function handler(event){
	…
	var target = event.target;
	…	
}

デフォルトの空間ナビゲーションの回避

キーイベントを直接ハンドリングする場合、Opera TV Store ブラウザが通常の空間ナビゲーションを用いて要素をアクティブにすることを止めたいと思われるかもしれません。このような場合には、以下のように handler 関数を使用して抑制することができます。

function handler(event){
	…
	event.preventDefault();
	…	
}

特定の機能キーのサポートを判定する

アプリケーションの作成者は、シンプルな JavaScript を使用して特定の機能キーがデバイスで定義されているかを確認することができます。ボタンがサポートされている場合、定数はデバイス固有のボタンのキーコードを含んでいます。さもなければ、定数は null の値を返します。例として、以下のように VK_RED キーをテストできます。

if (VK_RED !== null) {
	/* VK_RED is supported */
	…
}

Opera TV Store を実行するすべてのデバイスには、上に定義されたすべてのグローバル定数がありますが（デバイスのリモートコントロールに特定のボタンがない場合、値が null が返るでしょう）、Unhandled Error: Undefined variable の JavaScript エラーを避けるため、定数を利用する前に該当するものが存在しているかどうかを確認することをお勧めします。

if (('VK_RED' in window)&&(VK_RED !== null)) {
	/* VK_RED is supported */
	…
}

以下のように定数に対して event.keyCode の値を確認する場合にも同じことが言えます。

function handler(event){
	…
	if (('VK_RED' in window)&&(VK_RED == event.keyCode)){
		/* VK_RED was pressed … do something useful */
	}
	…
}

VK_* で示されるグローバル定数の一覧は、OEM がインテグレーションを行う際に Opera TV Store の一部として同梱する、user.js ファイルに設定されています。デバイスメーカーは、デバイスと共に出荷される標準のリモートコントロールをベースとした、ボタンと関連するキーコードを同梱します。この場合、サードパーティあるいは代替となるリモートコントロールが、標準のリモートコントロールの機能ボタンと一致しない可能性があります。定数が定義され存在していても、リモートコントロールに物理的なキーがない場合があります。このため、注意を払い、最低限の 常に利用可能な キーのセットでアプリケーションが機能するように設計することをお勧めします。

This article is licensed under a Creative Commons Attribution 3.0 Unported license.