matsuo君はHTML5の contentEditable 属性を知っているか
まずはこちらのボタンをごクリックください。
一見、なにも変わったように見えませんが、ブラウザ内の適当な場所をクリックして文字を入力してみてください。ブラウザ内のどんな部分でも、テキストエディタのように文字を入力したり、削除できるようになっているかと思います。画像をドラッグして移動させたりも可能です。「編集モードに入った」的な感じですね。
もういちどボタンをクリックすると、編集モードは終了します。
君はHTML5の contentEditable 属性を知っているか
知っている方には、すみません。
HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。
ちょっと試してみましょう。
<div contentEditable="true">ここは編集できる</div>
↑ ここは編集できるのです。(ただの <div> 要素なのですが！)
編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。
body要素に contentEditable 属性をつけてみる
さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。
JavaScript コードはこんなかんじ。
javascript:(function(b){b.contentEditable=!b.isContentEditable;})(document.body);
ブックマークレットとして使いたいので、読み辛いですが1行で書いています。内容は、呼び出される毎に <body> 要素のcontentEditable をトグルしているだけです。
こんな時に便利
ボタンをドラッグしてブックマークのツールバーあたりに入れ、ブックマークレットにしておきます。これで1クリックでいつでも起動できます。
たとえば、
- 「スクリーンショット撮りたいんだけど、ここのバナーや文言だけは消しておきたい」とか
- 「ここの見出しテキスト、2行になったらどんな折り返し表示になるんだっけ？」とか
さくっと編集できるようになるので便利だと思います。
また、ブックマークレットを「新しいタブで開く」と、ブラウザのタブが簡易のメモがわりになって便利だったりもします。
以上、小ネタでした！
参考
Content Editable - HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Content_Editable
