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

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

「なんかいい感じのマンガビューア～slick-custom～」は、個人サイト向けのWEB漫画ビューアスクリプトです。

htmlは1作品につき1ページでOK！複数枚の画像を自動で連番表示させるので、ページの数だけhtmlを作らずに済みます。
PCの大きな画面では見開き表示、スマホの小さな画面では単ページ表示に自動で切り替わるレスポンシブ仕様です。
スワイプ操作にも対応しているので、スマホ対応にお悩みの方にもぴったり！

☆土台としてjQueryスクリプトの「slick」を使用しています。slick本体とjQuery本体はCDNで外部から読み込んでるので別途ダウンロードは不要です。

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

個人サイトでマンガ公開する方増えるといいな～そしてあわよくばそれをスマホでも見れたらもーっといいな～ということで公開します。
どうぞよきWEBマンガライフを！

動作確認：【PC（Windows10）】chrome/firefox/IE11/Edge　【iPad】Safari/chrome　【Android】chrome

既知の現象（ver2.1現在）：
・Android版chromeで拡大モード時、ブラウザの「ユーザー補助機能＞強制的にズームを有効にする」にチェックが入っている場合、「拡大モードを解除」バーが上部にfixedしない
・iOS版Chromeでのダブルタップ判定がシビア（ほぼ2本指タップで認識）

Tweet

ファイル構成

★BOOTHでも同じ内容のものを配布中です。

使い方

1)「comic」フォルダにファイル名を連番にした漫画画像を入れます。

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

3)14～19行目を編集します。

例…URL「http://ほにゃらら/index.html」のサイトで「太郎」が公開している「32」ページの「png」形式の画像の「左ページ始まり」の「名無しの権兵衛の冒険」という作品の場合

var page = 32; //ページ数
var imgtype = "png"; //画像の拡張子
var title = "名無しの権兵衛の冒険"; //タイトル名
var site = "http://ほにゃらら/index.html"; //サイトのURL
var copy = "太郎"; //作者名
var display = 0; //左ページ始まりは「0」、右ページ始まりは「1」

4)アップロードして完成！

応用

タイトルが長すぎて、スマホで見た時変なとこで改行されちゃう……任意の場所で改行したい。

index.htmlの31行目を使いましょう！

//$("h1").html("サンプル<br>テキスト");

行頭の「//」を削除し、「サンプル<br>テキスト」のところを書き換えてください。

ページを指定してリンクを貼りたい。

連載作品では、最新更新ページへのリンクを貼ることも多いかと思います。
リンクする際、URLの末尾に「?p=任意の数字」を入れることで、アクセスした際に最初に表示するページを指定することができます。

例：サンプル漫画の5P目にリンク
https://guardian.bona.jp/st/cv/slick_custom2/sample/index.html?p=5

最後のページにweb拍手や告知等のコンテンツを追加したい。

index.htmlの
<!--フリー追加ゾーンここから--> ～ <!--フリー追加ゾーンここまで-->
の間に収まるようにコンテンツを追加してください！

メニューや最後のページにリンクボタンを追加したい。

よく使うと思われる次の話・前の話リンクボタンのテンプレをindex.html内にコメントアウトで作成済みです。
「ボタンを追加する場合は以下をコメントアウト解除して編集」の部分を指示通りコメントアウト解除して編集してご利用ください！

最初に表示されるガイドを非表示にしたい。

index.htmlの
<!--初期表示ガイドここから--> ～ <!--初期表示ガイドここまで-->
をまるっと削除してください！

最初に表示されるガイドの内容を変更したい。

index.htmlの
<!--ガイド内容ここから--> ～ <!--ガイド内容ここまで-->
を編集してください！
ガイドは数秒後に自動でフェードアウトする設定になっていますが、注意事項などの必ず読んでほしい内容を記載する場合はcomic.jsの119行目

$(this).delay(5000).fadeOut("fast");

を削除すると、クリック操作を行うまで表示し続けるようになります。

画像の読み込み方法を変更したい。

デフォルトではページを開いた時に全ての画像が読み込まれます。
これを一枚ずつ読み込み(次のページに移動した時に読み込み)に変更できます。
comic.jsの60行目(スマホ表示版)と、76行目(PC表示版)を編集しましょう！
progressiveとなっているところを、ondemandに変更してください。

lazyLoad: 'ondemand',

詳しくはslickのオプションを参考にどうぞ！
slickドキュメント翻訳

