わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

コマンドに色づけするブックマークレット

フォームから日記を登録する際,実行するコマンドは,地の文の中で書くにせよ,ブロック引用の中で書くにせよ,色をつけたほうが見やすいかもなあと,漫然と思いまして,昨日のエントリでは #006600 の指定をしています.
ただ,単純に領域指定して装飾するのでは,プレビュー時はいいのですが,登録した後で見ると,自動リンクが優先されて色が落ちるところが多々ありました.
自動リンクを止める(自動リンク停止記法) - はてなダイアリーのヘルプにあるとおり,前後に""を挟みましたが,これは手間です.
そこで,ブックマークレットを作りました.はてなで日記を書く際に,あらかじめ領域を指定しておき,このブックマークレットを適用すると,前後に色指定と"
"がつきます.Firefox専用…だと思います.

コマンドのみ:
javascript:(function(){var e=document.getElementById("textarea-edit");if(e){var top=e.scrollTop,n1=e.selectionStart,n2=e.selectionEnd;if(n1!=n2){var s1=e.value.substring(0,n1),s2=e.value.substring(n1,n2),s3=e.value.substring(n2);e.value=s1+""+s2+""+s3;e.scrollTop=top;e.setSelectionRange(n1+31,n1+31+s2.length);e.focus();}}})();

一般ユーザのプロンプトつき:
javascript:(function(){var e=document.getElementById("textarea-edit");if(e){var top=e.scrollTop,n1=e.selectionStart,n2=e.selectionEnd;if(n1!=n2){var s1=e.value.substring(0,n1),s2=e.value.substring(n1,n2),s3=e.value.substring(n2);e.value=s1+"$ "+s2+""+s3;e.scrollTop=top;e.setSelectionRange(n1+73,n1+73+s2.length);e.focus();}}})();

rootのプロンプトつき:
javascript:(function(){var e=document.getElementById("textarea-edit");if(e){var top=e.scrollTop,n1=e.selectionStart,n2=e.selectionEnd;if(n1!=n2){var s1=e.value.substring(0,n1),s2=e.value.substring(n1,n2),s3=e.value.substring(n2);e.value=s1+"# "+s2+""+s3;e.scrollTop=top;e.setSelectionRange(n1+73,n1+73+s2.length);e.focus();}}})();

いくつか確認.

  • which svnを実行して,コマンドが見つからなかったときは,Subversionをインストールしましょう.DebianUbuntuなら,rootになってapt-get install subversionです.

(BEFORE)
which svnadmin
svnadmin not found
sudo -i
apt-get install subversion
exit
which svnadmin
/usr/bin/svnadmin

(AFTER)
$ which svnadmin
svnadmin not found
$ sudo -i
# apt-get install subversion
# exit
$ which svnadmin
/usr/bin/svnadmin

(長いコマンドだと)
# ruby -p -i.etch -e '$_.gsub!("etch","lenny")' /etc/apt/sources.list

JavaScriptのコードについていくつか.「フォームのテキストエリアで,選択されている領域を知る方法」を調べまして,大部分がid決め打ちでgetElementByIdで取得していたので*1,それに倣いました.id="textarea-edit"がない場合や,領域指定がない場合には,処理をしません.
一番参考にしたのは,http://www.webdeveloper.com/forum/printthread.php?t=32317&page=2&pp=15で,ここからFirefox用のコードを取り出して一つの関数にし,http://karetta.jp/article/blog/oneline/009098の対策を取り入れました.
色合いですが,コマンドの色を青(#0033cc)にしようと思ったものの,リンクと似た色なのに気づき,結局,昨日と同じにしました.
使ってみたものの,いくつか課題があります.ブックマーク適用後にCtrl-Zでアンドゥすると,全領域が反転表示されます.適用後の日記ソース(テキストエリアの中)が,読みにくくなります.ブロック引用で,複数行を選択してから「一般ユーザのプロンプトつき」を適用しても,最初の一つにしかプロンプトがつきません.
入念に内容を確認し,最後の最後の段階で,これらのブックマークを使わないといけませんね….

*1:bookmarkletで選択文字列を取得することを考える - 徒書も見ましたが,字数が多くなりそうで,採用を見送りしました.