jQueryとGreasemonkeyの相性が素晴らしく良い件
pixiv_add-bookmark.user.js · GitHubを弄ってて実感した。
DOMツリー構築とE4X
jQueryだとjQuery関数にHTML断片を文字列として渡す事でDOMツリーを構築する事が出来る。
で、Greasemonkeyのscriptが動く環境は当然FirefoxなのでE4Xを使う事が出来る。
すると、どうなるか?
このリビジョンからコードを引用する。
var $mainTable = $( <table class="gm-pixiv-bookmark-maintable"> <tr> <th>グループ:</th> <td/> </tr> <tr> <th>公開設定:</th> <td> <input type="radio" id="res0" name="restrict" value="0" checked="true" /> <label for="res0">公開</label> <input type="radio" id="res1" name="restrict" value="1"/> <label for="res1">非公開</label> </td> </tr> <tr> <th>コメント:</th> <td> <input type="text" name="comment" maxLength="140" /> </td> </tr> </table>.toString() );
XMLとして正しい形で書くなら改行とインデントを使えるので大変見やすく弄りやすく書ける。
jQueryUIと@resource
jQueryUIを使う場合等はCSSの他に細々とした画像を読み込む事になるが、
Greasemonkeyではそれをローカルで保持させる事が出来るので軽くできる。
// @resource flora http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/flora.css // @resource floraDialog http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/flora.dialog.css // @resource iDialogE http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-e.gif // @resource iDialogN http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-n.gif // @resource iDialogNE http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-ne.gif // @resource iDialogNW http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-nw.gif // @resource iDialogS http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-s.gif // @resource iDialogSE http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-se.gif // @resource iDialogSW http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-sw.gif // @resource iDialogTitle http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-title.gif // @resource iDialogTitlebarCloseHover http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-titlebar-close-hover.png // @resource iDialogTitlebarClose http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-titlebar-close.png // @resource iDialogW http://jquery-ui.googlecode.com/svn/tags/1.6rc2/themes/flora/i/dialog-w.gif
まず、これでCSSファイルと画像ファイルはローカルで保持出来る。
ただ、この時点ではCSSは以下のように画像ファイルを相対pathで持っているので、
.flora.ui-dialog .ui-dialog-titlebar-close { width: 16px; height: 16px; background: url(i/dialog-titlebar-close.png) no-repeat; position:absolute; top: 6px; right: 7px; cursor: default; }
CSSファイルをGM_getResourceText関数で文字列として取得したものを、
「相対path→GM_getResourceURL関数で画像ファイルをdataスキームのURLに変換したもの」
という風に置換してやる。
var filaName2ResourceName = { 'dialog-e.gif':'iDialogE' ,'dialog-n.gif':'iDialogN' ,'dialog-ne.gif':'iDialogNE' ,'dialog-nw.gif':'iDialogNW' ,'dialog-s.gif':'iDialogS' ,'dialog-se.gif':'iDialogSE' ,'dialog-sw.gif':'iDialogTitle' ,'dialog-title.png':'iDialogTitle' ,'dialog-titlebar-close-hover.png':'iDialogTitlebarCloseHover' ,'dialog-titlebar-close.png':'iDialogTitlebarClose' ,'dialog-w.gif':'iDialogW' }; /* 中略 */ var floraDialogCSS = GM_getResourceText('floraDialog'); $.each(filaName2ResourceName,function(fileName,resourceName){ floraDialogCSS = floraDialogCSS.replace('i/'+fileName,GM_getResourceURL(resourceName)); });
で、GM_addStyle関数で置換済みCSSをstyle要素として設定。
GM_addStyle(floraDialogCSS);
これでサーバにファイルをとりに行かずfloraスキンを使える。