About - WCR Comic Viewer とは？

WCR が提供するきわめて簡単に設置が可能なウェブコミックビューワです。
JavaScript で動作するビューワですが、デフォルトの状態で設置をするだけならスクリプトの知識は一切不要です。それでいて以下のような機能に対応しています。

画面遷移を伴わないスムーズなページ送り
画像クリックによるページ送り
ページの先読みによるストレスのないページ送り
ページ数入力による任意のページへのジャンプ
しおり機能による任意のページからの再開
しおりの自動保存による最後に開いたページの自動記憶
スクロールで隠れた部分の自動表示
New! 最終ページ指定によるページの自動生成

設置に最低限必要なのは画像ファイルのリストを作る事だけ。後は提供されているスクリプトを呼び出す 1 行を追加すれば、それだけでサンプルのようなビューワがいとも簡単に設置できます。
これらの機能を操作するためには当然、操作ボタンが必要なのですが、操作ボタンの HTML を記述する必要すらありません。

WCR Comic Viewer を採用して頂けましたら、是非 [Contact] からご連絡下さい。
ある程度の数が集まりましたら、リンクページを作成し公開させて頂きます。

Topへ

Sample - サンプル

上記のビューワを設置するために最低限必要な HTML は下記の通りです。信じられないかも知れませんが、本当にこれだけです。

<html>
<head>
  <script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
</head>
<body>
<ul id="wcrcv_list">
  <li><a href="sample/00.gif"></a></li>
  <li><a href="sample/01.gif"></a></li>
  <li><a href="sample/02.gif"></a></li>
  <li><a href="sample/03.gif"></a></li>
  <li><a href="sample/04.gif"></a></li>
  <li><a href="sample/05.gif"></a></li>
  <li><a href="sample/06.gif"></a></li>
</ul>
</body>
</html>

New! バージョン 1.2.0 以降、さらに簡単な記述が可能になりました。設置するページ数が多い場合など、リストを作成するのが手間であれば、下記のような書き方も可能です。
これは、上記の指定と全く同じように動作します。

<html>
<head>
  <script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
</head>
<body>
<ul id="wcrcv_list">
  <li><a href="sample/00.gif" title="lastpage=6"></a></li>
</ul>
</body>
</html>

表紙だけフルカラーの png で、後は白黒の gif という場合でも下記のように書けます。
使用する画像ファイルのファイル名にもほとんど制限はありません。開始番号や桁数、ページ数の前の名前などは自由なものが使えて、それぞれ自動で判断されます。

<html>
<head>
  <script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>
</head>
<body>
<ul id="wcrcv_list">
  <li><a href="sample/cover.png"></a></li>
  <li><a href="sample/page001.gif" title="lastpage=32"></a></li>
</ul>
</body>
</html>

詳しくは設置方法を参照して下さい。

Topへ

Setting - 設置方法

基本設定

WCR Comic Viewer を設置するのに最低限必要な項目について順に説明します。後半にはカスタマイズ方法についての解説もありますが、ここで説明する基本設定については全て共通です。

1. 画像の作成とアップロード

ウェブコミックの元となる画像を作成してサーバにアップロードして下さい。画像形式 (gif/jpg/png) にも、画像をアップする場所にも、画像ファイル名にも、何の制限もありません。
唯一の制限は、同時に読み込む画像は全て縦と横の幅を統一させるという点です。途中でサイズの異なる画像が混在していると、ページのスクロール時に計算がずれてしまいます。

2. リストの作成

作成した画像をリスト化した HTML ファイルを作成します。リストは必ず、番号無しリスト (ulタグ) で作成し、各項目 (liタグ) 内に画像へのリンク (aタグ) を持つという構造にして下さい。
画像のリンク先は、別のサーバでも、絶対パスでも相対パスでも、とにかく画像にリンクできていればなんでも構いません。リンクテキストは設定しなくても良いですが、JavaScript が利用できないブラウザ向けにページ数などを入れておくと良いです。
例えば以下のような HTML になります。

<ul>
  <li><a href="comic/top.jpg">表紙</a></li>
  <li><a href="comic/01.gif">1</a></li>
  <li><a href="comic/02.gif">2</a></li>
  <li><a href="comic/03.gif">3</a></li>
  <li><a href="http://other.server.com/comic/p04.gif">4</a></li>
  <li><a href="http://other.server.com/comic/p05.gif">5</a></li>
  <li><a href="http://other.server.com/comic/p06.gif">6</a></li>
</ul>

New! バージョン 1.2.0 以降、画像リストの省略表記が可能になりました。
a タグの title 属性に、「lastpage=?」という書式で最後のページ数を指定する事で、そのページ数までのリストを作成したのと同様の結果になります。
ページ数は、href 属性に指定された数から、lastpage に指定された数まで 1 ずつ加算されていき、画像ファイル名は自動的に生成されます。
最も簡単な例では、以下のような HTML になります。

<ul>
  <li><a href="comic/p01.gif" title="lastpage=32"></a></li>
</ul>

