2009年1月7日水曜日

Ubiquity の カスタムコマンドの作り方

ここでバージョンアップしてると見かけたので、久々にインストールしてみた。
プロファイル作り直して以来入れてなかったけど、慣れるとかなり楽なんだろうなぁ。

ついでに今まで敬遠していたカスタムコマンドの作成について調べてみた。

作るんじゃなくて欲しい!って人は こちら で探すと良いかも
こんなサービスもあるみたい

○●○●○●○コマンド作成の基本0 Command Editor の開き方○●○●○●○
Ctrl+Space の後で [ command-editor] と打つか、[ help ] と打って開いた画面の「Command Editor」をクリックする。

○●○●○●○コマンド作成の基本1○●○●○●○


もっともシンプルな function でコマンドを定義する方法
コマンド名の頭に 「cmd_」を付けて関数を定義してあげるだけ。

function cmd_hello_world() {
displayMessage( "Hello, World!");
}

これで [ hello_world ] とコマンドが作れる。

◇◆◇◆◇◆◇トピックス1!◇◆◇◆◇◆◇
displayMessage は 画面右下に通知バルーンを出すメソッド。


○●○●○●○コマンド作成の基本2○●○●○●○

CreateCommand を使ってコマンドを定義する方法。
CmdUtils.CreateCommand()に必要なものを定義したオブジェクトを渡してあげる。

CmdUtils.CreateCommand({
name: "name",
preview : function(pblock){
pblock.innerHTML = 'ぷれびゅー';
},
execute: function() {
displayMessage( 'じっこう!' );
}
})

渡されるオブジェクトで動作に関する定義は、name, preview, execute の三つ。

name にはコマンド名を入れてあげる、ここで設定した名前でコマンドを利用できる。
execute にはコマンド確定した際の処理を記載する。
preview にはコマンド入力した際にプレビュー欄に出すものを定義する。引数の書き換えとコマンドの選択時に実行される。

この状態では引数は最小限。preview の場合に第一引数にプレビュー部分の HTMLElement が入るのみ。

◇◆◇◆◇◆◇トピックス2!◇◆◇◆◇◆◇

javascript で書く部分は jQuery が使える。
ただし、$ には jQuery オブジェクトは入っていないので、jQuery('xxxxx')などとしなくてはならない。


○●○●○●○コマンド作成の基本3 引数を渡したい○●○●○●○

CmdUtils.CreateCommand({
name: "name",
takes : {args:noun_arb_text},
preview : function(pblock, args){
pblock.innerHTML = 'ぷれびゅー'+args.text;
},
execute: function(args) {
displayMessage( 'じっこう!'+args.text );
}
});

先ほどの 基本2のオブジェクトに takes : {引数名 : 指定型} を追加することで、引数を渡せるようになる。

引数名は コマンド入力時に name (arg) のように仮で表示されるので、関連したものを入れたほうがいい。
型は既に幾つか定義されているが、自分で作成も可能。

noun_arb_text テキスト型(基本なんでもOK)
noun_type_email メールアドレス
noun_type_date 日付
noun_type_time 時刻
noun_type_url URL

その型に一致しない引数ではコマンドを実行できない。
たとえば、以下のようにした場合、 [name aaa@example.com] ならば実行可能だが、[name aaaaaa]では実行できない。

CmdUtils.CreateCommand({
name: "name",
takes : {args:noun_type_email},
preview : function(pblock, args){
pblock.innerHTML = 'ぷれびゅー'+args.text;
},
execute: function(args) {
displayMessage( 'じっこう!'+args.text );
}
});

他にも以下のようなものがある。詳しくは、feed-parts\header\en\nountypes.js を参照。

noun_type_contact
noun_type_percentage
noun_type_async_address
noun_type_address
noun_type_language
noun_type_tab
noun_type_searchengine
noun_type_tag
noun_type_geolocation
noun_type_livemark


◇◆◇◆◇◆◇トピックス3!◇◆◇◆◇◆◇

Ubiquity Command Editor で編集したコマンドで console.log をしたい場合
CmdUtils.log(Object);でOK Ubiquity:Object といった形で Firebug に表示される


○●○●○●○コマンド作成の基本4 複数の引数を渡したい○●○●○●○

CmdUtils.CreateCommand({
name: "name",
takes : {what:noun_arb_text},
modifiers: {with: noun_arb_text, in: noun_arb_text},
preview : function(pblock, what, modifiers){
pblock.innerHTML = 'ぷれびゅー'+what.text + modifiers.with.text + modifiers.in.text;
},
execute: function(what, modifiers) {
displayMessage( 'じっこう!'+what.text + modifiers.with.text + modifiers.in.text);
}
});

型指定 については 基本3と同じ。

modifiers を記載すると複数の引数を指定できる。
第二引数以降は modifiers で指定したオブジェクトのキーを文字列の前にスペース区切りで指定する必要がある
上のように定義した場合は、 [ name xxxxx with aaaaaa in bbbbbb ] といった感じで指定すると
基本の引数には xxxxxx が入り、modifiers オブジェクト内の with に aaaaaa 、 in に bbbbbb が入る。

xxxxxx に with / in といった文字列を使いたい場合に問題が出るので、modifiers 内で指定するキーはしっかり考えないといけない。文章のように使うのかも。[ replace aaa to bbbb ] みたいに


◇◆◇◆◇◆◇トピックス4!◇◆◇◆◇◆◇
便利なコマンド作成用関数

CmdUtils.CreateCommand を拡張したコマンド作成コマンドが幾つかある

CmdUtils.makeSearchCommand 検索コマンドを簡単に作成できる。
CmdUtils.makeBookmarkletCommand ブックマークレットを簡単に実行できる
CmdUtils.makeContentPreview コンテンツのプレビュー機能を簡単に実装できる

このあたりはまた別途紹介したい。


○●○●○●○その他の情報 ○●○●○●○
拡張のフォルダに以下のようなものがあるので、参考に。
standard-feeds/
builtin-feeds/en/builtincmds.js
feed-parts/header/en/nountypes.js

WindowsXP でが 拡張のフォルダはデフォルトだと以下になる。[USER]と[PROFILE]は各自の設定で書き換えること
「C:\Documents and Settings\[USER]\Application Data\Mozilla\Firefox\Profiles\[PROFILE]\extensions\ubiquity@labs.mozilla.com\」


また、もっと詳細な内容は以下を参考に。

https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial#Commands_with_Arguments