なんで作ったの？
自分のサイトで漫画を公開したくて、いい感じのビューアを探してた。けど、どれも重い。React必須だったり、webpackの設定が面倒だったり、「ちょっと漫画を表示したいだけなのに、なんでこんな大げさなの？」って感じ。
じゃあ自分で作るか、ってなった。
ゼロ依存へのこだわり
React も Vue も jQuery も使ってない。JavaScript 1ファイル + CSS 1ファイル、これだけ。
漫画ビューアって「既存サイトにポンと載せたい」ケースが多い。フレームワークに依存した瞬間、導入のハードルが一気に上がる。
<link rel="stylesheet" href="manga-viewer.css">
<div id="viewer"></div>
<script type="module">
import MangaViewer from './manga-viewer.js';
new MangaViewer({
container: '#viewer',
pages: ['page-001.jpg', 'page-002.jpg'],
direction: 'rtl',
});
</script>
npm経由でも使える。
npm install @tokagemushi/manga-viewer
機能一覧
| 機能 | 説明 |
|---|---|
| 見開き表示 | PCは2ページ見開き、スマホは1ページ。自動切替 |
| 右綴じ(RTL) / 左綴じ(LTR) | 日本の漫画は当然右綴じ |
| スワイプ | スマホネイティブっぽい操作感 |
| ピンチズーム | 拡大してドラッグでパン、端までいったらページめくり |
| しおり | ワンタップで追加、長押しで一覧表示 |
| 読書進捗 | 自動保存 |
| その他 | フルスクリーン / キーボード操作 / プリロード |
実装の工夫
ピンチズーム
2本指の距離と中心点を取ってズームレベルを計算。ピンチの中心点を基準にズームするのがポイント。
RTL対応
日本の漫画は右から左に読む。あらゆる操作の方向が逆転するのが大変。スワイプ、スライダー、見開き、タップ領域…全部 direction で分岐。
見開きのスロット設計
1スロット=1ページor2ページ。表紙は常に単ページ。
しおりのストレージ戦略
localStorage（デフォルト）とAPI接続の2系統。API失敗時は自動でlocalStorageにフォールバック。
🎮 デモ
佐藤秀峰先生の「ブラックジャックによろしく」を二次利用フリー規約に基づいて使わせてもらってます。
リンク
- GitHub: https://github.com/tokagemushi999/manga-viewer
- npm: @tokagemushi/manga-viewer
- デモ: https://tokagemushi.jp/lab/manga-viewer/demo/
まとめ
「漫画をWebで読ませたい」って需要はあるのに、既存ツールは重い。このビューアはJS+CSSの2ファイルだけで、ゼロ依存で既存サイトにポンと載せられる。
IssueやPRもらえると嬉しいです 🙏