はじめに

この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。

ToraViewerで何ができるのか

ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。

デモページから実際の動作を確認することができます。

Tora Viewer デモ

画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。

ToraViewerの使い方

まずはインストールします。

npm i @toralab/tora-viewer

またはCDNが使えます。

<script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>

基本的な使い方は以下の通りです。第1引数に画像URLの配列を渡します。

import toraViewer from '@toralab/tora-viewer';

toraViewer([
  'https://example.com/1.png',
  'https://example.com/2.png',
  'https://example.com/3.png',
  'https://example.com/4.png',
]);

CDN利用の場合はこのようにします

<script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>
<script>
toraViewer([
  'https://example.com/1.png',
  'https://example.com/2.png',
  'https://example.com/3.png',
  'https://example.com/4.png',
]);
</script>

その他の詳細なオプションやメソッドについてはREADMEに記載しています。

ToraViewerの利用技術

言語はTypeScript、モジュールバンドラはViteを利用しています。

テンプレートとしてJSXを利用しています。

JSXを利用していますが、Reactやpreactは利用していません。理由としては

画像表示後はスクロールするだけなので、状態が変わることが少ないのでReact等を使うのは過剰(と感じた)
ライブラリとして公開するため、依存するものを少なくしたかった。
バンドル時のサイズを小さくしたかった。

などです

ページ遷移についてはElement.scrollIntoViewとCSSのScroll Snapといったブラウザ標準技術を利用しています。

      element?.scrollIntoView();

該当箇所

      scroll-snap-type: x mandatory;

該当箇所

現在のページがどこにあるかに関してはいろいろなObserver APIの紹介 - 虎の穴開発室ブログで紹介したIntersectionObserverを利用しています。

    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          // ... 略
        }
      },
      {
        root: viewerPagesElm,
        threshold: 0.6,
      }
    );