Web開発者向け：ブックマークすると便利だと思います。(最終更新日2007年10月5日)
ブックマークレット
[HTML編集] このリンクをブラウザのブックマークバーにドラッグ＆ドロップするなどにより登録してください。
使い方
編集したいページで上記ブックマークレットを実行します。ためしに上記リンクをクリックしてみてください。
テキストエリア内にHTMLが表示されますので、それを編集してください。変更が即座に反映され、もとのウィンドウが書き換わります。
書き換えているのは、ブラウザのメモリ上のHTMLです。サーバには何の影響もありません。
便利な使い方
- 仕組みの分からないAjaxサイトの解析に → HTML(DOM)の構造が理解できる。また、一部を変更するなどの操作により理解しやすくなる。
- サイトの修正案のキャプチャを撮るときに → 一部を修正してそのままキャプチャをとればよい（ローカルに保存するなどの手間が不要）
動作環境
WinXP(SP2)のInternet Explorer 6.0.29とFirefox 1.0.7で動作確認済。
仕組み
- ブックマークレットを実行したウィンドウ(A)のdocument.body.innerHTML(Ht)を取得
- 新しくウィンドウ(B)を開いてテキストエリア(T)にinnerHTML(Ht)を流し込む
- そのテキストエリア(T)の内容が変更されたら、ウィンドウ(A)のdocument.bodyに流し込む（変更を戻す）。
Thanks
- 命名してくださった高林さん
ありがとうございます。
参考
追記
嬉しいことに、はてなブックマーク「注目のエントリー」で1位(?)になっていました。
"ajax"についての追記
このブックマークレットを"ajax"と呼ぶことに反対する方がいらっしゃるようです。
このブックマークレットはAjax用デバッグツールなんで、ajax関連ってことでお願いします。
とはいえ、これとは別の一般論として、「XMLHttpRequestを使っていなければajaxと呼ぶな」という考え方があることを残念に思っています。よろしければajaxの本質は「脱・紙芝居」を読んで頂ければ幸いです。
更新情報
- 2005-10-26
- 初期版
- 2005-10-28
- 外部スクリプト版を追加しました。
- 2007-10-03
- 外部スクリプト版を削除しました。