Webブラウザをメモ帳のように使いたい、標準機能だけで。
コンバンハ、千葉（幸）です。
Webブラウザでちょっとしたメモを取りたいということはないでしょうか。わたしはあります。
Webミーティング中に自分のWebブラウザを画面共有していたとします。その流れで会議のまとめをメモに書き、書いたものをそのままチャットツールやお客様への返信メールに載せる、といった場面です。「まとめメモ」を参加者が目に見える状態で作れると捗りますよね。
もちろんGoogleドキュメントやNotionなどWebブラウザ上で文字を書けるサービスはいくらでもあるので、それらで事足りることもあります。ただ、全く関係ないタブを開いていたところからさっとメモを書きたいという時に、ちょうどいいページを開いたり新規の空白ページを開くのは手間です。手元のメモ帳を画面共有し直すのも、同じく手間ですね。
ブックマークから一発で新規の「メモ帳」がWebブラウザ上のタブで開けるといいな、という願望を特に難しいことをせずに実現できるので、その方法をご紹介します。
先にまとめ
- Webブラウザのアドレスバーに
data:text/html, <body contenteditable>を入力すれば、メモ帳のように使える - 仕組みは「
data:スキーム」と「contenteditable属性」の組み合わせだけ - 見た目や誤操作対策は、URLに少し書き足せば整えられる
イメージはこのような形です。自分で打ち込んだテキストが反映されていきます。よくあるショートカットでの太字化、斜体化などもできます。
このURLをブックマークに登録しておけば、1クリックでWebブラウザ上で「メモ帳」が開けるというわけです。Google Chromeで動作確認しましたが、大抵のWebブラウザで動作するかと思います。
Webブラウザの「メモ帳」の動作の仕組み
せっかくなのでなぜこのように動作するのかを確認します。
data:スキーム
Webブラウザに入力するURLと言えばhttps://から始まるものが圧倒的に多いです。URLの先頭のhttps:の部分は使用するプロトコルを表すもので、スキームと呼ばれます。今回はdata:スキームです。
data: から始まるURLはデータそのものをURLの中に書きます。下記の構文を取ります。
data:[<media-type>][;base64],<data>
<media-type>：データの型を示すMIMEタイプです。今回はtext/htmlを指定しています;base64：データがbase64デコードされるべきかを表します。今回は省略しています,：カンマが挟まることに注意してください<data>：データの中身です。今回は<body contenteditable>を指定しています。
改めて今回のURLを載せると下記の通り。
data:text/html, <body contenteditable>
今回は MIMEタイプに text/html を指定しているので、ブラウザはカンマ以降をHTMLドキュメントとして解釈して表示します。つまり、URLだけで1枚のWebページが成り立つということです。
contenteditable属性とは
contenteditable はHTMLの属性で、付与した要素をユーザーが直接編集できるようにするものです。
<p contenteditable>この段落は直接書き換えられます</p>
これを <body> に付けるとページ全体が編集可能になります。HTMLは <html> や <head> が省略されていてもブラウザが補完してくれるので、<body contenteditable> だけでひとつのページが成立します。
data: スキームと組み合わせることで「URLから直接開ける、ページ全体が編集できるHTML」になるというのが今回の仕組みです。
Webブラウザの「メモ帳」をちょっと便利にしてみる
わたしはURLをシンプルに保ちたいので、冒頭で記載した通りのURLをブックマークしています。ただ、それはそれで多少不便を感じる機会があるので、例えば下記のような工夫もできます。
タイトルと見た目を整える
<title> を入れるとタブ名を付けられます。あわせて文字を大きくして左右に余白を取ると読みやすくなります。
data:text/html;charset=utf-8,<title>メモ</title><body contenteditable style="font:20px/1.6 sans-serif;max-width:40em;margin:2em auto">
なお、<title> に日本語を使う場合は text/html の直後に ;charset=utf-8 を付けてください。付けないとタイトルが文字化けします。
赤い波線を消す
英語の単語を書くと、スペルチェックの赤い波線が付きます。spellcheck="false" を付けると消せます。
data:text/html;charset=utf-8,<title>メモ</title><body contenteditable spellcheck="false" style="font:20px/1.6 sans-serif;max-width:40em;margin:2em auto">
タブを閉じるときの確認を出す
この「メモ帳」に書いた内容は特に保存されませんし、タブを閉じたりリロードすると消えます。onbeforeunload="return 1"をつけることで確認ダイアログが挟まるようになります。
data:text/html;charset=utf-8,<title>メモ</title><body contenteditable spellcheck="false" onbeforeunload="return 1" style="font:20px/1.6 sans-serif;max-width:40em;margin:2em auto">
背景色を変える
ダークテーマにしたい場合などはbackground:%23111;color:%23eee"のように色を指定します。URLの中の # はフラグメントの開始と解釈されるため、 %23 に置き換えています。
data:text/html;charset=utf-8,<title>メモ</title><body contenteditable spellcheck="false" onbeforeunload="return 1" style="font:20px/1.6 sans-serif;max-width:40em;margin:2em auto;background:%23111;color:%23eee">
Webブラウザの「メモ帳」を使っていてちょっとだけ気にすること
今回構成されるHTMLページに他の箇所からコピーしてきた内容をペーストする場合、リッチテキストとして貼り付けられます。文字の背景色やフォント、サイズなど不要な装飾が入る場合があります。
見た目の崩れが気になる場合には、書式なしで貼り付ける（macOSなら Command + Shift + V、Windowsなら Ctrl + Shift + V）などで工夫しましょう。
毎回これを意識するのが面倒な場合はcontenteditable の値を plaintext-only にします。
data:text/html;charset=utf-8,<title>メモ</title><body contenteditable=plaintext-only spellcheck="false" style="font:20px/1.6 sans-serif;max-width:40em;margin:2em auto">
終わりに
簡単でしたが、Webブラウザをメモ帳のように使いたいという話でした。
わたしはお客様とのWebミーティングの時にWebブラウザでプロジェクト管理ツールや構成図を投影しながら会話することが多いです。その中でサッと開ける新規の「メモ帳」があると、「それぞれのネクストアクションこんな感じですね〜」などと一緒に見ながらまとめられるので便利です。
無くてすごく困るというものではないですが、あるといろんな場面で「地味に便利！」と感じます。
社内で連綿と語り注がれて来た小ネタですが、もっと広めたいと思い改めてブログにまとめてみました。
どなたかの参考になれば幸いです。
以上、チバユキ (@batchicchi)がお送りしました。
