MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

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

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

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

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

    var el = env.locale; 例 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_CANCELVK_BACKVK_TABVK_CLEAR
    VK_RETURNVK_ENTERVK_SHIFTVK_CONTROL
    VK_ALTVK_PAUSEVK_CAPS_LOCKVK_ESCAPE
    VK_SPACEVK_PAGE_UPVK_PAGE_DOWNVK_END
    VK_HOMEVK_LEFTVK_UPVK_RIGHT
    VK_DOWNVK_PRINTSCREENVK_INSERTVK_DELETE
    VK_0VK_1VK_2VK_3
    VK_4VK_5VK_6VK_7
    VK_8VK_9VK_SEMICOLONVK_EQUALS
    VK_AVK_BVK_CVK_D
    VK_EVK_FVK_GVK_H
    VK_IVK_JVK_KVK_L
    VK_MVK_NVK_OVK_P
    VK_QVK_RVK_SVK_T
    VK_UVK_VVK_WVK_X
    VK_YVK_ZVK_NUMPAD0VK_NUMPAD1
    VK_NUMPAD2VK_NUMPAD3VK_NUMPAD4VK_NUMPAD5
    VK_NUMPAD6VK_NUMPAD7VK_NUMPAD8VK_NUMPAD9
    VK_MULTIPLYVK_ADDVK_SEPARATORVK_SUBTRACT
    VK_DECIMALVK_DIVIDEVK_F1VK_F2
    VK_F3VK_F4VK_F5VK_F6
    VK_F7VK_F8VK_F9VK_F10
    VK_F11VK_F12VK_F13VK_F14
    VK_F15VK_F16VK_F17VK_F18
    VK_F19VK_F20VK_F21VK_F22
    VK_F23VK_F24VK_NUM_LOCKVK_SCROLL_LOCK
    VK_COMMAVK_PERIODVK_SLASHVK_BACK_QUOTE
    VK_OPEN_BRACKETVK_BACK_SLASHVK_CLOSE_BRACKETVK_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 を設定します。 以下に、記述例を示します。

    var el = env.locale; 例 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>
    

    これでコマンドを活性化するのにこれらのショートカットを使うことができます。 といっても、まだスクリプトは書いていないため、クリップボード系のコマンドは、実行されたとしても何もしません。

    var el = env.locale; ここまでのファイル検索ダイアログの例 : ソース 表示

    キーイベント

    キーボード入力関連のイベントは 3 つあります。 これらは、キーと機能を関連づけるために、上で説明した方法が適用できない場合に用いられることになります。 これらのイベントについて以下に記述します。

    keypress 
    要素がフォーカスを持っていて、キーが押されて離されたときに呼び出されます。フィールドに入力された文字が、許可されたものかどうかをチェックするために使用することができます。
    keydown 
    要素がフォーカスを持っていて、キーが押されたときに呼び出されます。このイベントは、キーが押された直後に、まだ離されていない状態でも呼び出されることに注意してください。
    keyup 
    要素がフォーカスを持っていて、キーが離されたときに呼び出されます。

    【訳注: 日本語入力が ON のときは、いろいろ簡単ではないようです】

    キーイベントは、フォーカスを持つ要素へのみ送信されます。 通常、テキスト入力欄、ボタン、チェックボックスなどが該当します。 フォーカスを持つ要素がない場合には、キーイベントは、代わりに XUL 文書自身に対して送信されます。 この場合、イベントリスナーを window タグに追加することができます。 といっても、通常は、広くキーに応答したいのであれば、先に述べたようにキーボードショートカットを使います。

    キーイベントオブジェクトは、押されたキーを保持する 2 つのプロパティを持っています。 keyCode プロパティは、キーコードを保持します。 目的のキーが押されたかを調べるためには、このセクションで既出のキーコード表で示されている定数のいずれかと比較することになります。 charCode は表示可能な文字の場合に用いられて、押されたキーの文字コードを保持します。

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


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

    Contributors to this page: ethertank, Morishoji, Mgjbot
    最終更新者: ethertank,