作成したHTMLをブラウザーでプレビューしたら、テキストの些細な打ち間違いに気がついてしまった。エディタやオーサリングツールに戻って該当箇所を探すのはちょっと面倒。できればその場でさくっと編集できたらいいのに――。
そんなときに便利に使えるのが、Firefox用のプラグイン「SourceEditor」だ。SourceEditorを使うと、ブラウザー上でHTMLの任意のブロックだけを編集できる。近頃のCMSで見かける「インラインエディット」あるいは「クイックエディット」機能のような使い勝手をスタティックなHTMLで実現するものだ。
使い方は簡単だ。プラグインをインストールすると、右下のステータスバー部分にSourceEditorのミニアイコンが追加される。このアイコンをクリックすると、SourceEditorの機能のオン／オフを切り替えられる。
ステータスバーのアイコンをクリックするとオン／オフを切り替えられる
機能をオンにした状態でマウスカーソルを任意のブロックに近づけると、赤い枠が表示される。編集したいブロックが選択されたらダブルクリックしてみよう。するとそのブロックのHTMLソースが表示され、その場でテキストを入力・編集できる状態になる。編集が終わったらステータスバーのアイコンをクリックして機能をオフにしよう。オフにしてもブラウザー上の表示は編集した後のままで保持されるはずだ。
マウスカーソルを編集したいブロックに合わせてダブルクリック
そのままテキストを書き換える編集モードに
編集結果がそのままページに反映された
ただし、このSourceEditorには編集結果を保存する機能はない。HTMLファイルそのものを書き換えているわけではなく、JavaScriptを使ってDOMで表示を書き換えているので、Firefoxの[ファイル]→[名前をつけて保存]でも編集結果は残せない。
そこで編集結果を残したい場合は、「Web Developer」などの開発者向けプラグインを併用してみよう。Web DeveloperではJavaScript実行後のHTMLソースを簡単に表示できるので、これをHTMLとして保存すればSourceEditorで編集した結果をHTMLファイルとして残せる。
Web Developerのメニューから、[ソース]「実行結果を反映したソースを表示する]で編集済みのソースを表示できる
SourceEditorの11月現在の最新版は0.2c。対応するFirefoxのバージョンは1.0～3.0で、編集部ではWindows版のFirefox 3.0.4で動作を確認した。ダウンロードは、こちらのページから可能だ。
