vscodeのエディタ(Monaco Editor)でオンライン小説エディタサービスを作った話
先日、日本語の小説執筆に特化したWebサービスの「まくらぎ」をリリースしました！
小さくない規模の開発だったので、得られた知見がそれなりにありました。
今後コミットログを漁りながら技術記事としてまとめていこうと思います。
なぜ小説エディタを作ったのか？
既存の小説エディタでは満足できなかったから、というのが一番の理由です。
小説を書いているときに解決したい問題がいくつかあります。
- いつでも、どこでも執筆したい
- ルビや強調記法のプレビューを行ったり来たりが面倒
- 単語の意味とかを調べるのが面倒
- 自動で校正してほしい
最近はオンラインに保存できるエディタが結構増えてきましたが、残りの問題を解決しきった小説エディタは(開発を始めたときには)ありませんでした(観測上は)。
試作を通して「これはいけるかも！」となったので、実際に着手して何とか半年くらいで完成させました（この記事も下書きはまくらぎを使っています）
何が出来るサービスなのか？
以下の機能を有しています。
- テキストを編集できる
- テキスト上にルビや強調を直に設定（いわゆるWYSIWYG）
- ログインしていなくても動く（LocalStorage）
- 形態素解析による文章解析ベースの校正
- Wiktionaryを引用してエディタ上に単語の意味を表示
- Twitterによるログイン
- ログイン時にサーバに編集データを自動保存
- 外部小説サービスのフォーマットでの書き出し（カクヨム、pixivなどに対応）
本当はもっと入れたい機能が無限にありますが、リリースしなきゃ話にならないので、ひとまずバージョン1.0.0として仕様を切っています。
技術スタック
使用したライブラリなどは以下の通りです。
| 要素 | 使ったサービス、ライブラリ |
|---|---|
| Hosting | Cloudflare Pages |
| Frontend | Next.js(TypeScript) |
| Backend | Firebase Firestore |
| 認証 | Firebase Authentication |
| エディタコア機能 | Monaco Editor(vscodeのエディタ実装) |
| サイトコンテンツ管理 | microCMS |
| テスト | jest(unit)、playwright(e2e) |
| CI | Github Actions |
| UIフレームワーク | Chakra UI |
| 形態素解析 | kuromoji.js |
他にも開発用にDenoやらDockerやら色々使っていますが、割愛します。
技術選定
ReactはTypeScriptとの親和性が良く、書き味の点で評価の高いフレームワークです。Vueという選択肢もありますが、フロントエンドをちゃんとやっている知り合いがいないので、細かい困りごとでもネットで解決できるReact一択でした。
なおWebアプリの側面もあるので、当然SPAを前提としています。
Firebase (Firestore)を使う決め手となったのは、バックエンドの開発コストを抑えるためです。それ以外の点でFirebaseを利用するうま味は最近ないので、手が空いているときにgoとかでサーバーを書こうかなと思っています。ISUCONもありますし、練習になるので。
まくらぎエディタ
まくらぎサービスを支えるコア機能でもある小説執筆エディタ部分は、Monaco EditorというVSCodeのエディタ実装部分を切り出したものを利用しています。
本来であればソースコードを書くためのモノなのですが……そもそもこのサービスを作り始めた当初から、小説にIntellisenseやQuick Fixの概念を持ち込みたいと考えていました。
なら「VSCodeをそのまま改造してしまえばいいじゃない」という結論に至り、何度も心が折れそうな感じになりながらも、まともに使えるレベルまで持って行けました。やったね。
フォントや内部のカーソル移動の改造、ホバー表示など、快適に小説が執筆できることを意識して調整しています。
VSCodeライクなショートカットが使えますが、特に致命的なものを無効化したうえで、非サポートとしています。
モバイル対応
今のご時世でモバイル対応をしないのはあり得ないで、最低限の体験を保証できるようにレスポンシブ対応を行っています。
まくらぎエディタはキーボードでの利用が前提となっている機能が多く、モバイル用のUIを増やして対応するのは、逆にUXが下がるのではないかと思いました。
というわけで、PCからのアクセスには通常のフル機能エディタを表示しますが、モバイルでアクセスした場合は簡易エディタに切り替わるようにしています。
終わりに
何とか最初のバージョンをリリースすることが出来ましたが、まだまだ実装したい要素が無限に残っています。
この先はサービスの利用者の方々とも意見を交換したりして、より良い小説執筆の環境作りのためにアップデートを重ねていきたいです。
ここまでお読みいただきありがとうございました。
本記事で触れなかった技術ノウハウはまた別の記事として投稿する予定です。
終わりの終わりに
まくらぎはリリースしたばかりのサービスで、多くのフィードバックが必要な状態です。
- ユーザーがどう運用しているか
- 小説執筆以外の使い方をしている
- こういう悩みがある
何でも構いませんので、様々な声が欲しいというのが現状の気持ちです。
もし良ければ、お読みくださった皆さん自身でサービスの手触りを確かめて頂けると嬉しいです。
Discussion
素晴らしいサービスをありがとうございます。
私自身はクリエイターというよりも普段自然言語処理に触れているエンジニアなので細かい部分ばかりになって恐縮なのですが、気が付いた部分について数点コメントをさせていただければと思います。
細かい点ばかりになってしまいましたが、是非使ってみたいサービスだなと思いました。
応援しています！