先日公開したUSWManagerを利用した簡単なwidget作成の方法を記述します。
次のsourceはHello Worldの例です。
Hello Worldの例
// ==UserScript==
// @name USWHello
// @namespace http://www.kanasansoft.com/
// @description Hello,world
// @include *
// ==/UserScript==
(function(){
var addWidget=function(usw){
if(!("_USWidgetManager_" in window)){
window._USWidgetManager_={};
}
if(!("widgets" in window._USWidgetManager_)){
window._USWidgetManager_.widgets=[];
}
window._USWidgetManager_.widgets.push(usw);
if(window._USWidgetManager_.noticeAddWidgets){
window._USWidgetManager_.noticeAddWidgets();
}
}
var IMAGE_URI_ICON=
"data:image/png;base64,"+
"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAA"+
"AH1JREFUKM%2BVUtsNACEIQ%2BJG7KQ7OZPd6T68XHwUPftlGkqhEmqtcoMoIgB%"+
"2BVpdSYnullI7VOefXoaH3MTPKiIj2PQAAaJ08RiffdZ%2BJiXTcTQxEYGYbgXoO"+
"nka9agBfMucd2vdTE72KaHDow%2FaYQbBeIb3L9%2FhoM4pAo9jgAYtjRwi1cFn8"+
"AAAAAElFTkSuQmCC";
var icon=document.createElement("img");
var body=document.createElement("div");
icon.setAttribute("src",IMAGE_URI_ICON);
body.setAttribute("style","background-color:#ffffff;height:50px;width:150px;");
body.textContent="hello,world";
var usw={
icon:icon,
body:body,
name:"hello",
id:"http://www.kanasansoft.com/hello"
};
addWidget(usw);
})();
// @name USWHello
// @namespace http://www.kanasansoft.com/
// @description Hello,world
// @include *
// ==/UserScript==
(function(){
var addWidget=function(usw){
if(!("_USWidgetManager_" in window)){
window._USWidgetManager_={};
}
if(!("widgets" in window._USWidgetManager_)){
window._USWidgetManager_.widgets=[];
}
window._USWidgetManager_.widgets.push(usw);
if(window._USWidgetManager_.noticeAddWidgets){
window._USWidgetManager_.noticeAddWidgets();
}
}
var IMAGE_URI_ICON=
"data:image/png;base64,"+
"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAA"+
"AH1JREFUKM%2BVUtsNACEIQ%2BJG7KQ7OZPd6T68XHwUPftlGkqhEmqtcoMoIgB%"+
"2BVpdSYnullI7VOefXoaH3MTPKiIj2PQAAaJ08RiffdZ%2BJiXTcTQxEYGYbgXoO"+
"nka9agBfMucd2vdTE72KaHDow%2FaYQbBeIb3L9%2FhoM4pAo9jgAYtjRwi1cFn8"+
"AAAAAElFTkSuQmCC";
var icon=document.createElement("img");
var body=document.createElement("div");
icon.setAttribute("src",IMAGE_URI_ICON);
body.setAttribute("style","background-color:#ffffff;height:50px;width:150px;");
body.textContent="hello,world";
var usw={
icon:icon,
body:body,
name:"hello",
id:"http://www.kanasansoft.com/hello"
};
addWidget(usw);
})();
最低限作成しないといけないのは、[usw]オブジェクトです。
正確には、名称は関係なく、プロパティicon,body,name,idを持つオブジェクトが必要となります。
正確には、名称は関係なく、プロパティicon,body,name,idを持つオブジェクトが必要となります。
icon
iconにはDockに表示するためのimg elementを指定して下さい。
将来的にEvent側でMacOSXのDockのような動作を導入する事も考慮し、USWManager側では表示サイズの変更を行っていません。
このため画像の大きさのまま表示されレイアウトが崩れてしまうため、画像のサイズは16x16が望ましいと思います。
指定されたelementをWrappingしてDockに追加しているので、作成中は一時的にサイズ指定したblock要素でも構いません。
画像のsrc属性は、http schemeでも指定可能ではありますが、user scriptの特性上、base64でencodeしてdata schemeで指定するのが親切でしょう。
以下のsiteでは、uploadしたfileのbase64 encodeが可能です。
将来的にEvent側でMacOSXのDockのような動作を導入する事も考慮し、USWManager側では表示サイズの変更を行っていません。
このため画像の大きさのまま表示されレイアウトが崩れてしまうため、画像のサイズは16x16が望ましいと思います。
指定されたelementをWrappingしてDockに追加しているので、作成中は一時的にサイズ指定したblock要素でも構いません。
画像のsrc属性は、http schemeでも指定可能ではありますが、user scriptの特性上、base64でencodeしてdata schemeで指定するのが親切でしょう。
以下のsiteでは、uploadしたfileのbase64 encodeが可能です。
body
windowingを行うwidgetの本体をelementで指定して下さい。
このbodyのサイズに合わせてwindowサイズが変更されるので、css等でサイズを指定した方が良いでしょう。
このbodyのサイズに合わせてwindowサイズが変更されるので、css等でサイズを指定した方が良いでしょう。
name
widgetの名称を文字列で指定して下さい。
現在のは、タイトルバーへの表示にのみ使用しています。
現在のは、タイトルバーへの表示にのみ使用しています。
id
USWManager側で保存しなければならないwidgetのデータのkeyに使用します。
自分のsite等のurlとwidget名を繋げたものを指定する事を推奨します。
少なくとも、他のwidgetと同じidにならない文字列を指定して下さい。
自分のsite等のurlとwidget名を繋げたものを指定する事を推奨します。
少なくとも、他のwidgetと同じidにならない文字列を指定して下さい。