なんで作ったの？
自分で運営してるサイトで漫画を公開したくて、いい感じのビューアーを探してた。けど、どれも重かったりReactが必要だったり、微妙にかゆいところに手が届かない。
「じゃあ自分で作るか！」ってなって、ゼロから書いたのがこの Manga Viewer です。
こだわったところ
ゼロ依存
React も Vue も jQuery も使ってない。ピュアな JavaScript + CSS だけ。だから導入がめちゃくちゃ楽で、JSとCSSの2ファイルを置くだけで動く！
スマホファースト
自分がスマホで漫画読むタイプなので、スマホでの体験をかなり重視した。スワイプでページめくり、ピンチズームで拡大、慣性スクロール。ネイティブアプリっぽい操作感を目指してます。
見開き表示
PCで読むときは2ページ見開きで表示。スマホでは自動で1ページ表示に切り替わる。表紙は単ページで出すとか、そういう細かいところもちゃんとやってます。
右綴じ（RTL）対応
日本の漫画は右から左に読む。これ、意外とちゃんと対応してるビューアーって少ないんですよね。当然ネイティブ対応してます。
しおり機能
ワンタップでブックマーク追加！長押しでしおり一覧を開いて、好きなページにジャンプできる。
ストレージは2パターン用意してます。
- localStorage（デフォルト） — サーバーなしで動く。個人サイトならこれで十分
- API接続 — バックエンドと連携して、ログインユーザーごとにしおりを保存できる
読書進捗の自動保存
ブラウザ閉じても、次に開いたら前回の続きから。地味だけどこれがないと漫画ビューアーとしては使えない。
できること一覧
- 見開き表示（PC）/ 1ページ表示（スマホ）自動切替
- 右綴じ（RTL）/ 左綴じ（LTR）対応
- スワイプでページ送り
- ピンチズームで拡大縮小
- しおり（ブックマーク）
- 読書進捗の自動保存
- フルスクリーン
- キーボード操作（矢印キー・スペース）
- ページのプリロード（先読み）
- ゼロ依存（JS + CSS の2ファイルだけ）
デモ
佐藤秀峰先生の「ブラックジャックによろしく」第1巻（全209ページ）を二次利用フリー規約に基づいて使わせてもらってます。ぜひ触ってみてください。
使い方
npm
npm install @tokagemushi/manga-viewer直接配置
GitHubからダウンロードして、JSとCSSを置くだけ。
<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>これだけ！