Lesson01b 日の丸を左右に動かす

Ｌｅｓｓｏｎ０１　日の丸を左右に動かす　解説

このプログラムは二つの言語で記述されています。
０１行から０５行　および　１５行から最後の２１行までの<HTML>のように不等号（< >）で
囲まれた部分がホームページで使われるＨＴＭＬ言語のタグと呼ばれるものです。
０６行から１４行までがアニメーションを動かしているＶＢＳｃｒｉｐｔです。
＜以下の説明ではINTERNET EXPLORER を IE と略しています。＞

ＨＴＭＬ言語の説明
アニメ工房はＶＢＳｃｒｉｐｔを使ってアニメーションを作る工房です。
ＨＴＭＬについては大まかな説明をします。詳しくはＨＴＭＬの解説書をご覧ください。

03行の<TITLE>Lesson01</TITLE>の中身Lesson01が IE でタイトルとして表示されます。

04行の<SCRIPT　LANGUAGE="VBScript">はスクリプトにVBScriptを使用すると宣言して
います。

05行の<!- -と15行の- ->はコメントです。　この間の部分はIE以外のVBScriptに対応して
いないブラウザではコメントとして無視されます。

16行の</SCRIPT>はスクリプトの終了を示しています。<SCRIPT>と</SCRIPT>のような
/の無いタグと/付きのタグは対で使用されそのタグの始まりと終わりを示しています。

18行の<BODY　BGCOLOR="skyblue">はIE画面の背景色を設定しています。
タグは英語です。背景色が空色と理解できます。

19行のIMGタグでは使用する画像について記述します。
SRC="img/hinomaru.gif"で使用する画像ファイルの保存場所／ファイル名を指定します。
保存場所とファイル名の間に / を入れます。
ID="Hinomaru"は画像に名前をつけています。スクリプトで出てくるHinomaruが画像の
hinomaru.gifを指しています。

STYLE="Position:Absolute;Left:0;Top:100"はIE画面に画像を表示する位置を決めます。
Leftの次の数値は画面左端から画像左端までの距離、Topの次の数値は画面上端から
画像上端までの距離をあらわします。
単位はPIXELです。

その他のタグの説明は省略します。

01:<HTML>
02:<HEAD>
03:<TITLE>Lesson01</TITLE>
04:<SCRIPT LANGUAGE="VBScript">
05:<!--
06:Dim　x
07:x=10
08:Sub Window_OnLoad()
09:    If Hinomaru.Style.PixelLeft>800 Or Hinomaru.Style.PixelLeft<0 then
10:        x=x*(-1)
11:    End If
12:    Hinomaru.Style.PixelLeft=Hinomaru.Style.PixelLeft+x
13:    SetTimeOut "Window_OnLoad",100
14:End Sub
15:-->
16:</SCRIPT>
17:</HEAD>
18:<BODY BGCOLOR="skyblue">
19:<IMG SRC="img/hinomaru.gif" ID="Hinomaru" STYLE="Position:Absolute;Left:0;Top:100">
20:<!--Copyright(c) 2002 Animation studio nezus QQQ All rights reserved.-->
21:</BODY>
22:</HTML>

ＶＢＳｃｒｉｐｔの説明
06行から14行までの9行が日の丸を左右に動かすＶＢＳｃｒｉｐｔです。

6行目
 Dim x
Dimは変数の使用を宣言します。ここでは変数xを使う宣言をしています。

7行目
 x=10
変数に値10を代入しています。
このプログラムでは変数xの値は一定時間ごとに画像を動かす距離に使われます。

8行目
 Sub Window_OnLoad()
ここのSubから14行のEnd Subまでがプロシジャーと呼ばれる部分です。
VBScriptのプログラムは１個以上のプロシジャーの集まりで構成されて複雑な機能を
実現します。
日の丸を左右に動かす簡単なこのプログラムではプロシジャーを１つだけ使っています。

このプロシジャーにはアニメに必須な機能が２つあります。
プロシジャーはSubで始まりEnd Subで終了します。Subの右の部分がプロシジャー名です。
通常プロシジャーは自由に命名して必要な機能をプログラムとして記述します。
このWindow_OnLoadはVBScriptに初めから備わっているプロシジャーです。
普通のプロシジャーはよそから呼ばれて働きますがこのWindow_OnLoadはページが表示
されると自動的に呼び出されて働き出します。
ページが現れるとアニメがすぐ動き出すのはこのWindow_OnLoadの働きによります。

13行目
 SetTimeOut "Window_OnLoad",100
