ブラウザの新境地？ Ubiquityが変える衝撃のブラウザ体験：Firefox Hacks（2/2 ページ）

[june29，ITmedia]

コマンドを追加してみよう！

　Ubiquityの魅力は、何といってもその拡張性にあります。Ubiquity自身がFirefoxの機能を拡張するのと同じように、ユーザーが自由にコマンドを作ることでUbiquityはさらに便利に、使いやすくなります。Ubiquityはそのことをよく分かっており、付属のUbiquity Command Editorというツールを使って簡単にコマンドを追加できるようになっています。上述のYour Commands（chrome://ubiquity/content/cmdlist.html）から「command editor」のリンクをたどるか、Ubiquityに「command-editor」コマンドを入力することで、新規コマンドを追加する画面が表示されます。

　それでは最初に、ITmediaの記事を検索するUbiquityのコマンド「itmedia」を作成してみます。以下がそのソースコードです。

makeSearchCommand({
  name: "itmedia",
  url: "http://search.itmedia.co.jp/?query={QUERY}",
  icon: "/favicon.ico",
  description: "Searches ITmedia for your words.",
});

　Ubiquity Command Editorのテキストエリアに上記のコードを入力すると、すぐに実行可能になります。同じページでUbiquityを呼び出し、試しに「itmedia Ubiquity」と入力してEnterキーを押すと、ITmediaの検索結果のページが開きます。このように、検索用のコマンドを足すだけなら、たった数行のコードで実現できてしまいます！　簡単ですね！

自作したITmediaコマンド

　そろそろコマンドを自作したくてうずうずしてきたアナタは、Labs/Ubiquity/Ubiquity 0.1 Author Tutorial - MozillaWikiを読んでみてください！　コマンドの作り方から公開の方法まで、一通り紹介されています。Firebugをお使いの方であれば、CmdUtils.log関数を使って適宜コンソールに出力し動作を確認するとよいでしょう。

　このとき呼び出しているmakeSearchCommandは、chrome://ubiquity/content/builtincmds.jsで定義されています。Ubiquityにビルトインされているコマンドの定義もこのファイルで確認できるので、何かコマンドを作成するときにはとても参考になります。

　わたしも試しに2つ、自作のコマンドを作成してみました。

twitter-search

　Twitterの発言を検索するコマンドです。Twitter Search APIを利用して、プレビュー表示にも対応してみました。

makeSearchCommand({
  name: "twitter-search",
  url: "http://search.twitter.com/search?q={QUERY}",
  icon: "http://twitter.com/favicon.ico",
  description: "Searches twitter for your words.",
  preview: function(pBlock, directObject) {
    var query = directObject.text;
    pBlock.innerHTML = "Searching for...";
    var url = "http://search.twitter.com/search.json";
    var params = {q: query};
    var pTemplate = '<table>{for result in results}<tr><td><img src="${result.profile_image_url}" /></td><td><a href="http://twitter.com/${result.from_user}/statuses/${result.id}" style="color: yellow;">${result.from_user}</a>: ${result.text}</td></tr>{/for}</table>';
    jQuery.get(url, params, function(response) {
      var json = Utils.decodeJson(response);
      pBlock.innerHTML = CmdUtils.renderTemplate(pTemplate, json);
    });
  }
});

自作したTwitterコマンド。Twitter Search APIも利用してみました

hatena-bookmark-related

　はてなブックマークエントリー情報取得APIを利用して、開いているWebページの関連エントリーを表示させるコマンドです。context.focusedWindowで、閲覧中のウインドウを取得しています。この例では、CreateCommand関数を利用して新たなコマンドを登録しています。Enterキーを押したときの挙動を記述していないので、特に何も起こりません。

CmdUtils.CreateCommand({
  name: "hatena-bookmark-related",
  description: "Show related entries",
  preview: function(pBlock, directObject) {
    pBlock.innerHTML = 'Related entries...';
    var currentUrl = context.focusedWindow.document.location.href;
    var apiUrl = "http://b.hatena.ne.jp/entry/json/";
    var pTemplate = '{for entry in related}<p><a href="${entry.url}">${entry.title}</a></p>{/for}';
    jQuery.get(apiUrl + currentUrl, {}, function(response) {
      pBlock.innerHTML = CmdUtils.renderTemplate(pTemplate, response);
    }, "json");
  },
});

こちらははてなブックマークエントリー情報取得APIを利用した「はてなブックマーク関連エントリー」コマンド

まとめ

　以上、駆け足となりましたが、Ubiquityを紹介しました。ビルトインコマンドの中には、スマートキーワードやショートカットキーなどで代替できるものもありますので、「Ubiquityって何がすごいの？」と思われる方もいるかもしれません。しかし、Web上のサービスを簡単に呼び出して利用できるUbiquityは、わたしたちが作業をする上でしばしば発生する「ああしたい、こうしたい」といった欲求に対して操作のヒントを与えてくれるという点で、これまでとは異なるブラウザ体験を提供してくれます。

　自分で作成したコマンドは公開することもできます。これは逆に考えれば、ほかの方の作成したコマンドも利用できるということです。すでに多くのユーザーが「こんな機能があるといいな」をコマンドとして自作／公開しており、そうしたコマンドを簡単に取り込んでカスタマイズできてしまいます。また、コードの断片共有サービス「Gist」上に置かれているJavaScriptコードをUbiquityコマンド化し、利用可能にする方法が公開されるなど、プロトタイプにもかかわらずその注目度は非常に高いことがうかがえます。

　機能の拡張を前提とした設計は、Firefoxユーザーの間で人気の高い拡張であるGreasemonkeyをほうふつとさせます。魅力的なツールにはたくさんのユーザーが集まり、彼らの手によって魅力がさらに磨かれていくことを、わたしたちはすでに知っています。Ubiquityのこれからにわくわくです！

著者紹介：june29

ディスカバリーエンジン「デクワス」を開発・運用中のサイジニア株式会社勤務。「楽しいWeb」を考えるエンジニア。ブログは「準二級.jp」