Born Neet

が、Vicunaの作者であるwuさんのブログで行われています。

というわけで、超微力ながらも協力すべく、ここにも貼っときます。

なるほど、Google ドキュメントのアンケートはこうやって使うのか…。
タグさえ貼れば同じアンケートをいろんなサイトで回答できちゃうわけね、便利！

[2008/09/06 12:44 追記]

そして、アンケートが終われば、主催者側で画面を差し替えれば済むから、
終了の告知はわざわざしてもらわなくていいんだ。
へぇ、よくできてるなー！！

皆さんご存知でしょうが…。

consoletを作ってるときに遭遇したので一応メモ。
（そういえば、どっかで読んだ気がするなぁ）

IEでは、「createElementしたinput要素」に、「type属性を指定しない」で、「appendChildする」とエラーになります。

文章にするとわかりづらいですねぇ^^;

つまり、

/**
 * ダメ
 */
var input=document.createElement('input');
document.body.appendChild(input); // 怒られる！
input.type='button';
input.value='test';

/**
 * よい
 */
var input=document.createElement('input');
input.type='button';
document.body.appendChild(input); // だいじょぶ！
input.value='test';

ということです。

ブックマークレット作ってる時なんかは特に、
コードを短くしようと思って、

/**
 * これもダメ
 */
var input=document.body.appendChild(document.createElement('input')); // 怒られる！
input.type='button';
input.value='test';

とかやっちゃいがちなので注意！

以上でーす。
結局consoletで3エントリ稼いじゃいました(>_<)

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

自作ツールのなかで唯一（！）継続的に使用しているbookmarkletter。
特に最近はよく使ってるせいか、どうにも許せんところがあったので直した。

修正点は以下のとおり。

• 作成したブックマークレットを貼るためのhtml（aタグ）を表示するように
  （なんで今までこの機能を付けてなかったのかさっぱりわからん。毎回自分で書けというのか！）
• リンク用のバナー（っていうかただのテキスト）を用意
  （オマケ。SEO！SEO！）

以上。
これで当分使えそうかな？

[テスト]

スクリプト

/*
  bookmarkletter test
*/
alert('test');//test

ブックマークレット

test

ソース

javascript:(function(){alert('test');})()

aタグ

<a href="javascript:(function(){alert('test');})()">test</a>

バナー（？）

bookmarkletted by bookmarkletter.