JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。探してみるといくつかライブラリが見つかったが、スマホで閲覧した際に「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にて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...
-
-
HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル
あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。 ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
フォームからアップロードした画像にPHPでロゴ画像(透かし)を追加する方法
フォームから送られてきた画像に対してサイトロゴみたいなロゴ画像を右下等、指定の位 ...
-
-
PHPのエラーメッセージ及びvar_dumpを見やすく表示するライブラリ「Tracy」の利用方法
ここのところPHPでの開発時にvar_dumpをツールバー表示する「Kint」及 ...