エディタに戻らずブラウザー上でクイック編集

ダブルクリックでWebが書き換わる！便利なFirefoxプラグイン

2008年11月20日 04時00分更新

文● 小橋川誠己／企画報道編集部

　作成したHTMLをブラウザーでプレビューしたら、テキストの些細な打ち間違いに気がついてしまった。エディタやオーサリングツールに戻って該当箇所を探すのはちょっと面倒。できればその場でさくっと編集できたらいいのに――。

　そんなときに便利に使えるのが、Firefox用のプラグイン「SourceEditor」だ。SourceEditorを使うと、ブラウザー上でHTMLの任意のブロックだけを編集できる。近頃のCMSで見かける「インラインエディット」あるいは「クイックエディット」機能のような使い勝手をスタティックなHTMLで実現するものだ。

　使い方は簡単だ。プラグインをインストールすると、右下のステータスバー部分にSourceEditorのミニアイコンが追加される。このアイコンをクリックすると、SourceEditorの機能のオン／オフを切り替えられる。


ステータスバーのアイコンをクリックするとオン／オフを切り替えられる

　機能をオンにした状態でマウスカーソルを任意のブロックに近づけると、赤い枠が表示される。編集したいブロックが選択されたらダブルクリックしてみよう。するとそのブロックのHTMLソースが表示され、その場でテキストを入力・編集できる状態になる。編集が終わったらステータスバーのアイコンをクリックして機能をオフにしよう。オフにしてもブラウザー上の表示は編集した後のままで保持されるはずだ。


マウスカーソルを編集したいブロックに合わせてダブルクリック


そのままテキストを書き換える編集モードに


編集結果がそのままページに反映された

　ただし、このSourceEditorには編集結果を保存する機能はない。HTMLファイルそのものを書き換えているわけではなく、JavaScriptを使ってDOMで表示を書き換えているので、Firefoxの[ファイル]→[名前をつけて保存]でも編集結果は残せない。

　そこで編集結果を残したい場合は、「Web Developer」などの開発者向けプラグインを併用してみよう。Web DeveloperではJavaScript実行後のHTMLソースを簡単に表示できるので、これをHTMLとして保存すればSourceEditorで編集した結果をHTMLファイルとして残せる。