<div id="system-monitor-demo"></div>
<script type="text/javascript"><!--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

var container = document.getElementById("system-monitor-demo");
if (!window.system || !window.system.addMonitor) {
  container.innerHTML = "システムモニターがインストールされていません";
  container.style.color = "red";
} else {
  container.innerHTML = "<div><canvas id='system-monitor' width='300' height='60'></canvas>"+
                        "<br /><span id='system-monitor-console'></span></div>";

  var width = 300;
  var interval = 1000;

  var MemoryArray = [];
  var arrayLength = width / 2;
  while (MemoryArray.length < arrayLength) {
    MemoryArray.push(undefined);
  }

  // リスナとして登録する関数には、メモリの情報を保持したオブジェクトが渡される。
  function onMonitor(aUsage) {
    var console = document.getElementById("system-monitor-console");
    console.textContent = parseInt(aUsage.used/1024/1024)+'MiB / '+parseInt(aUsage.total/1024/1024)+'MiB';

    MemoryArray.shift();
    MemoryArray.push(aUsage.used / aUsage.total);

    var canvasElement = document.getElementById("system-monitor");
    var context = canvasElement.getContext("2d")
    var y = canvasElement.height;
    var x = 0;

    context.fillStyle = "black";
    context.fillRect(0, 0, canvasElement.width, canvasElement.height);

    context.save();
    MemoryArray.forEach(function(aUsage) {
      var y_from = canvasElement.height;
      var y_to = y_from;
      if (aUsage == undefined) {
        drawLine(context, "black", x, y_from, 0);
      } else {
        y_to = y_to - (y * aUsage);
        y_from = drawLine(context, "aqua", x, y_from, y_to);
        drawLine(context, "black", x, y_from, y_to);
      }
      x = x + 2;
    }, this);
    context.restore();
  }

  function drawLine(aContext, aColor, aX, aBeginY, aEndY) {
    aContext.beginPath();
    aContext.strokeStyle = aColor;
    aContext.lineWidth = 1.0;
    aContext.lineCap = "square";
    aContext.moveTo(aX, aBeginY);
    aContext.lineTo(aX, aEndY);
    aContext.closePath();
    aContext.stroke();
    return aEndY - 1;
  }

  // リスナを登録する。
  window.system.addMonitor("memory-usage", onMonitor, interval);
}
// --></script>

Firefox 3.5およびThunderbird 3.0での動作について

システムモニター0.4.1では、前述したリスナ登録の自動的な解除を実現するためにいくつかの実装が加わりました。しかしながら、この機能が依存しているGecko側の機能についてGecko 1.9.1とGecko 1.9.2の間で互換性が無いため、Gecko 1.9.2のSDKを用いてビルドされたシステムモニターのバイナリはGecko 1.9.1では動作しなくなりました。よって、システムモニター0.4.1からはGecko 1.9.1ベースのFirefox 3.5（Thunderbird 3.0）はサポート対象外となっています。

どうしてもFirefox 3.5（Thunderbird 3.0）でシステムモニター0.4.1を利用したい場合は、Gecko 1.9.1のSDKを使ってソースからバイナリをビルドし直す必要があります。また、独自に変更を加える場合もバイナリをビルドし直さなくてはなりません。以下に、Windows、LinuxおよびMac OS Xの各環境でのビルド手順を解説します。

Ubuntu 10.04LTS Lucid Lynxの場合（Firefox 3.6）

リリース版のシステムモニター0.4.1のLinux用バイナリは、32bit版、64bit版のいずれもUbuntu 10.04LTS上でビルドしています。Ubuntu 10.04LTSでのビルド手順は以下の通りです。

必要なパッケージをインストールします。

$ sudo aptitude install automake libtool xulrunner-1.9.2-dev libgtop2-dev zip

システムモニターのソースをダウンロードして展開します。

$ wget http://git.clear-code.com/xul/extensions/system-monitor/snapshot/system-monitor-0.4.1.tar.bz2
$ tar xvf system-monitor-0.4.1.tar.bz2

作業ディレクトリに入ってビルドします。

$ cd system-monitor-0.4.1
$ ./automake.sh
$ ./configure
$ make

これで、作業ディレクトリ直下にインストール用のパッケージ「system-monitor-0.4.1.xpi」が生成されます。

Ubuntu 9.04 Jaunty JackalopeおよびUbuntu 9.10 Karmic Koalaの場合（Firefox 3.5）

