このページの本文へ

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

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

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

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

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

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

SourceEditor
マウスカーソルを編集したいブロックに合わせてダブルクリック
SourceEditor
そのままテキストを書き換える編集モードに
SourceEditor
編集結果がそのままページに反映された

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

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

SourceEditor
Web Developerのメニューから、[ソース]「実行結果を反映したソースを表示する]で編集済みのソースを表示できる

 SourceEditorの11月現在の最新版は0.2c。対応するFirefoxのバージョンは1.0~3.0で、編集部ではWindows版のFirefox 3.0.4で動作を確認した。ダウンロードは、こちらのページから可能だ。

■関連サイト

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く