MDCの日本語版と英語版を切り替えるFirefox拡張機能を作成する (その3)
前回に引き続き、MDCの日本語版と英語版を切り替えるFirefox拡張機能を作成する。
これまでのあらすじ
前回までで、とりあえずページを切り換えるJavaScriptコードはできた。できたんだけど、ページを移動するためにはマウスの右クリックメニューから選ばなくてはいけない。でも、そんなめんどうなことはしたくない。というか、マウスで選ぶくらいならページの右上にある「English」とかいうリンクを選んだ方が早い。そんなわけで、この拡張にはショートカット機能が必須だ。さっそく機能を追加してみた。
参考にしたページは以下。
キーボードショートカット - XUL チュートリアル | MDN
どのキーに割り振るか
まず、どのキーにショートカットを割り振るか決めなければならない。そこで、以下の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」と表示されるようになる。ショートカットを忘れると困るので、こうやって表示させておく。