画像の大きさってどれくらいがいいの？

昨今はモニタも高解像度化が進んでいるので、私は現在のところ長辺1500Pxくらいにしてます。一番でかいiPadで見てもぼやけない！
ファイルサイズは減色して平均300～400KBくらいです。良い減色ソフトがあれば教えてほしい！
私はpng派ですが、グラデーション多めの作風の方ならjpgの方がいいかもです。

左綴じの内容のため、左→右へページ送りするようにしたい。

カスタマイズすれば可能です。以下の編集を行ってください！

【1.画像表示を左→右へ変更】
まずcomic.jsの62行目及び78行目の「rtl:true,」を削除します。
次にcomicフォルダ内のindex.htmlの38行目<div class="slider" dir="rtl">から「dir="rtl"」を削除してください。

【2.両端クリックでのページ送り操作を入れ替え】
デフォルトでは左端クリックでページが進むようになっているため、この配置を入れ替えます。
comi_style.cssの141行目～156行目を以下のものに書き換えてください。

.next-arrow{
    text-align: right;
    padding-right: 30px;
    right: 0;
}
.next-arrow span::before{
    content: '\e903';
}
.prev-arrow{
    text-align: left;
    padding-left: 30px;
    left: 0;
}
.prev-arrow span::before{
    content: '\e902';
} 

【3.ページャーを左→右へ変更】
デフォルトではmenuのページャーは右→左へ動くようになっているので、これを変更します。
comi_style.cssの84行目～93行目を以下のものに書き換えてください。

.slick-dots{
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    width: 98%;
    height: 14px;
    border-radius: 25px;
    overflow: hidden;
}

【4.キーボード操作のキーを変更】
デフォルトでは←キーでページ送り、→キーで前のページに移動します。これを入れ替えます。
comic.jsの141行目～152行目「キーボード操作」の内容を以下のように書き換えてください。

$(document).keydown(function(e) {
    if(e.keyCode === 37){//右　次のページ
        $slider.slick('slickPrev');
    }else if(e.keyCode === 39){//左　前のページ
        $slider.slick('slickNext');
    }else if(e.keyCode === 40){//下　メニュー表示
        $(".menu_show").slideToggle(300);
    }else if(e.keyCode === 38){//上　拡大モード
        zoomSetting();
    }
});

またcomicフォルダ内index.htmlの112行目～113行目を以下のように書き換えてください。

<li>→キー……次のページ</li>
<li>←キー……前のページ</li>

以上でページ送りが左→右になります。

slick本体とjQuery本体が外部から読み込みってことは、読み込めなくなったら動かなくなるの？（2021/7/25追記）

はい、そうです。slick及びjQueryの公式側でCDN配信を停止した場合は動かなくなります。
またCDNのサービス自体がいつか終了することもあるかもしれません。WEB界隈の移り変わりは激しいので……。

などと不安を煽ってしまいましたが、解決策はございます。
設置の簡易さを優先して外部読み込みを採用していますが、各スクリプトは公式サイトからダウンロードすることも可能ですので気になる方は別途ダウンロードしてご利用ください！

・jQuery 公式サイト
なんかいい感じのマンガビューアver2.0での使用バージョンは3.4.1ですが、最新の3.6.0でも動作は確認済みです。
TOPのデカい「Download jQuery」ボタンを押した後、「Download the compressed, production jQuery 3.6.0」を右クリックで保存してください。
その後index.htmlの10行目を編集してダウンロードしたものに差し替えてください。

・slick 公式サイト
なんかいい感じのマンガビューアver2.0での使用バージョンは1.9.0ですが、1.8.1でも動作は確認済みです。
「Download Now」ボタンからダウンロードしてください。使うのは「slick」フォルダ内の「slick.css」「slick.min.js」の2つです。
index.htmlの7行目に「slick.css」、143行目に「slick.min.js」を、それぞれ編集してダウンロードしたものに差し替えてください。

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

• slickドキュメント翻訳
• slick.jsを使用したスライダをスマホでは適用させてPCでは静止画表示にする方法
• JavaScript(jQuery)でスマートフォン（iPhone, iPad, Android）を判別する
• ベンダープレフィックスなしで、フルスクリーン表示
• 【解説】iPad OSのユーザーエージェントに「iPad」が含まれない理由
• ダブルタップのイベントを設定する方法
• jQueryで特定の要素以外をクリックした時に操作させる方法

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

ライセンスについて

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