漫画ビューアー調整版

「漫画ビューアー調整版」はFTPでアップする想定の、個人サイト向け漫画ビューアーです。宮幻ハツ氏のなんかいい感じのマンガビューア～slick-custom～の改変です。

改変元はMITライセンスで公開されています。

当初は自分用のつもりでしたが、誰にでも使えるかもしれない機能が増えてきたので、同じくMITライセンスで公開することにしました。

機能（変更点）

単ページ表示・見開き表示を動的に切り換える

改変元では読み込み時に決定していましたが、サイズ変更に追従するようにしました。

ピンチで拡大

スマホ時にピンチ操作で拡大できるようにしました。

上部メニュー

MENUを常時表示するのをやめ、上部タップや中央タップで出し入れするようにしました。
中身はページャーだけにしてシンプル化しました。

もろもろの操作

画面端ではタップ操作しか受け付けなかったのを、全面スワイプ操作できるようにしました。タップ操作もできます。
スワイプの縦成分を無視して、横に動かしやすくしました。
ホイール操作によるめくりを追加しました。

左→右進行への切り替え

左→右進行（横書きのめくり方向）に設定できます。

Adsense広告の表示

改変元では、Adsenseコードを貼るとレイアウトが乱れます。これはAdsenseコードが周囲のレイアウトをいじるためです。

Adsenseのゾーンを分けて動かすことで、最終ページに表示できるようにしました。完全にスムーズではありませんが、商業サイトっぽくしてみたい人向けに。

仕様が変わったら表示できなくなるかもしれません。対応できない可能性が高いので、おまけ機能と捉えて下さい。

使い方

sample以外のファイルやフォルダの名前・構成は変えないで下さい。

1. sampleフォルダを複製し、任意の名前を付ける（作品名など）
2. そのフォルダに表示させたい画像を入れ、連番にリネームする（サンプル画像1～4は削除する）
3. index.htmlをテキストエディターで開く
4. 14～19行目の作品情報を編集する
5. アップロードして完成！

最終ページのフリー追加ゾーンには手打ちで好きな内容を追加できます。
こうしたサムネ表示用には、画像を200*200pxで表示するthumbクラスと、その下のbuttonを同じ幅にするunder_thumbクラスが用意してあります。

Adsense広告の使い方

1. index.htmlの「Google Adsenseを使いたい場合は↓のコメントアウト解除」というコメントの次の行をコメントアウト解除する
2. 「Google Adsenseコード追加ゾーンここから」と書いてあるゾーンに広告表示コードを貼る
3. 最終ページ、ad-spacerクラスのdiv内に広告が表示されます

Adsenseコードにadsbygoogle.jsを読み込むスクリプト（script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”とある行）が含まれている時は、そこを除いて貼って下さい。

Adsenseコード追加ゾーンには、ダミーの広告表示コード（idがxxxx）が書いてあります。idを書き換えるか、丸ごと自分のコードと入れ替えて下さい。

広告はリロード時に１回だけ、その時の画面幅に応じて読み込まれます。その後のサイズ変更で広告が画面からはみ出す状態になった場合、広告は非表示になります。

広告側の問題で、配信されているのに表示されない時はあります。

ライセンス

含まれているスクリプトはいずれもMITライセンスで公開されています。この改変による追加・変更部分もMITライセンスで公開します。ソースコードおよび同梱のLICENSE.txt内にある著作権表示とライセンス表記を削除しない限り、ご自由にお使いいただけます。

ダウンロード

GitHubのReleasesページから最新版をDLしてください。
一番上の「comic_viewer_tune_リリース日付.zip」が配布用ファイルです。

不具合報告などはこちらの記事にコメントしてもらえたら幸いです。