Posts Tagged ‘Jetpack’
Console2でJetpack SDKを使う
ConsoleのTabsでシェルにcmd+activateの実行をさせる
Shell | cmd.exe /k bin\activate |
Startup dir | Jetpackのディレクトリ |
こうすれば、タブを開くだけでJetpackのコマンドが読み込まれて便利。
Shellにnyaosとかを使う方法はよく分からない。
Mozilla勉強会@東京 5thで「世界のJavaScript情報を読もう」という発表をしました
Mozilla 勉強会@東京 5thでのLT枠で「世界のJavaScript情報を読もう」というタイトルで発表してきましたので、その補足などの記事。
以下が発表に使ったスライドとなります。
Firefox Developers Conference 2010 アウトラインメモ
去年に引き続きFirefox Developers Conferenceに参加してきました。
一応メモをとりながら聞いていたのでとても読みにくいですが公開。
内容がまとめきれないのは仕様です。
公式に動画と各発表者の資料リンクをまとめたものが公開されました(2010/12/22)
- Firefox Developers Conference 2010
- http://mozilla.jp/events/2010/fxdevcon/
Twitterのハッシュタグ#fxdevconを保存しておいたもの。
- Togetter – 「Firefox Developers Conference 2010」
- http://togetter.com/li/71239
@teramakoさんによる発表者の資料や参加者の感想などをまとめたブクマ
- はてなブックマーク – 特別でないただのブックマーク – fxdevcon
- http://b.hatena.ne.jp/teramako/fxdevcon/
takanoさんによる動画(一部は著作権上の問題などがあるためない)
- YouTube – fxdevcon2010
- http://www.youtube.com/results?search_query=fxdevcon2010&search=tag
キックオフ
瀧田さんによる挨拶から始まる
基調講演 Browsing Without Borders
Jay Sullivan (ジェイ・サリバン、Mozilla Corporation 製品担当バイスプレジデント)
Firefox1.0から6年が経った。
Mozillaはユーザーの立場に立って努力できる。(他は企業なのでできることとできないことがある)
6年か変化(4回)したFirefoxのロゴ
インターネットの環境も大きく変わってきたので、Mozillaのロードマップも考えていく必要性。
問題
mobile
中立性をどう持つのか
クラウド
コスト
個人情報を何も考えずに入れちゃう人が多い
アプリ(apps)
ソーシャル
法律とかが追いついてない
Mozillaはユーザーに立場に立って何が起きてるのかを考える。
共通基盤がないので、デベロッパーとしてはどうなのか。
mobile
多種多様な端末が存在するので対応が大変。
HTML5はその中はネイティブアプリの80%はできる。
クラウド
同期がまず第一歩
暗号化や安心などの点から選択が生まれる
アプリ
mobileアプリはシンプル
HTML5のアプリケーションを作るのに問題点としてビジネスサイドの問題がある。
→app storeのような販売する場所が整ってない
ソーシャル
ブラウザは立ち上げ台になるかも
シンプルなAPIが欲しいとこ
ミッションに対する課題はインターネット環境の変化に伴って変化しているので
Mozillaもそれに対応していかないといけない。
その中心にブラウザはあるもの
最も高性能なものとしてでるのは「ゲーム」がある。
mobile
モバイルブラウザ
Android1.xにバックポートはしない
ユーザーはモバイルとPCで同じUXを求めてるのかは疑問的
アプリ
モバイルと密接な関係
アプリは収益化のモデルが必要とされてる
Open Web Appsを開始した理由
まだ販売環境が整ってない感じなのでスタートアップしにくい。
これのアプローチを探るためにOpen Web Appsの着手。
現実世界の例をWebのapp storeに適応したらどうなるか?- 返品、競争 - apps store同士の競争
クラウド
同期の重要性(Sync)
データはクラウドに格納してどこでもアクセスできるユキビタスになると思ってる。
ソーシャル
F1は手順を考える必要を省く手軽さを求めた
Love Hack!!
質問
幾度も繰り返された質問だけどiDeviceへのFirefoxの搭載について
appleは許してくれない
Firefox Syncとかの探り
アプリストア
唯一のストアにはなるわけではない
FirefoxをOSに昇華してみては?
市場出る必要があるので、投資が必要になる。
Google Chrome OSとアンドロイドの場合は市場がAndroidを選んだ。
市場をよく見る必要がある。
FirefoxPhoneを考えたことはあった。そこからHTML5の課題を学ぶことができた。
John Resig feat. Shibuya.js
ライトニングトークいろいろ
ECMA4の話 - John Resig
クラス、継承など今まで全く違ったJavaScriptと別物だった。
→これは多すぎるんじゃないかという問題
Firefox、Adobeは賛成 VS ダグラス様、Google、MSは反対
ECMA4のほとんどを削ってEMCA5が誕生した。
LLTiger報告 - gyuque
JS Modulatoreの話
まだdevice要素がないので、送信しかできない
iPhoneをアレコレする - ku
iEがない
だけどデバッガーがないので、デバッグしにくい
もっとデバッグを便利にしたい
→Peekというアプリの誕生
ソースコードの表示、インスペクト、
http://github.com/ku/peek
pixiv-tan - yksk
pixiv wonderlandの解決(自分もpixivの中、直したいです…)
prototype.jsとjQueryが混在してる
→jQueryにまとめる
まずグローバル関数の解決
テストが余り書かれてない
URL ディスパッチャー + LAB.js
processing.js -John Resig
exCanvasを使ったIE対応
マウスストロークを追うコードが3行で書ける
1.0ではWebGLもサポートしてる
JavaScriptをテストするときに考える10のこと - t_wada
カスタムイベントでまとめることで、ロジックは同じものが使える
ブラウザなくてもテスト可能にする
テストの自動化
まだテストの決定的なものがないなり
Chrome As A Server -kato kazuyoshi
ChromeでMozRepl
V8Debuggerを使ってる。
Emacs上からブレークポイントをうてる
Node.jsにまつわる7つの誤解 - meso
サーバーサイドJS
イベント駆動I/Oのブロック問題はNode.js側が解決する。
Node.jsは個人管理を脱却した
jQuery Mobile - John Resig
いろんなモバイルデバイスをサポートする
jQueryをモバイルに分けることはしたくなかったのでJQuery Coreを改良
TestSwarmというツールを使用
jQuery Mobieのフレームワークを作成
UI、デバイスの幅に対応して"機能する"ものを作る
NetFront4のJavaScriptエンジンについて -ACESS
http://ja.wikipedia.org/wiki/NetFront_Browser
レジスタベース(NO JIT)
Inline Cache
組み込みデバイスのスタックサイズの制限
エラーしても強制的に落ちないように
C言語で書かれていて、コンパイラによる違いを回避するため柔軟性持たせる
SpiderMonkey < NetFront 4(No JIT) < TraceMonkey(JIT)
時間かかかるしょりがあるとウォッチドックに引っかかるかもしれない
→ VM Executorを介して実行させる
Java MIP on HTML5 and Flash - yukoba
JavaのクラスファイルからJavaScriptとFlash
画面共有は命令だけを送って高速化
ECMA5の実装 - Constellation
ECMA5の判断基準
iv / lv5 (C++)
仕様書に忠実なものを書きたい
Shellを書いた
ステートメントの区切りを管理して複数行継続が行える
Spidermonkeyは脱ぐとスゴイ(JITなしで比較するとすごく早い)
Firefox 4 & Mobile
加藤 誠 (Mozilla Japan テクニカルアドバイザ)
Firefox4とスピード
起動時間
汚いプロパティでボトルネックの調査(Talosテスト)
メインスレッドのI/Oを減らす
* 可能な限り非同期処理
* Omni JAR
StartUp Cache
利用するJavaScriptファイルをJARにまとめる
WebGL
OpenGLサポート
Direct 3D 9
GPUアクセラレーション
GPUアクセラレーションの利点は速度ではなく、CPUが空くことと電力効率の高さ
DirectWriteのサポート
文字のジャギがきれいになる
DirectWriteはα値が入ってるので少し薄く見える
Composition
ハードウェアアクセラレーション
Canvas
CSS Transition
Video
色空間変換(YUV->RGB)をGPUで行う
動画はRGBではないので
ブラウザにシェーダーが入ってる
JavaScript
TraceMonkey
jaegerMonkey
x86プロセッサではSSE2サポートが必須
Chrome上に対してはオフ
Krakenというベンチマークで比較
Firefox 4 UI
タブの位置
Firefoxメニュー
リロードボタンはsafari風
ステータスバーが無くなってる。
→リンクはアドレスバーに移動した
→代わりにアドオンバーになった
Firefox Syncはデフォルトに
Panorama
Addon Manger
アドオン管理画面の変更
Networking
HTTP Strict Transport Secrity
XSS
Content Security Policy
バリデーション
ダウンロードしたコンテンツから悪意を防ぐ
モバイルFennec
デスクトップと同じレンダリングエンジンを使用
UIはUXのために変更してる。
モバイルは画面サイズが違うのでPCそのままは残念なものになる
FennecはChromeとContentでプロセス分離してる。
→PCのFirefoxでもやるよ。
Firefox Panorama
mitcho (アーリーワイン・マイケル芳貴)
タブの管理は面倒
人は空間というメタファを記憶することができる
どこに何があるかを空間で把握してる
AzaがいくつかのUI実験を繰り返して作ってみた。
タブをグループ管理、Undo、Redo
→何かの作業に集中できる
Panoramaの開発
TabCandyアドオンの開発(jQuery使ってた)
jQueryをアドオン専用のiQというものにフォーク
TabViewという名前になって、Panoramaという名前に正式決定。
iframeのtabview.htmlが本体
つまりPanoramaの中身はDOM的なもの
iQ
邪魔なものは排除、Firefox/Gecko向けに特化したライブラリ
タブの整理の仕方
溝を作ってタブグループの吸着をよくする
場所が無くなったら縮小
ウィンドウを小さくするとグループを縮小して空間の間隔を維持する
Jetpack SDKからrquire("panorama")
TabItemsとiQオブジェクトにアクセスできる
Jetpack に乗っかれないロートルのための、再起動いらずなアドオンの作り方 ~ Bootstrapped Add-on 詳説 ~
再起動なしのアドオン作成の作り方
Jetpack prototype
再起動の仕組みはGreasemonkeyと似てる
Jetpack SDK
ライブラリ+ビルト環境+テスト環境
再起動なしの反映
Bootstrapped ExtensionsというFirefox4からの仕組み
3.6と4.xで再起動なしの仕組みが違う
Bootstrapped Extensionsの話
自分でinstallからuninstallまで管理しないといけない。
関数の書き換え系は危険なのでDOM 0なイベントの書き方はアウト。
loadOverlayはunloadできないのでJetpackでは使えない。
要素の変更は順番で駄目だったりすることがある。
=>元に戻せるならOK、可逆的な変更のみ
「完全には元に戻せない時の不整合が蓄積」=>これまで問題では無かったところが問題になることがある。
結論的にはJetpack SDKを使いましょう。
トークセッション: HTML5 時代の技術で Web プラットフォームはどう変わるのか
*矢倉 眞隆 (株式会社 ミツエーリンクス、W3C HTML5 Japanese Interest Group 議長)
*村岡 正和 (HTML5-WEST.jp 共同設立者)
*浅井 智也 (Mozilla Japan テクニカルマーケティング)
"HTML5時代の技術" => HTML5の関連の技術という意味ではない。
*矢倉
TPAC 2010(W3Cの総会)についての話
CSS WG - レイアウトの話
HTML WG - アクセシビリティ
WebApps WG - 多種多様活発
DOM 、Eventとかいろいろ
Web DOM Coreを現実的な仕様へ
DAP WG
WebApps WGとDAP WGが面白い
*村岡
関西で活動
大ライトニングトーク
途中で電池切れました
メモできてないけど、ES Hamony の Proxy について #fxdevcon で LT してきました – mooz deceives you よかった。
*swdyh - クロスブラウザ拡張ライブラリ
* Chrome
* Firefox(Jetpack SDK)
* Safari
* Opera それぞれに拡張機能ができた
それぞれブラウザでやり方が異なる。
→それを吸収するライブラリを作成する
Extension.js
ブラウザ拡張の互換性を吸収するライブラリ
*齋藤幸士 - モダンブラウザによるWebサービス拡張
ソーシャルメディア時代
Webサービスをもっとリッチにする(Twitter)
オレオレ短縮URL
*kawanet - 3D JavaScript
3次元の世界
CSS3で実装
トグルが実装されてた
*Takesako - Firefox HTML Parserの歴史
ブラウザ毎に認識が違う
IMGタグの認識で振り分け
*Gomita - Tab Scope 1.0 ~ CSS transition で魅せるXUL拡張機能 ~
Firefox4向けにTab Scope拡張
...
メモ感想
去年と比べると全くの聞いたことないようなものってはかなり少なくなった。
どこかで一度聞いた、誰か言ってた気がするみたいな浅いレベルの情報があった感じが多かった。
仕様書はあまり読んでなかったので、知らないことがあった。
NetFront4のJavaScriptエンジンの話は何か新鮮だったので、もっといろんな話が聞けたら良かったと思う。
John Resigさんに書いてる本がNinjaなのに表紙がSamuraiな件なのを聞くの忘れました。
ライトニングトークが多すぎる気がするので、もっと他の事に機会(時間)を与えた方がいい気がした。
- はてなブックマーク – 特別でないただのブックマーク – fxdevcon
- http://b.hatena.ne.jp/teramako/fxdevcon/
- Togetter – 「Firefox Developers Conference 2010」
- http://togetter.com/li/71239
- Firefox Developers Conference 2010
- http://mozilla.jp/events/2010/fxdevcon/
Jetpack SDKで生成したアドオンの名前にスペースなど入れる方法
xpiの名前変えたいのだけどよくわからん。パッケージフォルダ名とpackage.jsonを書き換えて同名にしてもcfx xpiでエラーでる。
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」
またJetpack SDKで1つアドオンを作成してみました。
リンクをクリックしてページ移動などの通信が始まった際に、風を切り裂くような音を出すアドオンです。
作った理由ですが、
移動する際に音を出すと、ちゃんとリンクをクリックできたかなどが聴覚的にも認識できるのと、上記のような音を使う事でブラウザが少し早くなったような感じがします(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;
というのと同様の意味になります。一部地域ではよく見かけるので覚えておくと便利です。
参考サイト
- Progress Listenersでロケーションバーのurl変更されたときに何かする – フリーフォーム フリークアウト
- Latest topics > Split Browser開発のよもやま話(6):分割されたブラウザの作り込み – outsider reflex
Google Web Historyに見たページを自動記録するアドオン(Jetpack SDK)
GoogleにはGoogle – ウェブ履歴というものがあり、検索してどのページを訪ねたかなどが記録されています。
またその記録は検索ページで既読リンクの色にするなどの判定にも使われています。
Google検索から訪ねたサイト以外のURLもウェブ履歴に登録するFirefox拡張機能を作成してみました。
既に
などGreasemonkeyやTomblooパッチなど代わりになる手段は山ほどある気がしますが、Jetpack SDKを使いたかったのと、意外にもFirefoxアドオンとして同じ役割するものが見つからなかったので作ってみました。
他のスクリプトとの違いは大して無いと思いますが、できるだけ無駄な送信を控えるようにしています。
- 最近訪れたサイトは重複送信しない(100件ぐらいでクリアされます)
- https://はホストのみを送信
- ローカルやIPアドレスベースのURLの場合は送らない
ダウンロードはAMOからできるようにしてあります。
Firefoxアドオンのxpiを簡単における場所が無かったので、AMOに登録しておいてあります。
Jetpack SDKでコンパイル?前のソースコードはこちらに
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で何かを作ってみる(作り方など
最近Jetpackをいじり始めたので、何かを作りながら作り方を学んでみる。
- Copy shorten URL with is.gd
クリックするとクリップボードに今のURLを短縮したものがコピーされる。
いわゆるクリップボード機能&ステータスバーに挿入を使ってみたかった。 - LDR_StatusBar_Notify
LDRの未読件数をステータスバーに表示
LivedoorReader StatusBar Notify
http://d.hatena.ne.jp/zuzu_sion/20090520/1242900564
を現在のバージョンで動くように修正しただけです。
昔のバージョンではimportがなかったり、Jetpackが大文字でも動いてたらしい。 - clipboard_display
クリップボードの内容をステータスバーに表示。
いわゆるクリップボード機能を使ってm(ry
クリップボードが変更した際に知らせてくれるようなAPIはなかったのでintervalで回してるだけ。 - 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みたいなものを使えるらしい。

