bookmarklet Archive

jetpackなご時世に、久々のbookmarkletを作ってみました。

html5-elmidx-sort

HTML Elements Index – Jens Meiertを開いて実行すると、
HTML5にチェックがついている順にソートします。
（各列の見出しクリックでもソートできます）
・・・それだけです。

あ、もちろん、bookmarkletterで作りました。（宣伝）
※ もうちょっと使い勝手なんとかならんかなー。

以上でーす。
僕と同じ需要のある方はどうぞ。

あ、忘れてた。
ソースはこんな感じです。

scriptのロードは動的スクリプトローディング（さんざん既出だと思うけど - IT戦記からパクリました。
（以前、コードリーディングもしてたりします。）

(function(l) {
	l('http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js', 'window.jQuery', function() {
		l('http://tablesorter.com/jquery.tablesorter.min.js', 'jQuery.fn.tablesorter', function() {
			jQuery('.alt').tablesorter({ sortList: [[5, 1]] });
		});
	}); 
})(function(src, check, next) {
  check = new Function('return !!(' + check + ')');
  if (!check()) {
    var script = document.createElement('script');
    script.src = src;
    document.body.appendChild(script);
    setTimeout(function() {
      if (!check()) setTimeout(arguments.callee, 100);
      else next();
    }, 100);
  }
  else next();
});

navitimeを検索するというだけのブックマークレットなんですが、
わりと使ってます。

で、なぜか全角スペースで駅名を区切れなくない仕様だったので直しました。

最新版はこちら↓

navitimelet

とりあえずこれで必要十分かな。（僕としては）

引き続き昨年のTODOリストを処理中です…。

ページ内の全てのチェックボックスをチェックするという、ただそれだけのブックマークレットです。
ただ僕には必要だったんです。
（あえて名前はいいませんが某IT系資格申込サイトなんて、もう何回利用規約に同意させるんだと！）

checkall

以上、僕と同じイライラを感じている方はぜひ。

あ、早速無駄に短縮化してみました。
みじかすぎてあんまり効果ないけど。。。

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

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

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

車輪の再生産な匂いがしまくりですが、作ってみました。
どうしても必要だったので…。

これです！

consolet

(bookmarkletted by bookmarkletter.)

[説明]

実行すると、



みたいなのを表示します。

で、

runをクリックするとtextarea内のJavaScriptを実行します。
（単にevalするだけなので、エラーとかはそのままブラウザに行っちゃいます。
エラーが出た時はエラーって言って欲しいのであえてtry~catchしてません。）

srcをクリックすると現在のソース（HTML）をtextareaに表示します。
（スクリプトで加えた変更とかも反映されたソースのはずです。
headとbodyの中身だけですが…）

closeをクリックするとコンソール（自分自身）を消します。
復活はしないので、使いたい時はもう一度ブックマークレットを実行してください。

機能はこれだけです。
チープなんです。

Firebugとかがない時に、JS実行したり、今のhtml見たいときなんかに使えるかもしれません。
使いにくい場合はカスタマイズしてどうぞ。
style等に無駄な記述があるので、その辺減らせばまだコード足せると思います。

[感想]

作り始めた時は、500文字程度に収めるのきついなぁとか思ってましたが、
（かなり！）頑張れば意外と収まるもんですね。
なんとか506文字で完成しました。

その他に苦戦したのは、fixed周り（表示位置指定）。

とりあえず、

　● IE6以下・IE7互換モード … 右上（ページ最上部）にabsolute
　● IE以外・IE7標準モード … 右下にfixed

で落ち着きました。

IE…相変わらずだなぁ(-_-;)

いやぁ久々にプログラミングしたって感じがしました。
予想してたより苦労しましたが、いろいろ勉強になってよかったです。

これ関連で2、3個エントリが稼げそう^^

[ソース]

var d=document,
b=d.body,
c='appendChild',
e='createElement',
a,
p=b[c](d[e]('div')),
t=p[c](d[e]('textarea')),
f={
run:function(){eval(t.value);},
src:function(){t.value=b.parentNode.innerHTML;},
close:function(){b.removeChild(p);}
};
p[c](d[e]('br'));
for(i in f){
a=d[e]('input');
a.type='button';
p[c](a);
a.value=i;
a.onclick=f[i];
}
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';