Browser Note
データURIスキームを使ってブラウザ上で簡易的なメモ帳を作成する。
もっとも簡単な方法としては、data:text/html, <html contenteditable>の一文だけで済むんだけど、これでは味気ないのでゴテゴテと書いてみた。
使い方
Browser Note
このリンクを開くとブラウザ上に作られたメモ帳が開く。
具体的な応用方法として、このURIをブックマークに登録しておくとボタン一発でメモ帳が起動するわけである。
問題点としてはCookieなどを利用しないので、閉じると文書が失われる点くらいだろうか。
一応Ctrl+Sで "ページの保存" を行えば保存は可能だが、保存機能を求めるなら素直にメモ帳を開くべき。
ブラウザ側の設定で "ブックマークは常に新しいタブで開く" ようにしておくと、ブックマークから選択する度に新しい簡易メモ帳が開く。
必要なくなったらタブを閉じればいい。
自分好みにフォントの指定をしているが、フォントがインストールされていない場合は該当箇所を削れば多少コードが短くなる。
- Title – Ubuntu Titling Rg
- Textarea – Ricty Discord ※WindowsXPで生成した際に参考にしたサイト
data:text/html,%20<html%20style="background:rgb(12,12,12);color:rgb(210,210,210);text-align:center;"%20/><title>BrowserNote</title><h1%20style="font-size:120%;font-family:'Ubuntu%20Titling%20Rg';font-weight:bold;margin-top:5%;">Browser%20Note</h1><textarea%20style="background:rgb(20,20,20);color:rgb(210,210,210);line-height:1.5;width:80em;height:35em;border:none;outline:none;font-family:'Ricty%20Discord';margin:0%20auto%200;"%20autofocus%20/>
モダンブラウザで利用する場合、途中で改行すると以降の行は無視されるので注意されたし。
基本構造
HTMLでは必須の<body>がない点に注意。色々試した結果、どうやら要らないらしい。
- data:text/html
- Data URI schemeでHTMLを使いますよーという宣言
- <html style="hogehoge">
- HTMLでの<html>と同様。ただし閉じタグは不要
- 以降、頻繁に出てくる%20はスペースを示す。実際にスペースを打ち込むと以降の文字列が無効化される
- ページ全体に効かせるCSSはここに記述する
- <title>hogehoge</title>
- HTMLにおける<title>と同様。ブラウザのタイトルバーに表示される文字列を示す
- <h1>
- 題字。無きゃ無いでいい
- <textarea>
- メモ帳の心臓部
- 横幅はフォントサイズ可変で80文字程度とした ≒ 80em
- autofocus の一文を加えると、開くと同時にテキストエリアに即入力可能となる
ブックマークツールーバーに置くと使いやすくて素敵。