XUL チュートリアル - キーボードショートカット

キーボードに応答するのにキーボードイベントハンドラーが使えます。しかし、すべてのボタン、メニュー項目でそれを行なうのは面倒です。

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

XUL には、キーボードショートカットを定義する方法があります。メニューに関するセクションの中で、accesskey という名前の属性を定義できることは既に見ました。これは、ユーザーがメニューやメニュー項目を有効にするのに押すことのできるキーを指定するものです。下の例で、File メニューは Alt と F (特殊なプラットフォームでは別のキーの組み合せ) を押せば選択できます。File メニューを開くと、Close メニュー項目は C を押して選択できます。

<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 を押す場合です。このようなショートカットはいつでも有効とは限りませんが、それは、通常、ウィンドウが開いていればいつでも動作します。たいていの場合、キーボードショートカットはいつでも使えますし、スクリプトを使って何かすべきか判断するのにチェックできます。例えば、テキストをクリップボードにコピーするのは、何らかのテキストが選択されている場合にだけ機能すべきです。しかし、テキストが選択されていない場合、Control+C を無効にする必要はありません。キーが押されたときテキストが選択されているかどうかをチェックし、テキストが選択されていない場合は何もしない (あるいはビープを鳴らす) という方法もあるでしょう。

XUL は、ウィンドウのキーボードショートカットの定義ができる key 要素を提供しています。それには、どのキーを押すのかと (Shift や Control などの) 変更子 (modifier) となるどのキーを同時に押さなければならないのかを指定する属性があります。例を下に示します。

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

この例は、ユーザーが Shift キーと R を押したときに有効となるキーボードショートカットを定義しています。key 属性 (要素自身の名前と同じことに注意) は、どのキーが押されるのか (この場合は R) を指示するために使われています。この属性には、どのキーが押されるのかを指定するため、どんな文字でも加えることができます。同時に押さなければならない変更子は、modifiers 属性を使って指定します。それが複数ある場合は、変更子のキーをスペースで区切ってリストします。変更子のキーは次の通りです。

• alt
  ユーザーは Alt キーを押さなければならない。
• control
  ユーザーは Control キーを押さなければならない。
• meta
  ユーザーは Meta キーを押さなければならない。
• shift
  ユーザーは Shift キーを押さなければならない。
• accel
  ユーザーは、特殊なアクセラレーターキーを押さなければならない。

キーボードにこれらのキーすべてがある必要はありません。キーがない場合、それらのキーは実際にある変更子のキーにマップされます。

一般的に言えば、プラットフォームによって、キーボードショートカットには、異なったキーが使われます。例えば、Windows では Control キー、Macintosh では Command キーです。プラットフォームごとに異なった key 要素を定義するのは不便です。幸い、これには解決策があります。変更子 accel は、特殊なプラットフォーム指定のキーを参照します。それは、ショートカットのために使われるものです。それは他の変更子と同様に働きますが、すべてのプラットフォームで同じという訳ではありません。

以下に例を追加しました。

<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"/>

key 属性は、押さなければならないキーを指定するために使われます。しかし、(Enter キーや function キーなどの) 文字で表すことのできないキーを参照したい場合もあるでしょう。key 属性は、文字で表わすことのできる文字だけに使えます。別の属性である keycode は、文字で表わすことのできない文字にも使えます。

keycode 属性は、キーをあらわす特殊コードに設定します。キーのテーブルを下にリストしました。すべてのキーボードで、これらのキーすべてが利用できる訳ではありません。

例えば、ユーザーが Alt と F5 を押したときに有効になるショートカットを作るには、次のようにします。

<key id="test-key" alt="true" keycode="VK_F5"/>

XUL のウィンドウ宣言内のどこにでも key 要素を置くことができますが、それは keyset 要素の中になければなりません。この要素は、key 要素のセットを入れるために設計されました。これは、ファイル中の一箇所にキー定義をまとめるのにも役立ちます。以下は、キーボードショートカットの例を示しています。

<keyset>
  <key id="copy-key" modifiers="accel" key="C"/>
  <key id="find-key" keycode="VK_F3"/>
  <key id="switch-key" modifiers="alt control" key="1"/>
</keyset>

最初のキーは、ユーザーがプラットフォーム指定のショートカットキーと C を押したときに呼び出されます。2 番目のキーは、ユーザーが F3 を押したときに呼び出されます。3 番目のキーは、Control キーと Alt キーと 1 を押したときに呼び出されます。キーボードの主部分にあるキーとテンキー部にあるキーを区別したい場合は、(VK_NUMPAD1 などの) VK_NUMPAD キーを使います。

キーボードショートカットを使う

キーボードショートカットを定義する方法が分かったので、その使い方を見ることにしましょう。2 通りのやり方があります。最初の方法は最も簡単で、key 要素で通常のキーイベントハンドラーを使うだけです。ユーザーがキーを押すと、スクリプトが呼び出されます。以下に例を示します。

<keyset>
  <key id="copy-key" modifiers="accel" key="C" onkeypress="DoCopy();"/>
</keyset>

関数 DoCopy は、ユーザーが key 要素で指定されたキーを押すと呼び出されます。この例では、そのキーは、(Control+C などの) クリップボードにコピーするためのものです。これは、ウィンドウが開いている限り、機能します。DoCopy 関数では、テキストが選択されているかチェックすべきでしょう。そして、テキストをクリップボードにコピーします。

keyup と keydown イベントハンドラーを使うこともできます。

メニュー上にもあるコマンドを実行するキーボードショートカットを割り当てる場合、key 要素を直接メニューコマンドに関連付けることができます。このためには、menuitem に key 属性を追加し、その値を使いたいキーの id に設定します。下の例はこれを示しています。

<keyset>
  <key id="paste-key" modifiers="accel" key="V"/>
</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="Close"
        oncommand="alert('Paste invoked')"/>
    </menupopup>
  </menu>
</menubar>

menuitem の key 属性はここでは paste-key ですが、これは、定義されたキーの id と同じです。メニュー項目にキーボードショートカットを定義することによって、このキーを追加キーとして使うことができます。

イメージで、テキストが Close メニューコマンドの横に置かれていることに気付いたかもしれません。これは、メニューコマンドを呼び出すために、Alt と V キーを押してもよいことを指示しています。これは、key 要素の変更子に基づいて追加しました。

メニューに貼り付けたキーボードショートカットは、メニューが開いていない場合でも動作します。

キー定義の別の特徴の一つに、それを簡単に無効にできるということがあります。このためには、key 要素に disabled 属性を追加し、その値を true に設定します。これによってキーボードショートカットは無効になり、呼び出すことができなくなります。スクリプトを使って disabled 属性を変更する方法は役に立ちます。

キーの例

<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"/>
</keyset>

<box orient="vertical" 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>