Bootstrapで同人サイトは簡単に作れるの？やってみたよ。

2014年11月13日2019年8月10日

Bootstrapという簡単にレスポンシブサイトが作れるのがあるときいて、ずっとぐりぐりいじってました。
注意：素人が検証用に作ったので、すべての環境での動作保障は致しかねます。参考にどうぞ。

利用したツール

Bootstrap · The world’s most popular mobile-first and responsive front-end framework.･･･話題のCSSフレームワーク

WCR Comic Viewer – 超簡単ウェブコミックビューワ･･･WCRさんが提供する簡単に設置が可能なJavaScriptで動作するwebコミックビューワです。デフォルトの状態で設置をするだけならスクリプトの知識は一切不要ですが、カスタムも可能なので今回はそれをちょっと突っ込んでやってみました

参考にしたサイト

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) – ＠IT

体験後に持った私の感想は↓

HTMLのソースがある程度読めないと難しい。手打ちでHTML作ってる人ならわかると思う。中級者向けだなと触ってて思った。

ある程度HTMLタグがわかる人なら「Bootstrap」にあるSource codeをダウンロードしてコピペで何とかなる。レスポンシブの振り分けめんどクセ！の私には手間が省けるのはありがたいです。

製作時間：今回、基本のソースコピペで作ってみましたが１日がかりでした。

こんなかんじです。

で、自分としては「web漫画がメインのサイト」用にカスタムできないと使う理由がないので、今回「WCR Comic Viewer」をbootstrapに仕込むというのが可能かやってみました。

やってみた結果、親和性は高そう、と感じました。
WCRコミックスクリプトを本家サーバーから呼び出したページサンプルはこちら(別窓)
注意：現在、https://～のURLからの呼び出しにWCRコミックスクリプトが対応していないため、上記リンクではWEBコミック本体のJavascriptが動いていません。

wcr.jsをダウンロードして入れてどうなるかも試しました。

備考

WCR Comic Viewer はこのサーバ上にスクリプトファイルを置いたまま使用する事を念頭に作成されていますが、使用許諾に反しない限り、スクリプトをダウンロードして自分のサーバにアップして使用しても構いません。
WCR Comic Viewer を設置できるのは、1 ページにつき 1 個までです。複数のビューワを設置する事は出来ません。
（http://viewer.webcomicranking.com/より引用）

・設置方法＞完全カスタマイズ
こちらを参考にして自分のサイト用にjsの中身もいじってjsフォルダ配下に入れました。
記述はこんな感じ。↓

ロードのボタンもbootsrapのに変えてみました。

と、いうわけでbootsrapで同人サイトも作れるようです。
本家のテンプレコピペでレスポンシブできるのはいいですね。
CGI呼び出しはまた今度時間あったらやってみます。