JavaScript++かも日記: 【Ubiquity】これはすごい。ブラウザが、サクッと、WebサービスのコマンドプロンプトになるFirefox拡張機能「Ubiquity」

2008年08月31日

【Ubiquity】これはすごい。ブラウザが、サクッと、WebサービスのコマンドプロンプトになるFirefox拡張機能「Ubiquity」

【Ubiquity , Webサービス , jQuery , こりゃすごい】

ブックマーク-- Hatena

/ Livedoor

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とコマンドを打つと画像のように表示されます。

【コメント】

All About/JavaScript

All About の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