ひな形スクリプト講座11

今回から別のテーマに沿って解説していきます。

その前に前回のおさらい

配列オブジェクト
作成・・・var 配列オブジェクト名=new Array()・・・Array()のAは必ず大文字です。
Arrayオブジェクトを作成するので、Array()メソッドを使用すると考えます。

要素数を指定して作成・・・var 配列オブジェクト名=new Array(★)・・・★は要素数-1の値が入ります。
例）要素を三つ確保・・・var hairetu=new Array(2)
これによりhairetu[0]、hairetu[1]、hairetu[2]が確保される。
hairetu[0]=要素1
hairetu[1]=要素2
hairetu[2]=要素3

要素を直接代入・・・var 配列オブジェクト名=new Array(要素１,要素2,要素3,・・・)

要素を直接代入・・・var 配列オブジェクト名=[要素1,要素2,要素3,・・・]

配列オブジェクトの要素数を取得・・・配列オブジェクト.length
※lengthはコレクション数や文字列の文字数・画像の総数などをカウントするプロパティです。
例）var hairetusu=hairetu.length

配列オブジェクトの要素をインデックス番号で指定・・・hairetu[index]・・・インデックスは一番目の要素が0になります。

さあ始めましょう。

まずはサンプルをご覧ください。

サンプル・・・クリックまたはダブルクリックすると穴が開きますよ。

このひな形を作っていくのが目標です。

出てくるのは
①包括エレメントに含まれるサブエレメントをオブジェクトとして扱います。これは参考程度に説明します。
②ダイナミックプロパティを扱います。
③マウス座標を取得します。
④包括エレメント内に新しくサブエレメントを追加します。

大体こんな感じです。

それぞれ簡単に説明します。

①包括エレメントに含まれるサブエレメントをオブジェクトとして扱う

包括エレメントとは、エレメントを構成する開始タグと終了タグの中に、別のエレメントが含まれ、内包するエレメントが包み込まれるエレメントを指します。言葉で言うと難しいのですが、内包するエレメントをサブエレメントとし、サブエレメントは包括エレメントの中において表示される。非表示のエレメントがサブエレメントとなっている場合もある。

上記の場合はimg1エレメントはoya1エレメントのサブエレメント（内包エレメント）であり、oya1エレメントはimg1エレメントの包括エレメントという。
尚、img1エレメントはoya1エレメントの子エレメントともいう。

さて、上記img1エレメントにはidが付いていますが、idが付いていない場合は、img1エレメントを操作できないのでしょうか？

答えはNO、操作できます。

imgエレメントは包括エレメントoya1の子オブジェクトと考えられます。このような場合は包括エレメントのコレクションとしてサブエレメントは操作できるようになっており、アクセスできるように用意されています。

object.children・・・オブジェクト（包括エレメント）の子エレメントをコレクションとします。
object.all・・・オブジェクト（包括エレメント）に含まれる全てのエレメントをコレクションとします。

allとchildrenの違いですが、childrenは子エレメントだけがコレクションメンバーとなりますが、allは全ての内包するエレメントがコレクションメンバーになります。childrenは子エレメントが包括エレメントとなっており、内包するサブエレメントを持っていてもメンバーにしません。孫エレメントなどは含まれないということです。
allでは全ての内包エレメントがメンバーになります。

例）
<div id="oya1" style="position:absolute">
   <img id="img1" src="img1.gif" style="position;absolute">
   <div id="ko1" style="position:absolute">
       <img id="img2" src="img2,gif" style="position:absolute">
   </div>
</div>

oya1.children・・・img1エレメントとko1エレメントのみ
oya1.all・・・img1エレメントとko1エレメントとimg2エレメント
ko1エレメントはimg2エレメントの包括エレメント（親エレメント）
img2エレメントはoya1エレメントの孫エレメント

img1エレメントをオブジェクトとして扱うには、oya1.children[0]とします。なぜならimg1エレメントはoya1エレメントの一番目のコレクション要素だからです。
例）img1エレメントに枠線を設定
oya1.children[0].style.border="red 2px solid"

尚img1エレメントはoya1エレメントの一番目のallコレクション要素なので、oya1.all[0].style.border="red 2px solid"でも良いです。

②ダイナミックプロパティ

ダイナミックプロパティはあるエレメントの属性値（プロパティの内容）を別のエレメントの属性値の変化に合わせて、スクリプト式によって再計算し、動きを同期される手法です。動的に変化するプロパティ追従が可能になります。

