理系学生日記

おまえはいつまで学生気分なのか

fxdevcon

event

11:00 からのセッションから参加予定でしたが、前日に 4:30 から勤務していた結果、三度寝という人類の奇跡を達成したので、結果的に遅刻しました。

Firefox 4

最速かどうかは分からないが、スピードは上がっている。
機能はいくつか変わっている。

起動時間

起動時のボトルネックを調査した。有名サイトを 500 くらい訪問した Dirty な Profile を使って、起動時のボトルネックの調査を行っている。
その結果、ボトルネックで処理が遅くなりそうな処理はあとで実施するようにしている。Windows XP も Chrome も同じ方針を取っている。
他のブラウザはブラウザがネイティブコードで書かれているので、拡張はできても GreaseMonkey くらいのものしかできない。Firefox は XML や CSS でも拡張できるが、ファイルを読み込むのがスゴくボトルネックになりやすい。そこで、Add-on を含めて全部かためた Omni JAR ファイルに固めて、Startup Cache にしてやることで、これを読み込むことによって起動は大分早くなっている。普通の簡単な拡張くらいであれば、この Startup Cache で大分早くなるはず。

ハードウェアアクセラレーション

今後の重要な分野。

  • Generic
    • Direct 2d (Windows)
  • Composition
    • Direct 3D9+ (Windows)
    • OpenGL (Mac OS X / Linux)
  • WebGL

Windows 版では、Direct 2D を利用するにはシステムが Direct 3D 10 をサポートする必要がある。これは Windows Vista 以上が必要になる。ただし、ドライバによってバギーなものが一杯あるので、Direct 2D がサポートされている環境であっても、ドライバのバージョン次第では無効にしている。about:support で自分の環境で利用可能かどうかを確認可能。

Composition にも対応 HW が必要。Canvas や CSS Transition では GPU によって支援することが可能。色空間変換についても、CPU で全てを行う場合はスゴく負荷がかかるが、これも GPU による再生支援(逆離散コサイン変換やフレーム間予測/動き補正)がかかるようになる。

JavaScript

3.5 からは TraceMonkey、4.0 からは JaegerMonkey。
効率の良いパスを調べて、JaegerMonkey と TraceMonkey のどちらかを利用するかを状況に応じて判断する。例えば数値計算は TraceMonkey が最速になる。ただし、JaegerMonkey を利用する場合は SSE2 サポートが必須になる。

Kraken というベンチマークでは 3 倍くらい速くなる。ただし、必要なのはベンチマークではなく Web APP が速くならなければならない。JSNES では Firefox 3.6.12 では 8fps しか出なかったが、TM + JM では 59 fps でるようになった。

User Experience

UI Design は大きく変わった。例えばメニューバーを表示しなくなったり、タブが最上部になった。ステータスバーはなくなった。(マウスオーバーしたときの)リンクのアドレスについては、ロケーションバーに統合されている。画面下部のバーは Add-on だけに提供するようにした。

Firefox Sync も FF4 で入る。別マシンの Firefox で開いているタブも、同期されるようになる。
Panorama という機能もつき、これは開いているタブをグループ化して Speed Dial みたいに表示させる機能。

Addons に関しては、再起動が不要になるアドオンのサポートがされている。また、アドオンのプロセス分離もされる。

Fennec

デスクトップ版と同じレンダリングエンジンを使用している。例えば Android では SVG が動かなかったりするが、Fennec であれば SVG も Canvas も使える。
ただし、UX の観点において、モバイル版はデスクトップ版とは異なる UI をサポートする必要がある。モバイルの UX はタッチスクリーンなので、タイプがしづらい。

モバイル版では、ブラウザ本体と Content プロセスの 2 つにプロセスが分離されている。それにより、Content プロセスが落ちてしまっても、ブラウザ本体は落ちない。

JetPack --Add-ons Builde を使った Jetpack 開発の手引き --

JetPack とは

これまでの拡張機能は、Firefox の仕様変更があった場合に動かなくなるということがよくあった。このようなことを起こさず、互換性を保つことを目的とした開発環境。また、導入までに再起動は不要で、これまでにあった心理的負担が除去される。

もう一つの大きな特徴は、フォーク可能であること。誰かが作った拡張機能を分岐させることができる。

開発方法

Add-on Builder を使った方法と、Jetpack SDK を使った方法の 2 種類がある。前者はブラウザ上でソースコードを編集・動作確認までが可能。後者は Python や SDK のインストールが必要となるが、好きなエディタを使って開発できるメリットがある。

Add-on Builder で作成した拡張は強制オープンソースとなる(誰でもフォーク可能な状態におかれる)。また、Jetpack SDK は 0.7 ベースなので、最新の SDK よりも古い。
開発に必要なものは以下のとおり。

  • Firefox 3.6
  • addons.mozilla.org account
  • Add-on Builder Helper の拡張

標準モジュールは require 関数でインポートができる。

const timer = require("timer");

exports.main = function() {
    timer.setInterval(function() {
        console.log( new Date().toLocaleTimeString() );
    }, 1000);
};

天気をアドオンバーに追加するだけなら、これだけで可能になる。

const widgets  = require("widget");
const requests = require("request");

exports.main = function() {
    var button = widgets.Widget({
        label: "Tenki",
        width: 200,
        content: "<html><body>Tenki</body></html>"
    });
    widgets.add(button);

    var req = requests.Request(
        url: "http://www.google.com/ig/api?hl=ja&weather=Tokyo",
        onComplete: function() {
            var tenki = this.response.xml
                                     .querySelector("current_conditions > condition")
                                     .getAttribute("data");
            button.content = "<html><body>" + tenki + "</body></html>";
        },
    );
    req.get();
}