途中を飛ばしてこのWindow_OnLoadプロシジャーの終わりあるSetTimeOutを説明します。
このSetTimeOutがアニメに必須な二つ目の働きをするタイマーです。
プロシジャーが呼び出されるとプロシジャー内のプログラムが上から順に処理されます。 
SetTimeOutの処理は、右端の数値が示す時間が経過した時""で囲まれたプロシジャーを 
呼び出します。時間の単位は１/1000秒（ms）です。 
ここで呼び出しているプロシジャーは自分自身であるWindow_OnLoadですからこのプロシ 
ジャーはページが閉じられるまで働き続けます。 
この働きにより、日の丸の旗がいつまでも左右に動き続けることになります。 
日の丸の動きは、タイマーの数値100を増やすと遅くなり小さくすると早くなります。  

09行から11行目
 If Hinomaru.Style.PixelLeft>800 Or Hinomaru.Style.PixelLeft<0 then
     x=x*(-1)
 End If

Ifとthenの間の条件が成立するとEnd Ifまでの間の処理を行い、条件が不成立の時には
処理せず終了します。
Ifとthenの間の条件説明
Hinomaru.Style.PixelLeftは画面の左端から日の丸の旗の左端までの距離（PIXEL）です。 
Hinomaru.Style.PixelLeft>800は日の丸の旗の位置が800より大きいと言う条件です。 
言い換えると、日の丸の旗の位置が画面左端から800PIXELより右に位置すると言う条件 
になります。
日の丸の旗は右に動いてゆくと画面の途中で反転して左に戻ります。 
上の条件はこの右行きを左行きに変える条件です。 
Hinomaru.Style.PixelLeft<0の条件は日の丸の左端位置がゼロより小さい値です。 
すなわちマイナスですから画面の左端よりさらに左のかくれる位置が条件です。 
日の丸の旗の左端での反転の条件です。 
２つの条件の間のOrは、日本語の「または」ですから２つの条件のどちらか一方でも成立 
するとEnd Ifまでの処理を実行します。  

09行から11行までのプログラムはプログラムを短くするために工夫されています。 
そのために分かりにくくなっています。
これを次のとおり２つに分けると分かり易くなります。  

 If Hinomaru.Style.PixelLeft>800 then
    x=-10
 End If
 If Hinomaru.Style.PixelLeft<0 then
    x=10
 End If

３行増えますが、入力の手間もほとんど変わりません。 
プログラムの長さを問題にせず理解しやすいこちらを採用する方が賢明です。 
今回は、短いプログラムに拘ったため難しいプログラムを紹介しました。  

10行目の説明
 x=x*(-1)
おかしな式ですがどのプログラミング言語でも共通に使用される計算式の表現です。
変数 x の初期値は7行目で代入された 10 です。
アスタリスク * はかけ算の記号×の代わりに使われています。
この処理が一回実行されると 10×(-1)=-10 ですから x に -10 が代入されます。
この処理がもう一回実行されると -10×(-1)=10 ですからxの値な 10 になります。
日の丸が右に行くときは変数 x は 10 で 800PIXEL より右に到着すると -10 に
反転し左に向かいます。
日の丸の旗が画面の左端より左にかくれ始めた瞬間+10に戻って右に向かいます。

12行目の説明
　Hinomaru.Style.PixelLeft=Hinomaru.Style.PixelLeft+x
長い式ですが内容は単純です。
この処理が一回行われるとHinomaru.Style.PixelLeftにxの値が足された値が
Hinomaru.Style.PixelLeftに代入されます。
xの値が初期値10の間は12行が実行されるとHinomaru.Style.PixelLeftの値が10加算され
日の丸は右に動き、xの値が-10の間はHinomaru.Style.PixelLeftは-10が加えられ小さく
なり日の丸は左に動きます。

タイマーの値を変えて日の丸の移動速度を変えることが出来ると説明しました。
この変数xの値を変えても似たような効果が得られます。

19行目の説明
 <IMG SRC="img/hinomaru.gif" ID="Hinomaru" STYLE="Position:Absolute;Left:0;Top:100">
IMGタグの SRC="img/hinomaru.gif" により日の丸の画像ファイル hinomaru.gif を読み込みます。
次の ID="Hinomaru"の記述により VBScript が日の丸の画像を ID の Hinomaru で操作出来る
ようになります。
STYLE="Position:Absolute;Left:0;Top:100" は画像の初期位置を指定しています。
この場合、Left:0 は日の丸の左端を画面の左端に
Top:100 は日の丸の上端を画面のの上端から100PIXEL下の位置に配置します。

Ｌｅｓｓｏｎ０１　解説　終わり