基本的にはUbuntu 10.04LTSの場合と同じですが、Gecko SDK（XULRunner SDK）のバージョンを1.9.1にする点が異なります。必要なパッケージの準備の際に、「xulrunner-1.9.2-dev」ではなく「xulrunner-1.9.1-dev」をインストールして下さい。

$ sudo aptitude install automake libtool xulrunner-1.9.1-dev libgtop2-dev zip

それ以外の手順はUbuntu 10.04LTSの場合と同一です。

Windowsの場合

リリース版のシステムモニター0.4.1のWindows（Win32）用バイナリは、64bit版Windows 7でビルドしています。Windowsでのビルド手順は以下の通りです。

必要なソフトウェアをインストールします。
- Cygwin ：以下のパッケージをインストールしておいて下さい。
  - automake
  - gcc
  - gcc4
  - libtool
  - make
  - pkg-config
  - zip
- Microsoft Visual C++ 2008 Express Edition
ソースコードのZIPアーカイブをダウンロードし、展開します。展開すると「system-monitor-0.4.1」というフォルダが展開されますので、Cygwinのホーム直下などの位置に移動しておきます。
Firefox 3.5/Thunderbird 3.0用にビルドする場合はGecko 1.9.1のSDKを、Firefox 3.6/Thunderbird 3.1用にビルドする場合はGecko 1.9.2のSDKをダウンロードし、展開します。展開するとどちらも「xulrunner-sdk」というフォルダが展開されますので、c:\xulrunner に移動しておきます。（c:\xulrunner\xulrunner-sdk に置くのではなく、c:\xulrunner-sdk の位置に移動した上でフォルダ名をxulrunnerに変更します。）
Cygwin Bash Shellを起動し、作業ディレクトリに入ってビルドします。例えば作業ディレクトリが~/system-monitor-0.4.1であれば、以下の通りです。
```
$ cd ~/system-monitor-0.4.1
$ ./autogen.sh
$ ./configure --with-libxul-sdk=/cygdrive/c/xulrunner
$ make
```
このビルド操作はエラーで停止しますので、続けて、VC++でバイナリをビルドします。（Cygwin Bash Shellはそのまま置いておいてください。）
system-monitor-0.4.1\components\SystemMonitor\SystemMonitor.vcproj をダブルクリックします。すると、VC++が起動してプロジェクトファイルが読み込まれますので、「ビルド」メニューから「SystemMonitorのビルド」を選択してください。出力の最後の行が ビルド: 1 正常終了、0 失敗、0 更新不要、0 スキップとなっていればビルド成功です。
XPIファイルを作成します。Cygwin Bash Shellに戻り、以下のコマンドを実行します。
```
$ make xpi
```

これで、作業ディレクトリ直下にインストール用のパッケージ「system-monitor-0.4.1.xpi」が生成されます。

c:\xulrunner 以外の位置にGeckoのSDKを置く場合は、SystemMonitor.vcproj の内容を修正する必要があります。VC++で SystemMonitor.vcproj を開いてプロジェクトのプロパティを編集するか、SystemMonitor.vcproj をテキストエディタで開いて c:\xulrunner を指している箇所を置換して下さい。

Mac OS Xの場合

リリース版のシステムモニター0.4.1のMac OS X（Intelプロセッサ・32bit）用バイナリは、Mac OS X 10.6.4 Snow Leopardでビルドしています。

必要なソフトウェアをインストールします。
- Xcode：WebサイトまたはOSのインストールディスクからインストールしておいて下さい。
- MacPorts ：以下のパッケージをインストールしておいて下さい。
  - pkg-config
ソースコードのアーカイブをダウンロードし、展開します。展開すると「system-monitor-0.4.1」というフォルダが展開されますので、ホーム直下などの位置に移動しておきます。
Firefox 3.5/Thunderbird 3.0用にビルドする場合はGecko 1.9.1のSDKを、Firefox 3.6/Thunderbird 3.1用にビルドする場合はGecko 1.9.2のSDKをダウンロードし、展開します。展開するとどちらも「xulrunner-sdk」というフォルダが展開されますので、/opt/xulrunner-sdk に移動しておきます（別の場所に置いても構いません）。
アプリケーション→ユーティリティ→ターミナルを起動し、作業ディレクトリに入ってビルドします。例えば作業ディレクトリが~/system-monitor-0.4.1であれば、以下の通りです。
```
$ cd ~/system-monitor-0.4.1
$ ./autogen.sh
$ ./configure --with-libxul-sdk=/opt/xulrunner-sdk CXXFLAGS="-arch i386"
$ make
```