リストが自動生成されるためには、画像ファイル名の付け方に一定のルールがあります。
以下の条件を満たすように画像ファイル名を付けて下さい。

拡張子がgif/jpg/jpeg/png のいずれかになっている (大文字/小文字は区別しません)
ファイル名の最後が数字で終わっている
ファイル名の数字の前の名前が統一されている
ファイル名の数字の桁数が統一されている

良い例: 1.gif ～ 100.gif
comic_0000.jpg ～ comic_0100.jpg
P01.PNG ～ P100.PNG
001-001.gif ～ 001-100.gif
悪い例: 1.bmp ～ 100.bmp
1page.jpg ～ 100page.jpg
page_1.png ～ p_100.png
p01.gif ～ p0100.gif

これらを踏まえて最初の例を書き直すと、以下のように書いても同じ動作になります。

<ul>
  <li><a href="comic/top.jpg">表紙</a></li>
  <li><a href="comic/01.gif" title="lastpage=3">1</a></li>
  <li><a href="http://other.server.com/comic/p04.gif" title="lastpage=6">4</a></li>
</ul>

3. スクリプトの読み込み

HTML ファイルのヘッダ (headタグ) 内に以下の1行を追加します。

<script type="text/javascript" charset="UTF-8" src="http://viewer.webcomicranking.com/js/wcrcv.js"></script>

以上で基本設定は完了です。これだけで、画像リストを作成した位置にサンプルのようなビューワが埋め込まれます。
ただし、同じページ内に番号無しリスト (ulタグ) が複数ある場合は、画像リストの読み込みに失敗する場合があります。その時は、画像リストを明示的に指定して下さい。

4. 画像リストの明示的な指定

HTML ファイル内に複数の番号無しリスト (ulタグ) が複数ある場合は、画像リストの読み込みに失敗する場合があります。そのため、明示的に画像リストを指定する方法が用意されています。
画像リストとなっている番号無しリスト (ulタグ) に、id 属性として "wcrcv_list" を追加して下さい。HTML としては以下のような形です。

<ul id="wcrcv_list">
  :
  :
</ul>

Topへ

簡単カスタマイズ

WCR Comic Viewer は、簡単に設置できる事をポイントにしていますが、見た目や動作に関しても簡単にカスタマイズできるようになっています。

1. オプションの指定方法

WCR Comic Viewer では様々なオプションが指定可能です。以下の書式で、HTML ファイルのヘッダ (headタグ) 内にオプションを記述して下さい。
正確な記述でなければならないので、以下の HTML をコピーしてから書き換える事をお勧めします。
名前 (name) とそのオプション値 (value) の区切りは「: (セミコロン)」、値と値の区切りは「, (カンマ)」、最後の値の後にはカンマが入らない事に気を付けて下さい。
記述を間違ってもエラーにはなりませんが、間違った記述のオプション値は反映されません。

<script type="text/javascript">
var WCRCV_OPTION = {
  name1 : value1,
  name2 : value2,
  name3 : value3
};
</script>

2. オプションとして指定可能な値

以下の一覧にある値を、オプションとして指定可能です。何も指定しなかった場合は、デフォルト値として動作します。

ビューワの動作
名前	説明	設定可能な値	デフォルト値
page_clickable	ページをクリックした時に、次ページへ進めるかどうか。	true false	true
scroll	ページ送りの時のスクロール方向。'none' に指定するとスクロールせずにページを切り替える。	'left' 'right' 'down' 'none'	'down'
window_scroll	ページ上部が隠れてしまっている場合に、自動でスクロールするかどうか。	true false	true
view_pages	現在のページ数を表示するかどうか。	true false	true
use_jump	ページ数を指定して開く機能を使用するかどうか。	true false	true
use_bookmark	しおり機能を使用するかどうか。	true false	true
ビューワのデザイン
名前	説明	設定可能な値	デフォルト値
bg_color	ビューワ全体の背景色。	HTML や CSS の色指定で指定可能な記述。	'#000'
font_color	ビューワ全体の文字色。		'#fff'
border_color	ビューワ全体の枠の色。		'#999'
メニューのデザイン
名前	説明	設定可能な値	デフォルト値
menu_width	メニュー部分の横幅。単位はピクセル。	正の整数	100
menu_side	メニューを表示させる左右の位置。	'rigth' 'left'	'right'
image_path	ボタン画像をアップロードしてあるフォルダの URL。(※)	任意の「/」で終わる URL	'http://wcrcv. ... images/'
form_bg_color	ページ数指定フォームの背景色。	HTML や CSS の色指定で指定可能な記述。	'#ccc'
form_font_color	ページ数指定フォームの文字色。		'#000'
form_border_color	ページ数指定フォームの枠の色。		'#fff'
msg_bg_color	メッセージ領域の背景色。		'#f66'
msg_font_color	メッセージ領域の文字色。		'#fff'
msg_border_color	メッセージ領域の枠の色。		'#fff'

