MANGA READER 自炊漫画リーダー
- PHP
- MySQL
- XAMPP / Apache
- PDO
- JavaScript (SPA)
- PDF.js
- bcrypt Auth
- Figma
OVERVIEW
プロジェクト概要
課題
自分で電子化した漫画（PDF・画像フォルダ）を、ブラウザから快適に読みたい。 さらに、200作品超のライブラリを出版社・作者・ジャンルで整理し、 読書進捗まで自動保存できる自家用ビューアが欲しかった。
目的
XAMPP (Apache + PHP + MySQL) 上に、認証・ライブラリ走査・PDFレンダリング・ 読書進捗保存までを一人で構築。ライブラリ走査を 13秒 → 9ms（約1374倍） に 最適化するなど、実用速度に踏み込んだ運用を目標にした。
PROCESS
制作プロセス
-
PLAN
自炊ファイルの構成（PDF / 画像フォルダ混在）を整理し、必要機能を洗い出し。
-
BUILD
XAMPP 上に PHP + MySQL でアプリを構築。PDO で SQL インジェクションを防止。
-
READER
PDF.js で見開き／単一ページ／白紙挿入／左綴じ・右綴じを実装。
-
OPTIMIZE
ライブラリ走査・巻一覧・セッションロックを最適化し、体感速度を一桁向上。
-
OPERATE
読書進捗を自動保存、メタデータ編集 UI、出版社フィルタなど運用機能を継続追加。
GALLERY
成果物ギャラリー
RETROSPECTIVE
振り返り・工夫した点
UX-DRIVEN LAYOUT
UI/UX を意識して、ボタンを限りなく削ぎ落とした。 作品選択画面は一度に多く並べすぎると選びにくかったので 6列 に固定。 巻数選択画面は「何巻かを選ぶだけ」の単機能なので、画面いっぱいに表示して 迷わず即決できる密度にした。
1374× FASTER LIBRARY SCAN
ライブラリ走査の is_file() を撤去し、拡張子だけで判定するように変更。
13秒 → 9ms（約1374倍）まで短縮し、開いた瞬間に一覧が出る体感に。
RESUME WHERE YOU LEFT OFF
ページ移動・モード切替・白紙挿入を 1.5秒デバウンスで自動保存。
タブを閉じる時は navigator.sendBeacon で確実に書き込み、
次回起動時にページ位置・綴じ方向・表示モードまで完全復元される。
SECURITY FIRST
bcrypt によるパスワードハッシュ、PDO プリペアドステートメントでの SQLi 対策、
ログイン必須化により /api/image.php を直接叩いても 401 を返す設計に。
ONE PERSON, FULL STACK
インフラ (XAMPP / Apache Alias) ・ DB スキーマ・ API・SPA フロント・運用までを一人で回し、 各レイヤーのトレードオフを実感を持って理解できた。
LIVE
公開デモ（ゲスト閲覧）
下記URLからゲストとして実際に触れます。ログイン不要で、 「試し読み」作品（青空文庫の名作）を閲覧・ページめくりできます。 自炊した蔵書・編集機能は安全のため非公開です。