Web scratch

Archive for the ‘Jetpack’ Category

ConsoleのTabsでシェルにcmd+activateの実行をさせる

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

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

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

Mozilla 勉強会@東京 5thでのLT枠で「世界のJavaScript情報を読もう」というタイトルで発表してきましたので、その補足などの記事。
以下が発表に使ったスライドとなります。

Read the rest of this entry »

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

またJetpack SDKで1つアドオンを作成してみました。
リンクをクリックしてページ移動などの通信が始まった際に、風を切り裂くような音を出すアドオンです。

• 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にはGoogle – ウェブ履歴というものがあり、検索してどのページを訪ねたかなどが記録されています。
またその記録は検索ページで既読リンクの色にするなどの判定にも使われています。
Google検索から訪ねたサイト以外のURLもウェブ履歴に登録するFirefox拡張機能を作成してみました。
既に

• 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/

最近Jetpackをいじり始めたので、何かを作りながら作り方を学んでみる。

作ったものなど

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みたいなものを使えるらしい。