スタイルシートに記述する方法と、スクリプト内で記述する方法があります。

③マウス座標を取得します。

エレメント上でマウスカーソル（ポインタ）が移動する時には、そのエレメント内でmousemoveイベントが発生します。このイベントをキャッチしてドキュメント上の座標を取得できます。勿論クリックイベント時に取得することも可能です。

④包括エレメント内に新しくサブエレメントを追加します。

包括エレメントとなりうるエレメントにスクリプトで内包エレメントを追加することができます。これにはobject.innerHTMLプロパティを使用する方法やobject.innerHTML()メソッドを使用する方法、write()メソッドを使用する方法がありますので、解説します。

このひな形で使用する素材：一括ダウンロード・・・クリックして「開く」で実行すると解凍されます。解凍先は参照ボタンでわかりやすい場所にしてください。

下記は縮小表示させています。

aki1.gif aki2.gif ana1.gif ana2.gif gun.wav

まず①ですが、あんまり今回のひな形に重要ではありません。そこで①は一番最後に回します。

②ダイナミックプロパティから行きますか。

例えば表示画面のサイズが変わったら、それに合わせて画像の表示サイズも変更することを考えます。表示画面サイズはdocument.body.clientWidthとdocument.body.clientHeightで取得できることは既に学んでいます。画像表示するエレメントはimgタグで構成される要素ですから、これにimg1というidをつけてみましょう。

[方法１]img1エレメントのサイズを%で指定する

<img id="img1" src="aki1.jpg" style="width:100%; height:100%; z-index:1">としましょう。包括エレメントはbodyエレメントにしますと、表示領域のサイズの100%で表示されるはずです。

[ソース]

さあこれでいいのか確かめましょう。

とりあえず

あらら？100%になりませんね。これはですね、bodyエレメントがマージン値をデフォルトで持っていて、この初期値が0でないために隙間ができるんですね。

じゃあbodyエレメントのマージンを0にしてみましょう。

[ソース]

とりあえず2

100%になっているようですが、右にスクロールバーが出るのが気に入りませんね。スクロールバーが出ないようにするにはoverflow:hiddenをいれます。

[ソース]

どうじゃ・・・うん今度はよさそう。ウィンドウサイズを変えると画像サイズが変わりますね。

[方法2]スクリプトで変更する

img1エレメントのサイズをスクリプトでdocumentクライアント領域のサイズ（表示部サイズ）に従わせましょう。そのためにはウィンドウサイズが変わったら変更処理する関数を実行させるようにすれば良いのですが・・・ウィンドウサイズが変わったらってなにかありそう？

ありますあります。サイズが変わった時のイベントハンドラがonresizeです。

[ソース]

<html>
<body onresize="setsize()" style="margin:0; overflow:hidden">
<img id="img1" src="aki1.jpg" style="z-index:1">
<script>
function setsize(){
img1.style.pixelWidth=document.body.clientWidth
img1.style.pixelHeight=document.body.clientHeight
}
</script>
</body>
</html>

ここで問題。上記スクリプトで問題ないでしょうか？

どうじゃ２・・・あれ？最初画像が表示画面サイズになりませんね。最初に表示画面サイズにする命令がないですね。かといってimg1エレメントにwidth:100%とheight:100%を入れるのは方法１と同じようになってしまうので面白くない。

ここでピンとくればスクリプトの動作がわかってきた証拠です。setsize()関数をページ読み込み完了した時辺りで実行させれば良いですね。

[ソース]

<html>
<body onresize="setsize()" onload="setsize()" style="margin:0; overflow:hidden">
<img id="img1" src="aki1.jpg" style="z-index:1">
<script>
function setsize(){
img1.style.pixelWidth=document.body.clientWidth
img1.style.pixelHeight=document.body.clientHeight
}
</script>
</body>
</html>

どうじゃ２・・・うまくいったようです。ウィンドウサイズを変更すると画像表示サイズも追従して変わりますね。

[方法3]ダイナミックプロパティを使用する

本題です。ダイナミックプロパティの記述は二つ方法があると書きましたね。

【１】スタイルシートに記述する

構文・・・属性:expression(式)

[ソース]

動的プロパティ

上のサンプルではインラインスタイルシートで記述していますが、スタイルシートを一括指定する方法でも可能です。MSDNではインラインでのみ使用のことみたいなことが書かれているので、一応参考程度に。

[ソース]

<html>
<style>
#img1{width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)}
</style>
<body style="margin:0; overflow:hidden">
<img id="img1" src="aki1.jpg" style="z-index:1">
</body>
</html>

