FF拡張 (1)

最近はWEBの技術を使ってPC用のネイティブアプリケーションを作ることができるらしい。

Github atomが代表的な例だが、次のような仕組みになっている。
io.js(node.js)でバックエンドのロジックを書く→なんたら(Reactとか).jsでバックエンドとフロントエンドのデータ受け渡しをする→GUIはHTML + CSSで見た目を作る。GUIはChroniumで描画するが、プラットフォームに合わせたChroniumをパックにしたバイナリを作ることでコーディングは一度でマルチプラットフォームなアプリ開発ができるんだと。

実際にはサーバーが動いているわけではないらしいが、ローカルでサーバーサイドのコードも動かすWEBアプリケーションといえばなんとなくイメージがつくだろうか。
NW.js=旧node-webkitとelectron=旧atom-shellというよく似た2つの開発環境がある。後者のほうが人気みたいだが、これは名前からもわかるようにもともとはatomを作るために作られたもの。

  

ここまで「らしい」「だそう」ばかりなことからある程度想像つくだろうけど、まだ一切触っていない。

まず自分はjavascriptをよく知らないし、HTMLとCSSもろくに書いたことがない。この状態でElectronを使った開発をはじめても挫折は必至なので、もう少し軽いところから始めてみようと思った。

Firefoxの拡張機能もHTML+CSS+JSで作ることができる。※

今回作るのはこういうもの。

開いているページ中にあるリンク先URLに特定の文字列を含むリンクをすべてハイライトする、またはすべてURLをクリップボードにコピーできるアドオン

これがなんの役に立つのか、分かったとしても声に出してはいけない。


画面イメージはこんな感じ。いくつかハイライト対象の文字列グループを持っておいて、それぞれのグループごとにハイライトやコピーを可能にする。
たとえばSearch EnginesのHボタンを押すと"google"か"bing"を含むリンクをハイライト、movieのCを押すと"youtube"か"niconico"を含むリンクをすべてクリップボードにコピーという感じ。

で、開発を始めたんだけれども困ったことがひとつ。

「Python デコレーター」とか「Scala 型パラメーター」で検索すると9割プログラミングに関する結果が返ってくる。当然求めている答えの載っているページも見つけやすい。
でも、「Firefox アドオン メニュー」とかで調べると逆に9割プログラミングと関係ない「おすすめFirefoxアドオン」とか「Firefoxに絶対入れるべきアドオン」とかしょーもない記事ばかり引っかかる。
「Add-on SDK」を入れるとか工夫はしてるんだけれども、なかなかうまくいかない。

※Firefox 3時代からある古典的な開発方法の方ができることは多いらしいが今回は入門編なのでパス。Firefox4 以降に対応するAddon-SDKを使った開発を選択した。(アドオンをインストール後、Firefoxの再起動を求められるのが前者、再起動なしで動くのが後者という見分け方がある。)