**日本語** | [English](overview.en.md)

# NagiManga の手引き（開発者ではない人のために）

この文書は、NagiManga を使うかどうか決めたい人、すでに使っていて「これからも使い続けて大丈夫か」を知りたい人のためのものです。専門用語はできるだけ避け、使うときは説明を添えています。数年後、あるいは 10 年後に読み返しても判断の材料になるように、特定の年やサービスに頼らない書き方をしています。

設置の手順は [../README.md](../README.md) にあります。

---

## 1. NagiManga とは

自分のウェブサイトやブログに、**漫画を読むための画面（ビューアー）** を付け足す道具です。

- 読者は、記事の中のリンクをクリックするだけで、画面いっぱいに漫画が開きます。アプリのインストールや会員登録はいりません。
- 作者は、管理画面に画像をドラッグ＆ドロップして、表示された「タグ」（短い HTML の文字列）をブログに貼るだけです。
- パスワードを付けて、知っている人だけが読めるようにもできます。

## 2. 向いている人・向いていない人

**向いている人**

- 自分のサイトで、自分の漫画を自分の管理のもとに公開したい人
- 漫画投稿サービスの規約変更や閉鎖に左右されたくない人
- 広告や追跡のない、静かな読書環境を読者に提供したい人
- 支援者や仲間など、限られた人にだけ読んでもらいたい作品がある人

**向いていない人**

- サーバーを借りる・ファイルを置く、といった作業をまったくしたくない人（投稿サービスのほうが楽です）
- 閲覧数の集計、コメント、「いいね」、販売・課金などが必要な人（NagiManga にはありません。理由は 4 章）
- 画像を絶対に保存させたくない人（ウェブで見せる以上、完全には防げません。4 章）

## 3. メリット

| メリット | どういうことか |
|---|---|
| **自分の場所に置ける** | 作品は自分が借りたサーバーの中にあります。サービスが終わっても、規約が変わっても、作品が消えることはありません。 |
| **EPUB からそのまま作れる** | CLIP STUDIO PAINT などで書き出した漫画の EPUB を選ぶだけで、ページの順番・読む向き・タイトルごと作品になります。画像を 1 枚ずつ書き出す必要はありません。 |
| **スマホに優しい** | 小さく書き出した「小容量版」を一緒に登録しておくと、スマホでは軽い画像、パソコンや拡大したときはきれいな画像を自動で読み分けます。通信量が半分ほどで済みます。 |
| **読者の手間がない** | リンクを押すだけで開きます。スマホでもパソコンでも、指・マウス・キーボードで自然に読めます。 |
| **漫画らしく読める** | 右から左へのページ送り、見開き、表紙の単独表示に対応しています。縦読みは、1 ページずつ画面に収める「ページ漫画」と、横幅いっぱいの「ウェブトゥーン」を選べます。前回の続きから開きます。 |
| **データベースがいらない** | データベースは、使い方を誤ると壊れたり、サーバー移転が難しくなったりするものです。NagiManga は画像と小さな文字ファイル（JSON）だけで動くので、フォルダをコピーするだけで移転やバックアップができます。 |
| **中身が読める形で保存される** | 作品の情報は、メモ帳でも開ける JSON というファイルに書かれています。NagiManga が使えなくなっても、画像と並び順は取り出せます（7 章）。 |
| **外部の部品を使っていない** | 他人が作ったライブラリ（部品）を一切使っていません。部品の作者が更新をやめたり、部品に欠陥が見つかったりしても、影響を受けません。 |
| **守りを何重にもしている** | 管理画面は、場所（IP アドレス）・秘密の URL・パスワードなど 5 段の鍵で守られ、どれか 1 つでも合わなければ「存在しない」ふりをします。アップロードされた画像は必ず描き直すので、画像に仕込まれた悪いプログラムは残りません。200 を超える動作確認と攻撃の再現テストで確かめています。更新ファイルには作者の署名があり、GitHub が乗っ取られても差し替えた中身は入りません。 |
| **デモを見せられる** | プラグインを 1 つ置くと、訪問者に管理画面を「見るだけ」で公開できます。変更や削除は本体の側でしっかり止めています。 |
| **無料で、改造も自由** | MIT ライセンスです。商用でも個人でも使え、中身を読んで改造することもできます。 |

## 4. デメリットと注意点（正直に）

