コミックスクリプト

漫画を閲覧するのにとても適していると思われる、ＪａｖａＳｃｒｉｐｔのプログラムを解説します。
ＨＴＭＬだと、漫画を公開しようとすると、ｈｔｍｌ文書が漫画のページ数に比例して増殖してしまいますが、
このスクリプトを使うと、ｈｔｍｌ文書は１つで、画像を追加するだけで済みます！
とっても便利なものなので、あなたも使ってみませんか？

●主な機能●
読者に任意のページを入力させ、そこにジャンプ！
ページをめくる毎に、漫画の上端に戻ります。（縦長漫画に有用♪）
読者が漫画を読んでるうちに、次のページを読み込みます。（待ち時間が少なく感じ、快適～）
なにはともあれ、百聞は一見にしかず！！>> [サンプルページを見る]

●画像を準備。

・漫画の画像は、全て番号で管理しなければなりません。「ページ数.gif(jpg)」と言う画像を用意するのです。
　１ページ目なら「1.gif(jpg、１０ページ目なら「10.gif(jpg)」、１００ページ目なら「100.gif(jpg)」と、画像に名前を付けます。
・画像の大きさ（タテ・ヨコの幅）は、全て統一します。
・ダウンロードしたフォルダに入っている「1～6.gif(jpg)」の画像は、ただのサンプルですので、あなたの漫画画像と差し替えてくださいね。
・「owari.gif(jpg)」「tuduku.gif(jpg)」は、漫画が最終ページに来たときに、次ページ先読み部分に表示する為の画像です。
　ファイル名を「漫画の最大ページ数＋１」に変更して使用します。
　例えばサンプルでは、最大ページ数が５ページですので、「6.gif(jpg)」＝「owari.gif(jpg)」になっています。
　完結する漫画なら「owari.gif(jpg)」を、続きモノなら「tuduku.gif(jpg)」を使ってくださいね。
　もちろんご自分で制作されても構いません。大きさは、２０*３０ピクセルです。
・「next.gif」「back.gif」はそれぞれ、「NEXT」ボタン、「BACK」ボタン用の画像です。
　たまが適当に作ったボタンですので、そのまま使っていただいても結構ですし、ご自分で制作されても構いません。大きさは、お好みでどうぞ。

●スクリプトを置きます！

･まず、あなたのホームページの適当なところに、適当な名前のフォルダを作ります。ここでは仮に、「comic」と名前を付けます。
・この「comic」フォルダの中に、「comic.js」「next.gif」「back.gif」を入れます。更に、ここに適当な名前のフォルダを作り（仮に「comic01」とします）、その中に、「comic.htm」と漫画の画像一式を入れて、配置完了です。
・もし漫画が２本以上ある場合は、下の分枝図の薄いグレーの部分の様にフォルダを増やしていきます。

例えば、こんなカンジ。

－index.html [トップページ]
└－－comic [任意のフォルダ]
　　├－－－－comic.js
　　├－－－－next.gif
　　├－－－－back.gif
　　├－－－－comic01[フォルダ名はお好みで]
　　｜　　├－－－－comic.htm
　　｜　　├－－－－1.gif(jpg) [漫画画像]
　　｜　　：
　　｜　　：
　　｜　　└－－－－***.gif(jpg)
　　└－－－－comic02[フォルダ名はお好みで]
　　　　　　├－－－－comic.htm
　　　　　　├－－－－1.gif(jpg) [漫画画像]
　　　　　　：
　　　　　　：
　　　　　　└－－－－***.gif(jpg)

・リンクは、「comic.htm」に貼ってくださいね。「comic.js」に貼っちゃダメですよ！
・ちなみに、「comic.htm」のファイル名は、変更して構いませんが、「comic.js」のファイル名は、変更禁止です。

●あなた用に改造～♪

手を加えるのは、「comic.htm」の方です。テキストエディタやＨＰ作成ソフト等で開いて、変更しましょう。
下は、漫画の画像が「gif」形式の場合のスクリプトで解説しています。
ＨＴＭＬの文法が、ある程度分かる方向けの説明になってますので、あしからず・・・。
まあ、ほとんど普通のHTML文ですので、レイアウトなど、分かるところはどんどん、あなた好みに変更してくださいね。
以下、黒字がスクリプト本文、緑字が解説になっています。

<HTML>
<HEAD>
<TITLE>漫画のページ</TITLE>
-----------ここからJavaScript独特の部分・最大ページ数以外変更不可-------------
<SCRIPT Language="JavaScript">

</SCRIPT>
<SCRIPT language="JavaScript" src="../comic.js"></SCRIPT>
-----------ここまでJavaScript独特の部分-------------
</HEAD>
<BODY bgcolor="#ffffff" TEXT="#999999">
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD>
<A name="top">←ページをめくる度に漫画の一番上にスクロールさせる為に、ラベルを付けています。
<IMG src="1.gif" width="200" height="300" border="0" name="myImage">
↑漫画のTOPページを置いています。width・heightは、あなたの画像の大きさに変更します。
</A>←ラベルの終わり。
</TD>
<TD align="center">
<FORM name="comic">←このname属性は変更してはいけません。
<FONT size="-1"><B>現在</B></FONT>
<INPUT size="4" type="text" name="nowpage" value="1" readonly>
↑現在のページ数を表示する部分。name属性は変更不可。他も変えなくて良いハズ。
<FONT size="-1"><B>ｐ　/５ｐ</B></FONT>
<BR>
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>
<BR>
<A href="#top" onclick="prev()"><IMG src="../back.gif" width="62" height="23" border="0"></A>
↑ページを戻るボタン。不要なら置きません。リンクは外さない。onclick属性は変更不可。
　また、自分で用意したボタン画像を使うなら、width・heightは変更します。
　<A href="#top" onclick="next()"><IMG src="../next.gif" width="62" height="23" border="0"></A>
↑ページを進むボタン。不要なら置きません･･･が、普通は要るよね。リンクは外さない。onclick属性は変更不可。
　自分で用意したボタン画像を使うなら、width・heightサイズは変更します。
<FONT size="-1"><BR>
</FONT>
<BR>
<TABLE cellspacing="1" bgcolor="#cccccc">
<TBODY>
<TR>
<TD><FONT color="#ffffff" size="-1"><B>次ページ読込中</B></FONT><BR>
<FONT size="-2" color="#ffffff">右の画像が表示され切ってから<BR>
次ページボタンを押して下さい</FONT></TD>
<TD>
<IMG src="2.gif" width="20" height="30" border="0" name="VIEW">
↑次ページ先読み部分。小さく２ページ目を置いています。特に変更不要と思います。
</TD>
</TR>
</TBODY>
</TABLE>
*ここから下の、
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>で挟まれたそれぞれの機能は、
不要の場合、任意で消してください。
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT> ここからは、ページを指定して、ジャンプする機能を置いています。
<BR>
<FONT size="2"><B>ページ指定（半角数字）</B></FONT><BR>
<INPUT size="6" type="text" name="page" value="1">←数字を入力させるフォーム。name属性は変更しないこと。
<INPUT type="button" name="go" value="Ｇｏ！" onclick="jump(this.form)">
↑ジャンプさせるボタン。name属性とonclick属性は変更しないこと。
<BR>
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>ここからは、ボタンを押すと、指定のページへジャンプする機能を置いています。
<BR>
<INPUT type="button" value="３ページ目" onclick="Num=3;routine()"><BR>
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()"><BR>
↑onclick属性の中の、Num=の後ろの数字を、ジャンプさせたいページ数に変更します。
　<INPUT type="button" value="６ページ目" onclick="Num=6;routine()">という風にボタンを増やせます。
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT> ここからは、セレクトフォームで指定のページへジャンプする機能を置いています。
<BR>
<SELECT name="sejump" onchange="seljump()">←この行は変更不可。
<OPTION value="1" selected>選んでジャンプ</OPTION>
<OPTION value="3">３ページ目</OPTION>
<OPTION value="5">５ページ目</OPTION>
↑それぞれのOPTIONタグの中の、value属性の数字を、ジャンプさせたいページ数に変更します。
　<OPTION value="6">６ページ目</OPTION>という風に選択肢を増やせます。
</SELECT><BR>
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>
</FORM>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>

・はい、お疲れさまでしたー。
　あとは、ブラウザで「comic.htm」を開いて、ちゃんと動くか確認してみてね。

●その他の注意点など。

・ＨＰ作成ソフトを利用している場合、漫画の画像をアップロードしようとする時に、３ページ（3.gif）目以降の画像を転送してくれないようです。（ＨＰビルダーはしてくれない・・涙）
　そーゆー時は、手作業で、３ページ目以降の画像も転送対象に移しましょう。
・JavaScriptが分かる方なら、「comic.js」のほうも改造しちゃっても構いません。まだまだ、改良の余地あると思いますしー。
・スクリプトの利用には、特に、連絡やこのページへのリンク貼付の義務はありません　が、教えてくだされば、喜びます♪
　さらに、「コミックスクリプト同盟」に参加してくださると、大喜びです～♪♪（現在は新規加入受付を休止中）
　同盟についてはこちら→

　*同盟に参加しなくても、スクリプトは使用OKですよ!!
・その他、分からないこと、不具合などがあれば、掲示板へカキコミお願いします。
　が、なにぶん、たまも、JavaScriptについては勉強中の身なのでなんでも分かるわけではありませんが・・（オイオイ）

ばーじょんあっぷの記録。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・02/05/08 ver2.02
ネスケでセレクトジャンプが動作不能だったのを修正。（謝辞to風美犬様）
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・02/01/30 ver2.01
Macで動作不能だったのを修正。（謝辞toREN様＆sumire様）
「NEXT」「BACK」ボタンを画像表示に。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・01/12/15 ver2.00
いっぱい機能追加。
（ページ先読み機能・めくると戻る機能・セレクトジャンプ機能）
関数部分を、外部ファイルに。
ページ指定機能で、範囲外の数字を入力すると、現在ページ数の表示が変なのを修正。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・公開日不詳 ver1.00
「NEXT」「BACK」ボタン・任意ページジャンプ・現在ページ表示機能のみ装備。