コミックスクリプト改造計画

ここは、たまさんが開発したcomic scriptをより使いやすく改造しよう！というページです。
スクリプトの改造は、たまさんも許可してくださっています（個別に許可をいただいたわけではなく、配布ページの下に書いてある）…が、そろそろ怒られるような気がしてがくがくぶるぶる。
改造したスクリプトを使うのに、私の許可を得る必要も、報告も、リンクも必要ありません。
ただし、改造したスクリプトについて、開発者であるたまさんに質問をするのは絶対にやめてください。
また、私は実を言うとJavascriptについてはずぶずぶの素人以前に基本がよくわかってません。です。改造後の責任は一切負いません、そしてご質問・ご要望は受け付けておりません。（たぶんお答えできませんので）
ただ、「この環境だと使えなかったよ」「この部分は、こうが正しいよ」という苦言（？）はお受けいたします。
以上の注意をおふまえになったうえで、さあ、スクリプトを改造してみましょう♪

●コミックスクリプトとは？
●漫画画像を「つづく」ボタンに
●NEXT　BACK　ボタンを「ボタン」に
●別ディレクトリに画像を置く
●「つづく」画像を自動で表示
●テキストリンクでジャンプ
●1.gif→01.gifに…
●“..／○ｐ”を自動入力
●見開きで公開する
└◎「見開き」のレイアウト提案
●スクロールで漫画をめくる
●最終ページ→第二話URLへジャンプ
●現在ページ[ 3]/○ｐを通常のテキストでnew!
●改造のコツとうまく動かないとき



●コミックスクリプトとは？
たま’ｓ　roomのたまさんが開発したweb漫画を快適に見るためのJAVAスクリプト。
このページで配布されており、サンプルもあります



▲ページ先頭へ


●漫画画像を「つづく」ボタンに
まず、comic.jsの改造に入る前に、ちょっとしたアドバイスというか、読み手の要望をば……
コミックスクリプトは、NEXTボタンをクリックすることにより、次へすすめる仕組みになっております。
大変画期的なシステムですが……この続くボタンがもっと大きいほうが、押しやすいと思いませんか？
そんなわけで、漫画ページで一番でかいであろう「漫画の画像」そのものをNEXTボタンと兼用してしまおうというものです。
これはまったく難しいことではありません。

comic.htmのメインの漫画画像を表示する
<IMG src="1.gif" width="200" height="300" border="0" name="myImage">
の部分にNEXTボタンのアンカータグをコピー＆貼り付けして、

<A href="#top" onclick="next()"><IMG src="1.gif" width="200" height="300" border="0" name="myImage"></A>

…とすればイイのです。これで、漫画の画像がリンクボタンになりました！
↓こんな感じ


ものぐさ太郎な私としては、少しでもリンクボタンが大きいほうがマウスを動かす手間がはぶけるのです。
特にページの大半を占める漫画画像がNEXTボタンになっていると、画面のどこをクリックしても次に進める！というヘンな快感があります。（私だけ？）



▲ページ先頭へ


●NEXT　BACK　ボタンを「ボタン」に
これは別に、好みによるものなので、無理に変える必要はまったくないのですが、画像もしくはテキストであるNEXTボタンを、

こんな感じのボタンにしてしまおうというだけです。


変更するところは、戻る、進むボタンの
<A href="#top" onclick="prev()"><IMG src="../back.gif" width="62" height="23" border="0"></A>
<A href="#top" onclick="next()"><IMG src="../next.gif" width="62" height="23" border="0"></A>
 という部分を、

<INPUT type="button" value="←BACK" onclick="prev()">
<INPUT type="button" value="NEXT→" onclick="next()">
…と変えればいいだけです。矢印はなんとなくつけてみただけです。
（表示文字を変えたいときは、value="○○"の部分をお好きに変更してください）

ちなみに、これに変更する利点は…………特にありません。
あえていうなら、「押した感じがする」感が好きなだけです…



▲ページ先頭へ


●別ディレクトリに画像を置く
さて、いよいよcomic.jsの改造にとりかかりますよ〜。

もし、comic.htmと漫画イメージを違うディレクトリに入れたい場合…

（イメージ）
―――comic/（漫画のディレクトリ）
　├――comic.js（スクリプト）
　├――comic.htm（漫画ページ）
　├――img/（漫画画像置き場のディレクトリ）
　　　├−−−−1.gif(jpg) [漫画画像]
　　　├−−−−2.gif(jpg) [漫画画像]
　　　 ：
　　　 ：
こんな感じにしたい場合。。。。。

まず、comic.htmと漫画イメージを引き離しましょう。新たにimgとかmangaとかとにかくそんな感じのディレクトリを作って、そこに漫画イメージを全部移動させてやりましょう。ここでは、例として「img」とします。
あっ！！あと、comic.htmとcomic.js（スクリプト）の位置関係が変わったときは、画像と同じ容量で、comic.htmの<SCRIPT language="JavaScript" src="../comic.js"></SCRIPT>の部分を適宜変更してください。同じディレクトリに置いたのなら、../をとるとか。（説明が下手すぎて泣ける）
そうしてcomic.htmを開くと、当然イメージが表示されませんよね。

まず、comic.htmを改造します。

<SCRIPT Language="JavaScript">
<!--

//最大ページ数設定
MaxPage=5;

