こうすれば、タブを開くだけでJetpackのコマンドが読み込まれて便利。

Shellにnyaosとかを使う方法はよく分からない。

• インストール – Jetpack SDK – あすかぜ・ねっと

途中でリンクの羅列が出てきますが、それらのサイトの詳細は以下の記事にまとめてあるため興味を持った方は見てください。

• 今からRSS購読すべきタグと検索結果 | Web scratch
• 海外のJavaScript情報を見つけよう | Web scratch

スライドを読むと分かりますが、世界のいろんなJavaScript情報を紹介するサイトJSer.infoを公開しました。
このサイトを立ち上げた理由はスライドやJSer.infoについて | JSer.infoに詳しく書いてあるため詳細を省きますが、一週間程度を目安にその時の(過去の内容も含むこともあります)JavaScriptの情報を紹介していくつもりです。
このサイトは現在Tumblrで運用していますが、Tumblrをブログとして使う準備は以下の記事にまとめてあります。

• Tumblrをブログとして使うためにやるべき事 | Web scratch

もう少しノウハウが溜まってきたらJSer.infoの方で取り上げるかもしれません。

JSer.info

http://jser.info/

アウトラインメモ

以下は参加時にメモを取った内容です。
メモ:Onenoteでメモを取った、プレゼンにはPowerPointとi-clickrを使用した。

スケジュール

• 14:30 – 15:00: 開場、発表者準備

• 15:00 – 15:10: Opening
• 15:10 – 15:40: アドオン開発の最新事情
• 15:40 – 16:30: Jetpack Library 事始め
• —– 休憩 10 分間 —–
• 16:40 – 17:10: Tumucumaque
• 17:10 – 17:25: Panorama関連でちょっと作ってみた系
• 17:25 – 18:00: Lightning Talk & Free Discussion
• —– 撤収、移動 30分 —–
• 18:30〜20:30: 懇親会 (新年会)

貼り付け元 < https://dev.mozilla.jp/events/workshop08/>

アドオン開発の最新事情

Paackedアドオン

高速化のためXPIのままインストールされるようになる

UIの変化

ステータスバーの廃止

パノラマ導入に伴うプロパティの追加

Tabbrowserの構造の変化

FenncではContentとChromeのプロセス分離してるいるためgBrowserを使用していない。

アドオンマネージャー

32×32 -> 48×48, 64×64

OSによっても少し異なる

XPCOMの変更

インターフェイスの凍結は解除されてJetpackがAPIを提供する

Jetpackでモバイルアドオンも開発

1.1ぐらいで予定

Jetpack Library 事始め – あすかぜ

Jetpack prototype → Jetpack SDK → Addon SDK(feature-stable)

APIのcoreごとパッケージしてるのがprototypeとの違い(それぞれ独立してる)

コンテキストとウィジェット程度しかスイッチ的なものは存在していないので、必要なものは低レベルAPIを使って書かないとだめ。

低レベルAPI→Componentsオブジェクトへのアクセスやタブやウィンドウ管理など

再起動不要

拡張機能が無効化時に元に戻すのはライブラリの責任。

api-utilsのunloadモジュール

バージョン非依存

バージョンによりFirefoxの動作が変わる可能性があるところはライブラリが吸収する

API自体は変更しない

E10S

プロセス分離のコードネーム

postMessageを使って非同期通信

Jetpack SDK –e10sのオプションで作成できる。

Addon kitの高レベルAPI

Addon SDKでAPIのListenモデルが変更された。

独自のライブラリ

独自のアイコンを追加する例

アイコン追加

XULプログラミング的にCreateしてappend

アイコン削除

ウィンドウ追加

ウィンドウ削除、拡張アンロード時

それぞれの場合において動作を書く。

ウィンドウの監視はonTrack,onUntrackで監視する。

まとめ

自作ライブラリを作ることでJetpackの可能は大きく広がる。

XULの構造を知ってる人は今でも必要です。

Addon Builderに自作ライブラリも登録できる。

Virtual Park Tumucumaque(とぅむくまけ) – あかつきだいすけ

Mozilla Parks ProjectはMozilla foundationのプロジェクトの一つ(Nakamokaとか自然公園)

