Hatena::ブログ(Diary)

文殊堂 このページをアンテナに追加 RSSフィード Twitter

2008-10-24

jQueryとGreasemonkeyの相性が素晴らしく良い件

pixiv_add-bookmark.user.js ? GitHubを弄ってて実感した。

DOMツリー構築とE4X

jQueryだとjQuery関数HTML断片を文字列として渡す事でDOMツリーを構築する事が出来る。

で、Greasemonkeyscriptが動く環境は当然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スキンを使える。

os0xos0x 2008/10/25 01:30 <span>hoge</span>.toString();//hoge
<span>hoge</span>.toXMLString();//<span>hoge</span>
こんな感じで、XMLのtoStringはテキストノードしか返さない場合があるので、toXMLStringを使っておくと良いです。

monjudohmonjudoh 2008/10/25 02:16 なるほどー。
どうもです。

高橋高橋 2008/10/28 22:27 はじめまして。gihyo.jpを担当している高橋と申します。
jquery uiに関して,ご相談させていただきたいことがあります。
お手数おかけしますが,メールでご返事いただければ幸いです。

monjudohmonjudoh 2008/10/29 11:19 はじめまして。
どちらに連絡すればよろしいでしょうか?

高橋高橋 2008/10/30 16:16 申し訳ございません。
とりあえず,以下からご連絡いただければ幸いです。
https://gihyo.jp/site/inquiry/others

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証