Ubiquityのサーチコマンドのテンプレを作ってみた

ぐぐって出てきたのが、jsonを引っ張ってきてpreview表示するものばかりだったので、html要素をxpathで引っ張ってきてpreview表示するものをつくってみた。

//createCommand版。
//takesで引数名と引数の型？を指定
CmdUtils.CreateCommand({
  name: "search-template-with-createcommand",
  takes: {query: noun_arb_text},
  preview: function(pBlock, directObject) {
    CmdUtils.log("directObject.text: " + directObject.text);
    CmdUtils.log("directObject.html: " + directObject.html);
    CmdUtils.log("jQuery.prototype.jquery: " + jQuery.prototype.jquery);
    var query = directObject.text;
    //var doc = Application.activeWindow.activeTab.document;
    // find div.foo in the body of that document
    //jQuery(pBlock).html(jQuery('div', doc.body).text());

    //pBlock.innerHTML = "Searching for...";
    jQuery.get("http://www.google.co.jp/search?q=" + query, function(response) {
      var doc = context.focusedWindow.document;
      var div = doc.createElement("div");
      div.innerHTML = response;
      CmdUtils.log("response: " + response);
      entries = jQuery('li.g',div)
      CmdUtils.log("entries.length: " + entries.length);
      entries.each(function() {
        CmdUtils.log("entry: " + this);
        CmdUtils.log("entry.innerHTML: " + this.innerHTML);
        pBlock.innerHTML += this.innerHTML;
      });
    });
  },
});

//makeSearchCommand版。
//以下のようなexecuteコマンドを勝手に作ってくれる。
//url中の{QUERY}をコマンド引数に置き換えて、別ウインドウでそのURLを表示する。
makeSearchCommand({
  name: "search-template-with-makesearchcommand",
  url: "http://www.google.co.jp/search?q={QUERY}",
  preview: function(pBlock, directObject) {
    CmdUtils.log("directObject.text: " + directObject.text);
    CmdUtils.log("directObject.html: " + directObject.html);
    CmdUtils.log("jQuery.prototype.jquery: " + jQuery.prototype.jquery);
    var query = directObject.text;

    //pBlock.innerHTML = "Searching for...";
    url = "http://www.google.co.jp/search";
    params = {q: query}
    jQuery.get(url, params, function(response) {
      var doc = context.focusedWindow.document;
      var div = doc.createElement("div");
      div.innerHTML = response;
      CmdUtils.log("response: " + response);
      entries = jQuery('li.g',div)
      CmdUtils.log("entries.length: " + entries.length);
      entries.each(function() {
        CmdUtils.log("entry: " + this);
        CmdUtils.log("entry.innerHTML: " + this.innerHTML);
        pBlock.innerHTML += this.innerHTML;
      });
    });
  },
});

ポイントとして、htmlからxpathで要素を引っ張ってくるには以下のようにしなければならない。

var doc = context.focusedWindow.document;
var div = doc.createElement("div");
div.innerHTML = response;
CmdUtils.log("response: " + response);
entries = jQuery('li.g',div) // entries.length != 0

以下の書き方ではだめ。なぜか検索結果0個になってしまう。これで2時間はまった…。

entries = jQuery('li.g',response) // entries.length == 0

参考

htmlとxpathの件はここの2074行目を見てて気づいた。

上にたどり着けたのはここのおかげ。Thanks!

感想

jQuery, XPath, Ubiquityについてそこそこお勉強になった。

POST

jQuery.getの代わりにjQuery.postを使えばOK。
使い方一緒。