//-->
</SCRIPT>
この部分を、

<SCRIPT Language="JavaScript">
<!--

//最大ページ数設定
MaxPage=5;
dir="img/";

//-->
</SCRIPT>
このように改造します。dir="img/";という文を足したのです。他のフォルダ名にしたければ、imgの部分をそのフォルダ名にしてください。
しかし、まだまだ画像は表示されないまま…



次にメインの漫画イメージ表示タグ
<IMG src="1.gif" width="200" height="300" border="1" name="myImage">
にimg/（もしくは『任意のフォルダ名/』）をぬるりと挿入して
<IMG src="img/1.gif" width="200" height="300" border="1" name="myImage">
と改造しましょう。

あともう一箇所、次のイメージを読み込んでおく部分にも同じように
<IMG src="2.gif" width="20" height="30" border="0" name="VIEW">
img/（もしくは『任意のフォルダ名/』）をぬるりと挿入して
<IMG src="img/2.gif" width="20" height="30" border="0" name="VIEW">
こんな感じにしてしまいましょう。
ようやく、イメージが表示されました！

しかし、NEXTボタンを押すと……

あわわわ、また「×」の嵐……！！


さて、そこでいよいよ、comic.jsの改造にとっかかりますよ！

…そのまえに、もうひとつ、comic.htmに変更を加えましょう。



のようにボタンでジャンプするシステムを使っている人は、（最新更新ページへじゃむぷ！とかで良く使われるやつです）
<INPUT type="button" value="３ページ目" onclick="Num=3;routine()">
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()">
routine()の部分をpgjump()に変えてもらい、
<INPUT type="button" value="３ページ目" onclick="Num=3;pgjump()">
<INPUT type="button" value="３ページ目" onclick="Num=5;pgjump()">
という感じにしてください。

さて、お待たせしました！今度こそcomic.jsの改造にとっかかりますよ！

まずcomic.jsをメモ帳かなにかで開いてください。
ぶっちゃけて変更する部分が結構多いので、面倒な人は内容を全部コピペしてください（笑）
「改造版」という文は別にいれなくても結構ですが…
黒字の部分がもともとのスクリプトで、赤字の部分が新しく足した部分です。

//--------------------------------comic script ver2.02 by tama
//--------------------------------改造版

Num=1;
Num2=2;

function next()
{
Num=Num+1
Num2=Num2+1;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=MaxPage+1;
routine();
}

function prev()
{
Num=Num-1;
Num2=Num2-1;
if(Num<1)Num=1;
if(Num2<2)Num2=2;
if(Num>MaxPage)Num=MaxPage;
routine();
}

