勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

  JavaScript

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。探してみるといくつかライブラリが見つかったが、スマホで閲覧した際に「ToraViewer」というライブラリが良さげ。以下にサンプルとソースコードをメモ。

 

ToraViewer

GitHub

https://github.com/toranoana/tora-viewer

CDN

CDNで使う場合は以下を記述する。

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

 

サンプル

https://taitan916.info/sample/ToraViewer/

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」のサンプル</title>
</head>
<body>

    <a href="javascript:void(0);" id="viewer">ビューア起動</a>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>
    <script>
    $(`#viewer`).on('click', function(){
        const viewer = toraViewer(
            [
                './img/001.jpg',
                './img/002.jpg',
                './img/003.jpg',
                './img/004.jpg',
                './img/005.jpg',
            ],
            {
                //タイトル
                title: 'サンプルタイトル',
                //1ページのサイズ
                pageSize: {
                    width: 600,
                    height: 800,
                },
            }
        );
    });
    </script>
</body>
</html>

 

気になる点

以下の点が気になった。

  • PCで閲覧時にページ数が奇数の場合、最終ページの表示が変
  • 最終ページの閉じるボタンのデザイン

MITライセンスなのでちょっと弄ってから実装する形になりそう。

 

所感

「 laymic」というライブラリも少々気になった。

あと漫画ビューアだけではなくWebカタログ(できればPDFファイルを閲覧できるビューア)にも使えそうなライブラリを探したいところ。

 - JavaScript

  関連記事

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

PHPでExcelシートを出力する方法(PhpSpreadsheet)
PHPでExcelシートを出力する方法(PhpSpreadsheet)

PHPでエクセルシートを出力させたい。以前はPHPExcelを利用していたが現在 ...

MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法
MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法

先日PHPで画像を比較して類似度を算出する「image-comparator」ラ ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...