[ プログラム付ページの基本構造 ]
●構造を知らなくても設定可能ではあるが…。
電車走行キットでは、編成の設定や背景画像の変更等を「パラメータ設定」を編集する（書き換える）ことで行う。
A01.htmlやM01.htmlの、プログラム付ページをテキストエディタで開き、パラメータ設定と書いてある部分を自分好みの設定に変更するだけだ。ファイルを開いて該当個所を見れば、それがどんなものかは一目瞭然。ページの構造など知らなくとも設定はできる。
しかし、インターネット上で公開する場合は、ページデザイン上、パラメータ設定以外の部分にも手を入れる必要がある。さらに、変更すべきところを変更せず、変更してはならないところを変更してしまう人などもいるので、あえて構造を説明することにした。知っておけば、無用の間違いを犯すこともなくなる。パラメータ設定以外の個所の書き換えについても、ここで説明する。
●ページの構造と注意点。
A01もM01も、基本構造は同じ。中身は左図のようになっている。
[ HEAD と BODY ]
HTMLファイルは、大きく分けて「頭」と「体」に分かれている。
ページの中身（コンテンツ）として表示されるものが「体」にあり、ページのタイトルやら何やら、そうでないものは「頭」にある。電車走行キットでは、走行プログラムは「頭」にあり、背景画像やら電車やらを重ねて表示する部分（電車走行キットではこれを「鉄道オブジェクト」と呼ぶ）は「体」に置いてある。
[ 鉄道走行プログラム ]
JavaScriptの部分である。
これの冒頭に「パラメータ設定」と書いてある個所があり、ここだけをユーザーが変更する。
それ以外の部分は基本的に手を触れないこと。
* JavaScriptに詳しいのであればプログラムの中身を改造して貴方のサイト上でのみ使用してもかまわないが、動作がおかしくなっても、おぱく堂は関知しない。なお、改造した場合の「使用条件」に注意。
[ 鉄道オブジェクト ]
CSS（スタイルシート）を使って鉄道シーンを指定した部分である。
「画像読込中。しばらくお待ち下さい。」という文字の変更以外、改変してはならない。
* あえて「改変禁止」と書くのは理由がある。CSSを知っているから、ということでこの部分を改造しようとしてエラーになる人がたまにいるのだ。鉄道オブジェクトは親子構造のCSSになっているが、改造して失敗した人は皆、知らずにその構造を壊してしまっている。親子構造が壊れても Internet Explorerは動作することもあるので間違いに気付きにくい一面は確かにあるのだが…。また、CSS指定個所を変更した場合、それを制御するJavaScriptも改造しないといけないのである。さらには、CSS絡みにバグのある Netscape4のための回避策を施してあるので、Internet Explorer用のJavaScriptを知っているだけでは正しく改造できない。
●具体例による解説。
どこを変更し、どこが変更不可か。以下、具体例で示す。
A01をテキストファイルで開く。すると以下のような文章が並んでいる。
黄色い文字の部分が変更可（あるいは変更すべき）個所。ピンクの文字は解説。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">←「これはHTMLファイルだよ」という宣言。
<html dir="ltr">←HTMLファイルの始まり。
<head>←ここからページの「頭」が始まる。
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Opaku's Train Kit : A01 v3.9</title>←黄色い文字の部分を貴方のページタイトルにする。
↓ここからJavaScript、つまり「鉄道走行プログラム」が始まる。
<script language="JavaScript" type="text/javascript"><!--
/*
↓この辺の記述は消してはならない。
●Opaku's Train Kit A01 ver3.9 (Jan.2004)
ver3.7-3.8 Nov.2003/v3.6 Oct.2003/v3.51 Sep.2003/v3.4 Aug.2003/v3.31 Mar.2003/v3.2 Feb.2003/v3.1 Dec.2002/v3.0 Aug.2002/
v2.1 Jun.2002/v2.0 Apr.2002/
v1.22 Mar.2002/v1.11 Feb.2002/v1.1 May 2001/v1.0 Apr.2001
DynamicHTML programed by (C) 2001-2004 Mr.Opaku = Sonobe Souan.
http://www.mars.dti.ne.jp/~opaku/zigzag/
●Trains Illustrated by (C) --電車画像を描いた人の名前--←貴方の御名前を書く。
http://www ----←貴方のURLを書く。
*/←これを過って消さないこと。
↓ここを改変するとプログラムが動かなくなるので注意。
* プログラムの大半は「パラメータ設定」より後に書いてあるが、都合上「パラメータ設定」より前に書いておかなければならないものがある。それがこれ。
//↓配列宣言等（ここは無視して次の「パラメータ設定」へ）----------
trainPicture=new Array();trainLength=new Array();precountmax=20;doorOpenLimit=new Array();trainLPicture=new Array();LRdifferentPict=new Array();glassOK=new Array();glassFile=new Array();glassOpacity=new Array();glassPngOK=new Array();glassPngFile=new Array();
for(i=1;i<=precountmax;i++){trainPicture[i]=new Array();trainLPicture[i]=new Array();LRdifferentPict[i]=false;glassOK[i]=false;glassPngOK[i]=false;glassOpacity[i]=0}
expressSet=new Array();passingspeed=new Array();maxspeed=new Array();passengerFlag=new Array();stationstopsecondR=new Array();stationstopsecondL=new Array();stopPointSetR=new Array();stopPointSetL=new Array();trainAcceleration=new Array();trainDeceleration=new Array();
↓貴方が設定すべき「パラメータ設定」の始まり。
//▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
//↓パラメータ設定
（中略）
* ここにある設定を書き換えることで、編成やら風景やらを自在に変更可能なのである。詳細は「A01設定」「M01設定」へ。
//↑パラメータ設定ここまで。
//▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
↑「パラメータ設定」の終わり。
（中略）
* この間に、鉄道走行プログラム本体がある。
//▲走行プログラムここまで。
//--></script>←走行プログラムはここで終わり。
<style type="text/css"><!--
body{background-image:url(manual/kitbg.gif);color:#dddddd};
--></style>
<!--■↑このスタイルシート指定はマニュアルとの統一のために入れてある。実際に使用する際は削除または変更すること-->
↑ここに書いてあるとおり、ここにページの背景画像と文字色を指定するスタイル指定が入れてある。変更するか、よく分からない場合は黄色指定の３行まるごと削除すべし。
</head>←ページの「頭」部分はここまで。
<body>←ページの「体」部分はここから。
<p>●ここにタイトルなど。<small>（不要ならこの行は削除して、zeroTopMargin=true に設定）</small></p>
↑鉄道走行シーンより上にある文章はここに書く。
* ちなみに<p>は段落開始タグ、</p>は段落終了タグ。パラグラフの頭文字。
* この文章中にスタイルシート指定を入れると、Netscape 4.xでは電車が走らないので注意（Netscape4のバグ）
* パラメータ設定で「zeroTopMargin=true」にした場合にこの行を削除しないと、鉄道オブジェクトを回避するためのスペースにこの行の高さがプラスされてしまうため、鉄道オブジェクト以降の本文の位置がその分、ずれてしまう。要注意！
↓「鉄道オブジェクト」はここから。原則改変不可。
<!--▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽
▼鉄道走行オブジェクトここから-->
<div id="tetsudou" style="position:absolute;left:0px"><!--Start of Railway Layer>
<script language="JavaScript" type="text/javascript"><!--
if(!nn4&&dhtmlOK&&loadingBlack){document.write(startBlackTag)}//--></script>
<div id="now" style="position:absolute;left:20px;top:20px;visibility:visible;width:600px;z-index:2">
<font color="#dddddd">画像読込中。しばらくお待ち下さい。</font>
<!--↑読込中表示を変えたい場合は、この行を書き直す-->
↑読込中のメッセージを変えたい場合のみ、鉄道オブジェクト内の上の行を書き直す。
* HTML 4.0以降非推奨のfontタグに挟まれているのは、Netscape4のバグ対策。ここをCSS指定にしてしまうと Netscape4では鉄道が走らなくなる。
（中略）
</div><!--End of Railway Layer>
<script language="JavaScript" type="text/javascript"><!--
if(zeroTopMargin&&dhtmlOK){sceneMoveY(0)}
if(dhtmlOK){layerShow('now')}
if(loadingIndicator&&dhtmlOK){layerShow('loading');loadingLight()}
if(!dhtmlOK){document.write(noDhtml)}else if(textUnderTheRail){document.write(dumSpace)}
if(testmode&&dhtmlOK){document.write(testform)}
//--></script>
<!--▲鉄道走行オブジェクトここまで
△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△-->
↑「鉄道オブジェクト」はここまで。
<p>●ここに本文。</p>
↑鉄道走行シーンより下にある文章はここに書く。
* 鉄道オブジェクトから下の本文中にスタイルシート指定を入れても、Netscape4.xでは無効になってしまうので注意（Netscape4.xのバグ）。
</body>←ページの「体」はここまで。
</html>←HTMLファイルの終わり。
例はA01だが、M01も同様である。
はっきり言って（中略）の部分の行数は非常に多く、上記に該当する個所を探すのは、最初はちょっと面倒。しかし一度分かってしまえば、他のプログラムでも同様なので以降はすぐに分かるようになる。