function jump(PG)
{
n=eval(PG.page.value);
Num = n;
Num2 = n+1;
if ((n>0) && (n<=MaxPage)) {routine();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function seljump()
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
Num2=eval(document.comic.sejump.options[op].value)+1;
routine();
}


function pgjump()
{
Num2=Num+1;
routine();
}


function routine()
{
document.myImage.src=dir+Num+".gif";
document.VIEW.src=dir+Num2+".gif";
document.comic.nowpage.value = Num;
}

人によっては使わない部分もあるでしょうが、面倒なので説明は省きます。ボロが出ても困るし…（なにしろJavascriptなんててんで知らないため、なんとなくこう書いたら一応動いたな、というだけで…）

ただ、注意が必要なのは最後の
document.myImage.src=dir+Num+".gif";
document.VIEW.src=dir+Num2+".gif";
の部分、これは書き足しではなく
document.myImage.src=Num+".gif";
document.VIEW.src=Num+1+".gif";
の書き換えですので、ご注意ください。まあ、全部コピペしてくれれば問題ない…と思います。

さあ、書き換えたら上書き保存して、もう一度comic.htmを開き、操作してみてください！
うおぉぉ……きたぜ……ぬるりと……！！
うまくうごきましたか？………え、動かない？おかしいなあ。動くはずなんですけど。



▲ページ先頭へ


●「つづく」画像を自動で表示
コミックスクリプトのすぐれたところ（と私は思っている）に、「つづく」「おわり」という表示が出るというのがあります。
まあ、次の読み込み画像を1×1ピクセルとかで見えなくしている人もいるかと思いますので、そういう方にはまったく関係のないお話ですのでつぎつぎー。


comic.htmで設定した最大ページを超えると、続き読み込み画像が「つづく」や「おわり」にできるのですね。長編漫画を描き終わって、やっと「つづく」を「おわり」にできたときは感無量です…！
それはともかく、この「つづく」の表示方法。
最大ページを5とすると、「つづく」画像の名前を6.gifにしなければなりません。更新のたびに「つづく」画像の名前を変更するのは面倒ですし、下手するとキャッシュに残っていて、「更新ページにじゃ〜んぷ」したときに、かなりどでかい「つづく」が表示されることだってあり得ます。

そんな手間＆危険回避のために、「つづく」画像の名前をいっそ500.gifにしてやりましょう。
別に500じゃなくても結構です。なんしか「このページ数にはぜってぇいかねえ」という数をあてはめてください。「私の漫画は超長編なの！1000ページはいくわ！」という方なら、3000.gifでも結構です。（数字じゃなくてもいけると思いますけど面倒だから確認してません）


まずは、comic.htmの改造です。ただし、これは



のようにボタンジャンプを使っている人のみの変更になります。

<INPUT type="button" value="３ページ目" onclick="Num=3;routine()">
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()">
routine()の部分をpgjump()に変えてもらい、
<INPUT type="button" value="３ページ目" onclick="Num=3;pgjump()">
<INPUT type="button" value="３ページ目" onclick="Num=5;pgjump()">
のようにボタンジャンプを使っている人のみの変更になります。
※上の『●別ディレクトリに画像を置く』で書き換えた人は変更の必要はありません


それではcomic.jsの改造です。
comic.jsを開いて、赤字の部分をたしてください。
黒字の部分がもともとのスクリプトで、赤字の部分が新しく足した部分です。
ちなみに『●別ディレクトリに画像を置く』で書き換えた人はこの下参照

//--------------------------------comic script ver2.02 by tama
//--------------------------------改造版

Num=1;
Num2=2;
tsuzuku=500;

function next()
{
Num=Num+1
Num2=Num2+1;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=tsuzuku;
routine();
}

function prev()
{
Num=Num-1;
Num2=Num2-1;
if(Num<1)Num=1;
if(Num2<2)Num2=2;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=MaxPage;
routine();
}

function jump(PG)
{
n=eval(PG.page.value);
Num = n;
Num2 = n+1;
if ((n>0) && (n<=MaxPage)) {routine();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function pgjump()
{
Num2=Num+1;
if(Num2>MaxPage)Num2=tsuzuku;
routine();
}

function seljump()
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
Num2=eval(document.comic.sejump.options[op].value)+1;
routine();
}

function routine()
{
document.myImage.src=Num+".gif";
document.VIEW.src=Num2+".gif";
document.comic.nowpage.value = Num;
}
『●別ディレクトリに画像を置く』で書き換えた人はこちら↓
//--------------------------------comic script ver2.02 by tama
//--------------------------------改造版

Num=1;
Num2=2;
tsuzuku=500;


function next()
{
Num=Num+1
Num2=Num2+1;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=tsuzuku;
routine();
}

function prev()
{
Num=Num-1;
Num2=Num2-1;
if(Num<1)Num=1;
if(Num2<2)Num2=2;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=MaxPage;
routine();
}

function jump(PG)
{
n=eval(PG.page.value);
Num = n;
Num2 = n+1;
if ((n>0) && (n<=MaxPage)) {routine();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function seljump()
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
Num2=eval(document.comic.sejump.options[op].value)+1;
routine();
}


function pgjump()
{
Num2=Num+1;
if(Num2>MaxPage)Num2=tsuzuku;
routine();
}


function routine()
{
document.myImage.src=dir+Num+".gif";
document.VIEW.src=dir+Num2+".gif";
document.comic.nowpage.value = Num;
}
これで、一日に何度更新しようと「つづく」画像の名前を変える必要はありません！さあ、安心して更新してくださいｗ
なお、めでたく完結した人は、「おわる」画像の名前を500.gifにしてくれれば終わります。お疲れ様でしたｗ




●テキストリンクでジャンプ
さてさて、コミックスクリプトでNEXTやBACKボタン以外で別のページに移動する手段は３つあります。

その（１）
ページ指定（半角数字）

のように数字を入力し、GOボタンでジャンプするというもの。

その（２）


のように、ボタンでジャンプするというもの。

その（３）

というふうに、プルダウンメニューで選んでジャンプするというもの。

これにかわり、
1ページ
10ページ
15ページ
というふうに、テキストリンクを作ってしまおうというものです。

なぜもともとの３つの方法では満足できないか…？
なぜなら、……読み手の私が面倒くさいからです！！

（１）では必ずキーボードに触る必要があります。マウスにのっかっている右手を移動させるか、下手したらポテトチップスをつまんでいる左手をティッシュでちょっと拭いて、それからキーボードにのせ、数字を入力し、右手でクリックし、またポテトチップスの袋に手を突っ込む…というふうな手順をふまなくてはなりません。超ものぐさ太郎の私にとって、「漫画を読んでいる最中に手をキーボードに持っていく」という行為は億劫以外のなにものでもないのです。

（２）これはワンクリックでいけるじゃないか？ええ、そうです。これはめんどくさくないんですけど、このボタンを5ページごとに作るなんて、ちょっとレイアウト的にどうかと思うとき、ありますよね…。

これはあまりよろしくない。なので、「最新１頁前から見る」というボタンにしている人が多いわけです。

（３）それなら、プルダウンでいいじゃないか。いくらでも作れるし、隠せるし。
ええ…まあそうなんですけど、それも面倒なんですよね。なぜなら「選んでジャンプ」→「5ページ目」をクリックというふうに、2回クリックしなければならないから！！

そんなものぐさ太郎なヤツは漫画を読む資格はねえ！なんてゆわないでくださいよ。
だから、テキストリンクにする方法を一生懸命考えたんですよ…こういうところはまめでしょ？
これなら
1　10　15　20
↑こんなふうにちんまりとしおりを作れたり、
１：表紙
5p：〜出発〜
10p：〜出会い〜
↑というふうに見出しっぽいものを作れたり、
画像にだってできちゃいます＾＾

まあ、こんなもんなくても別にエエワ、という人はつぎつぎーー

さて、この改造方法です。

とりあえず、comic.htmに
３ページ目
５ページ目
のリンクを作ってみましょう。
まず、普通に書き込む…

まだ、リンクとしては機能していません。（当然です）
これを
<a HREF="#top" onclick="Num=3;routine()">３ページ目</a><BR>
<a HREF="#top" onclick="Num=5;routine()">５ページ目</a><BR>
というふうに、アンカータグを貼ってやりましょう。Num=3の数字の部分が、目的のページ数です。

さて、リンクになりました。

おわり。

え？comic.jsは？いじらなくていいの？？
はい、いじらなくて大丈夫です。
要は、ボタンを文字に変えただけなので、特殊なことはしなくていいのです。
なぁ〜んだ、簡単じゃん！

なお！！！上の
●別ディレクトリに画像を置く
●「つづく」画像を自動で表示
でスクリプトをいじった人は、
<a HREF="#top" onclick="Num=3;routine()">３ページ目</a><BR>
<a HREF="#top" onclick="Num=5;routine()">５ページ目</a><BR>
のroutine()の部分をpgjump()に変えて、
<a HREF="#top" onclick="Num=3;pgjump()">３ページ目</a><BR>
<a HREF="#top" onclick="Num=5;pgjump()">５ページ目</a><BR>
にしてください。

さて、うまくいきましたか？
行かない人は……まあ、考えて解決してくださいな！！



▲ページ先頭へ


●1.gif→01.gifに…
私は特に必要性を感じていなかったのですが、ちらほらと「コミックスクリプトで使用する画像の1.gif 2.gif....というのを、01.gif 02.gif...というふうにしたい」という要望を見たことがあります。
自力で解決できた人は、スルーしてください。

最近のパソコンではこのように名前順に並べると、

一桁の数字もきちんと並べてくれるのですが、
私が使っているFFFTPなんかはこんなふうに

一ケタ台が分散されてしまいます。
これを防ぐために、1.gif 2.gif....というのを、01.gif 02.gif...というふうにしようという計画なのです。

まず、画像の名前を1.gif 2.gif....→01.gif 02.gif...に変換してください。
当然、画像が表示されなくなってしまいました…


そして、comic.htmの
<INPUT type="button" value="３ページ目" onclick="Num=3;routine()">
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()">
routine()の部分をpgjump()に変えてもらい、
<INPUT type="button" value="３ページ目" onclick="Num=3;pgjump()">
<INPUT type="button" value="３ページ目" onclick="Num=5;pgjump()">
という感じにしてください。


次に、comic.jsを開きます。
変更点が結構多いので、いっそ全部コピペで……
※すでになにかしらcomic.jsを改造している人は、この下参照
なお赤字は書き足し、緑字は書き換えです。

//--------------------------------comic script ver2.02 by tama
//--------------------------------改造版


Num=1;
Num2=2;


function next()
{
Num=Num+1
Num2=Num2+1;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=MaxPage+1;
zero();
}


function prev()
{
Num=Num-1;
Num2=Num2-1;
if(Num<1)Num=1;
if(Num2<2)Num2=2;
if(Num>MaxPage)Num=MaxPage;
if(Num2>MaxPage)Num2=MaxPage;
zero();
}

function zero()
{
if(Num<10)Num3="0"+Num;
else Num3=Num;

if(Num2<10)Num4="0"+Num2;
else Num4=Num2;
routine();
}

function pgjump()
{
Num2=Num+1;
if(Num2>MaxPage)Num2=MaxPage+1;
zero();
}


function jump(PG)
{
n=eval(PG.page.value);
Num = n;
Num2 = n+1;
if ((n>0) && (n<=MaxPage)) {zero();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function seljump()
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
Num2=eval(document.comic.sejump.options[op].value)+1
zero();
}

function routine()
{
document.myImage.src=Num3+".gif";
document.VIEW.src=Num4+".gif";
document.comic.nowpage.value = Num;
}

----------すでにcomic.jsを改造している人は、そのままの状態から


function routine()
{
document.myImage.src=（dir+）Num+".gif";
document.VIEW.src=（dir+）Num2+".gif";
document.comic.nowpage.value = Num;
}

の部分を消してください。そして文中のroutine()をzero()にすべて書き換えてください。
そしてcomic.jsの一番最後に

function zero()
{
if(Num<10)Num3="0"+Num;
else Num3=Num;
if(Num2<10)Num4="0"+Num2;
else Num4=Num2;
routine();
}

function routine()
{
document.myImage.src=Num3+".gif";
document.VIEW.src=Num4+".gif";
document.comic.nowpage.value = Num;
}

を書き足してください。

これで、なんとかうまくうごくはずです。



▲ページ先頭へ


●“..／○ｐ”を自動入力
さて、コミックスクリプトには“☆／○ｐ”というふうに、現在ページ（☆）と総ページ（○）が表示できるとっころがありますよね。
現在ページは漫画を読み進めるごとに勝手に変わっていくというすばらしい性能があるのですが、問題は総ページ。

こればかりは、漫画を更新する際に、htmlファイルを開き、スクリプトの「最大ページ数」を入力したあと、自力で“..／○ｐ”の部分を探し、書き直さなければなりません。
でも、これって結構な手間なんですよねー、うっかりすると“現在[51]ｐ／４８ｐ”とかになっちゃったりして…って、そんなことすら面倒くさがるヤツは氏ね！って？ひどいこといわないでくださいよ、ちょっとイイコト考えたんですよ！

そんなわけで、今回は「最大ページ数」を書き換えるだけで、“..／○ｐ”の部分部分も一緒に変わるようにしちゃおうという計画です！
そんなことしなくても手書きでやるわはって方はつぎつぎー。でも、結構カンタンですヨ☆

まず、comic.htmの“..／○ｐ”を探してください。（例は５ｐ）

<FONT size="-1"><B>ｐ　/５ｐ</B></FONT>

。。。↑この部分を

<FONT size="-1"><B>ｐ　/
<script type="text/javascript">
<!--
document.write(MaxPage);
// -->
</script>
ｐ</B></FONT>

というふうに書き換えます。要するに、数字の部分をスクリプトに書き換えただけです。
これで、最大ページ数の変更が、“..／○ｐ”に反映されるようになりました！
…え、comic.jsは変えなくていいのかって？いいんです、これで大丈夫なんです！
…うーん、まだ疑ってるようですね！ではcomic.htm最大ページ数を115にしてみてください！
そして更新ボタンを押すと…

アラ不思議！全体ページ数まで変わっちゃいました♪
いやーこれで毎日でも更新ができますね！

…あれ？まだご不満そうですね？
あーそうですかー、お客さん、「最大ページ数」と「最終ページ」が違うってクチですね。最後のページは今回更新分はここまで！待て次号！なんてやってて、“..／○ｐ”の部分はそれより１ｐ前の数を書いてるって寸法ですな。
仕方ない、その部分も解決しちゃいましょう！

まずcomic.htmの

<SCRIPT Language="JavaScript">
<!--

//最大ページ数設定
MaxPage=10;

//-->
</SCRIPT>

に、緑字の部分を書き足します。

<SCRIPT Language="JavaScript">
<!--

//最大ページ数設定
MaxPage=10;
saidai=MaxPage-1;
 //-->
</SCRIPT>

そして先ほどと同じように、comic.htmの“..／○ｐ”を探して（例は１０ｐ）

<FONT size="-1"><B>ｐ　/１０ｐ</B></FONT>

。。。↑この部分を

<FONT size="-1"><B>ｐ　/
<script type="text/javascript">
<!--
document.write(saidai);
// -->
</script>
ｐ</B></FONT>

というふうに書き換えます。※saidaiの部分が違うので注意っ

これで、“..／○ｐ”の部分が最大ページ-１になりました！
ためしに最大ページを5555にてみましょう…

ほうら、5554になったでしょう？（えっへん）



▲ページ先頭へ


●見開きで公開する
「コミックスクリプト」でぐぐると、「コミックスクリプト　見開き」で検索している人が結構多いみたいで、みんな見開きで作ってみたいのかな〜なんて感じちょっと改造してみました。 正直、見開き構成の画像を作ればいいんじゃ…と思わなくもないんですが、チャレンジ心をくすぐられたのと、「コミックスクリプト」でぐぐったときに、本家の次に出てきたのにちょっと気をよくしちゃったのでんっふっふ。

ちなみに、＞＞サンプルはこんな感じです

それでは改造！…のまえに、ふたつ注意点があります！
見開きではcomic.htmlに書かれる最大ページが偶数であることが前提条件となっております！ 漫画が５ｐまでしかないときは、最大ページ数は６にして、６ｐ目はなにかダミーページをおつくりください！↓の絵のような感じで
最大ページ数を奇数にした場合、おかしなことになりますのでご注意くださいませ〜


あと、先読み込みの、なんですけど、↑の図のように２つ必要になりますので、最大ページ数＋１と最大ページ数＋２のふたつの画像の用意をお願いします！たとえば最大ページ数が6なら、7.gifと8.gifを続く画像にするという感じで。


それでは！
まず、漫画１ｐ目である

<IMG src="1.gif" width="200" height="300" border="0" name="myImage">
の上に、
<IMG src="2.gif" width="200" height="300" border="0" name="myImage2">
 <IMG src="1.gif" width="200" height="300" border="0" name="myImage">
を書き足してください。※書き足し部のmyImageはmyImage2になっているので注意！
これでまず見開きになりました！

しかし、これではまだnextボタンを押そうが何しようが、動くのは１ｐ目だけです。
次に、続きの読み込み画像部分の

<IMG src="2.gif" width="20" height="30" border="0" name="VIEW">
の数字部分を

<IMG src="3.gif" width="20" height="30" border="0" name="VIEW">
に変更し、その上に

<IMG src="4.gif" width="20" height="30" border="0" name="VIEW2">
<IMG src="3.gif" width="20" height="30" border="0" name="VIEW">
を書き足します。※書き足し部のVIEWはVIEW2になっているので注意！

次に、現在ページ数表示をふやします。

<INPUT size="4" type="text" name="nowpage" value="1" readonly>
↑この部分を、

<INPUT size="4" type="text" name="nowpage" value="1" readonly>、
<INPUT size="4" type="text" name="nowpage2" value="2" readonly>

↑こんなふうに書き換えてください！（説明手え抜いた）

こんな感じになったはずです。




これで、半分くらい準備は整いました！

それではとりあえず、ざーっとcomic.jsを改造してみましょうか！

赤が書き足し、青が書き換えです。
//--------------------------------comic script ver2.02 by tama
//--------------------------------改造版

Num=1;
Num2=2;
MaxPage2=MaxPage-1

function next()
{
Num=Num+2;
Num2=Num2+2;
if(Num>MaxPage2)Num=MaxPage2;
if(Num2>MaxPage)Num2=MaxPage;
routine();
}

function prev()
{
Num=Num-2;
Num2=Num2-2;
if(Num<1)Num=1;
if(Num2<1)Num2=2;
routine();
}

function jump(PG)
{
n=eval(PG.page.value);

//　nが偶数かどうか判断
nn=n/2;
nn2=Math.floor(nn) ; //　整数書き出し
nn3=nn-nn2;
if(nn3>0){
Num=n;
Num2=n+1;
}
if(nn3<=0){
Num=n-1;
Num2=n;
}

if ((n>0) && (n<=MaxPage)) {routine();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function seljump()
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
Num2=eval(document.comic.sejump.options[op].value)+1;

n=Num;
//　nが偶数かどうか判断
nn=n/2;
nn2=Math.floor(nn) ; //　整数書き出し
nn3=nn-nn2;
if(nn3>0){
Num=n;
Num2=n+1;
}
if(nn3<=0){
Num=n-1;
Num2=n;
}
routine();
}


function pgjump()
{
n=Num;
//　nが偶数かどうか判断
nn=n/2;
nn2=Math.floor(nn) ; //　整数書き出し
nn3=nn-nn2;
if(nn3>0){
Num=n;
Num2=n+1;
}
if(nn3<=0){
Num=n-1;
Num2=n;
}
routine();
}


function routine()
{
document.myImage.src=Num+".gif";
document.myImage2.src=Num2+".gif";
document.VIEW.src=Num+2+".gif";
document.VIEW2.src=Num2+2+".gif";
document.comic.nowpage.value = Num;
document.comic.nowpage2.value = Num2;
}



次に、やテキストリンク でジャンプ機能を使っている人はもう一度comic.htmlにもどって、

※ボタンなら↓
<INPUT type="button" value="３ページ目" onclick="Num=3;routine()">
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()">
のroutine()をpgjump()に変更します。つまりこんな感じ↓
<INPUT type="button" value="３ページ目" onclick="Num=3;pgjump()">
<INPUT type="button" value="５ページ目" onclick="Num=5;pgjump()">

※テキストリンクならこんな感じ↓
<a HREF="#top" onclick="Num=10;pgjump()">10ページ目</a>

これでなんとか動くはずです！
なお、すでになにかしらの改造を行ってる人は…のちのちなんとかしたいですが、今のところは自力でがんばってください！


ついでに、せっかくですので、サンプルのように画像クリックで前に進んだり、もどったり出来るようにしましょう。

漫画画像表示のこの部分を↓
<IMG src="2.gif" width="200" height="300" border="0" name="myImage2">
<IMG src="1.gif" width="200" height="300" border="0" name="myImage">

こんな感じ↓にアンカタグを足します。
<A href="#top" onclick="next()"><IMG src="2.gif" width="200" height="300"
border="1" name="myImage2"></A>
<A href="#top" onclick="prev()"><IMG src="1.gif" width="200" height="300"
border="1" name="myImage"></A>

これで、漫画画像をクリックして、前に進んだり、もどったり出来るようになりました！
え？なってないって？おかしいな、なってるはずなんですが…。

あとですねえ…なんか、ろくにしてない動作確認の最中に、ちょいちょいエラー表示をエクスプローラの端っこに見かけるときが…あるような、ないような…。あれ？と思って更新ボタンを押すと出てこなかったりするので、なんか確認がとれないんですが、早い話、なんかエラーになるかもしれません☆（いまさら）


ところで、以下は蛇足なんですが、漫画画像を2枚見開きにした場合は、右のページと左のページをテーブルタグかなにかで表組みにしておいたほうがいいと思います！　でないと、小さいブラウザで見た場合、漫画が上下表示になってしまって、意味が不明になってしまうと思うので…。
こんな感じに↓

あと、個人的には、漫画画像はなるべく小さめのほうがいいと思います。小さなブラウザで見たとき、普通ならクリックでページ上部に移動できるけど、左ページを見るときにはスクロールしなければならなくなるので…。

まあ、ちょっと中途半端なところもありますが、カスタマイズはご自由に〜！！（いいかげん、開発者であるたまさんに怒られないか、不安になってきました…）



▲ページ先頭へ


◎「見開き」のレイアウト提案

なんとなく、こんな感じのレイアウトがいいかな…なんていうのを、あつかましく提案してみました。
これ、たまさんの書いたHTMLの再配布になるのかな…なるんだろうな…しかも改造してるしな…うわぁ…
なにか問題があれば、下げますよ…

ちなみにタグめちゃくちゃ適当に打ったうえ、winのIEしか確認してないので、ほかの環境だとデザインが崩れまくること請け合いです。
HTMLがわかる人はどんどん改造してくださいっつうか使う人なんかいるのかいな！
タグはそれぞれのページの一番下に貼ってます


普通のバージョン（あまりいじってないので、自分でいろいろデザインを変えたい人向け）

CSS（スタイルシート）をいろいろ使ったバージョン

▲ページ先頭へ



●スクロールで漫画をめくる
需要があるかわかりませんが、コミックスクリプトの漫画をマウスホイールのスクロールで読めるようにしよう！…という計画です。もうクリックすることすら面倒くさい！という人にも読んでほしい！そんな人向け。

＞＞サンプル

マウスホイールでjavascriptを動かすための命令文は、このページを参考にさせていただきました。
参考というか、ほぼ丸写ｓ…ゲフンゲフン！！
本当に、こういったことを考えてくれる人に感謝しつつ使わせていただきましょう！！
（お…………おこられるかな………………）

それではcomic.jsを開いて、一番下（たぶん
document.comic.nowpage.value = Num;
}
 とかになってると思います）に以下の分を書き足します。
/** 以下スクロール. */
/** このスクリプトはこちらのページ↓. */
/** http://phpspot.org/blog/archives/2006/08/javascript_23.html.. */
/** を参考にさせていただきました */

function handle(delta) {
if (delta < 0)
// 下方向にまわした場合の処理
next();
else // 上方向にまわした場合の処理
prev();}

/** Event handler for mouse wheel event
. */
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
}
/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;


これで完成です。
えっ終わり？！終わりです。本当に、考えてくれた人に感謝感謝ですよ！！
なお…使ってみた感想なんですが。スクロールで漫画が次に進んでしまうので、当然ページにスクロールバーが現れるところでは使わないほうがよさそうです。漫画画像がけっこうコンパクトな人むけ☆

▲ページ先頭へ


●最終ページ→第二話URLへジャンプ
さて、漫画が第一話、第二話というふうに話ごとでHTMLページを分けている場合…今までは、最終ページでNEXTをクリックすると「おわり」表示、ページ内に第二話へというリンクを別に用意するか、ウィンドウを閉じて移動などの手段をとっていたと思います。
それを今回は、最終ページから第二話へ直接クリックで飛べるようにしてしまおう！という計画です！

＞＞サンプル


ではcomic.jsを開いてください。

function next()
{
Num=Num+1
if(Num>MaxPage)Num=MaxPage;
routine();
}

を

function next()
{
Num=Num+1
if(Num>MaxPage) {urljmp();}
routine();
}

↑のように書き換えてください（太字部分）


そしてcomic.htmの

<!--

//最大ページ数設定
MaxPage=5;

//-->
</SCRIPT>

の部分を

<!--

//最大ページ数設定
MaxPage=5;

function urljmp()
{
Num=MaxPage;
location.href='○○.html'
}

//-->
</SCRIPT>

というふうに書き換えてください。
（太字が追加部分です）
○○.htmlの部分にジャンプしたいページを入力！例：story2.html





※なお、最終話やまだ未完成などの理由でどこにも飛ばしたくない場合は、

書き換えた
<!--

//最大ページ数設定
MaxPage=5;

function urljmp()
{
Num=MaxPage;
location.href='○○.html'
}

//-->
</SCRIPT>

の太字部分を

function urljmp()
{
Num=MaxPage;
routine();
}

に書き換えてください。


…以上です！
あれ☆意外と簡単ですね！！さすが深く考えずにテキトーに打っただけのことはあります！
まあ、私の環境ではうまくいったので、うまく行かない人はがんばって解決してください！

（追記：と、思ったらしっかりyahoo知恵袋に同じ質問が載ってた！！
たぶんそちらのほうが文法的に正しいと思うので、そちらを参考にしたほうが賢いです！！てへ☆）
▲ページ先頭へ


●現在ページ[ 3]/○ｐを通常のテキストで

さてさて今回の計画は、現在ページの表示



を、このようにテキスト表示



にしてしまおう！という計画です。
なぜって？そのほうが、レイアウトに自由がきくかなーって、そ☆ん☆だ☆け☆


まずは、comic.jsを開いてください。
修正が多いので、いっそコピペで…（太字が追加、一文削除（※下で説明））
//--------------------------------comic script ver2.02 by tama

Num=1;

function next(tID,str)
{
Num=Num+1
if(Num>MaxPage)Num=MaxPage;
document.all[tID].innerText = Num;
routine();
}

function prev(tID,str)
{
Num=Num-1;
if(Num<1)Num=1;
if(Num>MaxPage)Num=MaxPage;
document.all[tID].innerText = Num;
routine();
}

function jump(PG)
{
n=eval(PG.page.value);
Num = n;
if ((n>0) && (n<=MaxPage)) {routine();}
else {alert("1から"+MaxPage+"の数字を入力して下さいね。");}
}

function seljump(tID,str)
{
op=document.comic.sejump.selectedIndex;
Num=eval(document.comic.sejump.options[op].value);
document.all[tID].innerText = Num;
routine();
}


function change(tID,str)
{
document.all[tID].innerText = Num;
routine();
}

function change2(tID,str)
{
if ((n>0) && (n<=MaxPage)) {change(tID,str);}
}

 function routine()
{
document.myImage.src=Num+".gif";
document.VIEW.src=Num+1+".gif";
}

※削除部分
function routine()
{
document.myImage.src=Num+".gif";
document.VIEW.src=Num+1+".gif";
document.comic.nowpage.value = Num;
 }
の下から2行目、ピンクの行を削除してます。
comic.jsは今回はこれでおわりー。今回の計画では、次のcomic.htmの修正の方がおおいです。


ではcomic.htmを開いてください。

まずは現在ページ表示の部分です。

<FONT size="-1"><B>現在</B></FONT>
<INPUT size="4" type="text" name="nowpage" value="1" readonly>
<FONT size="-1"><B>ｐ　/５ｐ</B></FONT>

この部分の太字部分を、

<FONT size="-1"><B>現在</B></FONT>
<FONT size="-1"><B><div id="myText1">1</div></B></FONT>
<FONT size="-1"><B>ｐ　/５ｐ</B></FONT>

このように書き換えてください。
しかしブラウザの更新ボタンを押すと…！！



あっちゃあータテになっちゃいました！！
そんなわけで、ここは表組みにします。

<TABLE border="0" CELLPADDING="0"><tr>
<td><FONT size="-1"><B>現在</B></FONT></td>
<td><FONT size="-1"><B><div id="myText1">1</div></B></FONT></td>
<td><FONT size="-1"><B>ｐ　/５ｐ</B></FONT></td></tr></table>


そんな感じで


↑こんな感じになりました。


しかしまだ動きませーん！！
お次は同じくcomic.htmの

<A href="#top" onclick="prev()"><IMG src="../back.gif" width="62" height="23" border="0"></A>
<A href="#top" onclick="next()"><IMG src="../next.gif" width="62" height="23" border="0"></A>

ですが、この部分にちょいちょい加えて

<A href="#top" onclick="prev('myText1','Num')"><IMG src="../back.gif" width="62" height="23" border="0"></A>
<A href="#top" onclick="next('myText1','Num')"><IMG src="../next.gif" width="62" height="23" border="0"></A>

としてください。（太字が追加部分）

次は数字を入力してジャンプする部分（太字追加）
<INPUT type="button" name="go" value="Ｇｏ！" onclick="jump(this.form)">
　　↓
<INPUT type="button" name="go" value="Ｇｏ！" onclick="jump(this.form);change2('myText1','Num')">


次はボタンでジャンプ（太字追加）
<INPUT type="button" value="３ページ目" onclick="Num=3;routine()"><BR>
<INPUT type="button" value="５ページ目" onclick="Num=5;routine()"><BR>
　　↓
<INPUT type="button" value="３ページ目" onclick="Num=3;change('myText1','Num')"><BR>
<INPUT type="button" value="５ページ目" onclick="Num=5;change('myText1','Num')"><BR>

次は選んでジャンプ部分（太字追加）
<SELECT name="sejump" onchange="seljump()">
　　↓
<SELECT name="sejump" onchange="seljump('myText1','Num')">




もうね、ホント……もっとスマートに動かす方法はいくらでもあると思うんですよ。（特にcomic.js）
でも、考えるのむりー。

ともかくこーれーで、うまくうごくはずです！！
そしてもうたとえ背景が黒であろうと文字の色やサイズを変えようと、

　　

レイアウトから浮いてしまうことはないでしょう！！



なお、この現在ページの数字の装飾を変えたい時は、
必ず<div id="myText1">1</div>をタグで囲む形にしてください。
＜例＞
<B><div id="myText1">1</div></B>
<font color="red"><div id="myText1">1</div></font>

でないとページをめくったときに、装飾タグが消えてなくなってしまいますー

なにかわからないことがあった場合は、お気軽に…がんばって解決してください！！



▲ページ先頭へ


●改造のコツとうまくうごかないとき
改造のコツ？とは、別に知ってる人からしたらたいしたことではなくて、メモ帳なんかでは特に「検索」や「置換」を多用すると便利ですってことです。メニューの「編集」にあります。ぜひ利用しましょう。

そしてうまくうごかないとき…
なんせ私が改造したのですから、たぶんそんなことはあると思います。ろくに動作確認してないし…！！！
もし、うまくうごかないというのが、画像が表示されないというトラブルのとき（だいたいこれだと思います）、表示されてない画像のプロパティを右クリックで見てみましょう。たとえばもし「・・・/00013.gif」なんかになっていたら、どこかで０がおかしく足されている、というのがわかります。これで解決の糸口をみつけるのです。
え？エラーのおきない改造を公開しろ？すんません。

なお、ブラウザのはしっこに「エラーが発生しました」といわれてしまう場合は、おそらくcomic.htmの中に書いてあるcomic.jsに対するパスが間違っている可能性が高いです。その他は、やはりcomic.jsの命令文の間違い



▲ページ先頭へ



これで、私の改造計画は終わりです。
もしこのページにリンクを貼りたい方は、ご自由に貼ったりはがしたりしてください。
このページに書いてある改造方法を、自分が改造したんだぜ、というのはかまいませんが、その場合「コイツ文法間違ってら、ププ」と思われるの覚悟でしてください。

繰り返しますが、私はJAVAスクリプトはほとんど知りません。
どっちかというと、NScripterの命令を書いている気分で改造しました（余計意味不明でしょうか）
改造版を使ったことによる問題には責任をとりません。

この改造版を改造（修正）するのはご自由に…


かいたひと：ケイ

（履歴っぽいもの）
2008年11月11日現在ページ[ 3]/○ｐを通常のテキストでを追記＆修正
2008年8月28日最終ページ→第二話URLへジャンプを追記
2008年3月3日スクロールで漫画をめくるを追記
2008年2月14日見開きで公開するを追記
2007年8月3日“..／○ｐ”を自動入力を追記
2006年8月28日公開