Comic Leader
Web漫画のページ作り
どうにかストリクトでスマートな、Web漫画をスムーズに閲覧できるようにするものはないか、と7さんに相談したところComic LeaderというJSを作成して頂きました。
Web漫画の表示の方法として5つあります。
- 1つのHTMLに1ページずつ掲載し、nextとbackをリンクさせる方法
- 1つのHTMLにいくつかのページを掲載し、nextとbackをリンクさせる方法
- 1つのHTMLに話の全てを掲載させる方法
- 1つのHTMLにa要素で画像を直接リンクさせる方法
- 1つのHTMLフレーム仕様に、a要素で画像を直接リンクさせる方法
- 1つのHTMLにJSで処理させる方法
これらのメリットとデメリットをそれぞれ説明します。
| 方法 | メリット | デメリット |
|---|---|---|
| 1つのHTMLに1ページずつ掲載し、nextとbackをリンクさせる方法 |
|
|
| 1つのHTMLにいくつかのページを掲載し、nextとbackをリンクさせる方法 |
|
|
| 1つのHTMLに話の全てを掲載しさせる方法 |
|
|
| 1つのHTMLにa要素で画像を直接リンクさせる方法 |
|
ブラウザでのBACK使用から次の画像を選なばければならず、億劫になる恐れ |
| 1つのHTMLフレーム仕様に、a要素で画像を直接リンクさせる方法 |
|
画像の大きさにもよるが、スクロールを二箇所しなければならない場合はスクロールが億劫になる恐れがある |
| 1つのHTMLにjsで処理させる方法 |
|
JSをONにしていない閲覧者には意味がない |
作成者、閲覧者両者ともに快適な方法は、5つ目のJSで処理させる方法です。しかし、これはJSが有効である状態のブラウザでないと意味がありません。漫画のページ数が少ない状態では、数ページ毎の表示は有効ですが、長編になるとデメリットの方が大きくなり難しくなります。長編を表示させたい場合はJSなどを利用することを考慮したほうがいいかもしれません。それぞれ量に応じたページ作りをすることが望ましいと考えます。
特徴
ここではComic LeaderというJSを使用したページつくりを紹介します。
このComic Leaderの特徴としては、
- 画像は、順番にどんどん先読みされていく為、ダウンロードの待ち時間がほぼ必要なくなる。
- 最初のページ、最後のページに移動ができる。
- キージェスチャー機能搭載。
- 画像の拡大・縮小機能。
- 単ページ、見開きに対応。
- hidden属性で、最初のページ、最後のページ、拡張子、桁数が調整できる。最初のページ、最後のページを設定しておくことで、仮に最後のページから更にページを捲ることはできないという仕様になる。なので、どこが最後のページなのかということが分かりやすくなる。
- cookieを利用したしおりを挟む機能がある。しおりを挟むには、漫画のページを開いた状態でCookieのチェックボックスをオン状態にする。例として。10Pまで読んだ後10P目を表示している状態を指す。Cookieが削除されない限りは、ブラウザを閉じてもその状態は保存される。
- このJSを利用しているページに、http://～～.html?10と別ページからリンクを張ると、JSを利用しているページの漫画で10Pが直接表示できる。これは更新をお知らせするときなどに活用できることと思う。
などユーザビリティに優れた作りになっていて、重宝しています。
導入手順
導入したいページのHEAD要素内に、ダウンロードしたJSをリンクさせ、またそのページをサンプルページと同様の状態カスタマイズ可にするというごく簡単な作業です。
導入したいページのHEAD要素内には以下のように書きます。
<script type="text/javascript" src="Comic.js"></script>漫画に限らずとも、落書きなどを表示させるためにわざわざHTMLを作成するのも面倒である、という場合などにも使用できそうです。
Reference URI
- トラックバックのURIはhttp://glas-gather.org/mt/mt-tb.cgi/114です。
- この記事のURIはhttp://glas-gather.org/index/web/comic_leaderです。