※BACK / NEXT / SAVE / LOAD の 4 つのボタンをカスタマイズする事が出来ます。back.gif / next.gif / save.gif / load.gif という画像をアップロードして、アップロードしたフォルダ (ディレクトリ) を指定して下さい。しおり機能を使用しない場合、save.gif / load.gif は不要です。

3. オプション指定例 1

ページをクリックしても次ページに進まない、スクロール方向を左に変更、しおり機能を使わない、背景色と文字色を反転。
»オプション指定例 1 を別ウィンドウで表示

<script type="text/javascript">
var WCRCV_OPTION = {
  page_clickable : false,
  scroll : 'left',
  use_bookmark : false,
  bg_color : '#fff',
  font_color : '#000'
};
</script>

4. オプション指定例 2

背景色を変更、枠の色を変更、メニューの幅を 150 に変更、メニューの場所を左に変更、ボタン画像を置き換え。
»オプション指定例 2 を別ウィンドウで表示

<script type="text/javascript">
var WCRCV_OPTION = {
  bg_color : '#036',
  border_color : '#fff',
  menu_width : 150,
  menu_side : 'left',
  image_path : 'http://viewer.webcomicranking.com/option2/'
};
</script>

Topへ

完全カスタマイズ

WCR Comic Viewer はその機能だけをパーツのように配置して、全てのデザインを完全にカスタマイズする事も可能です。
この場合、あらかじめ決められた id 属性を設定する事で、その id を設定したタグが、各機能を持ったパーツとして動作するようになります。
以下の一覧にある id を指定したタグを、任意の位置に設置してページをデザインして下さい。完全に自由なデザインの中で、WCR Comic Viewer が動作します。

設定可能な id 属性
id 属性	利用可能なタグ	説明
wcrcv_canvas	任意のブロック <div>, <p> 等	ビューワ全体。これ以降のタグは全て、wcrcv_canvas 内に記述する。
wcrcv_page		画像を表示するスペース。このタグ内は自動的に削除されて代わりの画像に置き換えられる。スクリプト読込み前にデザインを調整する際は、タグ内に代わりの画像を設定しておくとデザインしやすい。
wcrcv_menu		各種操作ボタンなどを表示するスペース。これ以降のタグは全て、wcrcv_menu 内に記述する。
wcrcv_back	任意 <img>, <button>, <a> 等	各種操作ボタン。順に BACK / NEXT / SAVE / LOAD ボタンが指定できる。非表示とした場合はその機能自体が使えなくなる。
wcrcv_next
wcrcv_save
wcrcv_load
wcrcv_autosave	<input type="checkbox" />	自動保存を有効にするチェックボックス。非表示とした場合は自動保存自体が使えなくなる。
wcrcv_num	<input type="text" />	ジャンプのためのページ数入力欄。非表示とした場合はページジャンプ自体が使えなくなる。
wcrcv_pages	任意(※) <div>, <p>, <span>, <u>, <b> 等 ※任意のタグが使用可能だが、このタグの別の内容に置き換えるため、開始タグと閉じタグがペアになるようなタグでなければならない。	現在のページを表示する欄。
wcrcv_msg		メッセージ表示領域。初期状態では必ず非表示に設定される。しおりの SAVE/LOAD 時などにメッセージを表示。

また、リンク先としてアンカーに p + ページ数を指定すると、指定したページを開いた状態でビューワが起動します。

<a href="comic.html#p4">4ページ目から開く</a>

これはビューワが設置されているページも同様で、ページ内リンクとしてアンカーを指定すると、そのページを開く事が出来ます。

<a href="#p7">7ページ目を開く</a>

»完全カスタマイズ例を別ウィンドウで表示
»完全カスタマイズ例を 3 ページ目から別ウィンドウで表示

Topへ

動作条件

以下のブラウザにて動作確認を行いました。
Internet Explorer 7.0
Internet Explorer 6.0
Firefox 3.0
Firefox 2.0
Safari 3.1
Opera 9.6
Opera 9.0

Topへ

備考

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

Topへ

License - ライセンス

本スクリプトは、MIT License (日本語訳)で公開します。

要約すると、MIT Licenseとは次のようなライセンスである。
1. このソフトウェアを誰でも無償で無制限に扱って良い。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載しなければならない。
2. 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。
※Wikipedia より引用

また、事前に予告無くバージョンアップを行う場合があります。
ただし、バージョンアップに際しては、下位互換を重視し、既存のビューワに与える影響を最小限にとどめるよう努めます。

Topへ

Contact - お問い合せ

ご意見やご感想、不具合のご報告や、WCR Comic Viewer 採用のご連絡などお待ちしております。
下記のフォームよりご連絡下さい。

フォームが表示されない場合や正常に動作しない場合は、下記のアドレスまでメールで直接お問い合わせ下さい。
contact◎webcomicranking.com (◎を半角の @ に置き換えて下さい)

Topへ

About - WCR Comic Viewer とは？

Sample - サンプル

Setting - 設置方法

基本設定

簡単カスタマイズ

完全カスタマイズ

動作条件

備考

License - ライセンス

Contact - お問い合せ

News