**日本語** | [English](README.en.md)
# NagiManga（漫画ビューアー）
[](#デモ)
[](README-LOG.md)
[](https://github.com/Lichiphen/NagiSwipe/releases/latest)
[](https://github.com/Lichiphen/NagiSwipe)
[](https://gitlab.com/lichiphen/nagiswipe)
[](https://nagiswipe.pages.dev/nagimanga.html)
[](#2-つの使い方)
[](../LICENSE)
NagiSeries（[NagiSwipe](../README.md#nagiswipe)・NagiManga・[NagiLog](README-LOG.md)）の漫画ビューアーです。
ブログやサイトに **タグを 1 つ貼るだけ** で、クリックしたときに漫画ビューアーが開きます。作品の管理は、データベースのいらない小さな管理画面（PHP）で行います。
v0.4.0 から、文章・画像・漫画を投稿できる個人用LOG「NagiLog」を同梱しています。
スマホの投稿画面、太字、画像の差し替え、漫画カード、分類、6種類のデザイン、日時から作るURLに対応します。v0.6.0 からは、動画と音声も投稿できます。
使い方、メリット・デメリット、設置と検証結果は [NagiLog の README](README-LOG.md) にまとめています。
[](https://lichiphen.com/tool/link/r/NagiManga)
[](https://nagiswipe.pages.dev/nagimanga.html)
## 目次
- [デモ](#デモ)
- [できること](#できること)
- [2 つの使い方](#2-つの使い方)
- [管理画面（PHP）を使う](#管理画面phpを使う)
- [1. 設置](#1-設置)
- [2. セットアップ](#2-セットアップ)
- [3. 設置したら確認すること](#3-設置したら確認すること)
- [4. 作品を作って共有する](#4-作品を作って共有する)
- [てがろぐに載せる](#てがろぐに載せる)
- [機能の説明](#機能の説明)
- [EPUB から作る](#epub-から作る)
- [小容量版（スマホ用）](#小容量版スマホ用)
- [パスワード（限定公開）](#パスワード限定公開)
- [バックアップ](#バックアップ)
- [更新（v0.2.0 以降）](#更新v020-以降)
- [管理画面の言語](#管理画面の言語)
- [設置用コード](#設置用コード)
- [個別ページ（共有リンク・v0.3.0 以降）](#個別ページ共有リンクv030-以降)
- [直リンク防止（上級者向け・v0.3.0 以降）](#直リンク防止上級者向けv030-以降)
- [アクセス解析（v0.13.0 以降）](#アクセス解析v0130-以降)
- [プラグイン（ゲストモード）](#プラグインゲストモード)
- [二段階認証（v0.9.1 以降・任意）](#二段階認証v091-以降任意)
- [パスキー（v0.10.0 以降・任意）](#パスキーv0100-以降任意)
- [困ったとき](#困ったとき)
- [data フォルダを守る](#data-フォルダを守る)
- [管理画面の IP 制限をさらに固くする（任意）](#管理画面の-ip-制限をさらに固くする任意)
- [PHP なし（FTP だけ）で使う](#php-なしftp-だけで使う)
- [セキュリティの考え方](#セキュリティの考え方)
- [攻撃テスト](#攻撃テスト)
- [開発](#開発)
- [ライセンス](#ライセンス)
## デモ
**https://notebook.lichiphen.com/nagimanga/demo.html**
- いろいろな読み方（右から左・見開き／左から右／縦読みのページ漫画・ウェブトゥーン）を試せます
- パスワード付きの見本（パスワードは `demo`）、CLIP STUDIO PAINT の EPUB から取り込んだ作品もあります
- 「ゲストとして管理画面を見る」から、作者が使う管理画面を閲覧のみで見られます（変更はできません）
**NagiLog のデモ: https://notebook.lichiphen.com/nagimanga/**
- 作者が実際に使っているLOGです。投稿、スマホのメニュー、メールのダイアログ、404（ブラックホールの中）を見られます
- 画面のスクリーンショットと説明は [NagiLog の README](README-LOG.md#画面) にあります
**使うかどうか迷っている方、長く使い続けたい方へ:** メリット・デメリット、使っている技術、データの取り出し方を [docs/overview.md](docs/overview.md) にまとめています（開発者でない方向け）。
## できること
**読む人（ビューアー）**
- 右から左（漫画）／左から右／縦読み（1 ページずつ画面に収める「ページ漫画」と、横幅いっぱいの「ウェブトゥーン」）
- 横長の画面では見開き表示（表紙だけ単独にする／しない）。横長の 1 枚絵は自動で単独ページ
- ページ送り: スワイプ、画面の端のタップ、下のバーの ◀ ▶ ボタン、キーボード、マウスホイール（縦読みはマウスでつかんでスクロールもできます）
- 拡大: ピンチ、ダブルタップ、パソコンでは上のバーの「− 100% ＋」ボタン、`+` `-` `0` キー、Ctrl＋ホイール（マウスを画面の上端か下端に近づけるとバーが出ます）
- しおり（次に開いたときは続きから）、ブラウザの「戻る」で閉じる
- スマホでは小さい画像（小容量版）、パソコンや拡大したときは大きい画像（通常版）を自動で読み分け
**作る人（管理画面）**
- 画像のドラッグ＆ドロップ、並べ替え、共有タグの発行（URL は設置したドメインから自動で作られます）
- CLIP STUDIO PAINT などの **漫画 EPUB からそのまま作品を作る**
- パスワード付きの限定公開（読む人はクリックしたときにパスワードを入力）
- バックアップと復元（ZIP 1 つ）
- ゲスト（閲覧のみ）で管理画面を見せるプラグイン（デモ向け）
データベースも外部のライブラリも使っていません（PHP と JavaScript の標準機能だけ）。
## 2 つの使い方
| | 管理画面（PHP）を使う | PHP なし（FTP だけ） |
|---|---|---|
| 向いている人 | 作品を管理画面で扱いたい人（FTP を使うのは最初の設置だけ） | フォルダと URL が分かる人 |
| 画像の追加 | 管理画面でドラッグ＆ドロップ、または EPUB から | FTP で置く |
| パスワード付き公開 | できる | できない（画像の URL を知っていれば誰でも見られます） |
| 必要なもの | PHP 8.1 以上（GD・fileinfo・mbstring・ZipArchive）、`.htaccess` が効くサーバー（Apache 系）推奨 | 静的なファイルを置けるサーバーなら何でも |
---
## 管理画面（PHP）を使う
### 1. 設置
下の **ダウンロード** ボタンから、最新版の ZIP（`nagimanga-vX.Y.Z.zip`）をダウンロードします。ZIP を展開した中身（または、このリポジトリの `manga/server` フォルダの中身）を、サーバーの好きな場所に `nagimanga` などの名前でアップロードします。
[](https://lichiphen.com/tool/link/r/NagiManga)
```
nagimanga/
├── read.php 読者向けの窓口（読み取り専用）
├── index.php NagiLog の公開入口（URLにファイル名は不要）
├── log.php LOG本体・以前のURLから新URLへの転送
├── .htaccess
├── admin/ 管理画面
├── viewer/ ビューアー（NagiManga.js / NagiManga.css）
├── plugins/ プラグインを置く場所（最初は空）
├── lib/ プログラム本体（外からは見えません）
└── data/ 作品の画像と設定（外からは見えません）
```
- `data` フォルダは書き込みできるようにしてください（多くのサーバーでは 755 のままで大丈夫です）。
> [!WARNING]
> **`.htaccess` を忘れずに送ってください。** FTP ソフトによっては、`.` で始まるファイルが隠れていて送られないことがあります（「隠しファイルを表示」をオンにすると見えます）。`nagimanga/`・`admin/`・`lib/`・`data/`・`plugins/` の 5 か所にあります。
### 2. セットアップ
1. ブラウザで `https://あなたのサイト/nagimanga/admin/` を開きます。セットアップの画面が出ます。**このとき初めて、サーバーが `data/setup-key.php`（セットアップの鍵）を作ります。** アップロードしただけでは、まだありません。
2. FTP（またはサーバーのファイルマネージャー）で `data/setup-key.php` を開きます。FTP ソフトに出てこないときは、一覧を更新（再読み込み）してください。開き方は、セットアップ画面の「セットアップの鍵の見つけ方」にも書いてあります。
3. 書いてある「セットアップの鍵」（`ABCDE-FGHJK-LMNPQ-RSTUV` のような 20 文字）を、画面の欄に貼り付けます。小文字や空白が混ざってもかまいません。
ファイルを開くと、このように書いてあります。3 行目の `XXXXX-XXXXX-XXXXX-XXXXX` の形の行が鍵です（鍵はサイトごとに違います）。
4. 管理者パスワード（10 文字以上）を決めます。自動では作られないので、自分で決めてください。
5. 「おもに使うもの」を、大きなボタンで **NagiLog**（日記・ブログ・写真）か **NagiManga**（漫画）から選びます。ログインしたときに最初に開く画面です。どちらを選んでも両方使えて、ログイン画面でいつでも切り替えられます。
- 「今の IP アドレスからだけ管理画面を開けるようにする」は、できるだけオンにしてください。
> [!IMPORTANT]
> 鍵は設置した人だけが FTP で読めます（Web からは読めません）。アップロード直後のサイトを他人やボットが先に開いても、鍵を知らなければセットアップできません。設定が終わると `data/setup-key.php` は自動で消えます。v0.11 までの「30 分以内」の制限はなくなりました。
> [!IMPORTANT]
> 完了すると **ログイン用の URL** が表示されます。**必ずブックマークしてください。** 管理画面を直接開こうとすると「Not Found」になります。v0.10.0 からは、セットアップで「秘密のログイン URL からだけログインできるようにする」が最初からオンです。このとき `admin/login.php` と、URL の `k=` を削って開いたページは「Not Found」になり、LOGに「ログイン」のリンクも出ません。設定 → 「共通・安全」 → 「ログインの入口」で、LOGの「ログイン」（`admin/login.php`）からも入れるように戻せます（v0.9 までに設置したものは、こちらのままです）。IP制限と試行回数の制限は、どちらの入口にも効きます。
>
> ログイン画面では、ログインしたあとに開く画面（NagiLog か NagiManga）を大きなボタンで選べます。選んだものは次回も選ばれています。初めてのブラウザーでは、セットアップの「おもに使うもの」が選ばれています。ログイン URL の後ろに `&p=log` を付けた「NagiLog 用」の URL は、最初から NagiLog が選ばれた状態で開きます（完了の画面と、設定の「ログイン URL」の欄に表示します）。
#### 初めてログインしたら：二段階認証
パスキーも二段階認証（認証アプリの確認コード）もまだのうちは、ログインするたびに、どちらかを足すようすすめるダイアログが出ます。パスワードが知られても、パスキーや確認コードがなければログインされません。できるだけ、ここで設定してください。
- **パスキーを登録する**：指紋・顔・PIN でログインできるようにします。
- **認証アプリを設定する**：iPhone の「パスワード」アプリや Google Authenticator などの 6 桁の確認コードを使います。
- **あとで**：今回は閉じます。次にログインしたときに、また出ます。
- **今後は表示しない**：二度と出しません。あとからでも、設定の「二段階認証」「パスキー」から設定できます。
### 3. 設置したら確認すること
- ブックマークした URL でログインし、作品一覧に **「data フォルダがインターネットから見える状態です」という警告が出ていない** こと（出ていたら `.htaccess` が届いていないか、効いていません。下の「data フォルダを守る」を見てください）
- `https://あなたのサイト/nagimanga/data/` を開くと、中身ではなく「Forbidden」などのエラーになること
- `https://あなたのサイト/nagimanga/admin/` をそのまま開くと「Not Found」になること（セットアップが済んでいる証拠です）
### 4. 作品を作って共有する
1. 管理画面で作品を作り、ページ画像をまとめてドラッグ＆ドロップします（ファイル名の順 001, 002, … に並びます）。EPUB がある場合は「EPUB から作る」を使います。
2. 作品ページの「共有用のタグ」で読み方・見開きを選び、「コピー」してブログの HTML に貼ります。
```html
第1話を読む
```
| 属性 | 値 |
|---|---|
| `data-direction` | `rtl`（右から左）/ `ltr`（左から右）/ `vertical`（縦読み） |
| `data-view` | `auto`（横長の画面なら見開き）/ `single`（常に 1 ページ） |
| `data-cover` | `1`（1 ページ目は単独＝奇数ページ始まり）/ `0`（1 ページ目から見開き） |
| `data-vertical` | 縦読みのとき: 省略（ページ漫画: 1 ページが画面の縦に収まる）/ `webtoon`（横幅いっぱい、最大 900px） |
- `
```
`manifest.json` の中の画像の場所は、`manifest.json` の場所から見た相対パス（または完全な URL）です。
```json
{ "title": "第1話", "direction": "rtl", "pages": [ { "src": "001.jpg", "w": 1200, "h": 1700 } ] }
```
---
## セキュリティの考え方
- **公開側は読み取り専用。** `read.php` ができるのは「作品のページ一覧」「パスワードの確認」「画像を返す」だけです。おかしな要求にはすべて同じ「Not Found」を返し、何があるかを教えません。
- **管理画面は 5 重の鍵。** IP 制限 → 秘密のログイン URL → パスワード（失敗の回数とロックの時間は設定で変えられます。初期設定は 5 回で 15 分。全体でも 1 時間 40 回まで。オンにすれば、続けて認証アプリの確認コード。登録すれば、代わりにパスキー）→ ブラウザに結び付いたセッション（最後のログインから 30 日、設定で 1 年まで）→ すべての操作に CSRF 対策。
- **他人の失敗で持ち主が締め出されない。** 一度ログインしたブラウザーには「持ち主の印」（サーバーの秘密の鍵で署名した Cookie）を渡します。印のあるブラウザー、パスキー、許可した IP アドレスは、全体の上限（1 時間 40 回）に達しても入れます。印のあるブラウザーは IP ではなくブラウザーごとに数え、5 回間違えると印が効かなくなります。パスワードを変えると、すべての印が無効になります。
- **IPv6 はまとめて数える。** 失敗の回数は、IPv6 なら先頭の /64（ひとつの回線が持つアドレスの範囲）を一人として数えます。作品の閲覧パスワードと鍵付きの記事は、作品・記事ごとに全員合わせて 1 時間 60 回を超えると、そこからは 20 秒に 1 件ずつだけ確かめます（v0.12.1 以降。それより前は 1 時間止めていました）。初めての読者も少し待てば開けて、1 時間締め出されることはありません（混み合っているときは「1分ほどしてから」と出ます。すでに開けた読者はそのまま読めます）。
- **アップロードされた画像は必ず描き直す。** ファイル名ではなく中身で画像かどうかを判定し、GD で読み込んで新しいファイルに書き出します。画像に仕込まれたプログラムや撮影場所などの情報は残りません。ファイル名もこちらで付け直します。SVG は受け付けません。EPUB やバックアップの ZIP も、中身を 1 つずつ検査してから使います。
- **画像の保存フォルダではプログラムが動かない。** `data` は外から見えず、保存するのは `.webp` / `.jpg` だけです。
- **エラー内容を画面に出さない。** サーバーのパスなどが漏れないようにしています。記録は `data/logs/security.log.php` に残り、管理画面の設定ページで見られます。PHP の形にしてあるので、`.htaccess` を読まないサーバー（nginx など）でも Web から中身は読めません。
### 攻撃テスト
[`dev/attack_test.py`](dev/attack_test.py) で、通常の動作確認と攻撃の再現をまとめて実行できます。Python 3 と PHP 8.1 以上（GD・fileinfo・zip・mbstring・sodium または openssl）があれば、追加のインストールは不要です。LOGの確認は [`dev/log_test.py`](dev/log_test.py) で実行できます。
```bash
python dev/attack_test.py
```
攻撃テストで確かめていること
主な内容: 画像に偽装した PHP、`.htaccess` / SVG / HTML のアップロード、ピクセル数の爆弾、`../` によるフォルダの抜け出し、ZIP スリップと ZIP 爆弾、悪意のある EPUB（XXE・DRM・本の外を指すパス）、CSRF、XSS、閲覧用の鍵の偽造・改ざん・期限切れ・使い回し、総当たり（`X-Forwarded-For` の偽装を含む）、IP 制限の回避、セットアップの鍵、署名のない・差し替えた更新ファイル、おかしな Host ヘッダー、ゲストによる変更（19 種類）、`.htaccess` が効かないサーバーでの情報漏れ。結果は `dev/results/attack-report.md` に書き出されます。
[`dev/hardening_test.py`](dev/hardening_test.py) は、多くの IP アドレスからの攻撃（`X-Forwarded-For` で再現）を試します。全体の上限があっても持ち主が締め出されないこと、IPv6 を /64 で数えること、作品ごとの上限、ログイン中の画面からのパスワードの当てずっぽう、`.htaccess` がないときのログです。