Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2015年5月12日 ソフトウェア

たった1行!ブラウザをテキストエディタに変える魔法のコード


bteFirefoxとChromeにて動作を確認。ただし使い道は…
こんな記事を発見しました。 ブラウザをメモ帳っぽく使えるらしい…けっこう古いネタみたいですが、面白かったので紹介。

方法

下のコードをロケーションバーに入力すると、編集可能な真っ白なページが開かれます。ただしFirefoxやChrome等のモダンブラウザじゃないと動かないので注意。
data:text/html, <html contenteditable>
15_0512_041528 超シンプルなテキストエディタですね。テキストボックスのような扱いなので「戻る」「進む」「検索」などなど、エディタとして必要最低限の動きは可能です。 ただし、Chromeだとテキストファイルとして保存することは出来ませんでした。FirefoxならCtrl+Sからtxt形式で保存可能なんですがね…

使い所は限られますが、ブラウジング中に「ちょっとメモしたい!」って思った時、いちいちメモ帳を起動する必要が無いってのは結構便利かも?

仕組み

さっきの文字列を見れば分かりますが、HTML5で追加された「contenteditable」という属性をHTMLタグに与えています。contenteditableはユーザーがコンテンツ内を編集できるかどうかを定義する属性なので、HTMLタグに対して指定することでページ内全体が編集可能になります。 以上。
関連するかもしれない記事