Screenshots
Overview
概要
青空文庫の著作権切れの名作を、writing-mode: vertical-rlによる本物の縦書きとルビ組版で読む、読書体験の実験サイトです。走れメロス・羅生門・蜘蛛の糸・注文の多い料理店・山月記・こころの初期6作品を静的に同梱し、外部APIやCDNに依存せずオフラインでも高速に開きます。最大の見どころは青空文庫の注記記法を自前実装したパーサで、ルビ・傍点・字下げ・外字・縦中横・くの字点などを解釈してASTへ変換し、CSSで正しく組版します。
How to use
遊び方・使い方
本棚から作品を選ぶと縦書きのリーダーが開きます。左右スワイプ・矢印キー・画面端タップでページを送り、縦/横表示の切替や文字サイズ・配色などの設定パネルを利用可能。読んだ位置は自動でしおりされ、複数の手動しおりや読了進捗%、読了バッジにも対応します。長編『こころ』では目次から章へ飛べます。横書き表示にすると通常のスクロールで読めます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19CSS 縦書き組版Tailwind CSS v4
実行時の追加依存はなく(Shift_JISデコードはビルド時)、状態はuseReducer、ユーザーデータはlocalStorageに保存。『こころ』でもページ計算を1秒以内・めくりを60fpsに保つよう、requestIdleCallbackで計算を分割しています。
Highlights
工夫した点
- 青空文庫の注記記法を2パス方式で解析(パス1で段落・見出し・字下げ・改ページのブロック構造、パス2でルビ《》・傍点・外字・縦中横などの行内注記)し、JSONのASTとして出力。未知の注記は警告ログを残して原文から除去
- ページ送りはCSS multicolumnを第一候補にtranslateXでめくり、非対応時は不可視要素での二分探索による文字数実測分割へフォールバック
- 傍点はtext-emphasis、縦中横はtext-combine-upright、外字は面区点→Unicode変換で表現。作品はビルド時にShift_JISからデコードしてJSON化し同梱
To improve
改善したい点
- multicolumnの縦書き挙動やtext-emphasis等はブラウザ差があり、フォールバック経路の作り込みに伸びしろがある
- 外字(面区点)の網羅性に限界があり、一部の特殊文字は表示できない場合がある
- 収録作品数が初期6作品にとどまる
What's next
今後の展望
- 収録作品の拡充と、作者・ジャンル別の本棚
- 文字送りの自動読み上げ(TTS)連携
- 青空文庫の全文検索や、しおりのエクスポート