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スキンを使える。