Firefox のアドオン Ubiquity を使い、そのプレビューに特定のサイトの内容を表示したい。
予め下記のサイトの解説を読んでおき、基本的な書き方を確認。
API の解説は Ubiquity のコマンドで help 。 ハッキング にある 「コマンド API ドキュメント」 を参照。
Ubiquity とその他アプリケーションの設定
Ubiquity を使う前に、コマンド help > 各種設定 > 言語設定 において 「Parse 2 を使用」 のチェックをはずす。これがあるとコマンドが思ったように実行されなかった。
「ぴたすちお」 のようなマウスホイールの回転を 「カーソルの下のウィンドウに送る」設定がされている場合、Ubiquity 内のプレビューでスクロールができないので設定をはずしておく必要がある。
コマンドの編集
コマンド Command-Editor により、ブラウザ上でコードを編集できる。
「コマンドテンプレートを挿入」 し、不必要なコードを削除。ここではコマンド名の設定とプレビューの表示関数だけ残す。
「ファイルに保存」 すると保存した場所が Ubiquity に記録されるので、後はエディタで直接編集するのが楽。
プレビューの表示
例えば、コマンド test を実行して、 Apple のサイトをプレビューに表示させたいとする。
iframe で外部サイトを表示させるなら、
CmdUtils.CreateCommand({
names: ["test"],
preview: function preview(pblock, args){
pblock.innerHTML = '<iframe width="100%" height="475px" src="http://www.apple.com" />';
},
});
preview 関数が Ubiquity のプレビュー表示に対応しており、その第1引数がプレビュー領域を指し示す。
テンプレートの使用
テンプレート機能を使うなら、「API ドキュメント」 より以下の関数を使う。
CmdUtils.renderTemplate(template, data)
Renders a template by substituting values from a dictionary. The templating language used is trimpath, which is defined at http://code.google.com/p/trimpath/wiki/JavaScriptTemplates.
renderTemplate 関数は第一引数がテンプレートで、第二引数は埋め込むデータ。
テンプレート内では、
${dataのプロパティ}
と記述することにより、値が置き換えられる。(詳しくは上記サイトを参照)
CmdUtils.CreateCommand({
names: ["test"],
preview: function preview(pblock, args){
var data = {
width: "100%",
height: "475px",
src: "http://www.apple.com"
};
var template = '<iframe width=${width} height=${height} src=${src} />';
pblock.innerHTML = CmdUtils.renderTemplate(template, data);
},
});
jQuery でアクセス
5 Documentation > Labs/Ubiquity/Bundled Libraries - MozillaWiki によると、
Ubiquity currently includes the following JavaScript libraries:
- jQuery -- the awesome jQuery library
- DateJS -- fantastic date natural language parser
Labs/Ubiquity/Ubiquity 0.1 Author Tutorial - MozillaWiki
Because we include jQuery with Ubiquity, it is simple to perform Ajax calls as well as parse returning data.
Ubiquity から他のサイトにアクセスするは jQuery を使えばいいと。
jQuery.get() – jQuery API によると
Description: Load data from the server using a HTTP GET request.
jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )
- url A string containing the URL to which the request is sent.
- data A map or string that is sent to the server with the request.
- callback(data, textStatus, XMLHttpRequest) A callback function that is executed if the request succeeds.
- dataType The type of data expected from the server.
これを使うなら、
CmdUtils.CreateCommand({
names: ["test"],
preview: function preview(pblock, args){
jQuery.get("http://www.apple.com", null, function(page){
pblock.innerHTML = page;
});
},
});
選択された文字列の取得
URL を表わす文字列`http://XXXXX.XX.XXX’ があった場合、XXXXX.XX.XXX の部分を選択した後、コマンドを入力したらそのサイトをプレビューに表示するように変更したい。
ブラウザ中の選択した文字列を取得するには、API の CmdUtils より、
CmdUtils inherits ContextUtils. The methods are wrapped so that the context argument isn't needed. (i.e. CmdUtils.getSelection("") is equivalent to ContextUtils.getSelection(context, ""))
CmdUtils は ContextUtils を継承しているということなので、API の ContextUtils を見ると、
ContextUtils.getSelection(context, joint = "\n\n")
Returns a string containing the text and just the text of the user's current selection, i.e. with HTML tags stripped out.
joint is an optional string to join multiple selections.
これを使い、
CmdUtils.CreateCommand({
names: ["test"],
preview: function preview(pblock, args){
jQuery.get("http://" + CmdUtils.getSelection(""), null, function(page){
pblock.innerHTML = page;
});
},
});
jQuery.get の代替となる関数
CmdUtils には jQuery.get の代替となる 関数が定義されている。違いは、
The difference is that previewGet()/previewPost() is designed to handle command previews, which can be cancelled by the user between the time that it's requested and the time it displays. If the preview is cancelled, the given callback will not be called.
(API のドキュメントより)
これを用いるなら、
CmdUtils.CreateCommand({
names: ["test"],
preview: function preview(pblock, args){
pblock.innerHTML = "";
CmdUtils.previewGet(pblock, "http://" + CmdUtils.getSelection(""), null, function(page){
pblock.innerHTML = page;
});
},
});
![SnapCrab_CUsersjute1AppDataRoamingOpenLiveWriterblogtemplatese6eb9f29-500e-4a53-909a-7ac2f6fb317aindex[2]htm _2016-1-15_5-53-6_No-00](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggT1F89NPtyMtEdGRjk3Cg4pjjc4WK28slMs8fgJo0A8vvdDIea8zouh60V1nbVCidoq414HtZ4ayDKKlzRAH8XKVOspUxIfabppf4WjPn9U-woKuUWnwgDXwE3Wt1-qqZ-bgk4fKPCls/s1600-h/SnapCrab_CUsersjute1AppDataRoamingOpenLiveWriterblogtemplatese6eb9f29-500e-4a53-909a-7ac2f6fb317aindex%25255B2%25255Dhtm%252520_2016-1-15_5-53-6_No-00%25255B4%25255D.png "SnapCrab_CUsersjute1AppDataRoamingOpenLiveWriterblogtemplatese6eb9f29-500e-4a53-909a-7ac2f6fb317aindex[2]htm _2016-1-15_5-53-6_No-00")
１~７日分のフォーマットを用意しておいた。
![img06-21-2010[1]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TB7XuArmzHI/AAAAAAAAApI/DQ3wRA0mCLw/img0621201014.png?imgmax=800 "img06-21-2010[1]")
![img06-21-2010[2]](http://lh3.ggpht.com/_2IbZQWoiKQ0/TB7XuzLJM3I/AAAAAAAAApM/1U8fz3ZuGV0/img062120102%5B1%5D.png?imgmax=800 "img06-21-2010[2]")
