覚えるまでもない。
ブラウザをメモ帳にするやつ
普段使ってるブラウザのアドレスバーにdata:text/html,<html contenteditable>を入れるだけでブラウザが画面いっぱいのメモ帳に出来る話は割と有名かと思う。
とりあえず一時的に文字コピペする領域が欲しい時に便利な
data:text/html,<html contenteditable>— マギレコリセマラ1週目@リタイア (@hnle0) November 3, 2017
いつが初出かは知らないけど少なくとも2012年12月に「One line browser notepad」がCoderwallに投稿されてい、国内ではたった一行でブラウザをシンプルなメモ帳に変える方法ああたりから伝導されている……？
知らなかったからこの発想が出てくるかは分からないが、いちど見ればdata URIスキームとcontenteditableを知っていればコピペとかするまでもなくすぐに開くことが出来るので実質的になにも覚えなくてもいい。
できる！マークアップ！
で、contenteditableはWYSIWYGな各種エディターとかで使われるためのものでもあるんでこの領域内に書いたものはHTML、ハイパーテキストとして扱われる。
もちろんベースでしか無いのでTinyMCEのようにコントロールは用意されていないし、HTMLを直接入力できるわけでもないので出来ることはかなり限られてしまうが、それでも簡単なマークアップが出来る。
以下のMSブログのエントリでも紹介されているよう、contenteditable上ではデフォルトでいくつかのショートカットが利用できる。
[HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現
挙げられているのが全てかは確認できてないが……
- Ctrl (Cmd) + B: 太字
- Ctrl (Cmd) + I: 斜体
- Ctrl (Cmd) + U: 下線？確認できず
といった単純なマークアップが利用でき（Safari、macOSのFirefoxでは無理っぽかった）、一時的なメモには割と便利。
また、クリップボードを用れば他のページのコンテンツのマークアップとスタイルをある程度保ったままコピペできる。もちろんリンクとかも保ったままコピペでき1、リンクテキストを変えることだってだいたい出来る。書式を伴わず、プレーンテキストとしてペーストしたい場合はCtrl (Cmd) + vの代わりにCtrl (Cmd) + shift + vを使えばいい2。
ブログ書くのにも度々便利な機能でもある。
ブラウザによって多少の違いはあるようなので一概に便利とはいえないかもしれないが基本的に普段使いのChrome系ブラウザでは少なくともちゃんと使える便利な機能。これが使えるのは地味にかなり大きい。
まあ保存もできるんだけど
これもまたブラウザに依る部分はあるみたいだけれどもブラウザのページを保存できるやつ(Ctrl (Cmd) + s)とかで丸々保存できたりもする。出来る場合は編集可能な状態のまま保存されるはずで、オプションによっては画像とかも一緒に保存することも可能なはず。
なお、CSSとかは基本的にインラインスタイルとして挿入されたりするのでソースを見てみるとかなりキモいことになっている場合がある……というか、Chromeで保存したら何故かUTF-8じゃなくてwindows-1252で保存されて日本語がすべて文字参照化されていた。かなりキモいというより理解できない……
まあdata:text/html,<html contenteditable><meta charset=utf-8>のように最初からcharsetを明示しておいてやればUTF-8にちゃんとなるんだけどなんか納得できない……
まとめ
まあ色々と気になるところはあるものの、いつでもすぐに使えるワンライナーで呼び出せるメモ帳は一時的なメモにも永続化するメモにおいても地味にわりと実用性もあり十分な便利に使える優れもの。
覚えるのも簡単。
……あれ、こんなこと書こうとしてたんじゃなかったような……