A guide to NagiManga (for non-developers)

01What NagiManga is#

A tool that adds a screen for reading manga (a viewer) to your own website or blog.

• Readers click a link in a post and the manga opens over the whole screen. No app to install, no account to make.
• Creators drag and drop pictures into the admin panel and paste the "tag" it shows (a short piece of HTML) into their blog.
• You can add a password so that only people who know it can read.

02Who it suits, and who it does not#

It suits people who

• want to publish their own manga on their own site, under their own control
• do not want to depend on the rule changes or closing of manga posting services
• want to give readers a quiet reading place without ads or tracking
• have works they want only a limited circle, such as supporters or friends, to read

It does not suit people who

• do not want to rent a server or upload files at all (a posting service is easier)
• need view counts, comments, "likes", sales or payments (NagiManga has none of these; the reasons are in chapter 4)
• must make sure pictures can never be saved (as long as they are shown on the web, this cannot be fully prevented; chapter 4)

03Strengths#

04Weaknesses and cautions (honestly)#

05Using it for ten years#

Once or twice a year, check these:

1. Make a backup. "バックアップ → すべてをダウンロード" (download everything) in the admin panel. Keep it with your original pictures.
2. Check the PHP version. In your rental server's control panel, make sure PHP is a supported version. NagiManga is made for PHP 8.1 and later. After a big PHP upgrade, log in to the admin panel and check that your works open.
3. Look at the admin panel's records. In "設定 → セキュリティログ" (Settings → Security log), look for long runs of login failures you do not recognize. If there are many, change the login URL (one button in the settings) and your password.
4. When moving servers. Install NagiManga again on the new server, set it up and "restore" the backup ZIP. Work IDs carry over, but if the domain or place changed, the URL in share tags changes too, so paste the tags in your blog again (the new server's admin panel makes tags with the new address automatically).

Browsers change year by year, but NagiManga uses only standard features every browser has had for a long time (chapter 6). It does not lean on a particular company's service or on mechanisms likely to disappear.

06The technology used#

"What is used", "what for" and "why it was chosen". Technical names are kept as clues for looking things up in the future.

The screen readers see (the viewer)#

Technology	What for	Why
HTML / CSS / JavaScript (standard features only)	The whole viewer	The basic languages of the web that every browser understands. No extra parts (libraries).
Pointer Events	Handling fingers, mouse and pen together	A standard browser feature. Touch and mouse work through the same mechanism.
fetch / JSON	Getting a work's page list	A standard browser feature.
History API	Closing with the browser's Back	A standard browser feature.
localStorage / sessionStorage	Remembering the bookmark (where you stopped) and the viewing key after a password	A standard browser feature. Stored only on the reader's device, never sent to the server.
CSS env(safe-area-inset-*)	Avoiding a phone's notch and home bar	A standard browser feature.
WebP pictures	Page pictures	Small files for their quality, supported by all major browsers.

The server side (the admin panel and the window for readers)#

Technology	What for	Why
PHP 8.1 and later	The admin panel and read.php	Available from the start on almost every rental server.
GD (picture processing that comes with PHP)	Redrawing pictures, making thumbnails	A part that comes with PHP as standard.
fileinfo (comes with PHP)	Judging from a file's contents whether it is a picture	To catch dangerous files with false names.
ZipArchive (comes with PHP)	Backup and restore	ZIP is a long-lived format any computer can open.
JSON files	Storing a work's information (title, order and so on)	To store it without a database, in a form Notepad can read.
password_hash (comes with PHP)	Storing and checking passwords	Stores not the password itself but a form that cannot be turned back.
sodium or openssl (comes with PHP)	Letting the admin panel show reader passwords	They are not stored as plain text but encrypted with the server's secret key. Without either, only showing them is unavailable; the rest works.
Ed25519 signatures	Checking that an update comes from the author	Signed with a key kept only on the author’s PC, checked by the site with the public key. NagiManga checks it by itself where PHP has no sodium.
HMAC-SHA256	Viewing keys, naming work folders, the owner’s browser mark	A widely used way of making marks that nobody without the secret key can make or guess.
.htaccess (Apache)	Hiding folders such as data from outside	Usable on many rental servers. The README also covers servers where it does not work.

For development and testing (not placed on the server)#

Technology	What for
Python 3 (standard features only)	Tests that try attacks and behaviors together (dev/attack_test.py, dev/hardening_test.py), signing releases (dev/release_sign.py)
PHP's built-in development server	Checking on your own computer (dev/serve.cmd)

07The shape of the data (for the day NagiManga cannot be used)#

Even if NagiManga stops working someday, your works can be taken out. A backup ZIP, or the data/works folder on the server, looks like this:

works/
└── (a folder per work)/
    ├── work.json          the work's information (opens in Notepad)
    └── pages/
        ├── p0001_xxxxxxxx.webp   page pictures
        ├── t_p0001_xxxxxxxx.webp small pictures (for lists)
        └── …

An example of what work.json holds:

{
  "id": "Ab3dE5gH7jK9",
  "title": "Chapter 1",
  "series": "Days of a cat",
  "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" }
  ]
}

• The order in pages is the page order.
• f is the name of the stored picture, o the original name when uploaded, w and h the width and height.
• Pages with a light version have "m": { "f": "…", "w": 1200, "h": 1683 } (f is the light picture's name).
• direction is the reading direction (rtl = right to left, ltr = left to right, vertical = vertical reading).
• Today's computers can usually open .webp pictures as they are.

08Words#