んかいいじのマンガビューア
~slick-custom~


サンプル

なんかいい感じのマンガビューア~slick-custom~とは

「なんかいい感じのマンガビューア~slick-custom~」は、個人サイト向けのWEB漫画ビューアスクリプトです。
htmlは1作品につき1ページでOK!複数枚の画像を自動で連番表示させるので、ページの数だけhtmlを作らずに済みます。
レスポンシブでスワイプ操作にも対応しているので、スマホからの閲覧にも優しい仕様です。

土台としてjQueryスクリプトの「slick」を使用しています。
「slick」は無保証だけど無料で使えて商用利用も可能なMITライセンスのスクリプトです。
スクリプト本体はCDNで外部から読み込んでるので別途ダウンロードは不要です。

自分のサイトに設置してブラウザ上で動かせてレスポンシブでスワイプ対応のマンガビューアが欲しすぎて頑張りました!
可能な限り最低限の編集で動くようにしています。

個人サイトでマンガ公開する方増えるといいな~そしてあわよくばそれをスマホでも見れたらもーっといいな~ということで公開します。
スクリプトとかよく分かんないけどhtmlなら触れるって方、是非WEBマンガ公開してください。
自分ならもっとスタイリッシュに改造できるぜって方、是非してください。そして教えてください。
どうぞよきWEBマンガライフを!


動作確認:【PC】chrome76/firefox68/IE11/Edge42 【iPad】Safari/chrome76 【Android】chrome76

更新履歴:
2019/8/13 ver1.3公開(ブラウザ間でのデザイン統一/comi_style.css 9行目編集・183行目追記)
2019/6/26 ver1.2公開(ローディング画像load.gif追加/index.html 26行目編集)
2019/5/25 ver1.1公開(スマホ閲覧時、操作ヘルプの×ボタンが反応しないバグ修正/comi_style.css 294行目編集)
2019/5/23 ver1.0公開

ファイル構成

「slick_custom_ver1」フォルダ (名前変更推奨というか必要なのは中身だけ)

∟初めに.txt (説明テキスト版)
∟comi_style.css (名前変更&移動不可)
∟comic.js (名前変更不可&移動不可)
∟help.png (名前変更&移動不可) 自身の画像を使う場合は同名で上書きしてください
∟load.gif (名前変更&移動不可) 自身の画像を使う場合は同名で上書きしてください
∟「comic」フォルダ (名前変更OK) 作品の数だけコピーして使う

∟連番のpng画像ファイル (1~開始で任意の数を用意) サンプルの4枚は削除してください
∟index.html (名前変更OK) 主に編集する奴

使い方

1)「comic」フォルダにファイル名を連番にした漫画画像を入れます。(デフォルトはpng形式用になっています)

2)index.htmlをテキストエディターで開きます。

3)15~19行目を編集します。

例…「http://ほにゃらら/index.html」の「離島」というサイトで「太郎」が公開している「32」ページの「名無しの権兵衛の冒険」という作品の場合

var page = 32; //ページ数
$("title,h1").text("名無しの権兵衛の冒険"); //タイトル名
$("title").prepend("離島 - "); //サイト名
$(".copy").text("太郎"); //コピーライト
$(".o_button").attr("onClick", "location.href='http://ほにゃらら/index.html'"); //サイトへのリンク

4)完成!

応用

タイトルが長すぎて、スマホで見た時変なとこで改行されちゃう……任意の場所で改行したい。
index.htmlの23行目を使いましょう!
//$("h1").html("サンプル<br>テキスト");
行頭の「//」を削除し、「サンプル<br>テキスト」のところを書き換えてください。
画像形式をjpgにしたい。
index.htmlの26行目を編集しましょう!
 $('#last_page').before('<div><img data-lazy="' + i + '.png" src="../load.gif"></div>'); //画像拡張子変更する場合はここを書き換え
「png」と書いてあるところを「jpg」に書き換えてください。
最初に表示されるガイドを非表示にしたい。
index.htmlの79~84行目を削除してください!
<div class="guide">
    <div class="slide-arrow prev-arrow"><span></span></div>
    <div class="guide_yazirusi"><div class="icon"></div><div class="text"></div></div>
    <div class="guide_yubi"><div class="icon"></div><div class="text"></div></div>
    <div class="slide-arrow next-arrow"><span></span></div>
</div>
最後のページにweb拍手などのコンテンツを追加したい。
index.htmlの35行目<div class="last_page_in">~40行目</div>の間に収まるようにコンテンツを追加してください!
最後のページは上部に余白を多めに取ってあるので、必要であればcomi_style.cssの31行目のmargin-topを調節してください。
画像の読み込みを一括ではなく、ページ単位で行いたい(次のページに移動した時に読み込み)。
comic.jsの26行目(スマホ表示版)と、41行目(PC表示版)を編集しましょう!
progressiveとなっているところを、ondemandに変更してください。
lazyLoad: 'ondemand',
詳しくはslickのオプションを参考にどうぞ!
slickドキュメント翻訳
左ページでなく右ページで開始したい(見開き状態で開始)。
index.htmlの33行目の<div id="first_page"></div>をまず削除!
それから87行目の<script src="../comic.js"></script>の下に、
<script>
    $(function(){
        var width = $(window).width();
        if(width <= 767){
            $slider.slick('slickAdd','<div><img data-lazy="1.png"></div>',0,'addBefore');
        }
    });
</script>
を挿入!以上!
画像の大きさってどれくらいがいいの?
昨今はモニタも高解像度化が進んでいるので、私は現在のところ長辺1500Pxくらいにしてます。一番でかいiPadで見てもぼやけない!
ファイルサイズは減色して平均300~400KBくらいです。良い減色ソフトがあれば教えてほしい!
私はpng派ですが、グラデーション多めの作風の方ならjpgの方がいいかもです。
タイトルに記号が含まれていると、最終ページで表示がおかしくなってしまう場合がある。
不思議ですよね!!! 本当……にな……。
こちら修正用CSSを用意しています。
index.htmlの16行目で通常通りタイトルを設定した後、23行目行頭の「//」を削除して入力欄を有効にしてください。
それから文章と記号に分けて、23行目の中身を
<div><p>タイトル文字</p><p>タイトル末尾記号</p></div>
という風に入力してください。htmlタグは必ずこの通りで!
これで想定通り表示されていることを確認してください。

ちなみに改行を含む場合で、例えば

名無しの権兵衛の
冒険!

と表示したい場合は、行ごとにdivで囲めば正常に反映されます。
<div>名無しの権兵衛の</div><div><p>冒険</p><p>!</p></div>
ちなみに記号多すぎてヤバイ例がサンプルの「I love my master!-10 years ago-」です。
興味のある方はソース覗いてみてください。
面倒なので最後のページのタイトル表記いらないです。
DESUYONE!!! index.htmlの36行目の<h1></h1>を削除してください!

作る際に参考にさせていただいたページ

お世話になりました!!!

著作権など

使用しているスクリプト、「slick」はMITライセンスで公開されています。
MITライセンスに関しては、こちらのページが分かりやすくまとめられています。
「slick_custom」は、slickを使用したhtmlページをWEBマンガビューアらしく表示させるためのスクリプトです。
こちらもMITライセンスでの公開としています。ソースコード内の著作権表示とライセンス表記を削除しなければ、ご自由にお使いいただけます。
どうぞご活用ください。