gotin blog

Whatever gotin wanna write

はてなダイアリー編集画面にライブプレビュー機能をつけるGreasemonkeyスクリプト

を作ってみました。
すでにありそうな気がしたんですが、軽く探してみたところなかったので書いてみました。
↓こちらです。
hateda_preview.user.js
インストールするとはてなダイアリー編集画面に↓こんな風なライブプレビュー機能がつきます。
f:id:gotin:20070625031956p:image

編集用テキストエリアのすぐ上にライブプレビュー窓がつきます。さらにその上にlive previewチェックボックスがつきます。そのチェックボックスが押されているとライブプレビュー機能がオンになります。デフォルトでオフなので、使いたいときは忘れずにオンします。
編集用テキストエリアで日記を編集すると、編集内容がプレビューエリアに反映されます。

私ははてな記法にあまり慣れてないので、この機能をつかってサクサク確認できるととってもありがたいのです。

仕組み

「確認する」ボタンを押す処理をGM_xmlhttpRequestでバンバン流してその結果をプレビュー用のiframeに流してます。単純にバンバン流すのもあれなので、定期的に編集内容を確認して変化があったときだけ流すようにしてます。いやそれでもきっと流し過ぎなんですけどね。。
こんなのユーザ全員が使ったらとっても迷惑なんだろうなぁ。。。

独り言

もっとiframeの高さを高くしろor高さを自由に変えられるようにしろ、という要望がありそうな気がしてきた。
このスクリプト、自分の中では今まで書いてきたGreasemonkeyスクリプトの中で1、2を争う便利さを感じております。何よりも書いたそのときにプレビューに反映されるのがなんだか楽しいです。でもはてなダイアリーユーザの、しかも私のスクリプトを特に疑いもなく使う人で、はてなダイアリーのサーバに猛烈にプレビューリクエストを出すことになんのためらいもない人としかその楽しさは共有できないわけで、なんて悲しいんでしょう。ということで今日は久しぶりに飲み会に行ってきました。うまかったです。肉。