Re:terature

アプリ概要

小説を書くためのエディターアプリ。自動保存かつ遅延なく小説を書けるシンプルなエディターを目指した。クラウドバックアップ機能とTXT形式にでのダウンロード、電子書籍形式ファイルの生成、自動校正ツール等の機能が使える。小説作成のためのアプリ。

開発の経緯・目的

自身が趣味で小説を書いていたが、Notionは書き続けていると重くなる。Wordなどは落ちてしまった時データが消えてしまうという体験を何度もした。VSCodeは高機能な小説エディターとしても利用できGitの管理もできたがプロ仕様で手軽さに欠けた。

なるべくシンプルに、誰でも気軽に、楽しんで小説を書ける小説のエディターが欲しかったため。

使用技術と選定理由

• 言語：TypeScript
• フレームワーク：React.js、Next.js
• スタイリング：ChakraUI
• 状態管理：Recoil
• DB：IndexedDB、Supabase

<aside> 💡 技術選定理由

開発スピードを重視したため自身の得意なNext.jsで開発。またNext.jsのSSG(静的サイトジェネレーター)は今回重視している軽快な動作にマッチするため。

スタイリングと状態管理も同様に使い慣れてきたChakraUIとRecoilを採用。

クラウドバックアップとしてSupabase、ローカルの自動保存として容量の観点からローカルストレージではなくIndexedDBを採用。

</aside>

工夫した点・苦労した点

• 工夫した点 短編小説を想定して作成したが、各原稿を章ごとに見立てて選択することで一つの電子書籍ファイルとして出力出来るようにした。大手の投稿サイトで使われているルビ記法でプレビュー時にルビの確認を出来るようにした。小説作成中に付箋のようなメモを使うことで視覚的に情報の整理をしやすくした。
• 短編小説を想定して作成したが、各原稿を章ごとに見立てて選択することで一つの電子書籍ファイルとして出力出来るようにした。
• 大手の投稿サイトで使われているルビ記法でプレビュー時にルビの確認を出来るようにした。
• 小説作成中に付箋のようなメモを使うことで視覚的に情報の整理をしやすくした。
• 苦労した点 IndexedDBへの保存は非同期処理のためRecoilでの永続化するのに利用していたライブラリでは対応できず、解決方法を見つけて実践するまでに時間を要した。一番の目的である軽快な動作について、textboxでは編集中カーソルが変なところに移動してしまうなど不安定なためLexicalというテキストエディタライブラリを導入したが、データ保持がJson形式のため、それまでのロジックとの整合性を持たせるのに苦労した。IndexedDB利用の弊害として、サーバーサイドのエンドポイントがVersel上で機能せず（未だ解決できない）そのため、EPUB出力のライブラリなどNodo.js用のものをクライアントサイドで動かさなければいけなかったり、Text‐Lintも別プロジェクトでエンドポイントを作らなけらばいけなくなり苦労した。
• IndexedDBへの保存は非同期処理のためRecoilでの永続化するのに利用していたライブラリでは対応できず、解決方法を見つけて実践するまでに時間を要した。
• 一番の目的である軽快な動作について、textboxでは編集中カーソルが変なところに移動してしまうなど不安定なためLexicalというテキストエディタライブラリを導入したが、データ保持がJson形式のため、それまでのロジックとの整合性を持たせるのに苦労した。
• IndexedDB利用の弊害として、サーバーサイドのエンドポイントがVersel上で機能せず（未だ解決できない）そのため、EPUB出力のライブラリなどNodo.js用のものをクライアントサイドで動かさなければいけなかったり、Text‐Lintも別プロジェクトでエンドポイントを作らなけらばいけなくなり苦労した。

備考

ありがたいことに、実際に公開したアプリを利用してくださっているユーザー様が何人かいらっしゃる。より使いやすいエディタを目指してアップデートしていきたい。