ついっぷるでツイートするためのブックマークレット

　私のブログにもあるが、最近では多くのサイトにそのサイトについてTwitterでツイートするためのリンクが用意されている。しかし、リンクが用意されてないサイトもあり、そのために【共有ブックマークレット】が用意されている。この「Share on Twitter」というリンクをFirefoxならブックマークツールバーに、Internet Explorer(IE)なら「お気に入りバー」に設置し、例えば私のブログを見ている状態でクリックすると、「リンクをあなたのフォロワーに共有する」と書いてある下の入力欄に「正己の異論・反論：So-net blog http://self.blog.so-net.ne.jp/」と入力されたウィンドウが開く。前半が見ているサイトのtitleで、後半が見ているサイトのURLである。ここで、そのままか文章を追加してから「ツイート」ボタンをクリックするとTwitterに投稿できる。
　「共有ブックマークレット」は便利だと思うが、私は自動的に入力されている文字列が「title URL」だけであることが不満で、「→【title】 URL」となるように、自分でブックマークレットを作った。それは最終的には次のリンクになった。

ツイート（Firefox 10.0.2用）

（追記：2012/3/5：２ちゃんねるのページに対してはエラーになりましたので修正しました。）

Twitterでつぶやく（IE8用）

　上のブックマークレットは私の環境では問題なく動作しているようだが、他の人の環境で動作するか分からないし、私の環境でも今後は分からない。そもそも「→【title】 URL」という形の自動入力は私の好みだから、他の人は【共有ブックマークレット】の方を使った方が良いだろう。

　実は、上のブックマークレットを作ったのは今日で、以前は別のJavascriptだった。Twitterを使ってツイートする場合は古いブックマークレットでも問題なかったのだが、ついっぷるでツイートするためのブックマークレットで問題が生じたので、それに合わせてTwitterでツイートするブックマークレットの方も修正した。

　【共有ブックマークレット】を使って【内閣 (日本) - Wikipedia】のページを試してほしい。入力欄に次のように入力されているだろう。

内閣 (日本) - Wikipedia http://ja.wikipedia.org/wiki/%E5%86%85%E9%96%A3_(%E6%97%A5%E6%9C%AC)

　この状態で「ツイート」ボタンをクリックすればURLは自動的に短縮URL「t.co」に変換される（参照）。その短縮URLで【内閣 (日本) - Wikipedia】にジャンプする。
　しかし、ついっぷるの入力欄に上記のように入力されていて「URL短縮」がチェックされた状態でツイートすると例えば次のようにbit.lyで短縮される（参照）。

http://bit.ly/zNHIlj(%E6%97%A5%E6%9C%AC)

　"("から後ろをURLの一部とみなさずに短縮したようである。この現象は2010年7月18日に気づいて（参照）2010年9月19日に報告して（参照）2010年10月4日に要望を出した（参照）のだが修正される気配がない。仕方ないのでユーザーが対処するしかない。
　例えば、【内閣 (日本) - Wikipedia】については入力欄に次のように入力されていれば良い。

内閣 (日本) - Wikipedia http://ja.wikipedia.org/wiki/%E5%86%85%E9%96%A3_%28%E6%97%A5%E6%9C%AC%29

　"("が"%28"に、")"が"%29"にエンコードされている。Firefoxではアドレスバーからコピーすればエンコードされて張り付けられるようになるが、できればブックマークレットをクリックして自動的に入力されるようにしたい。しかし、【共有ブックマークレット】を使った結果と同様に、通常は"("や")"はエンコードされない。JavascriptではencodeURIComponent()を使ってエンコードする方法が一般的だが、それでは"("や")"はエンコードされない。Googleで検索して次のような情報を見つけた。

If one wishes to be more stringent in adhering to RFC 3986 (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:

function fixedEncodeURIComponent (str) {
return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
replace(/\)/g, '%29').replace(/\*/g, '%2A');
}

（encodeURIComponent - MDN）

