ルビ記法　入力支援ブックマークレット

ブログの記事作成などで、テキストエリアに次のような記法で書くと、
ルビをあらわすHTMLタグに変換するブックマークレットを書きました。

記法

#漢字{かんじ}
＃漢字｛かんじ｝

((漢字||かんじ))
（（漢字｜｜かんじ））


    
    漢字<<かんじ>>
    
｜漢字《かんじ》

ブックマークレット

その１　*1

javascript:(function(d,e,b,i){e=d.getElementsByTagName("textarea");if(!e.length){alert("テキストエリアがありません");return;};for(i=0;i<3;i++){b=d.createElement("input");b.type="button";b.style.position=/*@cc_on"absolute"||@*/"fixed";b.style.top=2.5*i+1.5+"em";b.style.right="10px";b.style.width="12em";b.style.zIndex="2147483647";b.value=["#\40ruby\40{\40ルビ\40}","(\(\40ruby\40||\40ルビ\40)\)","|\40ruby\40<<\40ルビ\40>>"][i];with({r:[/[#＃](.*?)[{｛](.*?)[}｝]/g,/[(（]{2}(.*?)[|｜]{2}(.*?)[)）]{2}/g,/[|｜](.*?)(?:《|[<＜]{2})(.*?)(?:》|[>＞]{2})/g][i]}){b.onclick=function(c,j){c=0;for(j=0;j<e.length;j++){e[j].value=e[j].value.replace(r,function(){c++;return"<ruby><rb>"+arguments[1]+"</rb><rp>(</rp><rt>"+arguments[2]+"</rt><rp>)</rp></ruby>";});};if(c==0){alert("該当ありません");}else{alert(c+"箇所変更しました");};};};d.body.appendChild(b);};})(document);

その２　*2

javascript:'rubymaker',['http://atkatanto.googlecode.com/svn/trunk/js/rubymaker.js',function(d,i,e,s){for(;s=this[++i];d.body.appendChild(e))e=d.createElement('script'),e.src=s,e.charset='utf-8'}].reverse()[0](document,0)

使い方

上記ブックマークレットのいずれかを、アドレスバーへのコピーや、お気に入りなどの登録先から実行します。*3
すると、3種類の記法に対応する3つのボタンが画面右上に表示されます。
ボタンを押すと、テキストエリア内の記法を、ルビのHTMLタグに変換します。

変換後のHTML例

<ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

表示されると↓

漢字(かんじ)

スタイルシートの設定を工夫することで、IE以外のブラウザでもルビが表示されます。
( はてなダイアリーでルビをふる - ひとりごと )

参考URL

*1:外部との通信なし。文字数制限のためIE6では使えません。

*2:外部との通信あり。IE6でも使えます。

*3:その２を利用される場合は、通信先jsファイルの内容をご確認のうえ、ご利用のサーバーにコピーし、ブックマークレット内のjsファイルのURLを書き換えて利用されることをお勧めします。

記法