📝

vscodeのエディタ(Monaco Editor)でオンライン小説エディタサービスを作った話

2022/04/17に公開1

先日、日本語の小説執筆に特化したWebサービスの「まくらぎ」をリリースしました!

https://maxragi.com/

小さくない規模の開発だったので、得られた知見がそれなりにありました。
今後コミットログを漁りながら技術記事としてまとめていこうと思います。

なぜ小説エディタを作ったのか?

既存の小説エディタでは満足できなかったから、というのが一番の理由です。

小説を書いているときに解決したい問題がいくつかあります。

  • いつでも、どこでも執筆したい
  • ルビや強調記法のプレビューを行ったり来たりが面倒
  • 単語の意味とかを調べるのが面倒
  • 自動で校正してほしい

最近はオンラインに保存できるエディタが結構増えてきましたが、残りの問題を解決しきった小説エディタは(開発を始めたときには)ありませんでした(観測上は)。

試作を通して「これはいけるかも!」となったので、実際に着手して何とか半年くらいで完成させました(この記事も下書きはまくらぎを使っています)

何が出来るサービスなのか?


以下の機能を有しています。

  • テキストを編集できる
  • テキスト上にルビや強調を直に設定(いわゆる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からのアクセスには通常のフル機能エディタを表示しますが、モバイルでアクセスした場合は簡易エディタに切り替わるようにしています。

終わりに

何とか最初のバージョンをリリースすることが出来ましたが、まだまだ実装したい要素が無限に残っています。
この先はサービスの利用者の方々とも意見を交換したりして、より良い小説執筆の環境作りのためにアップデートを重ねていきたいです。

ここまでお読みいただきありがとうございました。
本記事で触れなかった技術ノウハウはまた別の記事として投稿する予定です。

終わりの終わりに

まくらぎはリリースしたばかりのサービスで、多くのフィードバックが必要な状態です。

  • ユーザーがどう運用しているか
  • 小説執筆以外の使い方をしている
  • こういう悩みがある

何でも構いませんので、様々な声が欲しいというのが現状の気持ちです。
もし良ければ、お読みくださった皆さん自身でサービスの手触りを確かめて頂けると嬉しいです。

https://maxragi.com/

Discussion

yasudeyasude

素晴らしいサービスをありがとうございます。
私自身はクリエイターというよりも普段自然言語処理に触れているエンジニアなので細かい部分ばかりになって恐縮なのですが、気が付いた部分について数点コメントをさせていただければと思います。

  • 「コメント化」という単語はDeveloper Friendlyな単語ではないでしょうか
    • ドキュメントには説明がありますが、なくても伝わるものを目指していると記載があるので、それならばトップページに1行「コメントとは○○です」のようなものを付けたすとよさそうかなと思いました
    • また、エディターを開いた最初のplaceholderに非常に簡潔な説明を書く(qiita, zennのようなイメージ)のも手かなと思いました
  • 誤字:「選択してF4を押すことで通常の文章に戻り明日」 -> 「ます」だと思います
  • 書いている文の形態素にホバーすると意味が出る機能ですが、これについては自分の書いた文で意味がわからない単語はあまりないような気がします
    • VSCodeだとその関数名だけだとわからず、わざわざ定義元を確認する手順が煩雑になりがちだからホバー時にdocstring等を表示させてくれる、みたいなイメージで、自然言語の単語とはドメインが異なるような印象を受けました
    • また一方で、この機能は他の人のテクニカルな文の勉強等に使えそうなのかなと思いました。
  • VSCodeの中で私が日本語を書く際に「こと」「という」をなるべく使わない(参照: https://note.com/ryopan/n/nc0e43404be55) ために、記事 https://note.com/ryryo/n/n0ca42c3901d0 にあるような設定をしています
    • 同じくmonaco-editorを使われているとのことでしたので、まだ確認されていなければですが、こういうものからいいところどりをするのもよいのかなと思いました

細かい点ばかりになってしまいましたが、是非使ってみたいサービスだなと思いました。
応援しています!