NagiSeries手引き

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

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

設置の手順は ../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 つでも合わなければ「存在しない」ふりをします。アップロードされた画像は必ず描き直すので、画像に仕込まれた悪いプログラムは残りません。132 種類の動作確認と攻撃の再現テストで確かめています。
デモを見せられる	プラグインを 1 つ置くと、訪問者に管理画面を「見るだけ」で公開できます。変更や削除は本体の側でしっかり止めています。
無料で、改造も自由	MIT ライセンスです。商用でも個人でも使え、中身を読んで改造することもできます。

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

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

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

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

バックアップを取る。 管理画面の「バックアップ → すべてをダウンロード」。手元の元画像と一緒に保管します。
PHP の版を確認する。 レンタルサーバーの管理画面で、PHP がサポート期間内の版になっているか確認します。NagiManga は PHP 8.1 以降を前提に作られています。PHP の大きな版上げのあとは、管理画面にログインし、作品が開けるか確かめてください。
管理画面の記録を見る。 「設定 → セキュリティログ」に、見覚えのないログイン失敗が大量に並んでいないか見ます。多ければ、ログイン URL の変更（設定画面のボタン一つ）とパスワードの変更をします。
サーバーを引っ越すとき。 新しいサーバーに 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 に付属）	読者向けパスワードを管理画面で見られるようにする	平文では保存せず、サーバーの秘密の鍵で暗号化します。どちらもない場合は、見られないだけで他は動きます。
HMAC-SHA256	閲覧用の鍵、作品フォルダの名前づけ	秘密の鍵を知らない人には作れない・当てられない印を作る、広く使われている方法です。
`.htaccess`（Apache）	`data` などのフォルダを外から見えなくする	多くのレンタルサーバーで使えます。効かないサーバー向けの対策も README に書いてあります。

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

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

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

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

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

work.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 は「著作権表示を残せば、自由に使ってよい」という、ゆるい決まりです。