虎の穴ラボ技術ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

ブラウザ用漫画ビューアーライブラリ「ToraViewer」を公開しました

JavaScript 技術エントリ

こんにちは。虎の穴ラボのはっとりです。

ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。

www.npmjs.com github.com

はじめに

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

ToraViewerで何ができるのか

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

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

Tora Viewer デモ

ToraViewerデモ
ToraViewerデモ

画面サイズにより自動的に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,
      }
    );

該当箇所

今後の展望

ToraViewerは機能としては最低限であるため今後は以下のような機能追加を考えています。

  • 各種文言のカスタマイズ(多言語化など)
  • 縦読み対応
  • HTMLタグから画像一覧取得
  • 使える設定のカスタマイズ
  • テーマの変更

最後に

ぜひ使ってみてください！

ご利用頂いて気になる点、またはこうした方がよい、こういう機能がほしいなどありましたらissueを立てていただいたり、コメントをいただければと思います。

P.S.

採用

虎の穴では一緒に働く仲間を絶賛募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
yumenosora.co.jp

LINE スタンプ

エンジニア専用のメイドちゃんスタンプが完成しました！
「あの場面」で思わず使いたくなるようなスタンプから、日常で役立つスタンプを合計 40 個用意しました。
エンジニアの皆さん、エンジニアでない方もぜひスタンプを確認してみてください。 store.line.me