Web小説サイトに必要なもの
通常はユーザーが投降したテキストをサーバー側で処理してサイトを公開するタイプのウェブ小説投稿サイトが有名である。ただし、ここではテキストをHTML変換してサイトを作ろうと思う。next.jsに移植すれば動的サイトに使えるかも。
Astroで静的サイトでのWeb小説サイトを作るには
Astroを使ってWeb小説サイトをつくる。特徴としては次のようになる。
- なろうバックアップデータを使う
- TXTファイルでルビや傍点やその他青空文庫注記が使える
- Web小説の連載形式で表示
- TXTファイルを追加するだけでサイト全体を更新
- github pagesやnetlifyに無料で公開できる
- html出力なので国内の静的ホスティングサイトが使える
- rssやsitemapやGoogle アナリティクスに対応
- 縦書き横書き、文字の拡大縮小、白黒セピアに対応
AozoraJavaScriptParserで青空文庫をHTML変換して表示する。AozoraJavaScriptParserをHTMLレンダーとして利用する。そのままだと利用しづらかったので少し改造した。なので青空文庫の注記はだいたいが使える。ただし、青空文庫注記を入れ子構造にするとバグりそうな気がする。
なろうのバックアップデータを見ると公開日や改稿日のデータがないのでクロールしないと取得できない。カクヨムのバックアップデータを見ると日付データはあった。
星の竜宮
急急如律令
［＃区切り線］
［＃ここから２字下げ］
［＃ここから２字上げ］
現代風の浦島太郎
［＃ここで字上げ終わり］
［＃ここで字下げ終わり］
［＃区切り線］
［＃改ページ］
［＃中見出し］第一 海辺のノマドワーカー［＃中見出し終わり］
［＃ここから地から１字上げ］
［＃ここから１段階小さな文字］
2025/11/01 00:14 公開
［＃ここで小さな文字終わり］
［＃ここで字上げ終わり］
浦島 太郎（うらしま たろう）、28歳。
astro向けに書誌情報を渡して、目次ページを作る。descriptionは改行も可能にしたい。OGP向けのデータとしても利用する。
novel.json
{
"title": "星の竜宮",
"author": "急急如律令",
"description": "現代風の浦島太郎",
"status": "serialization"
}
本文からフロントマッターに章や節を抽出して、本文には公開日は必要ないかも。
---
chapter:
title: 第一 海辺のノマドワーカー
published: 2025/11/01 00:14
updated:
---
［＃ここから地から１字上げ］
［＃ここから１段階小さな文字］
2025/11/01 00:14 公開
［＃ここで小さな文字終わり］
［＃ここで字上げ終わり］
浦島 太郎（うらしま たろう）、28歳。
完成イメージ
使い方
node.jsはv22が推奨。リポジトリをクローンして、
powershellからnpm installで必要なnpmパッケージをインストールする。
npm devをしてローカルホストに[http://localhost:4321/web-novel]にアクセスするとサイトが表示される。
サンプルコンテンツは
- 一括表示形式
src/content/novels/wagahai.txt
- ウェブ連載形式
src/content/novels/urashima/novel.json
htmlの出力はnpm buildでdistフォルダーにhtmlが作成されるのでアップロードする。
deployだとgithub pagesやcloudflare何かと連携する必要がある。