【２】スクリプトでダイナミックプロパティを使用する

object.style.setExpression("属性","式")
注意！！式も必ず""か''で囲むこと。文字列を適用させるにはobject.style.setExpression("属性","’文字列'")のように二重で囲むこと。

[ソース]

<html>
<body style="margin:0; overflow:hidden">
<img id="img1" src="aki1.jpg" style="z-index:1">
<script>
img1.style.setExpression("width","document.body.clientWidth")
img1.style.setExpression("height","document.body.clientHeight")
</script>
</body>
</html>

動的プロパティ

さてダイナミックプロパティ（インライン）で画像を配置しましょう。ひな形の第一歩ですよ。

ダウンロードしたファイルにgunshot.htmがありますので、それを利用してみてください。
aki1.jpg画像は一番下に配置したいので、z-index;1としてください。idはgazou1としました。あっposition:absoluteも必ず入れてくださいね。

<img src="aki1.jpg" id="gazou1" style="position:absolute; z-index:1; top:0px; left:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)">

次はaki1.jpgの上に重ねて汎用エレメント(div)を配置します。このエレメントのidはgbox0としました。overflow:hiddenは入れないでください。この汎用エレメント内にimgエレメントを配置します。そのimgエレメントをダイナミックプロパティで表示画面サイズにした時、全体が表示されるようにしたいんです。汎用エレメントgbox0はgazou1エレメントの上に配置しますから、念のためz-index:2にしておきましょう。

<div id="gbox0" style="position:absolute; z-index:2; left:0px; top:0px"></div>

このgbox0エレメントにはクロマキーフィルタを適用しておきます。この意味はgbox0エレメントを包括エレメントとして、imgエレメントを内包させ、更にその上から赤い●画像を配置した時にこの配置した画像によって赤い色部分が透明になるようにするためです。従ってクロマキーで透明にする色の設定は赤としなければなりません。

概念図

クロマキーフィルタ

構文：{FILTER:Chroma(Color=color)}

パラメータ 解説

color クロマキーの透明度を指定する色の値。#RRGGBBの形式で指定する。RR、GG、BBはそれぞれ赤、緑、青の16進数値である。

ということで

<div id="gbox0" style="position:absolute; z-index:2; left:0px; top:0px; filter:chroma(color=#ff0000)"></div>
※DirectX系のクロマキーフィルタでもOK。filter:progid:DXImageTransform.Microsoft.Chroma(Color='red')

このgbox0エレメントに内包するようにimgエレメントを入れます。idは特に必要としませんが、説明し辛いので、img2とでもしておきましょう。このimg2エレメントはz-indexを1にしておきましょう。これは結構重要なんです。ダイナミックプロパティで画面サイズにしてくださいね。配置する画像はaki2.jpgファイルです。フィルタを適用するエレメントは必ずサイズ指定してくださいね。※imgエレメントは画像の元々のサイズがwidthとheightになりますから、imgエレメントの場合はサイズ指定しなくても問題ないようです。

ピストルの穴画像もメールで送ることができるようにimgエレメントで記述しておきます。position:absoluteにして、left:-2000pxなど表示されないようにしてくださいね。ここではvisibility:hiddenで非表示にしてみました。
ana1.gifの方のidをa1に、ana2.gifの方のidをa2としましょうか。

ここまでのソースは次のようになります。

[ソース]

<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<META http-equiv="Content-Style-Type" content="text/css">
<title>Gunshot</title>
</head>
<body id="body1" style="margin:0px; padding:0px; overflow:hidden">
<img src="aki1.jpg" id="gazou1" style="position:absolute; z-index:1; top:0px; left:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)">
<div id="gbox0" style="position:absolute; z-index:2; left:0px; top:0px; filter:chroma(color=#ff0000); width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)">
<img id="img2" src="aki2.jpg" style="position:absolute; z-index:1; top:0px; left:0px; width:expression(document.body.clientWidth); height:expression(document.body.clientHeight)"></div>

<img id="a1" src="ana1.gif" style="width:50px; height:50px; visibility: hidden;">
<img id="a2" src="ana2.gif" style="width:50px; height:50px; visibility: hidden;">

</body>
</html>

ここまでのHTML

今回は長くなったのでここまで。続きは次回に持ち越します。

パラメータ	解説
color	クロマキーの透明度を指定する色の値。#RRGGBBの形式で指定する。RR、GG、BBはそれぞれ赤、緑、青の16進数値である。