JSActionsがなかなか便利

お役立ち Web

GWがはじまりました。特に予定もないので掃除でもしようかと思っています

さて今回は、Firefoxのアドオン、JSActionsのご紹介をしようと思います

JSActionsとは

一言でいえば、右クリックでJavascriptを実行させるFirefoxのアドオンです

JSActionsのことを知った経緯

ブックマークレットを右クリックから使えるようにしたいと思ったからです。メニューバーまでのマウス移動って地味に面倒ですよね

導入方法

先述の公式ページに使い方が書いてありますので参照してください

イメージとしては、ローカルのフォルダに使いたいjsファイルを置くことでそれをFirefoxが読み込んでくれる感じです。ファイル名のアタマを（01_**.js）みたいにすることで順番を変えることができます

image

メニュー上では、番号と末尾の.jsを省いたタイトルしか表示されません

image

画像を見てお分かりのとおり、ブックマークレットで有名なものたちですね

他にも、ブログを書く際に実体参照変換や改行削除をスクリプトにしたものを使っています

image

これらは文字列を選択した状態にすると呼び出せるようにしています（selectionというフォルダにスクリプトを置く）。いちいちWeb変換ツールなどを介さなくてもいいので便利です

右クリック時の「Actions」の位置を変えたい場合は、Menu Editorを使うといいと思います

一例をご紹介

カエレバやヨメレバはそのままブックマークレットのURLを書いて保存すれば使えます

image

一方、ShareHtmlなどは一部デコードしないと使えません（そのまま使うとエラーが出る）。例えば以下であれば

javascript:(function(){var%20d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new%20Date()).getTime();url+='&out='+'preview'+'&cnt='+'100'+'&sts='+'%3Cbr%3E%3Cspan%20style%3D%22color%3A%20%23808080%3Bfont-size%3A%2080%25%3B%22%3E'+'&ste='+'%3C/span%3E'+'&cts='+'%3Cbr%3E%3Cstrong%3E'+'&cte='+'%3C/strong%3E'+'&fmt='+'%3Ctable%20class%3D%22share%22%20style%3D%22display%3Ainline-block%3B%22%3E%3Ctr%3E%3Ctd%20valign%3D%22top%22%20width%3D%22160%22%20style%3D%22border%3A0%20none%3B%22%3E%3Ca%20href%3D%22%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%3Cimg%20class%3D%22alignleft%22%20align%3D%22left%22%20border%3D%220%22%20src%3D%22http%3A//capture.heartrails.com/150x130/shadow%3F%24%7Bposturl%7D%22%20alt%3D%22%22%20width%3D%22150%22%20height%3D%22130%22%20/%3E%3C/a%3E%3C/td%3E%3Ctd%20valign%3D%22top%22%20style%3D%22border%3A0%20none%3B%22%3E%3Ca%20style%3D%22color%3A%230070C5%3B%22%20href%3D%22%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%24%7Bposttitle%7D%3C/a%3E%20%3Ca%20href%3D%22http%3A//b.hatena.ne.jp/entry/%24%7Bposturl%7D%22%20target%3D%22_blank%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//b.hatena.ne.jp/entry/image/%24%7Bposturl%7D%22%20alt%3D%22%22%20/%3E%3C/a%3E%24%7Bpostselect%7D%24%7Bmemo%7D%3C/td%3E%3C/tr%3E%3C/table%3E';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

以下のようにデコードしてあげます

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new Date()).getTime();url+='&out='+'preview'+'&cnt='+'100'+'&sts='+'<br><span style="color: #808080;font-size: 80%;">'+'&ste='+'</span>'+'&cts='+'<br><strong>'+'&cte='+'</strong>'+'&fmt='+'<table class="share" style="display:inline-block;"><tr><td valign="top" width="160" style="border:0 none;"><a href="${posturl}" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?${posturl}" alt="" width="150" height="130" /></a></td><td valign="top" style="border:0 none;"><a style="color:#0070C5;" href="${posturl}" target="_blank">${posttitle}</a> <a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt="" /></a>${postselect}${memo}</td></tr></table>';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

このようにデコードしたものであれば、エラーも出ずちゃんと使えるようになります

方法としては、URL エンコード/デコードフォームなどでデコードしてあげればいいと思います

HTMLタグなどをブログに表示したいときに使える実体参照スクリプトは以下で動きました（その点はてなのスーパーpre記法は便利ですね）

javascript:(function(){
var d=document;
function r(s){
return s.replace(/([<>&\"])/g,function(m0,m1){
return {
'<':'&lt;','>':'&gt;','\"':'&quot;','&':'&amp;'
}[m1];
});
}
if(d.selection){
d.selection.createRange().text=r(d.selection.createRange().text);
}else{
var ta=d.getElementsByTagName('textarea');
for(var i=0;i<ta.length;i++){
if(ta[i].value){
var s=ta[i].selectionStart;var e=ta[i].selectionEnd;
var v=ta[i].value;
var t=v.slice(s,e);
if(t)ta[i].value=v.slice(0,s)+r(t)+v.slice(e);
}
}
}
}
)();

同じく改行を削除するためのスクリプトは以下です

javascript:(function(){
var d=document;
function r(s){
return s.replace(/[\n\r]/g,"");
}
if(d.selection){
d.selection.createRange().text=r(d.selection.createRange().text);
}else{
var ta=d.getElementsByTagName('textarea');
for(var i=0;i<ta.length;i++){
if(ta[i].value){
var s=ta[i].selectionStart;
var e=ta[i].selectionEnd;
var v=ta[i].value;
var t=v.slice(s,e);
if(t)ta[i].value=v.slice(0,s)+r(t)+v.slice(e);
}
}
}
}
)();

正直、よくわからないことでエラーが出たり、うまく動作しなくても一度そのjsファイルが読み込めてしまうとそのあと上書き修正しても反映されない（のでファイル名を変更して新しいスクリプトとして読み込ませないといけない）など、イマイチ理解できない部分もあるのですが、暫定的に問題なく使えているのでよしとしています

上記のものを使ってみてうまく動作しない場合はご了承ください