Webサービスを自作コマンドにできるので、おそらく、今後次々と世界中でコマンドが増殖/進化していきそうな気がします。未来を感じさせてくれますね。
完全に自分専用に、Webサービスをセットで作り込めば、もしかすると、何でもあり？の可能性さえ見えてきます。
あまり時間がないので深く触れなかったのが残念ですが、ざっくり高速で斜め見してみました。
ブラウザの新境地？ Ubiquityが変える衝撃のブラウザ体験
http://www.itmedia.co.jp/enterprise/articles/0808/31/news003.html
Labs/Ubiquity
https://wiki.mozilla.org/Labs/Ubiquity
Labs/Ubiquity/Ubiquity 0.1 Author Tutorial
https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial
Introducing Ubiquity
http://labs.mozilla.com/2008/08/introducing-ubiquity/
Finding New Ubiquity Commands with the Herd
https://labs.toolness.com/ubiquity-herd
Labs/Ubiquity/Ubiquity Command Suggestions
https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_Command_Suggestions
Labs/Ubiquity/Commands In The Wild
https://wiki.mozilla.org/Labs/Ubiquity/Commands_In_The_Wild
Labs/Ubiquity/dial
https://wiki.mozilla.org/Labs/Ubiquity/dial
Labs/Ubiquity/Skins/
https://wiki.mozilla.org/Labs/Ubiquity/Skins/
Labs/Ubiquity/Ubiquity 0.1.1 Release Notes
https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1.1_Release_Notes
http://getsatisfaction.com/mozilla/products/mozilla_ubiquity
--
about:ubiquity
about:ubiquity
Ubiquity Command Editor
chrome://ubiquity/content/editor.html
ダウンロード (Firefoxで下記xpiをインストール)
https://wiki.mozilla.org/Labs/Ubiquity
Install Ubiquity 0.1.1 for Firefox
https://people.mozilla.com/~avarma/ubiquity-0.1.1.xpi
起動 (ブラウザ上で下記ホットキーを押下)
Windows 「Ctrl＋Space」
Mac 「Option＋Space」
ホットキーを押すと次のようなコマンドプロンプトが現れます。
たとえば、そこへ「acbd」などと打つとインクメンタルサーチが始まります。
また、たとえば、そこへ「map 」と打つとそれはコマンドとして処理され、次のように表示されます。
さらに、「map tokyo ginza」と打つとWebサービス(Google Maps)からのレスポンスが表示されます。
また、command-list (chrome://ubiquity/content/cmdlist.html)からcalculateを使って「calculate calc 21/7」と打ち込むと
「calc 21/7=3」と表示されます。
さらにたとえば、そこへ「amazon-search jquery 」と打つとAmazon Web APIから次の結果が返ってきます。
で、コマンドcommand-editorでEnterして表示されるchrome://ubiquity/content/editor.htmlで自作コマンドを作ってみます。
このjQuery.getでAjax受信している、"http://jsgt.org/mt/01/hello.txt"には、「helloooooooooooooooooooooooooooooooooooooooooooo!」こんなテキストが書いてあるので、この自作コマンド jskamo をEnterすると、こんな ↓ displayMessageが表示されます。
ちなみに、Ubiquityの内部はjquery-1.2.3.min.js使いまくりですね。
追記 2008.9.1
FireFoxプラグイン「Ubiquity」に大量のコマンドを登録して日本のサイトを一発で開くすごい方法
http://gadget.cre8system.jp/life_hacks/firefoxubiquity.html
東京アメッシュのUbiquityコマンドつくった 日記を書く[・ _ゝ・]はやみずさん
http://d.hatena.ne.jp/hayamiz/20080829/1219995865
Ubiquityがあまりにステキだったのでbuzztter検索コマンドを作ってしまった
http://d.hatena.ne.jp/darashi/20080827/1219863225
ちなみに、上記のXPIファイル(https://people.mozilla.com/~avarma/ubiquity-0.1.1.xpi)を解凍した、\ubiquity-0.1.1\chrome\content にbuiltincmds.jsというファイルがあって、そこに、googleやsearch、wikipediaといったデフォルトのCmdUtils.CreateCommandが列記されているのですが、ここで、あちこちでみかける「makeSearchCommand」という関数も定義されています。
参考までに、この関数とそれで書かれたコマンド「Google」の部分をメモ。
// -----------------------------------------------------------------
// SEARCH COMMANDS
// -----------------------------------------------------------------
function makeSearchCommand( options ) {
options.execute = function(directObject, modifiers) {
var query = directObject.text;
var urlString = options.url.replace("{QUERY}", query);
Utils.openUrlInBrowser(urlString);
CmdUtils.setLastResult( urlString );
};
options.takes = {"search term": noun_arb_text};
if (! options.preview )
options.preview = function(pblock, directObject, modifiers) {
var query = directObject.text;
var content = "Performs a " + options.name + " search";
if(query.length > 0)
content += " for <b>" + query + "</b>";
pblock.innerHTML = content;
};
options.name = options.name.toLowerCase();
CmdUtils.CreateCommand(options);
}
makeSearchCommand({
name: "Google",
url: "http://www.google.com/search?q={QUERY}",
icon: "http://www.google.com/favicon.ico",
description: "Searches Google for your words.",
preview: function(pblock, directObject) {
var searchTerm = directObject.text;
var pTemplate = "Searches Google for <b>${query}</b>";
var pData = {query: searchTerm};
pblock.innerHTML = CmdUtils.renderTemplate(pTemplate, pData);
var url = "http://ajax.googleapis.com/ajax/services/search/web";
var params = { v: "1.0", q: searchTerm };
jQuery.get( url, params, function(data) {
var numToDisplay = 3;
var results = data.responseData.results.splice( 0, numToDisplay );
pblock.innerHTML = CmdUtils.renderTemplate( {file:"google-search.html"},
{results:results}
);
}, "json");
}
});
ついでに、function CreateCommandも見ておきます。
これは、\ubiquity-0.1.1\chrome\contentのcmdutils.jsに書かれています。
// -----------------------------------------------------------------
// COMMAND CREATION FUNCTIONS
// -----------------------------------------------------------------
// Creates a command from a list of options
CmdUtils.CreateCommand = function CreateCommand( options ) {
var globalObj = CmdUtils.__globalObject;
var execute;
// Returns the first key in a dictionary.
function getKey( dict ) {
for( var key in dict ) return key;
}
if (options.execute)
execute = function() {
options.execute.apply(options, arguments);
};
else
execute = function() {
displayMessage("No action defined.");
};
if( options.takes ) {
execute.DOLabel = getKey( options.takes );
execute.DOType = options.takes[execute.DOLabel];
}
// Reserved keywords that shouldn't be added to the cmd function.
var RESERVED = ["takes", "execute", "name"];
// Add all other attributes of options to the cmd function.
for( var key in options ) {
if( RESERVED.indexOf(key) == -1 )
execute[key] = options[key];
}
// If preview is a string, wrap it in a function that does
// what you'd expect it to.
if( typeof execute["preview"] == "string" ) {
var previewString = execute["preview"];
execute["preview"] = function( pblock ){
pblock.innerHTML = previewString;
};
}
globalObj["cmd_" + options.name] = execute;
};
上記 \ubiquity-0.1.1\chrome\contentのcmdutils.jsには、ubiquityコマンド作成時に利用できるCmdUtils オブジェクトが書かれていますので、試しにほんの少しテストしてみます。うう、時間が欲しい。
【CmdUtils オブジェクト】をちょっとテスト
Syntax
CmdUtils.log ( argument ) Firebugのlogへ出力
Code
CmdUtils.log = function log(what) {
var console = CmdUtils.getWindowInsecure().console;
if (typeof(console) != "undefined"){
console.log( what );
} else {
displayMessage("Firebug Required For Full Usage\n\n" + what);
}
};
使ってみる
Ubiquityへの入力がFirebugへ出力されます
CmdUtils.CreateCommand({
name: "test-log",
takes: {parameter: noun_arb_text},
preview: function(pblock,directObject) {
CmdUtils.log(directObject.text);
}
})
Syntax
CmdUtils.getHtmlSelection( ) selectされている文字列
Code
CmdUtils.getHtmlSelection = function getHtmlSelection() {
var sel = context.focusedWindow.getSelection();
if (sel.rangeCount >= 1) {
var html = sel.getRangeAt(0).cloneContents();
var newNode = context.focusedWindow.document.createElement("p");
newNode.appendChild(html);
return newNode.innerHTML;
}
return null;
};
使ってみる
Select中の文字列が表示されます
CmdUtils.CreateCommand({
name: "test-sel",
preview: function(pblock,directObject) {
jQuery(pblock).html(CmdUtils.getHtmlSelection())
}
})
Syntax
CmdUtils.getImageSnapshot( ) 画像をキャンバス要素で取得
Code
CmdUtils.getImageSnapshot = function getImageSnapshot( url, callback ) {
var hiddenWindow = CmdUtils.getHiddenWindow();
var body = hiddenWindow.document.body;
var canvas = hiddenWindow.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas" );
var img = new hiddenWindow.Image();
img.src = url;//"http://www.google.com/logos/olympics08_opening.gif";
img.addEventListener("load", function(){
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext( "2d" );
ctx.drawImage( img, 0, 0 );
callback( canvas.toDataURL() );
}, true);
}
使ってみる
画像を取得してキャンバス要素でpreview出力されます
CmdUtils.CreateCommand({
name: "getimg",
preview: function(pblock,directObject) {
var snap =CmdUtils.getImageSnapshot(
'http://jsgt.org/mt/01/hituji.jpg',
function(c){
jQuery(pblock).html('<img src="'+c+'" height="100">')
}
);
}
})
こうなります
P.S.
MozillaのXPIファイル
このUbiquityをはじめFirebugなどのアドオンもそうですが、Mozillaの拡張機能などに使われているXPIファイルは、JIRと同様に普通のZip圧縮ファイルです。unzipやWinZipなどで解凍/圧縮して中身を簡単に見ることや修正/改造することができます。
で、MozillaのXPIの中身は、CSSやJavaScriptの塊ですから、根気よく読んでいけば、そのアプリの動作がつかめると思いますので、自分自身でもいろいろなことが簡単にできるようになります。
enjoy!
試しにWassrのチャンネル検索を作ってみました。機能は何も足していないのでそっけないですが、とりあえず、入力したチャンネルのコメントを10件表示します。
makeSearchCommand({
name: "wassr-ch",
url: "http://api.wassr.jp/channel_message/list.json?name_en={QUERY}",
icon: "http://api.wassr.jp/favicon.ico",
homepage: "http://jsgt.org/mt/archives/01/002220.html",
author: { name: "Toshiro Takahashi" },
license: "Public Domain",
description: "Wassrチャンネル検索",
preview: function(pblock, directObject) {
var searchTerm = directObject.text;
var pTemplate = "Wassrチャンネルフィード検索 <b> <a href='http://wassr.jp/channel/${query}' target='ws'>${query}</b></a><hr>"
var pData = {query: searchTerm};
jQuery(pblock).html(CmdUtils.renderTemplate(pTemplate, pData))
.css('background-color','#fff')
.css('color','#333')
.css('font-size','0.8em')
var url = "http://api.wassr.jp/channel_message/list.json";
var params = { name_en : searchTerm };
jQuery.get( url, params, function(data) {
for(var i=0;i<10;i++) {
var nick=data[i].user.nick+" > ",
body=data[i].body
jQuery(pblock).append("<br>"+nick+body)
}
}, "json");
}
});
こうなります。
上記Wassrサンプルコマンドのインストール
http://jsgt.org/ubiquity/wassr-ch.htm
上記インストールするとabout:ubiquityページのSubscribed Feedsに次のようにリストアップされますので削除したい時は[unsubscribe]をクリックします。
WassrのUbiquityチャンネル専用コマンド「wu」も作ってみました。
http://jsgt.org/ubiquity/wu.htm
wuとコマンドを打つと画像のように表示されます。
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
ページ全体の読み込み完了まで少々お待ちください...
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
