MDCの日本語版と英語版を切り替えるFirefox拡張機能を作成する (その3)

前回に引き続き、MDCの日本語版と英語版を切り替えるFirefox 拡張機能を作成する。

これまでのあらすじ

前回までで、とりあえずページを切り換えるJavaScriptコードはできた。できたんだけど、ページを移動するためにはマウスの右クリックメニューから選ばなくてはいけない。でも、そんなめんどうなことはしたくない。というか、マウスで選ぶくらいならページの右上にある「English」とかいうリンクを選んだ方が早い。そんなわけで、この拡張にはショートカット機能が必須だ。さっそく機能を追加してみた。

参考にしたページは以下。
キーボードショートカット - XUL チュートリアル | MDN

どのキーに割り振るか

まず、どのキーにショートカットを割り振るか決めなければならない。そこで、以下のFirefoxサポートページを見てみた。

キーボードショートカット | Firefox ヘルプ

なんてこった。ほとんど空きが無いじゃないか。「Ctrl+何か」で空いてるのはMとQぐらいしかない。というか「Web Search」の「Ctrl+K or Ctrl+J」ってなんなんだ。2個も使うなよ。ちょっとはゆずれよ。

まあ、今回はCtrl+Mを採用しておく。ちょうどMは「MDC」を連想させるので、いい感じだ。

あと、そのサポートページのソースを見てみたら、めちゃくちゃきたなくて目が潰れそうになった。みんなは見ちゃだめだぞ。

XULファイルの内容

それでは今までのXULファイル(main.xul)を修正する。最終的な出来上がりは以下の通りだ。

<?xml version="1.0"?>

<overlay id="switch_page_locale-overlay" 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="application/javascript" 
    src="chrome://switch_page_locale/content/switch_page_locale.js"></script>

  <keyset>
    <!-- キーボード ショートカットの定義 -->
    <key id="switchCurrentTab" modifiers="accel" key="m"
      oncommand="SwitchPageLocale.switchLocaleCurrenTab();" />
    <key id="switchNewTab" modifiers="accel,shift" key="m"
      oncommand="SwitchPageLocale.switchLocaleNewTab();" />
  </keyset>

  <menupopup id="goPopup">

    <!-- 履歴メニューに追加 -->
    <menuseparator />
    <menuitem
      id="switch-page-locale"
      label="switch page locale"
      accesskey="s"
      key="switchCurrentTab"
      oncommand="SwitchPageLocale.switchLocaleCurrenTab();" />

  </menupopup>

  <popup id="contentAreaContextMenu">
    <menuitem id="taghelper-menu"
              label="switch page locale"
              accesskey="s"
              oncommand="SwitchPageLocale.switchLocaleCurrenTab();" />
  </popup>

</overlay>

修正内容の説明

キーボードショートカットはkey要素によって定義する。上の内容から関係ある部分のみを取り出すと、以下の様になる。見ての通り、key要素はkeyset要素内に書かなくてはならない(そうしないと無視される)。

  <keyset>
    <!-- キーボード ショートカットの定義 -->
    <key id="switchCurrentTab" modifiers="accel" key="m"
      oncommand="SwitchPageLocale.switchLocaleCurrenTab();" />

    <key id="switchNewTab" modifiers="accel,shift" key="m"
      oncommand="SwitchPageLocale.switchLocaleNewTab();" />
  </keyset>

押すキーの指定は、modifiersとkey属性によって行う。key属性は実際に押すキーの指定で、ここでは"m"とした。modifiersとは修飾キーのことで、つまりはmといっしょに押すShiftやControlなんかを指定する。

ここで一見"control"と指定すれば良いように思えるが、そうではない。WindowsやLinuxのユーザーはCtrl+何か、というショートカットが当たり前だと思っているが、どうやらプラットフォームによってはそうではないらしい。例えばMacでは普通、Commandキー+何か、というショートカットを使う(らしい)。そこで、modifiersとして"accel"を指定する。これは例えばWindowsならCtrl、MacならCommandと言う風に、プラットフォームごとにショートカットに使用する普通のキーを指定したことになる。これでWindows、Linux、Mac、その他わけわかんないマニアックな環境にも対応できる。

そしてその下の行、oncommand属性で実際に呼び出されるJavaScript関数を指定している。そのまま関数名を書くだけなので、好きなように書いてくれ。

その下、二つ目のkey要素では、Shift+Control+Mというショートカットを定義している。こんな風に、modifiersではカンマまたはスペース区切りで複数指定できる。ここでは、Shiftを押しながらの場合はバックグラウンドのタブで開くようにした。

メニューバーの修正

これでほとんど終わりなのだが、「履歴」メニューバーにもメニューを追加しておく。下を見てほしい。

  <menupopup id="goPopup">

    <!-- 履歴メニューに追加 -->
    <menuseparator />
    <menuitem
      id="switch-page-locale"
      label="switch page locale"
      accesskey="s"
      key="switchCurrentTab"
      oncommand="SwitchPageLocale.switchLocaleCurrenTab();" />

  </menupopup>

「履歴」メニューのIDは"goPopup"だ(DOM Inspectorで調べられる)。ポイントはmenuitem要素のkey属性で、上で追加したkey要素のidを指定する。これによってラベルの右側に「Ctrl+M」と表示されるようになる。ショートカットを忘れると困るので、こうやって表示させておく。