　要するに、encodeURIComponent()でエンコードした後に"("や")"などを"%28"や"%29"などに置換すれば良いらしい。

　まずは、JSActionsのスクリプトで試した。しかし、"("や")"は"("や")"のままで"%28"や"%29"と表示されない。試行錯誤の末に「"("や")"はreplaceで"%28"や"%29"に置換されてはいるがアドレバーに表示された時にデコードされて"("や")"に戻ってしまう」ということに気づいた。そこで、JSActionsのスクリプトでは"("や")"をreplaceで"%2528"や"%2529"に置換して、ようやくついっぷるの入力欄に例えば次のように自動的に入力されるスクリプトを作ることができた。

→【内閣 (日本) - Wikipedia】 http://ja.wikipedia.org/wiki/%E5%86%85%E9%96%A3_%28%E6%97%A5%E6%9C%AC%29

　JSActionsのスクリプトを利用してブックマークレットも簡単に作れるかと思ったのだが、"("や")"を"%2528"や"%2529"に置換するだけではダメで、"%252528"や"%252529"に置換しなければいけないらしい。そんな試行錯誤の結果、ようやく、ついっぷるでツイートするためのブックマークレットを作ることができた。

ツイート（Firefox 10.0.2用）

（追記：2012/3/5：２ちゃんねるのページに対しては文字化けしたので修正しました。）

ついっぷるでつぶやく（IE8用）

　私が利用するのはFirefoxだが、ブログに書くのでIE8用も作ってみた。全角文字の扱い方がFirefoxとIE8とで異なるので戸惑ったが、とりあえず作ってみた。バグがあったら修正する予定である。

　Firefoxの方は最初は次のようなソースだった。

