hogehoge

Repository

  1. Top
  2. pgadget

pgadget

Panorama Gadget for Firefox 4

Contents

Commits History

これは何?

Firefox 4 の Panorama 上にガジェットを置くことを可能にする拡張機能。

1ファイル1ガジェットとして特定のディレクトリにJavaScriptファイルを置くことで動作するフレームワーク的な存在。

要するにGreasemonkeyの様な存在であって実際に動かすには別スクリプトが必要ってこと。

使い方

パノラマを開くと右隅に一つボタン画像が現れます。(図1) このボタンをクリックすると全体が暗くなり、使用可能なガジェットのリストと現在のステータスが表示されます。(図2)

最初は全て非表示です。リスト内のボタンをクリックすることで表示/非表示のトグルが可能です。また、リスト外をクリックすることでリストの管理モードを解除できます。

また、ガジェット・ファイルをドラッグ&ドロップすることで、そのファイルをガジェットとして読み込ませることができます。

各ガジェットは以下の様な事が可能です。

用語

Gadget (ガジェット)

フレームワークが用意するインスタンス。

ガジェットの格子となる、タイトルやコンテンツ、クローズボタン、リサイズボタン等を有する。

また、ガジェット・ファイルを内部で読み込んでitemプロパティに持っている。

Gadget file (ガジェット・ファイル)

ガジェットのコンテンツとなる変数や関数が定義されたJavaScriptファイル。

Gadget directory (ガジェット・ディレクトリ)

ProfD/pgadget/

このディレクトリ以下にガジェット・ファイルを置くとパノラマ起動時に読み込まれ、ガジェットとして使用可能になる。

ガジェットの作り方

JavaScriptでガジェット・ファイルを作成します。 基本的に特定の変数・関数を定義することで、フレームワーク側が読み取って実行する形になっています。

この JavaScript はChrome特権を有していますので、XPConnectができます。 また、ECMAScript 5th の"use strict";によりstrict modeで動作するので注意してください。

Index

基本

下記コードを基に基本的な書き方を説明します。

        var id = "sample-1"; // 必須
        var title = "Sample Gadget"; // ガジェットのタイトル

        // ガジェットのコンテンツ部
        var xml = 

This is a sample gadget.

; // CSS設定 var css = <![CDATA[ #sample-1 p { color: red; } ]]>.toString();

まず、一意に定まるid変数を定義する必要があります。これはガジェットの要素のid属性となり、必須です。

titleはガジェットのタイトル部を、xmlはガジェットのコンテンツ部へ挿入されるE4Xを記述します。

必要であれば、css変数にCSS文字列を定義することででスタイルを設定することも可能です。この際、id属性となるidの値を付けておくと、そのガジェットのみに適応するスタイルにすることができます。できるだけ付けることを推奨します。

静的なガジェットであればこれで完成です。

意味のある変数

定義するとフレームワーク側で処理される変数を以下に示します。(表1)

意味のある変数
変数名説明
id string ガジェットのIDとなる。また、ガジェットの要素のid属性値にもなる。
title string ガジェットのタイトル
xml xml ガジェットのコンテンツとなる。E4Xで記述。
css string スタイルを定めるCSS文字列
rect object 初期表示位置、大きさを定めるオブジェクト。
top,bottom,left,right,width,heightにピクセル値を入れる。
              var rect = {
                top: 10,
                left: 10,
                width: 250,
                height: 200
              };
            
draggable boolean ドラッグの可否。初期値はtrue
closeable boolean クローズの可否。初期値はtrue
resizable boolean リサイズの可否。初期値はtrue

意味のある関数

定義するとフレームワーク側で適時呼び出される関数を以下に示します。(表2)

意味のある関数
関数名説明
onLoad ガジェットが表示される時に呼び出されます
onUnload ガジェットがクローズされる時に呼び出されます
onShown パノラマが表示された時に呼び出されます
onHidden パノラマが閉じるときに呼び出されます

既定の変数/関数

ガジェット・ファイルの実行コンテキストに容易される変数/関数

ガジェット・ファイルのコードが実行されるコンテキストは通常のHTMLドキュメントに置く<script ...>のようなコンテキストとは異なり、それぞれ特殊なオブジェクト上で実行されます。

そのオブジェクトには以下のような変数が定義されています。(表3)

また、コンテキストの概要はObject treeを参照してください。

ガジェット・ファイルのコンテキストで既定の変数
変数名 説明
__FILE__ object (nsIFile) ガジェット・ファイルそのもの
gadget object ガジェットのインスタンス
gadget.item object ガジェット・ファイルの実行コンテキスト
(ガジェットファイル内では this === gadget.itemとなる)
gadget.rootElm object (Element) ガジェットのルートの要素
gadget.titleElm object (Element) ガジェットのタイトル部分の要素
gadget.contentElm object (Element) ガジェットのコンテンツ部分の要素

動的なコンテンツ

変数と同じく、特定の名前で関数を定義するとフレームワーク側から適時実行されます。

        // 初期化時に実行される
        function onLoad () {
          alert("initialized: " + gadget.id);
        }
        // 初期化後とパノラマ表示時に実行される
        function onShown () {
          alert("onShown: "  + gadget.id);
        }