短期集中連載　速報！Ubiquityのポテンシャルを探れ

第2回　Ubiquityでオリジナルコマンドを作ろう

Ubiquity

この記事を読むのに必要な時間：およそ 4 分

第2回目の今回は，実際に自分のコマンドを作ってみます。まずは，チュートリアルからのサンプルを参考にし，基本的な記述について見てみましょう。

Ubiquity 0.1チュートリアル

Ubiquityコマンドを自作する場合，Mozilla Labsで公開されているチュートリアルLabs/Ubiquity/Ubiquity 0.1 Author Tutorialが一番最初に読むべき資料となります。Ubiquityコマンドの定義方法や考え方がまとまっており，JavaScriptの経験があればこのチュートリアルを読むだけでサクサク開発できるようになります。

コマンド定義関数

Ubiquityプロンプトでcommand-editを実行してエディタを開きリスト1を入力します。

この関数でhello-worldコマンドが作成されます。Ubiquity 0.1ではcmd_から始まる関数は自動的にUbiquityコマンドとして解釈されます。cmd_hello_worldでhello-worldコマンドになります。displayMessage()は指定された内容をOSの通知システムに通知する関数で，Ubiquity 0.1ではメッセージを出力する手段として多用されています。

リスト1　hello-worldコマンドの定義例 - 短縮形式版

function cmd_hello_world() {
  displayMessage( "新大陸へようこそ" );
}

リスト1は短縮形式による定義で，フルで記述するとリスト2のようになります。nameにコマンド名，executeに処理内容を関数で作成します。JSON形式になっておりnameとexecuteのほかにもurl，icon，description，preview，takes，modifiers，locale，homepage，author，license，helpなどが指定できます。これ以外に独自の変数や関数を定義しても問題ありません。

コマンド名は英語に限らず日本語でも指定できます。リスト3のように指定すれば「挨拶」というコマンドが作成されます。ただし，かな漢字変換の確定であるエンターキーがUbiquityコマンドの入力キーとして処理されてしまうUbiquity 0.1.1では，日本語によるコマンドはそれほど便利ではありません。

リスト2　hello-worldコマンドの定義例 - フル形式版

CmdUtils.CreateCommand({
  name: "hello-world",

  execute: function() {
    displayMessage( "新大陸へようこそ" );
  }
})

リスト3　hello-worldコマンドの定義例 - コマンド名には日本語も使える

CmdUtils.CreateCommand({
  name: "挨拶",

  execute: function() {
    displayMessage( "新大陸へようこそ" );
  }
})

コマンドにハイフンが含まれているのは，Ubiquity 0.1の自然言語パーサの出来がそれほどよくないためとされており，将来のバージョンでは文脈を加味して空白が含まれたコマンドも作成できるようになると見られます。またUbiquity 0.1にはほんとうに初期段階ではあるものの，日本語文章を解析しようとするコードも含まれており，使えるレベルで現実可能かどうかは別として，将来的に「選択した文章を日本語に翻訳せよ」といった日本語による自然言語でのコマンド入力を可能にしたいという狙いがあるとみられます。今のところUbiquityのコードからは英語と日本語に対する取り組みが伺えます。

コマンド情報

コマンドに，他の属性も加えた場合の例をリスト4に示します。homepageには参照すべきURL，iconにはプロンプトに表示するFaviconのURL，authorには作者の名前や電子メール（email:で指定⁠）⁠，contributorsにはコントリビュータ，licenseにはコマンドのライセンス，descriptionにはコマンドの動作説明，helpにはさらに追加情報を記載します。

リスト4　コマンドの情報を記載した例 

CmdUtils.CreateCommand({
  name: "hello-world",

  homepage: "http://gihyo.jp/",
  icon: "http://gihyo.jp/favicon.ico",
  author: { name: "Daichi GOTO" },
  contributors: ["Hiroaki TOMIDA"],
  license: "BSD",
  description: "メッセージを表示します",
  help: "メッセージを出力する以外、とくに機能はありません。",
  
  execute: function() {
    displayMessage( "新大陸へようこそ" );
  }
})

図1　command-listに表示される情報の例

図1　command-listに表示される情報の例

ここで記載した情報は，作成したコマンドをほかのユーザと共有する場合に使われるようになる他，command-listコマンドで表示されるコマンド一覧に表示されます。

プレビュー

Ubiquityプロンプトの下にはコマンド補完一覧が表示される他，そのコマンドのプレビューを表示させることができます。プレビューをうまく活用するとプロンプトを開いた状態ですでに作業が完了するようになるため，ぜひとも活用したい機能です。

プレビューはリスト5のようにpreviewにHTML文字列を指定する他，関数を定義することでも操作可能です。

リスト5　プレビューに文字列を表示させる例 - HTML文字列を直接指定

CmdUtils.CreateCommand({
  name: "hello-world",

  preview: "<cite>新大陸へようこそ</cite>",

  execute: function() {
    displayMessage( "新大陸へようこそ" );
  }
})

リスト6　プレビューに文字列を表示させる例 - 関数を使って表示する場合

CmdUtils.CreateCommand({
  name: "hello-world",

  preview: function( view ) {
    view.innerHTML = "<cite>新大陸へようこそ</cite>";
  },

  execute: function() {
    displayMessage( "新大陸へようこそ" );
  }
})

図2　プレビューも表示するようにした場合のUbiquityプロンプト

図2　プレビューも表示するようにした場合のUbiquityプロンプト

関数を使う場合はリスト6のように記述します。引数からアクセスできるinnerHTMLがプレビュー画面に相当しており，innerHTMLの内容を変更することでプレビューに表示する内容を変更できます。関数を使えば動的に処理を実施することができ，より柔軟な処理が可能になります。

Ubiquity