Markdownファイルで作るリアルな縦書き小説生成・プレビューWebサービスを開発した

アプリの概要

Markdownファイルをフォームにアップロードすることで小説を簡単にUI上に生成することができるサービスです。

機能

ファイルのアップロード

Markdownファイルのみファイルを選択・ドラッグアンドドロップを行えます。(2024/11/6現在)
その他のファイルを選択した場合、エラー文が表示されます。Markdownファイル内のYaml Headerには以下のような記述を行うことができます

---
title: "" // 小説のタイトル
author: "" // 著者名
summary: "" // あらすじ
price: 0 // 価格
edition: 0 // 更新回数
---
小説のコンテンツ

実際の画面

小説の表紙・裏表紙の編集

編集できるのは以下のつ

小説のタイトル
著者名
あらすじ
価格
JANコード
編集回数

実際の画面

小説の読書

▶️ボタンをクリックすると小説の生成が開始されて、終了後実際に読めるUIが表示されます。

以下の点ご了承ください

小説の生成に時間がかかる場合があります。生成しているときはボタンにローディングが表示されます
CSSでページをめくるアニメーションを実装しているせいか動作がかくつきます
サイドバーを開く、文字・背景色を変更すると小説のページがリセットされてしまうのであらかじめ設定したうえで小説を開くようにしてください。
- → この意図しない挙動も今後直していきます

実際の画面

背景色カラーの変更

カラーパレットで背景色を指定できます。右側のスライダーで透明度を指定できます。

文字の色の変更

カラーパレットで文字の色を指定できます。右側のスライダーで透明度を指定できます。

ダークモード

画面のテーマを変更できます。
ライトモード、ダークモード、システムの3つを指定できます。
ダークモードでは背景色の変更ができないので注意してください。
テーマの変更はボタンをクリックして表示されるテーマのうち一つを選択することで変更することが可能です

技術要素

pages routerを使用している理由はapp routerをまだ理解できていないのでまだ使うべきではないと思ったからです。
理解が深まったらapp routerにコードを置きかえようと思っています。
またコードをpages routerからapp routerに置きかえる楽しみ、その時に発見できる知見も増えるので良いかなとも思ってます

React・Next.js(pages router)
shadcn/ui
Tailwind CSS
React Hook Form
Vercel

その他にnext/font/googleでGoogleフォントを使用しています。
Geist Sansフォントをデフォルトとして、日本語にはNoto Sans JPフォントを使用しています

今後の展望

自分の考えている今後の展望としては以下の感じです。SNS系のアプリよりかはFigmaのようなツール系Webサービスを目指して開発していきたいと考えています。

対応するファイルの拡張子を増やす(json, txtなど)
ファイルをアップロードのみではなくフォームからでも執筆ができるようにする
執筆した小説をプレビューだけではなく公開できるようにする
生成AIを使用した小説の執筆サポート・アシスタントボット
小説のUIをより実際の読んでいるような洗練された美しいUIを作る
小説の表紙・裏表紙を画像編集できるようにしたい
選べるフォントを増やす
ユーザー機能
多言語
etc...

最後に

まだまだ改善すべき点はたくさんありますが、fumitsuduriの良かったこと、改善点、感想などをお教え頂ければ幸いです。よろしくお願いいたします。