表示中のウェブページのテキストや画像をその場で編集するブックマークレット : Web

表示中のウェブページのテキストや画像をその場で編集するブックマークレット

2013-01-07 月 17:47
Web

　テキストエリアで編集するブックマークレットとcontentEditable属性を利用するブックマークレットの2つです。

　テキストエリア版はクリックした要素のHTMLコードを編集でき、複数の画像の差し替え（img要素で配置したトップ画像のテスト表示など）を簡単に行うことができます。
　contentEditable版はクリックした箇所を直接編集できるブックマークレットです。

　Firebugなどの拡張機能やブラウザ標準の開発ツールで事足りると思います。

ブックマークレット

　お気に入りに登録して使用します。下記リンクを（右）クリックして、リンクをお気に入り（ブックマーク）に追加します。Google Chromeはメニューからブックマークバーを表示させてリンクをバーにドラッグします。IE以外のブラウザ推奨です。

テキストエリア版

　» [E]dit-t

　動作しないときはjsファイル版（[E]dit-j）で動くかもしれません。

　IEで外部ファイルでも動作しないときは機能制限版の[E]dit-ieを試してみてください。

contentEditable版

　» [E]dit-c

　適当なページを開いてお気に入りに追加したリンクをクリックすると編集できるようになります。ブックマークレットはどれか一つのみ起動させてください。元に戻すときはリロードしてください。
　テキストエリア版サンプル / contentEditable版サンプル

テキストエリア版

　編集したいテキスト（要素）をクリックするとテキストエリア内に要素内のHTMLが表示され、編集した内容がページ上に反映されます。【x】ボタンで編集モードを終了するまでリンクをクリックしてもジャンプしません（例外有り）。IE機能制限版はお気に入りに追加したリンク（ブックマークレット）を再度クリックすれば終了します。

　リアルタイムで編集したくないときは【左のチェックボックス】のチェックを外します。外した場合は【ok】ボタンを押すことでページ上に反映されます。

　編集の途中でもページ上の適当な箇所をクリックすると編集対象の要素が変わります。対象を変更したくない場合は【右のチェックボックス】をチェックすることで対象が変更されなくなります。別の場所を編集するときはチェックを外します。
　ページ上のテキストを選択するときは【右のチェックボックス】をチェックしてください。

　画像をクリックした場合はその画像のアドレスが表示されます。
　画像のサイズは末尾の「@w横幅,高さ」の数値を変更すると変わります。「@w640,360」に変更すれば横幅640px、高さ360pxで表示されます。

　画像を変更するときは元のアドレスを削除して新しいアドレスを貼り付けるか、元のアドレスの次の行に新しいアドレスを追加します。「@w横幅,高さ」の指定がない場合は画像本来の大きさで表示されます。
　複数のファイルアドレスを入力した場合は一番下のファイルが表示されます。

右上の【<】【>】ボタンを押すとアドレスが上下に移動し、画像を簡単に差し替えることができます。
　複数の画像を試すときは1～3の手順を行なってからすると編集しやすいかもしれません。
　1. リアルタイムプレビュー（左）のチェックを外す
　2. 画像をクリック
　3. 編集要素ロック（右）のチェックボックスをチェックする

テキストの改行は「 」を打ち込むか、【br】ボタンを押して改行部分に「 」を自動挿入してください。

あいうえおかきくけこさしすせそ ↓【br】ボタンあいうえお かきくけこ さしすせそ

　【go】ボタンは編集している箇所までスクロールします。IE機能制限版にはありません。

　【+】ボタンはテキストエリアの高さや位置を変更します。クリックする度に「下部→高さ変更→上部移動→高さ変更」の順で切り替わります。

　【x】ボタンは編集を終了します。IE機能制限版にはありません。再度編集するときはお気に入りのリンクをもう一度クリックします。

マークアップの仕方によってはテキストエリアの内容が多くなります（p要素を使わずに「 」で改行を続けているページなど）。要素がうまく取得できないときはクリックする箇所をずらしてみてください。
　例えば画像の属性を変更するときは画像周辺をクリックして親要素から編集します。img要素のコードを削除すれば画像も削除されます。

contentEditable版

　お気に入りに追加したブックマークレットのリンクをクリックしてページ上の適当なテキストをクリックするとカーソルが現れてその場で編集できるようになります。