Sliverlight プロジェクトの組み込み方がわかったまさき君、いよいよアプリケーション作成に挑戦です。
まさき君
「いつの間に、全国 高専キャラバンのページに Silverlight のアプリケーションがあるようだけど・・・」
まりさん
「これは、日本地図にある印にカーソルを合わせると、写真がでてくるというアプリケーションです。ただの写真集でも良かったのですが、こっちの方がおもしろいと思いませんか？」
まさき君
「確かに。どれ位で作ったの？」
まりさん
「んー、30分位ですね。やっていることは簡単で、①カーソルを印に合わせた時に写真データを表示する。②カーソルが印から離れた時に写真データを隠す。の2つの処理を行っているだけです。」
まさき君
「それはすごいね・・・早速、作り方教えてくれます？」
まりさん
「そう来ると思いました。では、HTMLからご覧ください。中身は前回と同じです。」
<html>
<head>
<title>Silverlight デモ</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
</head>
<body>
Silverlight START<br>
<!-- Silverlight プロジェクトを組み込む -->
<div id="testHost"></div>
Silverlight END<br>
<script type="text/javascript">
// Silverlight プロジェクトを生成する。
var parentElement = document.getElementById("testHost");
createMySilverlightPlugin();
</script>
</body>
</html>まりさん
「続いて前回作成した createSilverlight.js を若干変更します。変更した箇所は太字にしています。変更した箇所のパラメータは前回説明していますので、大丈夫ですよね。」
function createMySilverlightPlugin()
{
Silverlight.createObject(
"chapter1.xaml",
parentElement,
"test",
{
width:'600',
height:'635',
inplaceInstallPrompt:false,
background:'#FFFFFF',
isWindowless:'false',
framerate:'24',
version:'1.0'
},
{
onError:null,
onLoad:null
},
null);
}
まさき君
「ここまでは、前回のおさらいみたいなものですね。日本地図や印はどうやって作ったの？」
まりさん
「それは、chpater1.xaml ファイルに XAML で記述します。これです。番号はタグの説明のために便宜上つけていますので、ご注意くださいね。」
①<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
②<Image Width="600" Height="635" Source="map.jpg"/>
③<Ellipse x:Name="tsuruoka" MouseEnter="content_focus" MouseLeave="content_out"
Width="20" Height="20" Fill="#FFF61515" Canvas.Left="372" Canvas.Top="283"
/>
④<Image x:Name="tsuruoka_img" Width="316" Source="tsuruoka.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
③<Ellipse x:Name="ichinoseki" MouseEnter="content_focus" MouseLeave="content_out"
Width="20" Height="20" Fill="#FFF61515" Canvas.Left="420" Canvas.Top="250"
/>
④<Image x:Name="ichinoseki_img" Width="316" Source="ichinoseki.jpg"
Canvas.Left="8" Canvas.Top="8" Opacity="0.0"
/>
</Canvas>
まりさん
「①はCanvasタグです。この中に様々なオブジェクトを描画していきます。ここに書いている内容はおまじないとしてそのまま使ってください。」 まりさん
「②で日本地図を描画します。 Width は幅、 Height は高さをピクセルで指定し、Sourceで画像ファイルを指定します。」 まさき君
「一番最初に日本地図を描画する理由はあるのかい？」 まりさん
「大いにあります。XAMLでは記述されている順番に下から上に重ねて描画していきます。。したがって、日本地図を最初に描画しないと印が表示されない、といったことが起きますので、ご注意ください。」 まさき君
「勉強になります。」 まりさん
「続いて、③で円を描画します。ここでは印として活用します。Fillは、円を塗りつぶす色を指定します。」 まさき君
「普通色の指定は、赤・緑・青で000000 - FFFFFF で表現するとおもうんだけど、00000000 - FFFFFFFF と何か多い気がするんだけど・・・」 まりさん
「XAML では、透明度（00：透明 - FF：透明でない）・赤・緑・青で表現するためです。」 まさき君
「Canvas.Left、Canvas.Top は、印の配置位置を指定するものだね。」 まりさん
「そうです。ただし、そのオブジェクトが格納されている Canvas の左上からの位置指定になりますので、そこだけご注意ください。」 まさき君
「x:Name は、このオブジェクトの名前だね。そして、MouseEnter、MouseLeave は何だろう？」 まりさん
「MouseEnter はマウスが描画領域に入った時のイベント処理、 MouseLeave はマウスが描画領域に出た時のイベント処理を指定します。後で説明しますね。ちなみに、x:Name で指定した名前にも意味があるんですよ。」 まさき君
「確かに④の名前は③の名前に"_img"がついているね・・・ところで、④は画像ファイルを描画しているようだけど・・・」 まりさん
「④で印にカーソルを合わせた時に表示される写真を表示します。ここでのポイントは、Opacity です。これ・・・」 まさき君
「Opacity は、透明度を指定するんだね。」 まりさん
「話の途中で言わないでくださいね・・・その通りで Opacity は 0.0（透明） ～ 1.0（透明でない）で指定します。」 まさき君
「あーっ、わかった。印にカーソルを合わせた時に、印と連動した写真のOpacity の数値を変更させて画面に表示させるんだね。」 まりさん
「その通りです。それでは早速 イベント処理の記述をご覧ください。イベント処理は Javascript で記述しますので、今回は createSilverlight.js に追加しています。番号は説明のために便宜上つけています。」 ①function content_focus(sender, arg)
{
②var test = document.getElementById("test");
③var img = sender.Name + "_img";
④test.content.findName(img).Opacity = 1.0;
}
function content_out(sender, arg)
{
var test = document.getElementById("test");
var img = sender.Name + "_img";
test.content.findName(img).Opacity = 0.0;
}
まりさん
「①は、印にカーソルが合わさった時の処理です。関数名は MouseEnterで指定した名前と同じにしてください。今回は content_focus という名前を使っています。」 まりさん
「②で、印に該当する写真を特定します。document.getElementById("test") の test は、createObject関数で Silverlight プロジェクトを生成したときのID番号です。」 まりさん
「③で、印に対応した写真を特定します。印の名前に"_img"というルールで写真データの名前をつけているため、sender.Name で、印の名前を呼びだし、それに"_img"という文字を追加して表示させる写真の名前を確定させます。ちなみに、sender.Fill="・・・"の記述を追加すると、イベント発生時に印の色を変化させることもできます。」 まりさん
「④で、写真の Opacity を変更して、写真を画面に表示させます。」 まさき君
「なるほど・・・印からカーソルが離れた時は、同じように、MouseLeaveで指定した関数名を記述して、Opacity を 0.0 にセットするんだね。」 まりさん
「その通りです。では早速プログラムを実行してみてください。」  
まさき君
「できた！」
ということで、簡単なアニメーションとイベント処理を学習したまさき君でした。
| 
