予てから告知があったとおり、2014年1月7日に Mozilla Add-on Builder(クラウドサービス)がリードオンリーモードに変更されました。

それに伴い、Firefoxの拡張機能の開発は Add-on SDKをインストールして PC上で行うことになりました。
もちろん、いままで Add-on Builderで開発してあった拡張機能を Add-on SDKのデスクトップ環境に移行する必要があります。

しかし、例によって移行方法はドキュメントが準備されていませんでしたので移行方法をまとめました。
よかったら参考になさってください。

Mozilla Add-on Builderから Add-on SDKデスクトップ環境への移行方法

http://backy0175.at.webry.info/201401/article_3.html

mozillaから残念なお知らせの発表がありました。
mozillaの Add-on Builderは特別な開発環境をインストールすることなく、Firefox上で拡張機能を開発できる便利なサービスでした。
しかし、2014年4月で Add-on Builderのサービスを終了するとのことです。

mozilla 公式ブログ ADD-ONS Blog (英語)
“Add-on Builder – 2013/12/18″

https://blog.mozilla.org/addons/2013/12/18/add-on-builder/

今後の予定ですが、2014年1月7日をもって Add-on Builderは read-only modeになり、新規の拡張機能の作成はもちろんのこと既存の拡張機能の修正もできなくなり、2014年4月にサービスが終了になるとのことです。

ということで、2014年1月からは拡張機能を開発するためには Add-on SDKのインストールが必須となりました。

尚、私のブログではこの件に関する補足情報など掲載してあります。
よかったら、ご覧ください。

【残念なお知らせ】 Add-on Builderは 2014年4月でサービスを終了します

http://backy0175.at.webry.info/201312/article_7.html

現時点では Mozilla Add-on Builderでローカライズ(多言語化)した拡張機能を作成できません。
しかし、若干の手作業を付け加えることで Add-on Builderで作成した拡張機能をローカライズ(多言語化)できることが判りました。

ローカライズ(多言語化)に関する前提知識とローカライズ(多言語化)する方法についてまとめましたので拡張機能開発の参考にしていただけると嬉しいです。

「Add-on Builderで作成した拡張機能をローカライズ(多言語化)する方法について」

参考：
Add-on Builderでローカライズ(多言語化)に対応した拡張機能を開発できません
(続) Add-on Builderでローカライズ(多言語化)に対応した拡張機能を開発できません

こんにちわ。赤塚です。
先日行われた Mozilla Hackathon 2012 におけるアドオン開発グループの成果をまとめてご報告いたします。

• Piro さん
  • ツリー型タブの改良
• Gomita さん
  • ジェスチャによる操作を可能とするアドオン（モバイル）
• hATrayflood さん
  • printplus
• luckpoint さん
  • 選択した文字列で検索できるようにコンテキストメニューを追加（モバイル）
  • 音声検索できるメニューを追加（モバイル）
• EnsekiTT さん
  • 我ログ
• port4art さん
  • ユーザが選択した複数の英単語の意味をデスクトップの通知を用いて表示する
• y_system さん
  • スーパー高校生の名言をランダムにアドオンバーに表示する
  • 京急の運行情報が通常かそうでないかを取り出して表示
• dokan さん
  • 任意のサイト上にある、任意の要素を発見した際に、なんしか知らせるアドオン
• dynamis さん
  • fixprefix（モバイル）
• 私
  • kinect.js

１．Piro さん
・ツリー型タブの改良
かねてからリクエストのあったと言うツリー型タブとブックマークの連携を実装しておられました。デモでは、任意のツリーをドラッグしブックマークにドロップすると、そのままブックマークとして登録されたり、逆にブックマークをドラッグ＆ドロップしてツリータブにされていました。ツリーによってグループが表現できるのでグループ化するという意味では Panorama に近いかもしれません。ただ、空間的認知には若干劣る可能性がありますが、モードレスで触れられる点はとても有利なように思いました。操作的にも動き的にもとてもスムースな印象で、質の高さを感じざるを得ませんでした。さすがです。
アドオン：https://addons.mozilla.org/ja/firefox/addon/tree-style-tab/

 

２．Gomita さん
・ジェスチャによる操作を可能とするアドオン（モバイル）
マウスジェスチャによるブラウザの操作を可能とするアドオン FireGestures の開発者でもあらせられる Gomita さんは、モバイルにジェスチャを持ち込む試みをされておりました。具体的には、マルチタッチが可能なモバイルならではの三本指によるジェスチャで、三本触ったまま左右に動かすことでタブの移動、上に動かしてコンテンツのリロード、下に動かしてタブを閉じる機能を実装されておりました。
ジェスチャの他にも、例えば他者の指を借りないと動かないコンテンツによるコミュニケーション促進や、指２０本乗らないと動かない強制柔軟機器など、さまざまな用途が考えられますね。
アドオン：https://addons.mozilla.org/ja/android/addon/three-finger-swipe/
github：https://github.com/gomita/threefingerswipe

 

