鈴木颯介のブログ

技術的なメモとかポエムとか。

また Markdown エディタつくっちゃった

これは jsys advent calendar 2019 の 12 日目の記事です。

jsys とは?

僕の記事は jsys とは全く関係ないんですが、一応概要を書いておきましょう。jsys は筑波大学の学園祭実行委員会の情報メディアシステム局の略称です。ようは筑波大学の学園祭の情報っぽいことをやる人たちです。僕もそこに所属していて、Nuxt でウェブサイト作るお手伝いしたり React でよしなにメールを送るシステムのフロントエンドを開発したりしています。

作った、Pooh

jsys 全く関係ないのですが、Pooh という Markdown 編集環境を作りました。

多分初期レンダリングが死ぬほど重いです。あと CSS を書くのが好きじゃない上に自分しか使わない予定なので、最低限しかスタイルをあてていません。ちなみに名前がPoohなのは作り始めたときにくまのプーさんのぬいぐるみが近くにあったからです。

TypeScript と React でできています。まあ無難な構成だと思います。一個面白いことがあるとすれば、IndexedDB へのアクセス・Prettier での Markdown フォーマット・Markdown => HTML の変換を Web Worker 上でやってるくらい。

僕は昔から React が好きなんですが、ここ 1 年くらいお仕事では Vue を書いてるので、久々にガッツリ React を書いてたのしいなぁと思いました。

あんまり保存することに興味がない

僕は普段メモをとったりメールの下書きをしたりタスクを整理したりするのにプレーンな Markdown テキストを使います。それっぽいリッチなソフトウェアでうまくできないかと色々試してはみたのですが、どれもしっくりこなくて結局 Markdown に色々書き連ねています。

そんな感じで色々と Markdown を使って書いているわけですが、僕はあんまり Markdown の保存に興味がありません。書いて、15 分後にはそれを破棄するような使い方をしています。書いてる途中にぱっと新しいものが書きたくなることがあるので、一応保存は必要なんですが、長期的な保存は全くもとめていません。

そういう書き捨てることのみを考えた Markdown エディタって需要がないからか、世の中にあんまりないんですよね。

なので、これまでそんな感じのツールを何度か自分で作ってきました。

これまで触った(作った) Markdown エディタ

Boostnote

これは僕が作者というわけではないですが、高校生のとき割とずっとメンテナーをしていました。

Boostnote をひたすら触っているうちに、自分が求めている Markdown 編集環境は「デスクトップで動くものじゃなくて、ぱっとひらけるやつだ」ということに気が付きました。

Rapunzel

これは高校 3 年生のいつだっけ、秋ごろ?前職をやめるちょっと前くらいに書いたやつです。

  • https://github.com/sosukesuzuki/rapunzel-editor
    • 作り始めたときに一緒にいた人に「適当な単語言って」って言ったら「ラプンツェル」って言われたのが名前の由来です。
  • これは「デスクトップで動くものじゃなくて、ぱっとひらけるやつ」をもとめて作りました。
  • ウェブブラウザ上で動作するのでぱっとひらけるし、デスクトップ PWA なので 2 回目以降は高速に表示されます。

Boostnote は多階層のフォルダが作れなくて、それに不便をかんじていたので、BrowserFSを使ってリッチなファイルシステムもどきを実現したんですが、使ってみて思ったのは、「僕はそんなリッチなものは求めていない」ということでした。

Frozen

これは高校 3 年生の終わり頃に作ったやつです。

これはそれなりにできて、結構ちゃんと使っていました。でも長い記事とかを書いたりするとレンダリングが非常に遅かったり、ちょっと凝った実装をしちゃったりしたせいでメンテが大変になってしまいました。

しばらくつかうぞ

今回のやつはクォリティひくく見えるかもしれませんが、僕の要求に最適化されるように結構考えて作っているので、個人的にはあんまり不満はありません。しばらく使ってみて、気づいた点を徐々になおしていこうと思ってます。

  • デスクトップ PWA 化
  • IndexedDB に書き込むタイミングの最適化
  • フォーマットとSideNavのボタンにショートカット割り当てる
  • とかとか