マウスの動作によって色を変える～JavaScriptで動的に変化させる
"Silverlightの領域をdocument.bodyからdiv内に閉じ込める"の最後のサンプルがFirefoxで動かないのを修正する で、XAMLで書いた四角形をIE7とFirefoxで表示するサンプルを作成しました。念のため、サンプルは これ です。このサンプルでは、HTMLファイル、XAMLファイル、JSファイル（JavaScriptの外部ファイル）を使っていますが、JavaScriptは、Silverlightプラグインの領域をHTMLファイル中に確保し、四角形を描くXAMLを呼び出す、という役割しか果たしていません。JavaScriptが得意とする処理、たとえばマウスの動きによって色を変えるといった処理は、まだ用意されていません。というわけで、ここでは、その処理を追加してみます。具体的には、 このサンプル に次の4つの動きを追加します。
- 四角形にマウスポインタを載せると枠線の色をCrimson→Cyanに変える
- 四角形からマウスポインタを離すと枠線の色をCyan→Cromsonに戻す。
- 四角形上でマウスの左ボタンを押すと内部の色をNavy→Orangeに変える。
- 四角形上でマウスの左ボタンを押した状態からボタンを離すと、内部の色をOrange→Navyに戻す
この4つの処理を行うために、myScript.jsという外部JavaScriptファイルを1つ追加しますので、必要なファイルはぜんぶで5つになります（index.html、Silverlight.js、createSilverlight.js、myScript.js、myxaml.xaml）。 先のサンプル から変更した箇所は赤で記しました。
【index.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【myScript.js】
function myFunc1(sender,args) {
sender.stroke="Cyan";
}
function myFunc2(sender,args) {
sender.stroke="Crimson";
}
function myFunc3(sender,args) {
sender.fill="Orange";
}
function myFunc4(sender,args) {
sender.fill="navy";
}
【Silverlight.js】（そのまま使うので内容省略）
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="100" Width="100"
Canvas.Left="100" Canvas.Top="100"
Stroke="crimson" StrokeThickness="10" Fill="navy"
MouseEnter="myFunc1"
MouseLeave="myFunc2"
MouseLeftButtonDown="myFunc3"
MouseLeftButtonUp="myFunc4"
/>
</Canvas>
index.htmlを読み込むと、次のように表示されます。
http://www.makoto3.net/xaml/silverlight0026/index.html
スクリプトを呼び出すきっかけ（マウスがのったとき、左ボタンを押したとき……等々。一般に「イベントハンドラ」と言います）は、myxaml.xamlの<Rectangle>タグに書いています。MouseEnterがマウスがのったとき、MouseLeaveがマウスが離れたとき、MouseLeftButtonDownがマウスの左ボタンが押されたとき、MouseLeftButtonUpが押した左ボタンを離したとき、を意味しています。
そして、各イベントハンドラのあとにイコール（=）を書き、続けて呼び出す関数をダブルクォーテーション（"）またはシングルクォーテーション（'）で括って書きます。HTMLファイル中に書く一般的なJavaScriptのように、呼び出す関数に括弧を付けない点に注意してください（○MouseEnter="myFunc1" ×MuuseEnter="myFunc()"）。
関数の定義はmyScript.jsで行っています。たとえば関数myFunc1の定義は次のとおりです。
function myFunc1(sender,args) {
sender.stroke="Cyan";
}
第一引数のsenderは、関数の呼び出し元です。この場合ならRectangleです。第二引数のargsはイベントが起きたときのマウス位置を取得できるらしいのですが、まだ検証していません（ということで、argsはここでは無視ということで）。
定義の中身は、senderつまりRectangleのstrokeプロパティをCyanに変える、というだけです。他の関数も仕組みはまったく同じで、strokeだと線の色、fillだと塗りつぶしの色という違いがあるだけです。
また、4つの関数はmyScript.jsという新たに追加した外部ファイル中で定義しているので、index.htmlのヘッダには次の1行も追加しています。
<script type="text/javascript" src="myScript.js"></script>
以上がだいたいの仕組みです。これから、いろんなサンプルを作ってみるつもりですが、基本的な仕組みは、今回のサンプルにすべて含まれています。
極端に言えば、あとは、XAMLファイルとJSファイル（この例ならmyScript.js）の内容が変化したり、複雑になったりするだけです。
XAMLには、図形を描くだけでなく、図形や画像を変形したり、塗りつぶしたり、アニメーションさせたりといった機能があるので、XAMLでこうした記述を行い、必要に応じてJavaScriptでコントロールするというのが、基本的な考え方です。
というわけで、せっかくなのでXAMLでアニメーションを記述し、JavaScriptで、そのアニメーションをスタートさせる、というサンプルを作ってみました。
http://www.makoto3.net/xaml/silverlight0028/index.html
四角形をクリックすると時計回りに90度回転します。とりあえず、このサンプルを構成する5つのファイルをすべて表示します。
【index.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById("silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myScript.js】
function myAnime(sender,args) {
sender.findName("myStoryboard").begin();
}
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Height="100" Width="100"
Canvas.Left="100" Canvas.Top="100"
Stroke="crimson" StrokeThickness="10" Fill="navy"
MouseLeftButtonDown="myAnime">
<Rectangle.RenderTransform>
<RotateTransform Angle="0" CenterX="50" CenterY="50" x:Name="myRotate"/>
</Rectangle.RenderTransform>
</Rectangle>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="myRotate"
Storyboard.TargetProperty="Angle"
From="0" To="90" Duration="0:0:0.5" />
</Storyboard>
</Canvas.Resources>
</Canvas>
詳細は、また改めて説明しますが、四角形を回転させているのはXAMLであって、JavaScriptではありません。myScript.jsを見ると分かりますが、ここでは、次のようなmyAnime関数を定義しているだけです。
myAnime(sender,args) {
sender.findName("myStoryboard").begin()
}
そして、四角形がクリックされたとき、このmyAnime関数を呼び出して、XAMLで記述してあるアニメーションをスタートしている（begin()メソッドを実行している）だけです。
JavaScriptに詳しいと、位置や色などを変化させるとき「では、JavaScriptを使って！」と考えがちですが、Silverlightの場合、そういうケースは少なそうです。というのは、アニメーションの仕掛けはXAML側にあるので、アニメーションはXAMLで書いておき、JavaScript側でそのアニメーションをスタートしたり、ストップしたりするケースが多いからです。
その意味では、SilverlightでJavaScriptが果たす役割は必要最小限、という言い方もできると思います。
このページは
xfy Blog Editor
を利用して作成されました。
コメント