[ajax]quickedit - HTMLリアルタイム編集(ブックマークレット)

Web開発者向け:ブックマークすると便利だと思います。(最終更新日2007年10月5日)

ブックマークレット

[HTML編集] このリンクをブラウザのブックマークバーにドラッグ&ドロップするなどにより登録してください。

使い方

編集したいページで上記ブックマークレットを実行します。ためしに上記リンクをクリックしてみてください。

テキストエリア内にHTMLが表示されますので、それを編集してください。変更が即座に反映され、もとのウィンドウが書き換わります。

書き換えているのは、ブラウザのメモリ上のHTMLです。サーバには何の影響もありません。

便利な使い方

  • 仕組みの分からないAjaxサイトの解析に → HTML(DOM)の構造が理解できる。また、一部を変更するなどの操作により理解しやすくなる。
  • サイトの修正案のキャプチャを撮るときに → 一部を修正してそのままキャプチャをとればよい(ローカルに保存するなどの手間が不要)

動作環境

WinXP(SP2)のInternet Explorer 6.0.29とFirefox 1.0.7で動作確認済。

仕組み

  1. ブックマークレットを実行したウィンドウ(A)のdocument.body.innerHTML(Ht)を取得
  2. 新しくウィンドウ(B)を開いてテキストエリア(T)にinnerHTML(Ht)を流し込む
  3. そのテキストエリア(T)の内容が変更されたら、ウィンドウ(A)のdocument.bodyに流し込む(変更を戻す)。

Thanks

ありがとうございます。

参考

追記

嬉しいことに、はてなブックマーク「注目のエントリー」で1位(?)になっていました。

"ajax"についての追記

このブックマークレットを"ajax"と呼ぶことに反対する方がいらっしゃるようです。

このブックマークレットはAjax用デバッグツールなんで、ajax関連ってことでお願いします。

とはいえ、これとは別の一般論として、「XMLHttpRequestを使っていなければajaxと呼ぶな」という考え方があることを残念に思っています。よろしければajaxの本質は「脱・紙芝居」を読んで頂ければ幸いです。

更新情報

2005-10-26
初期版
2005-10-28
外部スクリプト版を追加しました。
2007-10-03
外部スクリプト版を削除しました。

トラックバック(0)

トラックバックURL: http://zerobase.jp/mt/mt-tb.cgi/383