３．hATrayflood さん
・printplus
このアドオンは閲覧中のウェブページを PDF にするだけでなく、PDF化する際のフッタやヘッダ、紙の向きに対する最適化など、さまざまな細かい調整が可能となります。今回は、以前作ったこのアドオンを最新版の Firefox に対応するための開発をしておられました。
アドオン：https://addons.mozilla.org/ja/firefox/addon/printplus/
github：https://github.com/hATrayflood/printplus
ご本人によるレポート：http://karakurimono.biz/mozillathon2012/

 

４．luckpoint さん
・選択した文字列で検索できるようにコンテキストメニューを追加（モバイル）
デスクトップでできるけれども、モバイルではまだ未実装なモノはまだ沢山ありそうです。本作品もそのうちの一つと言えます。選択した文字列をデフォルトのサーチエンジンで検索できるモバイル用アドオンです。
アドオン：https://github.com/luckpoint/luckpoint.github.com/blob/master/assets/Mozilla_Hackathon2012/search_contextmenu_addon.xpi

・音声検索できるメニューを追加（モバイル）
iPhone の Siri などに見られるように、音声認識技術は日々進歩し、実用に耐えうるまでになってきました。本作品は、ブラウザ上で音声による検索を実現できるようにしたアドオンで、デバイス自体に音声認識機能が無い場合でも、音声による検索が可能となるはずです。モバイルになって、キーボードの存在が危うくなっていったとき、音声は有力な入力方法の一つとなっていくのでしょうね。実装ではアドオンの範疇だけでは間に合わず java にも変更を加えていたようです。
アドオン：https://github.com/luckpoint/luckpoint.github.com/blob/master/assets/Mozilla_Hackathon2012/recognize_speech_addon.xpi
ネイティブモジュール：https://github.com/luckpoint/luckpoint.github.com/blob/master/assets/Mozilla_Hackathon2012/fennec-17.0a1.en-US.android-arm.apk
ご本人によるまとめ：https://github.com/luckpoint/luckpoint.github.com/blob/master/_posts/2012-07-29-mozilla_hackathon2012.md

 

５．EnsekiTT さん
・我ログ
閲覧履歴をより細かく保持しておくためのアドオンです。ウェブと人の行動の関係を探る試みの基礎ツールとして開発をスタートしました。アドオン制作は初めてのことながら、HTML構造や閲覧した日時などを保持する機能が実装されました。

 

６．port4art さん
・ユーザが選択した複数の英単語の意味をデスクトップの通知を用いて表示する
Chrome 拡張機能にある英単語をハイライトすると該当英単語の意味が表示されるものの実現を目指しておられました。彼もアドオン制作は初めてのことながら、Addon-SDK の API にある selection および notifications を器用に組み合わせて実現していました。さらに、複数単語が選ばれたときにも対応し、選ばれると notifications によってバラバラとその意味が流れ出てくるようなアドオンが完成しました。全選択したらバグる の発言は笑いを誘っていました。
アドオン：https://www.dropbox.com/s/3av65nqg0l33330/port4word.xpi (今後掲載予定なはず)

 

７．y_system さん
・スーパー高校生の名言をランダムにアドオンバーに表示する
彼もまたアドオン制作は初めてでありました。今回作ったのは２つありましたが、一つ目は学生マーケティングにも参加されている凄腕スーパー高校生が放つ名言をアイコンをクリックすることでアドオンバーに表示するアドオンです。思わず、クリックせざるをえず、アドオンバーはすぐに満杯になっていきます。
アドオン：http://kamalab08.co.cc/files/wuitap.xpi

・京急の運行情報が通常かそうでないかを取り出して表示
ダァシエリエス、ダァシエリエス で有名な京急の、運行状態が通常かそうでないかを取り出してアドオンバーに表示します。地味ではありますが、彼にとっては確かに使えるアドオンなはずです。このような、自分が使うモノを自分で作るというコトが、今後もっと広まっていくことを熱望してやみません。
アドオン：http://kamalab08.co.cc/files/keikyu.xpi

 

８．dokan さん
・任意のサイト上にある、任意の要素を発見した際に、なんしか知らせるアドオン
彼もまた初のアドオン制作でした。ウェブページはさまざまな要素で成り立っていますが、その中から自分の見たい・知りたい要素があった場合にアドオンバーで表示するアドオンです。例えば、RSS が装備されているとか、やばいウェブサービスが埋め込まれていないかなどを発見することができます。開発のあとは学会の準備のための論文執筆。

 

９．dynamis さん
・fixprefix（モバイル）
ウェブページでは CSS でスタイルを決めていくことが普通のこととなってきましたが、まだ仕様が確定していないプロパティに関してはベンダープリフィクスが付加され、それぞれ実装されていきます。ウェブページによっては、Firefox でも実装されているものの、特定のベンダープリフィクスのみが指定されていてうまく表示できないこともあり、そのプリフィクスを -moz に置き換えて閲覧できるようにしようとするアドオンがこれです。残念ながら最後まで実装できなかったようですが、リモートデバッガの使い方を習得されるなど、これからの開発に役に立つ知見を得られたようです。

 

