●  ●
ver.2.02 [02.05.08]

漫画を閲覧するのにとても適していると思われる、JavaScriptのプログラムを解説します。
HTMLだと、漫画を公開しようとすると、html文書が漫画のページ数に比例して増殖してしまいますが、
このスクリプトを使うと、html文書は1つで、画像を追加するだけで済みます!
とっても便利なものなので、あなたも使ってみませんか?

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

IE4.0以降、NN3.0以降で動作/WINのみで確認(Mac情報歓迎!)

不具合情報 [02.08.13]
全ての皆様へ
Mac+ネスケ環境で動作しない、とのご報告を受けておりましたが、
新たに情報を戴き、ネスケのバージョンにより動作可能なようなので、
状況を以下に記載させていただきます。


動作○→ver.6.23
動作×→ver.4.7

ところで、この動作不能の原因ですが、勉強不足で申し訳ありませんが、
結局よく分かりませんでした(爆)。本当にスミマセン・・・。
しかし、上記の環境の方は極少数派と考えられますので(「たま’s Room」の訪問者の中では1%程度)

当面の対応としては、以下のいずれかでお願いしたいと思います。
・漫画のページに「1部のMac+ネスケ環境でで動作不能」の旨を記載していただく
・「まいっか」で済ます(あらら)
ご不便お掛けしますが、よろしくお願いします・・・。

「ver.2.00」「ver.2.01」をご利用の皆様へ
(バージョンは「comic.js」の最初の行に書いてあります。書いてなければ「ver.2.00」です)
Mac/Win関わらず、ネスケでセレクトボタンのジャンプが機能していませんでした。ゴメンナサイ・・・。
下から再ダウンロードして、「comic.js」ファイルを差し替えていただくか、
「comic.js」をテキストエディタで開いて、以下の様に赤字部分を追記してください。

(30・31行目)
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);


全くもってお手数お掛けしますが、よろしくお願いします・・・。

●まずは、スクリプトをゲット!

*あなたの漫画の画像は、何形式?*
「gif」形式の方はこちら

(comic_g.lzh/9KB)
「jpg」形式の方はこちら

(comic_j.lzh/27KB)
・上のいずれかのボタンをクリックして、「comic_g.lzh」あるいは「comic_j.lzh」というファイルをダウンロードしてください。
・ダウンロード後、「Lhasa」などのソフトで解凍してください。

・「comic_g」あるいは「comic_j」というフォルダが現れます。この内容は以下様です。ご確認ください。
「comic.js」「next.gif」「back.gif」comic01フォルダ
                            
└−「comic.htm」「1〜6.gif(jpg)」「owari.gif(jpg)」「tuduku.gif(jpg)」

解凍ソフトはvector窓の杜で入手できます。また、「ダウンロード」や「解凍」などの意味がよく分からない方は これらのサイトで解説してくれているので、参照してみてください。

●画像を準備。

漫画の画像は、全て番号で管理しなければなりません。「ページ数.gif(jpg)」と言う画像を用意するのです。
 1ページ目なら「1.gif(jpg、10ページ目なら「10.gif(jpg)」、100ページ目なら「100.gif(jpg)」と、画像に名前を付けます。

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

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

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

例えば、こんなカンジ。
−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」の方です。テキストエディタやHP作成ソフト等で開いて、変更しましょう。
下は、漫画の画像が「gif」形式の場合のスクリプトで解説しています。
HTMLの文法が、ある程度分かる方向けの説明になってますので、あしからず・・・。
まあ、ほとんど普通のHTML文ですので、レイアウトなど、分かるところはどんどん、あなた好みに変更してくださいね。
以下、
黒字がスクリプト本文、緑字が解説になっています。
<HTML>
<HEAD>
<TITLE>漫画のページ</TITLE>
-----------ここからJavaScript独特の部分・最大ページ数以外変更不可-------------
<SCRIPT Language="JavaScript">

<!--

//最大ページ数設定
MaxPage=5;←この数字を、あなたの漫画の最大ページ数に変更してください。

//-->
</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>p /5p</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">
↑次ページ先読み部分。小さく2ページ目を置いています。特に変更不要と思います。
</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="Go!" onclick="jump(this.form)">
↑ジャンプさせるボタン。name属性とonclick属性は変更しないこと。

<BR>
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>ここからは、ボタンを押すと、指定のページへジャンプする機能を置いています。
<BR>
<INPUT type="button" value="3ページ目" onclick="Num=3;routine()"><BR>
<INPUT type="button" value="5ページ目" onclick="Num=5;routine()"><BR>
↑onclick属性の中の、Num=の後ろの数字を、ジャンプさせたいページ数に変更します。
 <INPUT type="button" value="6ページ目" onclick="Num=6;routine()">という風にボタンを増やせます。

<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT> ここからは、セレクトフォームで指定のページへジャンプする機能を置いています。
<BR>
<SELECT name="sejump" onchange="seljump()">←この行は変更不可。
<OPTION value="1" selected>選んでジャンプ</OPTION>
<OPTION value="3">3ページ目</OPTION>
<OPTION value="5">5ページ目</OPTION>
↑それぞれのOPTIONタグの中の、value属性の数字を、ジャンプさせたいページ数に変更します。
 <OPTION value="6">6ページ目</OPTION>という風に選択肢を増やせます。

</SELECT><BR>
<FONT color="#cccccc">・・・・・・・・・・・・・・</FONT>
</FORM>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>
はい、お疲れさまでしたー。
 あとは、ブラウザで「comic.htm」を開いて、ちゃんと動くか確認してみてね。

●その他の注意点など。

・HP作成ソフトを利用している場合、漫画の画像をアップロードしようとする時に、3ページ(3.gif)目以降の画像を転送してくれないようです。(HPビルダーはしてくれない・・涙)
 そーゆー時は、手作業で、3ページ目以降の画像も転送対象に移しましょう。
・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」ボタン・任意ページジャンプ・現在ページ表示機能のみ装備。