勉強したことのメモ

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

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

  JavaScript

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

 

ToraViewer

GitHub

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

CDN

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>
<script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>
<script src="https://cdn.jsdelivr.net/npm/@toralab/tora-viewer"></script>

 

サンプル

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

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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にて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法

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

S