読者です 読者をやめる 読者になる 読者になる

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

前回に引き続き、MDCの日本語版と英語版を切り替えるFirefox拡張機能を作成する。簡単に復習すると、要するにURL文字列のjaとenを切り換える機能を作れば良いだけだ。

参考資料

最近は拡張開発業界(?)が盛り上がっているようで、参考資料が増えてきている。いいことだ。

今年の8月、ついに発売された。特に3章「Firefox 3向けの拡張機能開発テクニック」が役に立つ。というか、本格的すぎて理解しきれていない。今回は「標準ライブラリ FUELを活用する」というhackを参考にした。

いつの間にかこんな良さげな連載が始まっていた。このブログよりよっぽど役に立つので、参考にしまくる。

作成ファイル一覧

今回作成したファイルは以下の通り。

chrome.manifest
install.rdf
chrome/content/main.xul
chrome/content/switch_page_locale.js

このうち、「chrome.manifest」と「install.rdf」は今までを見て適当に作ってほしい。ちょっと名前を書き換えるぐらいなので、詳しい内容は省略する。また、見ての通り作成する拡張機能の名前は「Switch Page Locale」とした。

JavaScriptファイル作成

まず、JavaScriptファイル(switch_page_locale.js)を作成する。これが拡張機能の本体になる。

var SwitchPageLocale = {
    switchLocaleCurrenTab: function() {
        SwitchPageLocale.switchLocale(false);
    },

    switchLocaleNewTab: function() {
        SwitchPageLocale.switchLocale(true);
    },

    switchLocale: function(newTab) {
        // URI置き換えの対象となるホスト名
        var targetHost = "developer.mozilla.org";

        // URIの置き換え対象となる文字列の定義
        var replaceStr = [
            {oldStr: "/en/", newStr: "/ja/"},
            {oldStr: "/ja/", newStr: "/en/"},
        ];

        // 現在のタブのnsIURIオブジェクト
        var currentUri = Application.activeWindow.activeTab.uri;

        if (currentUri.host == targetHost) {
            var newUri = currentUri.clone();

            for each (var item in replaceStr) {
                if (currentUri.path.match(item.oldStr)) {
                    // 置き換え対象となる文字列が含まれていた場合
                    // pathを置き換える
                    newUri.path = currentUri.path.replace(
                            item.oldStr, item.newStr);

                    if (newTab) {
                        // 新しいタブとして開く
                        Application.activeWindow.open(newUri);
                    } else {
                        // 現在のタブに新しいページを読み込む
                        Application.activeWindow.activeTab.load(newUri);
                    }

                    break;
                }
            }
        }
    },
};

まず var SwitchPageLocale = { ... }; という風に一つの大きい{}でくくられている。この{ ... }は「オブジェクトリテラル」と言って、この中括弧でオブジェクトを記述し、SwitchPageLocaleという変数に代入している。そして、そのオブジェクトの中には「プロパティ名:プロパティ値」という形式で3つのプロパティが定義されている。

なぜこんなことをするのかというと、変数、関数の名前の衝突を避けるためだ。例えば1つめの関数には、SwitchPageLocale.switchLocaleCurrenTab という名前でアクセスし、頭のSwitchPageLocaleというオブジェクト名は省略できない。これにより、他の拡張機能なんかで同じ名前の関数が定義されていたとしても、今回作成した関数と区別がつけれるようになる。

もっとも、このオブジェクト名が衝突してしまう可能性はあるが、そんな時は運が悪かったと思ってあきらめることにする。なるべくあやしげな名前をつけておこう。この辺は「Firefox 3ではじめる拡張機能開発」の第3回 機能を実装する(中編)を参考にした。

コードの内容だが、メインとなるのは3つ目のswitchLocale関数だ。この関数内では、噂の「FUEL」を使っている。お手元のFirefox 3 Hacks 110ページを開いてほしい。ここから数ページに渡って、現在タブのnsIURIオブジェクトを取得する方法が書かれている。それが「Application.activeWindow.activeTab.uri」という部分だ。残念ながらnsIURIの説明は載っていないので、MDCのページも参考にした。その下のコードでは、HOST名が「developer.mozilla.org」だったら/ja/と/en/を入れ替えたページに移動する、という処理を行っている。これで英語版と日本語版の切り換えができるはずだ。

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>

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

</overlay>

JavaScriptファイルで「ページを切り換える」というメイン処理を作成したので、今度はその処理を呼び出すUIを作成する。今回は単純に右クリックメニューに追加した。まずscript要素で作成したJavaScriptファイルを指定し、右クリックメニューを選択するとその関数を呼び出すようにしている。詳しくは第2回 機能を実装する(前編)を参考にしてほしい。

実はこれはまだ未完成だ。本当は今のタブ、新しいタブのどちらで開くかを選択できるようにしたい。今後のお楽しみとしてとっておくことにする。

動作確認

さっそく動作確認をしてみる。


日本語ページを表示して、「switch page locale」を選択すると...


英語ページに移動した!

いい感じだ。URLのjaがenに代わっているのが見えるだろうか。

今後の予定

今後は右クリックからだけでなく、キーボードショートカットからも移動できるように改造する。

< 前へ | 次へ >

この連載の一覧