contenteditable でブラウザでメモを書く
Jose Jesus Perez Aguinaga : One line browser notepad
ここで紹介されていた, Data URI と contenteditable を組み合わせてブラウザのタブを即席のメモ帳にするアイデアが面白かった. やりかたはブラウザのロケーションバーに以下をいれるだけ:
data:text/html, <html contenteditable>黒背景にしたかったので, すこしだけスタイルを足して使っている. 以下をブックマークレットとしてブラウザに保存した.
ちなみにこれで書いたメモは html で保存できる. 中身はぐちゃぐちゃの html なのでスクリプトから読んだりするのは難しいけど, ブラウザで開けば読むことはできる.
contenteditable 属性を DOM のある要素に指定すると, その中身が自由に編集できるようになる. 変更された DOM の中身は js から読める. ブラウザ上での wysiwyg エディタ開発を想定している機能らしい.
The contenteditable attribute | HTML5 Doctor
もういっこちなみに, data uri の syntax
data:[<mediatype>][;base64],<data>