ウラガミ

いわゆるチラ裏

書くことに集中するためのエディタ「calm editor」を作った

文章 アプリ calm editor

「calm editor」という文章を書くためだけのエディタを作った。
＊基本自分仕様。

calm editor
これ。

結城浩さんのDraft - A Distraction Free Editor にインスパイアされて作ったけど「っぽさ」はあんまり残らなかった。

機能

主な機能をざっと挙げてみる。

  • 文字数カウント
  • 削除ボタン
  • BGMへのリンク（coffitivity）
    • ほんとはnoisliが良かったんだけど、iOSとの兼ね合いでこっちに
    • iOSではアプリかAppStoreが立ち上がる
    • あとで変えると思う
  • textareaにフォーカスしてる時他の要素を消す
    • 書きつつ見たい時もあるから半透明にした
  • localstrageで保存
    • タブやブラウザ自体を閉じても残る

ちなみにiOS用の機能もある。

  • 「ホーム画面に追加」でウェブアプリ化
    • アプリ化するとSafariとは別データになるので注意
  • Textwellへ転記可能
    • ソース弄れば他のエディタでも可
  • スワイプカーソル
    • 早すぎて若干ウザいかも

ダメなとこ

  • スマホだと若干遅い。タイプするごとにスクリプトが動くからだと思うけど、そこはまぁトレードオフかと
  • インデントやらプレビューやらも試してみたんだけど、自分で入れてるChrome拡張（esarea）とバッティングしたり面倒だったりでやめた

ねらい

  • 自分仕様のエディタが欲しかった
    • 環境音あった方が集中できるのに大抵忘れる
    • リアルタイムで文字数カウントできるアプリが案外少ない
    • フォントのサイズや種類を好きなものにしたい
  • 書くことに集中するためのエディタ
    • 無駄に要素を増やさない
    • フォーカスしてる時他の要素見えにくくする
    • 置換など編集は他のサービスに任せる
      • ウェブアプリだからBookmarkletでできるけど
    • フルスクリーン推奨
  • javascriptの勉強も兼ねて

雑感

最初はハサミスクリプトでexportされるウィンドウのスタイルを弄ってたんだけど気づいたらこんなことになってしまったｗ

連携するアプリはTextwellじゃなくて複数文書の管理ができるものの方がいいんだけど、「これだ」ってのが無いのでハブであるTextwellにしてる。ベターなのはSimplenoteか？

「書くことにフォーカスしやすい + 目に優しい」デザインを目指した。色とかフォントサイズとか。でも良く分からん。ちゃんと理屈あるとこもあるんだけど、何となくでやってる部分が多い。

  • HTMLはノリ。
  • CSSはtextareaの高さの制御が難しかった。今も悩み中。
  • javascriptは結局ほぼコピペ。動けばいい的発想。良くない。

ぶっちゃけ機能的には「素直にTextwell使えよ」って感じだけど、デザインを細かく弄れるのは自作ならではだし、勉強になるし、なにより楽しいし（時間の消費に対する自己正当化）

今後もじわじわアップデートしていく予定。

使ったサービスや参考記事