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


サンプル

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

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

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

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

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


動作確認:【PC(Windows10)】chrome/firefox/IE11/Edge 【iPad】Safari/chrome 【Android】chrome

更新履歴:
  • 2021/1/31 ver2.0公開

    【新機能】
    ・左右開始ページの切り替えをhtml内で設定可能へ
    ・ボタン追加用のテンプレート追加
    ・URLでパラメータ渡してページ指定アクセス可能へ
    ・拡大モードの実装
    【変更】
    ・html内の入力項目をより簡易的に変更
    ・画像を上下中央揃えになるよう変更
    ・PC版メニュー表示をホバーからクリックに変更
    ・最終ページの改造可能ゾーンを明確化
    ・フォントアイコンをオリジナルに差し替え
    ・メニューから「最初から読む」ボタン削除(最終ページのみ設置)
    ・見開き→単ページへの切り替えタイミング幅を767px以下から768px以下へ変更
    【修正】
    ・ラストページのh1で、記号を含む場合表示がおかしくなる現象を修正
    ・ページャーのカウントとラインの間が詰まっているのを修正
    ・メニュー操作時に下にリンクがあると、貫通して反応してしまうのを修正
    ・IEの時は全画面ボタン非表示(動作しないため)
    ・chromeでの画像にじみを軽減
    ・ipad版safariだとPC用UIになるのを修正

  • 2019/8/13 ver1.3公開

    ・ブラウザ間でのデザイン統一

  • 2019/6/26 ver1.2公開

    ・ローディング画像load.gif追加

  • 2019/5/25 ver1.1公開

    ・スマホ閲覧時、操作ヘルプの×ボタンが反応しないバグ修正

  • 2019/5/23 ver1.0公開

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

ファイル構成

初めに.html (使い方などの解説/アップロード不要)
「slick_custom_ver2.0」フォルダ (名前変更推奨というか必要なのは中身だけ)

∟comi_style.css (名前変更不可・移動不可)
∟comic.js (名前変更不可・移動不可)
∟「images」フォルダ (名前変更不可・移動不可) フォルダ内の画像を差し替える場合は同名で上書きしてください
「comic」フォルダ (名前変更OK) 作品の数だけコピーして使う

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

使い方

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