HTML5のContentEditableでちょいリッチなテキストエディタを作った

テキストエディタを作った

HTML5には、Contenteditableという属性があります。

これは、divやbodyなどの要素に以下のように適用すると

<div contenteditable='true'>ここは自由に書ける</div>

この中身が通常のテキストエディタのようにクリックするとカーソルが出てきて中身を自由に変えられます。

Google Chromeなどのふつーの有名ブラウザなら、contenteditable内はctrl+Bで太字にしたり、ctrl+Uなどで下線を付けたりして文字を装飾することが可能です。

これをうまいこと使って自分好みのテキストエディタを作りたいなぁと思い、ちょっと前にemakinoteという名前のcontenteditableを使用したテキストエディタを作りました。

https://ry0um4.sakura.ne.jp/App/emakinote/index.html

推しポイントとしては
・書くまでの時間が短い
・終了に時間がかからない
・雑に書ける
・セクションを高速で作れる
・シンプル
という感じです。

書くまでの時間が短い

Atomなんかは書きかけで閉じて再起動しても残ってたりするんですが、プラグインとか入れてるとどうしても起動に時間がかかる。思考は速さが大事だからこれだと調子が下がるんですよ。

終了に時間がかからない

このツールが想定しているのは、競プロや授業中、あるいは考え事をしている時などに、頭だけではうまく整理できない事をこのエディタに書いておき思考を捉え直す、といった利用法です。

そのため、このエディタには保存機能が備わっていません。以前は付けて見たこともありましたがデバイス間での共有が難しいしそこまで使わなかったのであえて外しています。

考え事のためにしたメモとかって、フツーのエディタだと閉じる時にいちいち保存するか否か聞いてくるんですよね。メモ帳は保存する時にいちいち「保存しますか？」と聞いてきてうざったいと思っていた悩みが解消されました。

もし保存したい時はGoogleドライブやOffice 365などのクラウドでドキュメントやWordにコピペすればいいです。

雑に書ける

contenteditable様様なんですが、普通に　Undo・Redo機能がついてるので安直に消したり書いたりできるのが嬉しいです。
また、雑に他サイトからコピペすると、スタイルなどがそのままコピペされるので見栄え的に遜色なくかけたりします。画像でスクショしてから書くよりも手間が少ないし、「紙のテキストに書き込んだ感」があって良くないですか？(ちなみに画像のコピペもできる)
この辺は本当にcontenteditableの許容の広さですよね。

セクションを高速で作れる

他では見ない機能として、ctrl+Enterで新しい区分け(横線と見出し代わりに作成した日付を表示する)を追加できるようにしていて、いちいち別のテキストエディタを起動してとっさに別の事を書いたりするときの手間を減らす事ができています。
セクションを追加するときにカーソルを自動で新セクションの部分に移すようにしたのですが、これの実装がなかなか曲者でした……。

シンプル

・ショートカットではなくマウスを使う人向けに、全消去、新区分けと言ったボタンをヘッダーに付けていたりと割と親切のつもりでデザインしていますが、それいがいに何か特別な機能を付けたりはしていません。
・競プロ用に等幅フォントのNoto Sans Mono Japaneseを使用しています。これは僕のHP全体に適用しています。
・灰色の地にかなり濃い灰色で書いているのでコントラスト差が少なく長時間書いても疲れにくいはず。
contenteditableでない所は背景が黒くなっているので、どのくらいの分量のものかも一目で分かったりしてサイコーです。
というわけでかなりシンプルです。

新バージョン

そんな感じで長い事自分でつかっていました。そのうちに勉強がてらPWA
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
にも対応させたりしました。(と言ってもほぼ検索して出てきたサイトのコピペですが……)

で、今回この記事を書いているのは、一つ機能を追加したものを作ったからです。
emakinoteには、色々あるけれど、これだけはどうしても譲れない不満が一つありました。
「思ったよりも装飾のショートカットを押すのがめんどくさい」って事です。
　同時押しとかかったるくてやってられないし、何より一部だけ太字にしたりするにはその前にShiftと矢印キーで選択しなくちゃならない。色変えたり字を大きくしたりするにはショートカットだけだとちょっと足りない。
　やりようはあるんですよ一応。他のサイトから好みのスタイルの字をコピペすると、その装飾で打てるようになったりします。面倒なんですけどね。

これを解決したのがこちらのemakidashtxtになります。
https://ry0um4.sakura.ne.jp/App/emakidashtxt/index.html

どう解決したかというと、個人的に欲しいと思った装飾をいくつかピックアップして、「ボタン一つで」スタイルを切り替えられるようにしました。
使うのはaltキーです。（まあ特殊文字なんてそんな使わんでしょ）
ヘッダーにスタイルボタンを追加して、今の文字装飾スタイルと、押すと次のスタイルに切り替えられる
ようにしてあります。
ポイントとしては、一定時間(これを書いてる時点では6秒程度)打ち込まずにいると、勝手に標準スタイルに装飾を戻してくれるという所です。
細かいポイントですが、altキーでそれを行なった場合は勝手に戻ってくれるのですが、ボタンをクリックして切り替えた場合は時間が経ってもスタイルは戻らないようにしてあります。こうする事でいちいちボタンを押すためにマウスやトラックパッドを押さずにすみますし、強調が終わったなら打ち込まずに待つか一巡するまで連打してやればいい、というシンプルな操作になります。
僕の思考の癖なんですが、勢いよく考えを書いた後、しばらく眺めてまた書く、というふうな繰り返しで行われるので、もし強調がついたまま続くと主張のイメージと装飾の強調度がうまいこと一致せず、もやっとしてしまいます。それを避けているんですね。
ね、便利でしょ？
いちいちショートカットなんて調べてられないと思ったのでこうしています。

思いの外実装は楽で、なんとWebAPIにはexecCommandというものがあるんですねぇ。これが本当に痒い所に手が届く機能で助かりました。
Document.execCommand() - Web API | MDN

実装もボタン用素材と数十行の追加ですみました。何より作るのに時間があまりかからなかったのが良いですね。よかった……
他の点はemakinoteと同様だったりします。

欲しい機能

・一行に書く分量が短い割に、画面いっぱいに広げていると、どうしても右側に何も書いていない空白のスペースが出来てしまいます。情報を一覧したい場合に不便なのでなんとかしたい。(分割表示的な？)
・音楽とかやってるので音を出せるようにしたりしたい。コード名を書いたらそのように音を鳴らせたりすると面白そう(これは別の形でやる可能性がある)
・execCommandをもっと活用したい。調べてみたら色々な機能があって、まだまだ活かせそうな事がある予感です。
・markdownとかTeXの数式機能とかを、入力した後すぐに反映されるように実装できたらかなり楽が出来るのでやってみたい。

ぜひ使ってみてください。