📖

ゼロ依存の漫画ビューアをバニラJSで作った

に公開
tech

なんで作ったの？

自分のサイトで漫画を公開したくて、いい感じのビューアを探してた。けど、どれも重い。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にフォールバック。

デモ

佐藤秀峰先生の「ブラックジャックによろしく」第1巻（全209ページ）を二次利用フリー規約に基づいて使わせてもらってます。

👉 デモを試す

リンク

まとめ

「漫画をWebで読ませたい」って需要はあるのに、既存ツールは重い。このビューアはJS+CSSの2ファイルだけで、ゼロ依存で既存サイトにポンと載せられる。IssueやPRもらえると嬉しいです。

Discussion