生物の多様性をキーワードにしたアプリケーションの作成

Tumucumaqueに関連するTweetsを集めてグラフィカル表現

treeに関連するものから気を生やす

Audio APIを使ってマウスカーソルを中心とした音を流す(水なら水の音)

ゴール

自然の現状+人の考えるTumucumaque

多様性(インターネットの多様性)

進化

Panorama関連でちょっと作ってみた系 – teramako

Panoramaをもう少しデスクトップっぽくする。

壁紙を貼る – useChrome.css

chrome://browser/content/tabview.html

@moz-documentなどを駆使してHTMLにCSS適応する

パノラマにガジェットを作る

userChrome.jsの特殊版みたいな

SVGでクロックの拡大縮小の対応

XULで書かれていないのでScriptの埋め込みができない、link relも同様

MozJSSubScriptLoaderで読み込ませる。

パノラマは起動時には初期化処理が起きないので、tabviewの提供してるtabviewframeinitializedイベントを待つ。

Vertical Toolbarの紹介 – Gomita

Operaの縦置きのツールバー

自動で隠す機能

CSS transitionでleft-marginで隠している

右側配置はdir属性rtlをセットすると中身が逆転する

AMO の新開発者ツールとレビューシステム & キミの知らない AMJ – by kohei.yoshino

AMOの開発者ツールが新しくなった。

はじめてのもじらのばぐじらの歩き方（バグの立て方編）- by saneyuki

習うより慣れろ
メールの登録を有効利用する

xpiの名前変えたいのだけどよくわからん。パッケージフォルダ名とpackage.jsonを書き換えて同名にしてもcfx xpiでエラーでる。

コード整形とシンタックスハイライトするjetpackを作った – Cherenkovの暗中模索にっき

Jetpack SDKでcfx xpiによってxpiファイルを生成して、そのアドオンをインストールするとpackage.jsonのnameに書かれていた名前がアドオンの名前になります。
しかし、package.jsonのnameはパッケージの名前なので大文字やマルチバイト文字やスペースなどが使えず自由に名前をつけようとするとエラーになります。
名前を自由につけるにはpackage.jsonにfullNameというキーを追加して、そこにスペースや大文字(マルチバイトをつけるとエラーになった…)を使った名前をつけることで、cfx xpiによって生成されたアドオンの名前に反映されます。

{
 "id": "jid0-xxxxxxxxx",
 "version": "0.1",
 "description": "test",
 "name": "test-package",
 "fullName" : "THIS is TEST package",
 "author": "azu"
}

実際の生成の流れとしてはpackage.jsonにfullNameがなかったら、nameの中身がfullNameとして扱われるようになっているみたいです。
fullNameに日本語入れる方法はよく分かりませんでした。ユニコードエスケープしてもエラーになる。
生成されるxpiファイル自体のファイル名はnameの中身が使われるようです。

Google Web Historyに見たページを自動記録するアドオン(Jetpack SDK) | Web scratch

http://efcl.info/2010/0809/res1872/

Labs/Jetpack/JEP/31 – MozillaWiki

https://wiki.mozilla.org/Labs/Jetpack/JEP/31#Packages

• KIRISAKE :: Add-ons for Firefox ダウンロード先
• KIRISAKE at master from azu’s JetpackSDK – GitHub ソースコード

作った理由ですが、
移動する際に音を出すと、ちゃんとリンクをクリックできたかなどが聴覚的にも認識できるのと、上記のような音を使う事でブラウザが少し早くなったような感じがします(I shallplease)

という後付けの理由があったりしますが、HTML5のAudioタグを使って見たかったというのが第一の要因です。
そういう気分になったのは中国のJetpackerのLT資料を見つけて、pageWorkerでhtmlファイルを読み込んでその中でAudioタグを鳴らすというサンプルが載っていたので実践してみました。
見つけたLTの資料はこれJetpack SDK: The new possibility of the extensions on browser

