キーボードからの入力に反応できるようにするためには、キーボードイベントハンドラを使用することで可能ではあります。 しかしながら、全てのボタンとメニュー項目に、ひとつひとつ設定を行っていくのは退屈な作業だと思います。
キーボードショートカットを作成する
XUL では、キーボードショートカットを定義する方法を用意しています。 既に、メニューを扱ったセクションで、
属性を使用することにより、メニューやメニュー項目を、特定のキーを押すことで活性化できるように定義可能であることを確認しています。 下の例では、 Alt キーを押して F (あるいは、そのプラットフォームで該当するキーの組み合わせ) を押すことにより、File メニューが選択されます。 また、File メニューが開かれたときに、C を押すことによって、Close のメニュー項目を選択することが可能です。accesskey
<menubar id="sample-menubar"> <menu id="file-menu" label="File" accesskey="f"> <menupopup id="file-popup"> <menuitem id="close-command" label="Close" accesskey="c"/> </menupopup> </menu> </menubar>
属性は、ボタンにも使用できます。 この場合、キーが押されることによってボタンが選択されます。accesskey
しかしながら、もっと一般的なキーボードショートカットを設定したいこともあると思います。 例えば、Contol+C を押すことで、クリップボードにテキストをコピーするといったものです。 通常は、このようなショートカットは、ウィンドウが開かれている間であればいつでも動作しますが、その機能がいつ呼び出されても有効であるとは限りません。 通常、キーボードショートカットはいつでも利用できるようになっているため、スクリプトの方で、そのとき実際に動作を実行するべきかどうかをチェックする必要があります。 例えば、テキストをクリップボードにコピーする場合は、テキストが選択されているときだけ機能するべきです。
key 要素
XUL では
という要素が用意されており、この要素を使って、そのウィンドウでのキーボードショートカットを定義することができます。 この要素には、対応するキーと必要な修飾 (modifier) キー (Shift や Control など) を指定するための属性があります。 以下に例を示します。key
<keyset> <key id="sample-key" modifiers="shift" key="R"/> </keyset>
この例では、利用者が Shift キーと R を押したときに活性化されるキーボードショートカットが定義されています。
属性を使用して、どのキーが押されるべきであるのかを指示します。 この例では「R」です。(補足: key
key
は、属性と要素自身の両方の名前になります) この属性には、どのキーが押されるべきかを要求するために、キーと対応する任意の文字を設定することができます。
属性を使用して、押さなければならない修飾キーを指定します。 ここには、以下に一覧で示す修飾キーを、空白区切りのリスト形式で指定します。modifiers
- alt
- 利用者が Alt キーを押す必要があります。Macintosh では Option キーになります。
- control
- 利用者が Control キーを押す必要があります。
- meta
- 利用者が Meta キーを押す必要があります。Macintosh では Command キーになります。
- shift
- 利用者が Shift キーを押す必要があります。
- accel
- 利用者が アクセラレータ用のキーを押す必要があります。このキーは、実際には利用者のプラットフォームに応じたキーボードショートカット用のキーになります。通常は、これが使用する値になると思います。
なお、利用者が使っているキーボードに、全てのキーが存在する必要はありません。 キーがない場合は、実際にそのキーボードにある修飾キーが代わりに割り当てられています。
要素は key
要素内に置く必要があります。 この要素は、複数の keyset
要素を保持するように設計されており、全てのキー定義をファイル中の 1 つの場所にまとめて置く機能を提供しています。 なお、key
要素を key
要素の外に置いた場合、その定義は機能しません。keyset
一般的に、キーボードショートカットに使用するキーは、各プラットフォームで異なっています。 例えば、Windows では Controlキーを使い、Machintosh では Command キーを使用しています。 プラットフォームごとに、別々の
要素を定義しなければならないとすれば面倒ですが、幸運なことに、それを解決する方法は存在します。 修飾キー key
accel
は、そのプラットフォームで特にショートカット用として規定されているキーを指しています。 これは、他の修飾キーと全く同じように機能しますが、全てのプラットフォームで同一のキーではありません。
いくつか例を追加します。
<keyset> <key id="copy-key" modifiers="control" key="C"/> <key id="explore-key" modifiers="control alt" key="E"/> <key id="paste-key" modifiers="accel" key="V"/> </keyset>
keycode 属性
属性は、押さなければならないキーを指定するのに使用されますが、表示可能な文字のみしか使用することができません。 しかしながら、文字として指定できない (Enter キーや機能キーのような) キーを参照したい場合もあると思います。 このためには、key
という別の属性を使用することになります。keycode
属性には、指定したいキーを表す、専用のコードを設定しなければなりません。 設定可能なキーのコードを以下の表に示します。 なお、全てのキーが、全てのキーボードで利用できるわけではありません。keycode
VK_CANCEL | VK_BACK | VK_TAB | VK_CLEAR |
VK_RETURN | VK_ENTER | VK_SHIFT | VK_CONTROL |
VK_ALT | VK_PAUSE | VK_CAPS_LOCK | VK_ESCAPE |
VK_SPACE | VK_PAGE_UP | VK_PAGE_DOWN | VK_END |
VK_HOME | VK_LEFT | VK_UP | VK_RIGHT |
VK_DOWN | VK_PRINTSCREEN | VK_INSERT | VK_DELETE |
VK_0 | VK_1 | VK_2 | VK_3 |
VK_4 | VK_5 | VK_6 | VK_7 |
VK_8 | VK_9 | VK_SEMICOLON | VK_EQUALS |
VK_A | VK_B | VK_C | VK_D |
VK_E | VK_F | VK_G | VK_H |
VK_I | VK_J | VK_K | VK_L |
VK_M | VK_N | VK_O | VK_P |
VK_Q | VK_R | VK_S | VK_T |
VK_U | VK_V | VK_W | VK_X |
VK_Y | VK_Z | VK_NUMPAD0 | VK_NUMPAD1 |
VK_NUMPAD2 | VK_NUMPAD3 | VK_NUMPAD4 | VK_NUMPAD5 |
VK_NUMPAD6 | VK_NUMPAD7 | VK_NUMPAD8 | VK_NUMPAD9 |
VK_MULTIPLY | VK_ADD | VK_SEPARATOR | VK_SUBTRACT |
VK_DECIMAL | VK_DIVIDE | VK_F1 | VK_F2 |
VK_F3 | VK_F4 | VK_F5 | VK_F6 |
VK_F7 | VK_F8 | VK_F9 | VK_F10 |
VK_F11 | VK_F12 | VK_F13 | VK_F14 |
VK_F15 | VK_F16 | VK_F17 | VK_F18 |
VK_F19 | VK_F20 | VK_F21 | VK_F22 |
VK_F23 | VK_F24 | VK_NUM_LOCK | VK_SCROLL_LOCK |
VK_COMMA | VK_PERIOD | VK_SLASH | VK_BACK_QUOTE |
VK_OPEN_BRACKET | VK_BACK_SLASH | VK_CLOSE_BRACKET | VK_QUOTE |
VK_HELP |
例えば、利用者が Alt と F5 を押したときに活性化されるショートカットを作るには、次のようにします。
<keyset> <key id="test-key" modifiers="alt" keycode="VK_F5"/> </keyset>
さらに、いくつかのキーボードショートカットの例を以下に示します。
<keyset> <key id="copy-key" modifiers="accel" key="C"/> <key id="find-key" keycode="VK_F3"/> <key id="switch-key" modifiers="control alt" key="1"/> </keyset>
最初のキー定義は、利用者がそのプラットフォーム固有のショートカットキーと C を押した時に呼び出されます。 2 つ目は、利用者が F3 キーを押した時に呼び出されます。 3 つ目は、Control キー、Alt キーと 1 を押した時に呼び出されます。 もし、キーボードのメイン部分とテンキーの数字キーを区別したいのであれば、VK_NUMPAD 系のキーコード (例えば VK_NUMPAD1) を使用できます。
アプリケーションでキーボードショートカットとして使用するキーを選択するときの注意事項や詳細情報のために、 Mozilla キーボード・プラン FAQ とクロスリファレンスを参照してください。
キーボードショートカットを使用する
キーボードショートカットを定義する方法は分かったので、次はそれをどのように使えばいいのかを見ていくことにします。 このための方法としては 2つあります。 1 つ目は、最も単純な方法で、keypress イベントのハンドラを
要素に追加するだけです。 利用者がそのキーを押したとき、スクリプトが呼び出されます。 以下に例を示します。key
<keyset> <key id="copy-key" modifiers="accel" key="C" onkeypress="DoCopy();"/> </keyset>
利用者が、
要素で指定されたキーを押すと、関数 DoCopy が呼び出されます。 この例では、クリップボードにコピーするキーになります (Windows の場合は Control+C です)。 これは、ウィンドウが開かれている間、ずっと動作することになります。 key
DoCopy
関数は、テキストが選択されているか確認してから、テキストをクリップボードへとコピーする必要があります。 なお、テキスト入力欄には、クリップボードショートカットが組み込まれているため、各自で実装する必要がないことを補足しておきます。
メニューにキーボードショートカットを関連づける
メニューにも存在するコマンドを実行するキーボードショートカットを割り当てたい場合は、
要素を、直接メニューコマンドと関連づける事ができます。 このためには、key
属性を、関連づける key
に追加してください。 値には、使用したい menuitem
要素の key
を設定します。 以下に、記述例を示します。id
<keyset> <key id="paste-key" modifiers="accel" key="V" oncommand="alert('Paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="Edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="Paste" oncommand="alert('Paste invoked')"/> </menupopup> </menu> </menubar>
この例では、
の menuitem
属性は、この例では key
paste-key
に設定されています。これは、対応するキー定義の
と同じです。 この方法によって、付加的なキーについても同様に、キーボードショートカットを定義して、任意の数のメニュー項目に対応させることが可能です。id
画像から、Paste メニューコマンドを呼び出すのに、Control と V キーを押せばよいことを示すテキストが、そのメニューコマンドの横に置かれていることが分かると思います。 これは、
要素の key
を元に追加されます。 メニューと結びつけたキーボードショートカットは、メニューが開いていないときでも機能します。modifiers
キー定義の付加的な特徴の 1 つとして、簡単に無効状態にできるということがあります。 そのためには、
要素に key
属性を追加して、その値を true に設定します。 これでキーボードショートカットは無効になり、呼び出されなくなります。 スクリプトから、状況に応じて動的に disabled
属性を変更すると便利です。disabled
ファイル検索ダイアログの例
それでは、ファイル検索ダイアログにキーボードショートカットを追加してみましょう。 4 つのキーボードショートカットを追加します。 Cut、Copy、Paste コマンドのそれぞれに 1 つと、ユーザが Escape キーを押したときにウィンドウを閉じるためのコマンドにも 1つです。
<keyset>
<key id="cut_cmd" modifiers="accel" key="X"/>
<key id="copy_cmd" modifiers="accel" key="C"/>
<key id="paste_cmd" modifiers="accel" key="V"/>
<key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
</keyset>
<vbox flex="1">
<toolbox>
<menubar id="findfiles-menubar">
<menu id="file-menu" label="File" accesskey="f">
<menupopup id="file-popup">
<menuitem label="Open Search..." accesskey="o"/>
<menuitem label="Save Search..." accesskey="s"/>
<menuseparator/>
<menuitem label="Close" accesskey="c" key="close_cmd"
oncommand="window.close();"/>
</menupopup>
</menu>
<menu id="edit-menu" label="Edit" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cut" accesskey="t" key="cut_cmd"/>
<menuitem label="Copy" accesskey="c" key="copy_cmd"/>
<menuitem label="Paste" accesskey="p" key="paste_cmd" disabled="true"/>
</menupopup>
</menu>
これでコマンドを活性化するのにこれらのショートカットを使うことができます。 といっても、まだスクリプトは書いていないため、クリップボード系のコマンドは、実行されたとしても何もしません。
キーイベント
キーボード入力関連のイベントは 3 つあります。 これらは、キーと機能を関連づけるために、上で説明した方法が適用できない場合に用いられることになります。 これらのイベントについて以下に記述します。
- keypress
- 要素がフォーカスを持っていて、キーが押されて離されたときに呼び出されます。フィールドに入力された文字が、許可されたものかどうかをチェックするために使用することができます。
- keydown
- 要素がフォーカスを持っていて、キーが押されたときに呼び出されます。このイベントは、キーが押された直後に、まだ離されていない状態でも呼び出されることに注意してください。
- keyup
- 要素がフォーカスを持っていて、キーが離されたときに呼び出されます。
【訳注: 日本語入力が ON のときは、いろいろ簡単ではないようです】
キーイベントは、フォーカスを持つ要素へのみ送信されます。 通常、テキスト入力欄、ボタン、チェックボックスなどが該当します。 フォーカスを持つ要素がない場合には、キーイベントは、代わりに XUL 文書自身に対して送信されます。 この場合、イベントリスナーを
タグに追加することができます。 といっても、通常は、広くキーに応答したいのであれば、先に述べたようにキーボードショートカットを使います。window
キーイベントオブジェクトは、押されたキーを保持する 2 つのプロパティを持っています。 keyCode
プロパティは、キーコードを保持します。 目的のキーが押されたかを調べるためには、このセクションで既出のキーコード表で示されている定数のいずれかと比較することになります。 charCode
は表示可能な文字の場合に用いられて、押されたキーの文字コードを保持します。
次のセクションでは、フォーカスや選択の扱い方について学びます。