| 注意点 | どういうことか・どうすればよいか |
|---|---|
| **サーバーが必要** | PHP が動くレンタルサーバーなどが必要です（PHP なしの使い方もありますが、パスワード機能は使えません）。サーバー代はかかります。 |
| **画像は描き直される** | 安全のため、アップロードした画像はすべて WebP という形式で描き直して保存します。見た目の差はほとんどありませんが、元のファイルとまったく同じではありません。**元の画像は必ず自分の手元にも残しておいてください。** GIF アニメは 1 枚目だけになります。 |
| **パスワードは「鍵」であって「金庫」ではない** | パスワードはビューアーを開くたびに聞かれます。それでも、パスワードを知っている人は、読んでいる画面を保存したりスクリーンショットを撮ったりできます。ウェブで見せる以上、これを完全に防ぐ方法はありません。「知らない人に見つからない・読まれない」ための仕組みだと考えてください。 |
| **機能はわざと少ない** | 閲覧数、コメント、販売などはありません。これらを入れるとデータベースや外部サービスが必要になり、壊れやすく、狙われやすくなるからです。必要なら別の道具と組み合わせてください。 |
| **バックアップは自分で** | 自動でどこかに保存してくれる仕組みはありません。管理画面の「バックアップ」から、ときどき ZIP をダウンロードしてください。 |
| **サーバーの手入れは必要** | PHP には「サポート期限」があり、古い PHP を使い続けると危険です。レンタルサーバーの管理画面で、PHP を新しい版に上げてください（5 章）。 |
| **家の回線の IP アドレスは変わることがある** | 管理画面を「自分の IP アドレスからだけ」に制限していると、回線の都合で締め出されることがあります。直し方は README の「困ったとき」にあります。 |
| **一人で作られている** | 大きな会社の製品ではありません。問題が見つかっても、すぐに直るとは限りません。そのぶん、外部の部品に頼らず、中身を読めば分かる作りにしてあります。 |

## 5. 10 年使い続けるために

年に 1〜2 回、次のことを確認してください。

1. **バックアップを取る。** 管理画面の「バックアップ → すべてをダウンロード」。手元の元画像と一緒に保管します。
2. **PHP の版を確認する。** レンタルサーバーの管理画面で、PHP がサポート期間内の版になっているか確認します。NagiManga は PHP 8.1 以降を前提に作られています。PHP の大きな版上げのあとは、管理画面にログインし、作品が開けるか確かめてください。
3. **管理画面の記録を見る。** 「設定 → セキュリティログ」に、見覚えのないログイン失敗が大量に並んでいないか見ます。多ければ、ログイン URL の変更（設定画面のボタン一つ）とパスワードの変更をします。
4. **サーバーを引っ越すとき。** 新しいサーバーに NagiManga を置き直してセットアップし、バックアップ ZIP を「復元」します。作品の ID はそのまま引き継がれますが、ドメインや置き場所が変わった場合は共有タグの URL も変わるので、ブログに貼ったタグを貼り直してください（新しいサーバーの管理画面では、新しいアドレスのタグが自動で作られます）。

ブラウザは年々変わりますが、NagiManga が使っているのは、どのブラウザにも昔から備わっている標準の機能だけです（6 章）。特定の会社のサービスや、将来なくなりそうな仕組みには頼っていません。

## 6. 使っている技術

「何を使っているか」「何のためか」「なぜ選んだか」を並べます。専門的な名前は、将来調べるときの手がかりとして残しています。

### 読者が見る画面（ビューアー）

| 技術 | 何のため | 選んだ理由 |
|---|---|---|
| HTML / CSS / JavaScript（標準機能のみ） | ビューアー全体 | すべてのブラウザが理解する、ウェブの基本の言葉です。追加の部品（ライブラリ）は使っていません。 |
| Pointer Events | 指・マウス・ペンの操作をまとめて扱う | ブラウザの標準機能。タッチとマウスを同じ仕組みで扱えます。 |
| fetch / JSON | 作品のページ一覧を取りに行く | ブラウザの標準機能。 |
| History API | ブラウザの「戻る」で閉じる | ブラウザの標準機能。 |
| localStorage / sessionStorage | しおり（続きのページ）と、パスワードを入れたあとの閲覧用の鍵を覚える | ブラウザの標準機能。読者の端末の中だけに保存され、サーバーには送りません。 |
| CSS の `env(safe-area-inset-*)` | スマホの画面の切り欠きやホームバーを避ける | ブラウザの標準機能。 |
| WebP 画像 | ページ画像 | 画質のわりにファイルが小さく、主要なブラウザがすべて対応しています。 |

### サーバー側（管理画面と、読者向けの窓口）

