JavaScript++かも日記

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

【Ubiquity 】 , Webサービス 】 , jQuery 】 , こりゃすごい 】 ブックマーク-- Buzzurl  / 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

起動 (ブラウザ上で下記ホットキーを押下)
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が表示されます。

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

参考までに、この関数とそれで書かれたコマンド「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;

};

【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);

  }

};

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;

};

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);

}

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">')

         }

       );

  }

})

このUbiquityをはじめFirebugなどのアドオンもそうですが、Mozillaの拡張機能などに使われているXPIファイルは、JIRと同様に普通のZip圧縮ファイルです。unzipやWinZipなどで解凍/圧縮して中身を簡単に見ることや修正/改造することができます。

で、MozillaのXPIの中身は、CSSやJavaScriptの塊ですから、根気よく読んでいけば、そのアプリの動作がつかめると思いますので、自分自身でもいろいろなことが簡単にできるようになります。　

enjoy!

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

---

---

【コメント】(←clickで入力欄open)

【こりゃすごい】今日、事務所の前に止まった車の屋根が芝生でした。

【こりゃすごい 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

エコカーといえば、ハイブリッドとか燃料電池とか、ハイテクなイメージがありますが、、、

今日、事務所の前に止まった車の屋根が芝生でした。

近づいて見ます。

時々種が飛んできて屋根に花が咲いたりもするのだそうです(^^;;

後ろの緑の木々に完全に溶け込んでいます。

究極というか、直球のエコカーですね。

ちなみに、この方の自宅の屋根もこの状態なのだそうです。
夏は涼しいと思いますが、水遣りが大変かも？

あ、重たくなる分燃費はどうなのかな。。。＜そんな細かいことは関係ないか(^^?

---

5 ( 2008年05月21日 14:24 )

これでバイオ燃料だったら文句なしですね。

高橋 ( 2008年05月21日 20:59 )

しまった、聞き忘れた。

BLUEPIXY ( 2008年05月22日 17:06 )

すごいですね。
夏はやはりだいぶ涼しいんでしょうね。
燃費は当然悪くなるでしょう。
燃費が悪くなるとエコじゃないと思ったり思わなかったり。

高橋 ( 2008年05月22日 18:53 )

この車主が目指しているものが、実際のところは、エコなのか、芝生愛好家なのか、あるいは、もっと別の理念？があるのか 　謎　 なので (^^; そのあたりの判定も不能です。

---

【コメント】(←clickで入力欄open)

【雑談】中国の高架橋の足

【こりゃすごい 】 , 雑談 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

今日教えてもらったのですが、中国の高架橋の足はすごいです。
阪神大震災を覚えている日本人には、想像を絶する細さです。
http://sh.city8.com/panosearch-pid174967_XMDZ-ptz4.333_0.244_1.309-ctps-snundefined.html

地震は確かにほとんど無いようですが、この細さでは、劣化で倒れてしまいそう？
資料1:世界の地震分布
地震年表−中国とその周辺

ちなみにこのページは中国版Google Street Viewといった感じのサイトですが、本家を圧倒して、30都市程度、全市街地のストリートを全方位映像で網羅しているらしいです。

---

---

【コメント】(←clickで入力欄open)

【こりゃすごい】六本木ヒルズから牛久大仏

【こりゃすごい 】 , 雑談 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

六本木ヒルズから牛久大仏
http://bluestyle.livedoor.biz/archives/50664265.html
#「牛久大仏です！！！」の画像をクリックすると拡大画像が見れますよ。

参考:超巨大仏を見て混乱する
http://portal.nifty.com/2007/03/23/a/

#そういえば、こないだ、また、(大好きな)守谷のアサヒビール工場見学へ行ったら、展望 試飲 ロビーの窓からくっきり見えてました。美味しかったです。＜それはビールだろっ 。ちなみに、守谷のアサヒビール工場は、確か東洋一です。茨城県南は大きいものが多い？

---

---

【コメント】(←clickで入力欄open)