処理的にはたいしたことはやっていませんが、Jetpack SDKにはページ移動(ページを読み込みじゃなくて、通信が始まった瞬間)に反応するAPIはまだないような感じなので、nsIWebProgressを使った普通のFirefox拡張機能と同じように直に書きました。
Components.interfacesとか使う必要性が出てくるわけですが、Jetpack SDK0.6からはCiやCcというエイリアスがデフォルトではなくなったので、以下のようにrequireしてから使う必要があります。
Jetpack SDK 0.6 がリリースされました « Mozilla Developer Street (modest)

var {Cc, Ci} = require("chrome");

ちなみにこのvar {a,b} = obj;みたいな表記は分割代入というJavaScript 1.7からの機能を使ったもので、

var Cc = require("chrome").Cc , Ci = require("chrome").Ci;

というのと同様の意味になります。一部地域ではよく見かけるので覚えておくと便利です。

• Kanasan.JS Jetpack ワークショップ: Days on the Moon
• JavaScript の分割代入まとめ – mooz deceives you

参考サイト

• Progress Listenersでロケーションバーのurl変更されたときに何かする – フリーフォーム フリークアウト
• Latest topics > Split Browser開発のよもやま話（6）：分割されたブラウザの作り込み – outsider reflex

• Googleウェブ履歴を残すGreasemonkeyスクリプト
• Opera で Google Web History を使えるようにする UserJS – mallowlabsの備忘録

などGreasemonkeyやTomblooパッチなど代わりになる手段は山ほどある気がしますが、Jetpack SDKを使いたかったのと、意外にもFirefoxアドオンとして同じ役割するものが見つからなかったので作ってみました。

他のスクリプトとの違いは大して無いと思いますが、できるだけ無駄な送信を控えるようにしています。

• 最近訪れたサイトは重複送信しない(100件ぐらいでクリアされます)
• https://はホストのみを送信
• ローカルやIPアドレスベースのURLの場合は送らない

ダウンロードはAMOからできるようにしてあります。
Firefoxアドオンのxpiを簡単における場所が無かったので、AMOに登録しておいてあります。

• Google WebHistory Updater :: Add-ons for Firefox

Jetpack SDKでコンパイル?前のソースコードはこちらに

• Google-webhistory-updater at master from azu’s JetpackSDK – GitHub

Jetpack SDKで何か作るには

Jetpack SDKで既に3つほどアドオンを作成していますが、0.5だとJetpack prototypeとできることはそこまで変わってないです。(prototypeのギャラリー無くなったみたいですね。8個ぐらい作った気がする)
Jetpack SDKで作る上で参考にしたのは

• SCRAPBLOG : Jetpack 基礎的なAPIの使い方
• Jetpack SDK – あすかぜ・ねっと とても参考になる
• Jetpack SDK Docs

最後のJetpack SDK Docsはcfx docsで開いて、jetpack-coreあたりに現在使えるAPIが載っているのでそれを見て使い方を調べるとAPIの使い方は分かる感じ。(Jetpack prototypeの頃よりはドキュメントにサンプルもあってマシになりました)
一番ハマるところはcfxとかコマンドでエラーがでるとかその辺だった気がする。
環境はWindows Vistaです。
cfx testallすら通らない場合は-aとか-bオプションを指定してみるといい。 Jetpack SDK 0.4でcfx testallを成功させる方法 (windows) – Cherenkovの暗中模索にっき
毎回オプションを付けるのが面倒になったらlocal.jsonを作りデフォルト値を決めてみましょう。
自分はjetpack用のプロファイルを作りそれを指定してます

{
  "configs": {
    "default": [
      "-a", "firefox",
      "-b", "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
      "-P", "%appdata%\\Mozilla\\Firefox\\Profiles\\h545wqkn.jetpack"
    ],
    "ff37": [
      "-a", "firefox",
      "-b", "C:\\Program Files\\Mozilla Firefox 3.7\\firefox.exe",
      "-P", "C:\\Users\\admin\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\testuser"
    ]
  }
}

package.jsonを作り、libフォルダを作りmain.jsを書いて → さあcfx runで起動しようとしたら、まずはpackage.json内にidが自動生成されます。そしてもう一度cfx runすると下のようなエラーが出てくることがあります。

