忍者ブログ

Home > > ブックマークレットを短くする方法

[PR]

  • 2024-04-20

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > ブックマークレットを短くする方法

Home > bookmarklet > ブックマークレットを短くする方法

ブックマークレットを短くする方法

Share on Tumblr このエントリーをはてなブックマークに追加

ブックマークレットを作る際一番気を使うのが文字数です。
(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文字になります。

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

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

PR

Comments:0

Comment Form

Trackback+Pingback:

TrackBack URL for this entry
Listed below are links to weblogs that reference
ブックマークレットを短くする方法 from Born Neet

Home > bookmarklet > ブックマークレットを短くする方法

Search
Loading
Feeds
Links
スポンサードリンク

Page Top