Webブラウジング新時代到来!? 新アドオン「Ubiquity」を"しっかり"試す

コマンドにプレビュー機能を追加する

Ubiquityには、Enterキーを押してコマンドを実行する前に、実行結果のプレビューを表示する機能も備わっている。これをうまく使いこなすことで、コマンドの使い勝手がさらに向上するので、ぜひとも学んでおきたいところだ。

プレビュー機能を利用するには、CreateCommand()の引数オブジェクトにpreviewという属性を追加し、文字列もしくは関数を値として指定する。

文字列を値とした場合、その文字列内ではHTMLを使用することができるが、プレビュー結果は静的である。

関数を値とした場合は、プレビューに表示するHTMLは動的に生成することができる。ここでは、こちらの方法を用いてプレビューの表示方法を解説する。

では先ほどのサンプルをさらに改良し、実行する前に結果がプレビュー表示されるようにしてみよう。

CmdUtils.CreateCommand({
  name: "hello", // コマンドの名前
  takes: {"あなたのお名前": noun_arb_text},
  // (1) プレビュー時に呼び出される関数
  preview: function(previewBlock, name) {
    previewBlock.textContent = "こんにちは！" + name.text;
  },
  execute: function(name) {
    displayMessage("こんにちは！" + name.text);
  }
});

(1) プレビュー時には、preview属性に指定した関数が呼び出される。一番目の引数はプレビュー部分を指すDOM要素であり、通常のDOMプログラミングを行ってプレビュー結果を生成することができる。二番目以降の引数は、入力されたコマンドの引数だ。

以下の画像が、この改良の結果だ。コマンドの実行結果がコマンドラインの下部に示されている。