Traceback (most recent call last):
  File "D:\jetpack\bin\cfx", line 6, in 
    cuddlefish.run()
  File "D:\jetpack\python-lib\cuddlefish\__init__.py", line 475, in run
    include_dep_tests=options.dep_tests
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 267, in generate_bu
ild_for_target
    add_dep_to_build(dep)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 254, in add_dep_to_
build
    add_section_to_build(dep_cfg, "lib", is_code=True)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 232, in add_section
_to_build
    validate_resource_hostname(name)
  File "D:\jetpack\python-lib\cuddlefish\packaging.py", line 65, in validate_res
ource_hostname
    raise ValueError('invalid resource hostname: %s' % name)
ValueError: invalid resource hostname: jid0-英数字-フォルダ名-lib

これはpackage.jsonのnameに大文字やマルチバイト文字やスペースなどが含まれていると出てきます。(んなの分かるか)
なので小文字英数とハイホンあたりでnameを決めておきましょう。

console.logはコマンドプロンプトの方にでてくるので、それを使って(他に何かあるのかなー)デバッグしながらmain.jsなどを完成させて、xpiをcfx xpiコマンドではき出せば完成です。
まだ設定画面やパネルなどのGUIが簡単に使えなかったりしますが、用途が合えば簡単にアドオンを作成できるのでなかなか面白いです。

Google WebHistory Updater :: Add-ons for Firefox

https://addons.mozilla.org/ja/firefox/addon/213956/

作ったものなど

1. Copy shorten URL with is.gd
   クリックするとクリップボードに今のURLを短縮したものがコピーされる。
   いわゆるクリップボード機能&ステータスバーに挿入を使ってみたかった。
2. LDR_StatusBar_Notify
   LDRの未読件数をステータスバーに表示
   LivedoorReader StatusBar Notify
   http://d.hatena.ne.jp/zuzu_sion/20090520/1242900564
   を現在のバージョンで動くように修正しただけです。
   昔のバージョンではimportがなかったり、Jetpackが大文字でも動いてたらしい。
3. clipboard_display
   クリップボードの内容をステータスバーに表示。
   
   いわゆるクリップボード機能を使ってm(ry
   クリップボードが変更した際に知らせてくれるようなAPIはなかったのでintervalで回してるだけ。
4. Nico_make_volume_corrections
   ニコニコ動画で再生開始時にSettingで決めたボリュームにする。
   
   manifestで設定画面が簡単に作れるのはいい感じ。
   いわゆるGreasemonkey的なものなJetpack
   サイトの範囲を指定するのにはpageModsを使用する
   Labs/Jetpack/JEP/17 – MozillaWiki
   unsafeWindowはwrappedJSObjectを使っちゃってるが、javascript:プロトコルでブックマークレット的にやる方がよいです。
   これがXPCNativeWrapperとunsafeWindowの間でデータを送受信する | へびにっき 参考になります。

JetpackのAPIは
プロファイルフォルダ\extensions\jetpack@labs.mozilla.com\content\js
のjsを読むと何があるか分かる。
解説はLabs/Jetpack/JEPs – MozillaWikiを見て、検索をかける(たいていの場合まめ畑がかかります)

azu さんのjetpackに関するメモに返信 に自分がメモったことに対してteramakoさんからの指摘が書いてあります。
今Jetpackでどんなことがどのようにできるのかが何となく書いてあります。

Jetpack – MDC

https://developer.mozilla.org/ja/Jetpack
簡素だがAPI解説がまとまってる

Jetpack APIリファレンス | Screw-Axis

http://screw-axis.com/jetpack/jetpack-api-referencejetpack-api-reference/
ちょこっと古いけどわかりやすい

[Jetpack] – Cli@

http://d.hatena.ne.jp/efcl/searchdiary?word=%2a%5bJetpack%5d

なんかリンクいろいろ

30分で作るJetpack Feature (1) 概要 – JavaScriptとかPerlとかPHPとかさくらとか勉強する

http://d.hatena.ne.jp/lesamoureuses/20090715/1247637734
チュートリアル

JetpackにはSlideBarという機能もあるが今回全く触れてない。
All-in-One  Sidebarみたいなものを使えるらしい。