Tweet
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Home > > ブックマークレットを短くする方法
Home > > ブックマークレットを短くする方法
Home > bookmarklet > ブックマークレットを短くする方法
Tweet
ブックマークレットを作る際一番気を使うのが文字数です。
(IE6が508文字までしかダメなため)
サーバサイドブックマークレット使っちゃえば解決するんですが、
無料レンタルサーバ(やブログサービス)を使用させてもらってる身としては、
ほいほいそれを行うわけにもいきません。
というわけで、ブックマークレットをなんとか短くする方法をご紹介。
(consoletを作ってる時に試行錯誤しまくった成果です!)
なんて言ってますが、特に大したテクニックじゃなく、
というごく普通のことをやるだけです。
一応それぞれの詳細を以下で説明しますので、
よろしければどうぞ。
(最後にサンプルも置いてます)
あ、長文です。
ブックマークレットでは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とかに使えば効果絶大です!
ページに何か追加したいときは要素を作成しないといけません。
そして、当然ながら、その要素をページに追加もしなきゃダメです。
これをお行儀よくやってると、
var c='appendChild';
var a=d[e]('a');
b[c](a);
のように、長くなってしまいます。
なので、
var c='appendChild';
var a=b[c](d[e]('a'));
と、一気にやっちゃいましょう。
この例では1つしか追加してないのでそうでもないですが、
数が増えてくると意外と効きます。
注意
この方法でinput要素を追加するとIEでエラーになります。
(次のエントリ参照)
僕は知りませんが、他の要素でも起きるかもしれません。
その場合は諦めて、普通に作成→追加しましょう。
今までの例では、
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の基礎の基礎のはずなんですが、
一応紹介しておきます。(僕はすっかり忘れちゃってたので)
たとえば、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文字になります。
とまぁこのように、基本的な手法ではありますが、意外と効果大なのです。
以上、長・駄文失礼しました。
Home > bookmarklet > ブックマークレットを短くする方法