| 技術 | 何のため | 選んだ理由 |
|---|---|---|
| PHP 8.1 以降 | 管理画面と `read.php` | ほとんどのレンタルサーバーで最初から使えます。 |
| GD（PHP に付属の画像処理） | 画像の描き直し、縮小画像の作成 | PHP に標準で付いてくる部品です。 |
| fileinfo（PHP に付属） | ファイルの「中身」で画像かどうかを判定する | 名前を偽った危険なファイルを見分けるため。 |
| ZipArchive（PHP に付属） | バックアップと復元 | ZIP はどのパソコンでも開ける、長く使われている形式です。 |
| JSON ファイル | 作品の情報（題名・並び順など）の保存 | データベースを使わず、メモ帳でも読める形にするため。 |
| `password_hash`（PHP に付属） | パスワードの保存・照合 | パスワードそのものではなく「元に戻せない形」に変えて保存します。 |
| sodium または openssl（PHP に付属） | 読者向けパスワードを管理画面で見られるようにする | 平文では保存せず、サーバーの秘密の鍵で暗号化します。どちらもない場合は、見られないだけで他は動きます。 |
| Ed25519 の署名 | 更新ファイルが作者のものか確かめる | 作者の PC にだけある鍵で署名し、サイトは公開鍵で確かめます。PHP に sodium がなくても、NagiManga 自身が確かめます。 |
| HMAC-SHA256 | 閲覧用の鍵、作品フォルダの名前づけ、持ち主のブラウザーの印 | 秘密の鍵を知らない人には作れない・当てられない印を作る、広く使われている方法です。 |
| `.htaccess`（Apache） | `data` などのフォルダを外から見えなくする | 多くのレンタルサーバーで使えます。効かないサーバー向けの対策も README に書いてあります。 |

### 開発・検査用（サーバーには置かないもの）

| 技術 | 何のため |
|---|---|
| Python 3（標準機能のみ） | 攻撃と動作をまとめて試すテスト（`dev/attack_test.py`・`dev/hardening_test.py`）、リリースの署名（`dev/release_sign.py`） |
| PHP の開発用サーバー | 手元のパソコンでの動作確認（`dev/serve.cmd`） |

## 7. データの形（NagiManga が使えなくなったときのために）

NagiManga が将来動かなくなっても、作品は取り出せます。バックアップ ZIP、またはサーバーの `data/works` フォルダの中は次のようになっています。

```
works/
└── （作品ごとのフォルダ）/
    ├── work.json          作品の情報（メモ帳で開けます）
    └── pages/
        ├── p0001_xxxxxxxx.webp   ページ画像
        ├── t_p0001_xxxxxxxx.webp 縮小画像（一覧用）
        └── …
```

`work.json` の中身の例です。

```json
{
  "id": "Ab3dE5gH7jK9",
  "title": "第1話",
  "series": "ねこの日々",
  "direction": "rtl",
  "pages": [
    { "f": "p0001_1a2b3c4d.webp", "w": 1200, "h": 1700, "o": "001.png" },
    { "f": "p0002_5e6f7a8b.webp", "w": 1200, "h": 1700, "o": "002.png" }
  ]
}
```

- `pages` に書かれた順が、ページの順番です。
- `f` が保存されている画像の名前、`o` がアップロードしたときの元の名前、`w` と `h` が幅と高さです。
- 小容量版があるページには `"m": { "f": "…", "w": 1200, "h": 1683 }` が付きます（`f` が小容量版の画像の名前）。
- `direction` は読む向きです（`rtl` = 右から左、`ltr` = 左から右、`vertical` = 縦読み）。
- `.webp` の画像は、今のパソコンならたいていそのまま開けます。

## 8. ことばの説明

| ことば | 意味 |
|---|---|
| サーバー | ウェブサイトのファイルを置いておく、インターネットにつながったコンピューター。多くの人はレンタルサーバーを借ります。 |
| FTP | パソコンからサーバーへファイルを送る方法。 |
| PHP | サーバーの上で動くプログラムの言葉。 |
| IP アドレス | インターネット上の住所のような番号。 |
| タグ | ウェブページの部品を表す短い文字列。NagiManga では、ブログに貼るリンクのこと。 |
| JSON | 情報を書き留めるための、人にもコンピューターにも読める書き方。 |
| WebP | 画像ファイルの形式の一つ。 |
| ライブラリ | 他の人が作ったプログラムの部品。 |
| ライセンス（MIT） | 使い方の決まり。MIT は「著作権表示を残せば、自由に使ってよい」という、ゆるい決まりです。 |