１０．私
・kinect.js
昨今、外部デバイスとブラウザをつなぎ JavaScript で制御するコトに喜びを感じている私ですが、今回はちょっと考えるところあり kinect をつなげてみました。実装としては、kinect を叩くためのネイティブライブラリを作成し、js-ctypes でそれを呼ぶことで、JavaScript からの制御を可能としています。サンプルアプリケーションとして、任意のウェブページの各要素を手で触れ、その要素が何であるかを表示しつつどんどん壊していくものを作りました。ちょっとまだ遅いけど。
github：https://github.com/dadaa/kinect.js

 

以上がアドオン開発の部の成果です。それぞれがさまざまな領域においてブラウザを拡張することができました。すばらしいっす。

追記: オリジナルドキュメントが MDN に移行したのに伴い翻訳も MDN の Add-on SDK ページに移動しました。

Firefox にはアドオン開発用の SDK が公開されており、SDK にはチュートリアルや API リファレンスなどの開発者ガイドも用意されています。しかし、英語のみで若干敷居が高いという問題がありましたが、今回その開発者ガイドのうち、SDK のインストール手順とチュートリアル部分を日本語訳し、公開しました。

/addon-sdk-docs/dev-guide/index.html

但しこのサイト上で公開するのは当面の間だけであり、将来的には SDK 本体にマージして行く予定です。いずれマージされるってことでテンプレートなどは AS IS でドキュメントを生成しています。見苦しいところもあるかと思いますがご容赦ください。

未訳ページの翻訳にご協力頂ける方はこの投稿にコメントするか、Twitter や Facebook などでご連絡ください。翻訳についてのご指摘などは github で Issue を立てていただくか、pull request していただければ幸いです。

 

Add-on Builderについてあまり日本語の情報が見つからなかったので、「Mozilla Add-on Builderによる拡張機能開発の入門」として

• ビギナー向け操作方法
• ドキュメント・リードマップ

を作成しました。

拡張機能開発の参考にしていただけると嬉しいです。

前回の記事：Add-on SDK で始めるアドオン開発（自作モジュール編）

XPCOM コンポーネントの利用

前回までの記事では、 Add-on SDK に備わっているライブラリを用いたアドオンの実装を行いました。
SDK のライブラリを用いた開発は、簡単な記述で拡張機能を実装できる反面、必要なモジュールが不足しているなどの理由で、実現可能な機能が限られているのが現状です。

XPCOM コンポーネントは、ファイルの入出力やレジストリ操作など、 JavaScript だけでは実現できない機能をクロスプラットフォームに提供しており、これを用いることでより高機能な拡張機能や、 SDK のモジュールなどを実装することが可能となります。

今回の記事では、 Firefox のデータベースからユーザの履歴情報を取得する機能を例として、XPCOM コンポーネントの機能を SDK で利用する方法を紹介します。

(さらに…)

前回の記事：Add-on SDK で始めるアドオン開発（Context-menu 編）

今回の記事では、前回作成したコンテクストメニューの拡張機能を題材として、自作モジュールを作成する方法を紹介します。
今回の自作モジュールでは、今まで利用してきた addon-kit ライブラリだけでなく、よりプリミティブな機能を提供する api-utils ライブラリを用いた実装を行います。

また、拡張機能に表示する文字列などを各言語ごとに用意しておき、ユーザの環境に応じて拡張機能のローカライズを行う方法も紹介します。

(さらに…)

前回の記事：Add-on SDK で始めるアドオン開発（Content Script 編）

今回の記事から、 context-menu モジュールを利用した拡張機能の実装を例にして、 Add-on SDK によるアドオン開発方法を紹介して行こうと思います。

今回の記事では、前回 紹介した Content Script を、コンテクストメニューから実行し、現在のページの情報を取得してみます。
また、 simple-storage モジュールを用いて、取得した情報をアドオンのストレージに保存する方法も紹介します。

(さらに…)

前回の記事：Add-on SDK で始めるアドオン開発（Panel & Widget 編）

Add-on SDK で作成するアドオンのスクリプトは、主に JavaScript で記述されますが、 Web ページ上で動作する JavaScript とは異なり、このスクリプトから Web ページの DOM に直接アクセスすることができません。
これは、アドオンのスクリプトが、 通常のWeb ページとは異なるコンテクストで動作しているためです。
アドオンのスクリプトから DOM にアクセスするためには、 Content Script という別のスクリプトを利用しなければなりません。

詳細：Two Types of Scripts

今回の記事では、 Content Script を用いて、実際にパネル内の Web ページ の DOM を操作してみます。
また、 Content process と Add-on process との間でデータを送受信する方法も紹介します。

(さらに…)