blog.textfile.org結城浩のブログ

blog.textfile.org

シンプルで "distraction free" なエディタを作りました

背景

  • MacBook Airを使っている。
  • 余計なものが何も表示されない、いわゆる “distraction free” なエディタというものが世の中にはいくつか存在する。
  • しかし、ASCIIと非ASCIIで別々にフォントを設定できるものは少ない(ようだ)。
  • “distraction free” なエディタでは、あまり複雑な編集はしないので、さくさく書き進められればいい。

問題

  • ASCIIにInconsolataを使い、非ASCIIにヒラギノ明朝を使える “distraction free” なエディタが欲しい。

解法

  • HTMLファイルでtextareaを一つ開き、CSSで好みのフォント指定をしてやればいい。
  • textareaで好きなだけ書き込みが終わったら、全選択→コピー→他のエディタにペーストする。
  • 途中でブラウザを閉じてもいいように、現在の入力テキストは絶えずローカルに保存する(localStorage)。

ダウンロード

http://github.com/hyuki0000/draft

README

1
2
3
4
5
6
7
8
9
10
11
12
13
14
NAME

  draft - A very simple "distraction free" editor.

HOW TO USE

  Open index.html with your browser.
  Then just one textarea appears.
  Input and edit your text in the textarea as you wish.

  The text is automatically & locally saved in your browser's localStorage.
  When you open index.html again later, the text will automatically restored.

  That's it!

スクリーンショット

Live Example

こちらで試しに使うことができます。入力したテキストはローカルに保存され、サーバには送信されません。

http://draft.textfile.org/