Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

キーボードショートカット

 

キーボードからの入力に反応できるようにするためには、キーボードイベントハンドラを使用することで可能ではあります。 しかしながら、全てのボタンとメニュー項目に、ひとつひとつ設定を行っていくのは退屈な作業だと思います。

キーボードショートカットを作成する

XUL では、キーボードショートカットを定義する方法を用意しています。 既に、メニューを扱ったセクションで、 accesskey 属性を使用することにより、メニューやメニュー項目を、特定のキーを押すことで活性化できるように定義可能であることを確認しています。 下の例では、 Alt キーを押して F (あるいは、そのプラットフォームで該当するキーの組み合わせ) を押すことにより、File メニューが選択されます。 また、File メニューが開かれたときに、C を押すことによって、Close のメニュー項目を選択することが可能です。

例 1 : ソース 表示

<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 では key という要素が用意されており、この要素を使って、そのウィンドウでのキーボードショートカットを定義することができます。 この要素には、対応するキーと必要な修飾 (modifier) キー (Shift や Control など) を指定するための属性があります。 以下に例を示します。

<keyset>
  <key id="sample-key" modifiers="shift" key="R"/>
</keyset>

この例では、利用者が Shift キーと R を押したときに活性化されるキーボードショートカットが定義されています。 key 属性を使用して、どのキーが押されるべきであるのかを指示します。 この例では「R」です。(補足: key は、属性と要素自身の両方の名前になります) この属性には、どのキーが押されるべきかを要求するために、キーと対応する任意の文字を設定することができます。 modifiers 属性を使用して、押さなければならない修飾キーを指定します。 ここには、以下に一覧で示す修飾キーを、空白区切りのリスト形式で指定します。

alt 
利用者が Alt キーを押す必要があります。Macintosh では Option キーになります。
control 
利用者が Control キーを押す必要があります。
meta 
利用者が Meta キーを押す必要があります。Macintosh では Command キーになります。
shift 
利用者が Shift キーを押す必要があります。
accel 
利用者が アクセラレータ用のキーを押す必要があります。このキーは、実際には利用者のプラットフォームに応じたキーボードショートカット用のキーになります。通常は、これが使用する値になると思います。

なお、利用者が使っているキーボードに、全てのキーが存在する必要はありません。 キーがない場合は、実際にそのキーボードにある修飾キーが代わりに割り当てられています。

key 要素は keyset 要素内に置く必要があります。 この要素は、複数の key 要素を保持するように設計されており、全てのキー定義をファイル中の 1 つの場所にまとめて置く機能を提供しています。 なお、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 属性

key 属性は、押さなければならないキーを指定するのに使用されますが、表示可能な文字のみしか使用することができません。 しかしながら、文字として指定できない (Enter キーや機能キーのような) キーを参照したい場合もあると思います。 このためには、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>

利用者が、key 要素で指定されたキーを押すと、関数 DoCopy が呼び出されます。 この例では、クリップボードにコピーするキーになります (Windows の場合は Control+C です)。 これは、ウィンドウが開かれている間、ずっと動作することになります。 DoCopy 関数は、テキストが選択されているか確認してから、テキストをクリップボードへとコピーする必要があります。 なお、テキスト入力欄には、クリップボードショートカットが組み込まれているため、各自で実装する必要がないことを補足しておきます。

メニューにキーボードショートカットを関連づける

メニューにも存在するコマンドを実行するキーボードショートカットを割り当てたい場合は、key 要素を、直接メニューコマンドと関連づける事ができます。 このためには、key 属性を、関連づける menuitem に追加してください。 値には、使用したい key 要素の id を設定します。 以下に、記述例を示します。

例 2 : ソース 表示

<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>
画像:keyshort1.jpg

この例では、menuitemkey 属性は、この例では paste-key に設定されています。これは、対応するキー定義の id と同じです。 この方法によって、付加的なキーについても同様に、キーボードショートカットを定義して、任意の数のメニュー項目に対応させることが可能です。

画像から、Paste メニューコマンドを呼び出すのに、Control と V キーを押せばよいことを示すテキストが、そのメニューコマンドの横に置かれていることが分かると思います。 これは、key 要素の modifiers を元に追加されます。 メニューと結びつけたキーボードショートカットは、メニューが開いていないときでも機能します。

キー定義の付加的な特徴の 1 つとして、簡単に無効状態にできるということがあります。 そのためには、key 要素に disabled 属性を追加して、その値を true に設定します。 これでキーボードショートカットは無効になり、呼び出されなくなります。 スクリプトから、状況に応じて動的に 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 は表示可能な文字の場合に用いられて、押されたキーの文字コードを保持します。

次のセクションでは、フォーカスや選択の扱い方について学びます。

 

 

ドキュメントのタグと貢献者

 このページの貢献者: jigs12, ethertank, Morishoji, Mgjbot
 最終更新者: jigs12,