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 ブラウザは、現在のデバイスで使用されているハードウェア固有のコードにマップされた組み込みの グローバル定数 を提供しています。

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

ハードウェアキー キーコードの定数 備考
VK_UP 常に利用可能*
VK_RIGHT 常に利用可能*
VK_DOWN 常に利用可能*
VK_LEFT 常に利用可能*
Confirm/Select/OK VK_ENTER 常に利用可能*
Opera を終了 表示なし 常に利用可能(ネイティブのファームウェアによりハンドルされる)
Back/Return VK_BACK_SPACE オプションではあるが推奨
BLUE VK_BLUE オプションではあるが推奨
RED VK_RED オプションではあるが推奨
GREEN VK_GREEN オプションではあるが推奨
YELLOW VK_YELLOW オプションではあるが推奨
メニュー VK_MENU オプション
0 VK_0 オプション
1 VK_1 オプション
2 VK_2 オプション
3 VK_3 オプション
4 VK_4 オプション
5 VK_5 オプション
6 VK_6 オプション
7 VK_7 オプション
8 VK_8 オプション
9 VK_9 オプション
PLAY VK_PLAY オプション
PAUSE VK_PAUSE オプション
STOP VK_STOP オプション
NEXT VK_TRACK_NEXT オプション
PREV VK_TRACK_PREV オプション
FF (Fast-Forward) VK_FAST_FWD オプション
REWIND VK_REWIND オプション
SUBTITLE VK_SUBTITLE オプション
INFORMATION VK_INFO オプション

ご注意: CONFIRMEXIT、方向ボタンはデバイスメーカーにより必ず実装されなければならないため、エンドユーザーは、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 ファイルに設定されています。デバイスメーカーは、デバイスと共に出荷される標準のリモートコントロールをベースとした、ボタンと関連するキーコードを同梱します。この場合、サードパーティあるいは代替となるリモートコントロールが、標準のリモートコントロールの機能ボタンと一致しない可能性があります。定数が定義され存在していても、リモートコントロールに物理的なキーがない場合があります。このため、注意を払い、最低限の 常に利用可能な キーのセットでアプリケーションが機能するように設計することをお勧めします。

td

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

Comments

No new comments accepted.