Born Neet

ブックマークレットを作る際一番気を使うのが文字数です。
（IE6が508文字までしかダメなため）

サーバサイドブックマークレット使っちゃえば解決するんですが、
無料レンタルサーバ（やブログサービス）を使用させてもらってる身としては、
ほいほいそれを行うわけにもいきません。

というわけで、ブックマークレットをなんとか短くする方法をご紹介。
（consoletを作ってる時に試行錯誤しまくった成果です！）

なんて言ってますが、特に大したテクニックじゃなく、

1. DOMのクソ長い関数名とかをなんとかする
2. 要素の作成と追加を一気にやる（要注意）
3. 変数宣言をまとめる
4. ループを使う

というごく普通のことをやるだけです。

一応それぞれの詳細を以下で説明しますので、
よろしければどうぞ。
（最後にサンプルも置いてます）

あ、長文です。

1. DOMのクソ長い関数名とかをなんとかする

ブックマークレットではDOMをよく使います。
表示しているhtmlをいじることが目的の場合が多いので、まぁ当たり前と言えば当たり前です。

このDOMがかなり文字数を消費しやがります。
というわけで、まずはこいつをなんとかしましょう。

var d=document;
var b=d.body;

ここまではまぁ普通です。
よく使うdocumentとbodyを1文字の変数で参照できるようにしています。

次が肝心の関数名です。
DOMのメソッドはとにかく長いのでやっかいです。
しかも、上記の同じ要領で、

var e=d.createElement;
var a=e('a');

とかやると怒られちゃいます。
が！ここで諦めちゃいけません。

思い出してください。
JSのプロパティは"[ ]"でも呼び出せるのです。

var e='createElement';
var a=d[e]('a');

とやれば、ほぼ目的を達成できます。
getElementByIdとかに使えば効果絶大です！

2. 要素の作成と追加を一気にやる（要注意）

ページに何か追加したいときは要素を作成しないといけません。
そして、当然ながら、その要素をページに追加もしなきゃダメです。

これをお行儀よくやってると、

var c='appendChild';
var a=d[e]('a');
b[c](a);

のように、長くなってしまいます。
なので、

var c='appendChild';
var a=b[c](d[e]('a'));

と、一気にやっちゃいましょう。

この例では1つしか追加してないのでそうでもないですが、
数が増えてくると意外と効きます。

注意
この方法でinput要素を追加するとIEでエラーになります。
（次のエントリ参照）
僕は知りませんが、他の要素でも起きるかもしれません。
その場合は諦めて、普通に作成→追加しましょう。

3. 変数宣言をまとめる

今までの例では、

var d=document;
var b=d.body;
var e='createElement';
var c='appendChild';
var a=b[c](d[e]('a'));

って感じで、変数毎にvarで宣言していました。
これを以下のように、まとめて宣言することでかなり短くなります。

var d=document,
b=d.body,
e='createElement',
c='appendChild',
a=b[c](d[e]('a'));

これはホントにJSの基礎の基礎のはずなんですが、
一応紹介しておきます。（僕はすっかり忘れちゃってたので）

4. ループを使う

たとえば、2つのa要素を追加して、onclickイベントを設定するとしましょう。
普通に書くとこうなります。

var x=b[c](d[e]('a')),
y=b[c](d[e]('a'));
x.href=y.href='#';
x.innerHTML='test1';
y.innerHTML='test2';
x.onclick=function(){
alert('test1');
return false;
}
y.onclick=function(){
alert('test2');
return false;
}

かなり長いですね…。
ループを使えば少しは短くすることができます。

var a=[],
z,
f={
test1:function(){
alert('test1');
return false;
},
test2:function(){
alert('test2');
return false;
}
};
for(i in f){
z=b[c](d[e]('a'));
z.href='#';
z.innerHTML=i;
z.onclick=f[i];
}

「同じような処理はループで」なんてのは、
JSどころかプログラミングの超初歩なんですけど、
なぜか使わずやっちゃってる時がありませんか？（僕だけか…）

サンプル

長々と書いてきましたが、ホントにそんなんで短くなんの？
という疑いの声が聞こえてきそうなので実例を示そうと思います。

上のテクニックを（わざとらしく！）全く使わずに作ると、
consoletのソースは以下のようになっちゃいます。

var p=document.createElement('div');
document.body.appendChild(p);
var t=document.createElement('textarea');
p.appendChild(t);
var b=document.createElement('br');
p.appendChild(b);
var x=document.createElement('input');
var y=document.createElement('input');
var z=document.createElement('input');
x.type=y.type=z.type='button';
p.appendChild(x);
p.appendChild(y);
p.appendChild(z);
x.value='run';
y.value='src';
z.value='close';
x.onclick=function(){eval(t.value);};
y.onclick=function(){t.value=document.body.parentNode.innerHTML;};
z.onclick=function(){document.body.removeChild(p);};
t.cols=50;
t.rows=6;
p.style.cssText=
'border:2px solid #999;background:#ddd;padding:15px;position:fixed;_position:absolute;bottom:0;_top:0;right:0;z-index:99999';

なんと、756字！
（実際ここまでひどいのは書かないでしょうが…）

このコードを、上記の方法を駆使して変更すれば、
昨日貼ったソースのとおり、506文字になります。

とまぁこのように、基本的な手法ではありますが、意外と効果大なのです。

以上、長・駄文失礼しました。

[0回]