javascript:(function(){
if(document.getSelection()!=""){var%20str0="→「"+document.getSelection()+"」";}
else{var%20str0="→";};
var%20str1="【"+document.title+"】";
var%20str=str0+str1;
var%20url=document.location.href;
url=encodeURIComponent(url).replace(/!/g,"%252521").replace(/'/g,"%252527").replace(/\(/g,"%252528").replace(/\)/g,"%252529").replace(/\*/g,"%25252A");
window.open("http://twipple.jp/?text="+encodeURIComponent(str)+"%20"+url);
})();
（ブックマークレットにするときは改行コードを削除）

　しかし、ブックマークレットのURL欄にコピーしたら全角文字が自動的にエンコードされて次のようになった。

javascript:(function(){
if(document.getSelection()!=""){var%20str0="%E2%86%92%E3%80%8C"+document.getSelection()+"%E3%80%8D";}
else{var%20str0="%E2%86%92";};
var%20str1="%E3%80%90"+document.title+"%E3%80%91";
var%20str=str0+str1;
var%20url=document.location.href;
url=encodeURIComponent(url).replace(/!/g,"%252521").replace(/'/g,"%252527").replace(/\(/g,"%252528").replace(/\)/g,"%252529").replace(/\*/g,"%25252A");
window.open("http://twipple.jp/?text="+encodeURIComponent(str)+"%20"+url);
})();
（ブックマークレットにするときは改行コードを削除）

　エンコードした文字をさらにencodeURIComponent(str)とエンコードするのは気持ちが良くないので、最終的にencodeURIComponent()ではdocument.titleだけをエンコードする次のスクリプトになった。（追記：2012/3/5：document.titleだけをエンコードする次のスクリプトでは一部のサイトで文字化けが生じたので、encodeURIComponent(str)の方のスクリプトの方が良いかもしれません。上のついっぷる用のブックマークレット（Firefox用）は修正しました。）

javascript:(function(){
if(document.getSelection()!=""){var%20str0="%E2%86%92%E3%80%8C"+document.getSelection()+"%E3%80%8D";}
else{var%20str0="%E2%86%92";};
var%20str1="%E3%80%90"+encodeURIComponent(document.title)+"%E3%80%91";
var%20str=str0+str1;
var%20url=document.location.href;
url=encodeURIComponent(url).replace(/!/g,"%252521").replace(/'/g,"%252527").replace(/\(/g,"%252528").replace(/\)/g,"%252529").replace(/\*/g,"%25252A");
window.open("http://twipple.jp/?text="+str+"%20"+url);
})();
（ブックマークレットにするときは改行コードを削除）

　document.titleが既にエンコードされているのならencodeURIComponent()でさらにエンコードするのは気持ちが良くないので、エンコードしない次のスクリプトの方が良いかもしれない。今のところ、Firefoxでは、どれも問題がないようだが…。

javascript:(function(){
if(document.getSelection()!=""){var%20str0="%E2%86%92%E3%80%8C"+document.getSelection()+"%E3%80%8D";}
else{var%20str0="%E2%86%92";};
var%20str1="%E3%80%90"+document.title+"%E3%80%91";
var%20str=str0+str1;
var%20url=document.location.href;
url=encodeURIComponent(url).replace(/!/g,"%252521").replace(/'/g,"%252527").replace(/\(/g,"%252528").replace(/\)/g,"%252529").replace(/\*/g,"%25252A");
window.open("http://twipple.jp/?text="+str+"%20"+url);
})();
（ブックマークレットにするときは改行コードを削除）

　IE8用はよく分からなかった。
　まず、document.getSelection()は使えなかったのでdocument.selection.createRange().textに変えた。
　次に、window.open()を使ったらポップアップブロックに邪魔されたのでlocation.href=""に変えた。
　一番分からなかったのは、全角文字の扱いで、Firefox用の上のスクリプトのwindow.open()やdocument.getSelection()を変えただけでは文字化けが生じた。
　そこで、最終的に次のスクリプトになった。

javascript:(function(){
if(document.selection.createRange().text!=""){var%20str0="→「"+document.selection.createRange().text+"」";}
else{var%20str0="→";};
var%20str1="【"+document.title+"】";
var%20str=str0+str1;
var%20url=document.location.href;
url=encodeURIComponent(url).replace(/!/g,"%252521").replace(/'/g,"%252527").replace(/\(/g,"%252528").replace(/\)/g,"%252529").replace(/\*/g,"%25252A");
location.href="http://twipple.jp/?text="+encodeURIComponent(str)+"%20"+url;
})();
（ブックマークレットにするときは改行コードを削除）

　encodeURIComponent(str)で全角文字とdocument.titleをエンコードすることは必要らしく、document.titleだけをencodeURIComponent()でエンコードしたり、全角文字を最初からエンコードして記述してdocument.titleだけをencodeURIComponent()でエンコードしても文字化けが起こった。全角文字を最初からエンコードして記述してdocument.titleをencodeURIComponent()でエンコードしない状態でも文字化けが起こった。結局、全角文字の所は最初からエンコードして記述するのではなくencodeURIComponent()でエンコードする必要があるのかもしれない。全角文字をencodeURIComponent()でエンコードしてdocument.titleはエンコードしないスクリプトは試してない。上記のスクリプトを改変する際に面倒だからである。Firefoxのように全角文字を最初からエンコードして記述してはダメな理由がよく分からないが…。

　今回は"("や")"をブックマークレットで"%28"や"%29"にエンコードする方法を見つけるのに苦労した。Googleで検索しても答が見つからなかったので、私と同じようにGoogle検索で答を見つけようとする人がいたら、その人の役に立てればとブログに記録を残した。参考になれば幸いである。

　ちなみに、このブログに用意したブックマークレット（リンク）では「replace(/'/g,"%252527")」を「replace(/%27/g,"%252527")」にしてある。「a href=''」の中に「'」があると問題が生じるし、「a href=''」ではなく「a href=""」にすると、その中に「"」が存在するので問題が生じる。結局は、「a href=''」にしても「a href=""」にしても、その中に「'」と「"」の両方が存在して問題が生じるので、「'」を「%27」に置き換えて記述することにした。

タグ：JavaScript ブックマークレット Twitter