Silverlightを独学するには

「SDK」の添付文書

[添付文書を見るには]

図1 SDKのメニューから、参考文書を起動できる

[QuickStart（クイックスタート）]

[Help（ヘルプ）]

「ヘルプ」を利用するためのSilverlight用語解説

図2「Reference」が示している用語をハッキリさせないと

目次に書いてある「Object」、「Method」、「Property」...こうした用語がわたしたちが書いてきたxaml ファイルやJavaScriptファイルとどのように関係するのかを、ハッキリさせておきましょう。

「Object（オブジェクト）」

図3「オブジェクト」に分類されるものの一覧（ほんの一部）

これらの中で、わたしたちのサンプルコードでよく使った主なものをあげてみます。

1. 「Canvas」自身
   Canvas

2. 「Canvas」に置いて、実際に目に見えるもの
   図形　 Ellipse, Rectangle, Line. Path, Polyline, Polygon
   テキスト　TextBlock
   ムービーなどのメディア　MediaElement
   画像　Image
   大元のCanvasの中に置くCanvas

3. テキストに置く改行 （実際に目に見えるが、Canvasに直接は置けない。Textの中にしか置けない）
   LineBreak

4. 2を塗る手段
   ブラシ　SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, VideoBrush
   グラデーションの基本色　GradientStop

5. 2を変形する手段 個々の変形法 RotateTransform, ScaleTransform, SkewTransform, TranslateTransform
   変形法のグループ　TransformGroup

6. アニメーションを実行する前にCanvasに置いておく、目に見えないしかけ
   EventTrigger　アニメーションを発生させるきっかけ
   BeginStoryboard　ストーリーボードを開始するという「行為」
   Storyboard ストーリーボード

7. アニメーション（結果として目に見えるが、Canvasに直接は置けないし、2及び4, 5がなければ意味がない）
   DoubleAnimation, ColorAnimation

すなわち、「オブジェクト」とは「目に見えるもの」や「しかけ・手段」です。

[オブジェクトから探すメソッド、プロパティ、イベント]

図4 Ellipseで指定できるプロパティ、メソッド、イベントが全部書いてある

図4でたとえばプロパティの「Canvas.Left」について調べたければ、そう書かれている文字をクリックすれば、目次の「Properites」の下にある「Canvas.Left」のページへリンクできるのです。

ということで、「プロパティ」「メソッド」及び「イベント」には、サンプルコード中に「どんなものがあったか」を列記することはやめ、「どのように使ったか」を解説することにします。

Property（プロパティ）

本書で「設定」と書いた事項の多くはこの「プロパティ」です。
似たような「オブジェクト」には、共通する「プロパティ」を設定できます。逆に言えば、共通する「プロパティ」を設定できるオブジェクトは、似ているということになります。

ただし、意味的には似ているのでしょうけれども、オブジェクトによって微妙に違うプロパティを設定する場合もあります。
たとえば、オブジェクト「Image」で、画像ファイルのパスはプロパティ「Source」で指定しましたが、オブジェクト「ImageBrush」ではプロパティ「ImageSource」で指定します。
ですから、オブジェクトが似ているからと言って安心せず、初めて使うときはこの「Reference」で確かめるようにしましょう。

Method（メソッド）

[メソッドと関数の違い]
メソッドは関数とよく似た書き方をしますが、関数はJavaScript中で

videosetting();

のように、関数名だけを指定するのに対して、
メソッドは

movie.play();

のように、オブジェクトに対して（ドットでつなげて）行うように指定します。

図4の「Ellipse」オブジェクトの説明ページをもう一度見て、どんな「メソッド」が使えるのか見てみましょう。

図5「Ellipse」で使えるメソッド一覧、「FindName」と「GetHost」に注目

図5のように、本書では使ったことのないメソッドがたくさんありますね。ハイ、これらはより複雑で壮大なコンテンツを作るのに使います。本書で使ったのはというと「FindName」と「GetHost」があります。

Ellipse GetHost....なんて使ったことない

証拠をお見せしましょう。図5で「GetHost」をクリックしてみてください。
目次の「Methods」の下にある「GetHost」の説明ページに移動できます。
その上の方に、図6のような使い方の説明がありますが、「XAML」という欄に、「メソッド（というもの）はXAMLでは使えません」と書いてあります。

図6 「メソッドはXAMLでは使えない」という動かぬ証拠

図6では、その下に「Scripting」という欄があって、JavaScript中での使い方が示してあります。
このように「ヘルプ」では、各用語の「XAML中での使い方」「JavaScriptでの使い方」が示されているのです。
「メソッド」だけでなく「オブジェクト」、「プロパティ」についても同様に説明がありますが、ちと説明が長くなるので、あとに回します。

さて、この「GetHost」メソッド、アタマが大文字ですが、わたしたちがよく使ってきたgetHostと同じです。しかしこれはSilverlightで用意された（つまり、このHelpに上がっている）メソッドにだけ通用することで、JavaScript一般、及びXAML中では大文字と小文字は区別されます。

同じページに、GetHostメソッドの使用例も示されています。見てみましょう。

図7 JavaScriptにおける使用例

「sender.getHost()」と書かれていますね。
これはこういうことです：XAMLファイル中によくこんな風に書きましたね。

<Ellipse MouseLeftButtonDown="myfunction"....

Ellipseがマウスでクリックされたときに関数myfunctionが呼び出されるとします。
こういう関数で、以下のような書き方もよくやりましたね。

function myfunction(sender, args){

	var content=sender.getHost();
	....

このとき、「sender」はmyfunctionの呼び出し元、つまりEllipseである、と解説しましたね。このことなんです。

逆に言えば、

ある「オブジェクト」について「GetHost」メソッドが使える

そのオブジェクトから「関数(sender,args)」を呼び出して、
関数中でそのオブジェクトを「sender」として使える

ムービーを扱ったときの「MediaElement」について使ったメソッドplayやstop、アニメーションを扱ったとき「StoryBoard」について使ったメソッドbeginやstopも同様にメソッドですが、

「MediaElement」のstopと「StoryBoard」のstopは違う

図8「Methods」には二つの「Stop」がある

また、どうして「DoubleAnimation」や「ColorAnimation」に直接「begin」や「stop」をかけられないのか、という理由も、Helpを見れば明らかです。たとえば「DoubleAnimation」オブジェクトを調べると、使えるメソッドの中にそれらがありません。

図9「DoubleAniimation」に使えるメソッドは少ない

そこで、XAMLファイル中でこの「DoubleAnimation」のタグの周りを調べると、すぐ上（親）の要素に「Storyboard」があるので、こちらを使えばいいんだな、ということがわかるのです。

なお、createFromXamlも、そして前章でさんざん議論したcreateObjectも「メソッド」です。ただし、後者はプラグイン中で使えるメソッドではなく、「JavaScript」の中での位置づけが「メソッド」というだけです。

Event（イベント)

「Enumerations」というもの

FontWeight="Bold"

この「FontWeight」は、数値ではなく、「BoldかNormalか（実は他にも選択肢があるが割愛）」という選択肢の中から選びましたね。

他には、アニメーションで

FillBehavior="Stop"

これも「Stop」か「HoldEnd」か、という選択でした。

このように「アレかコレかソレか」というのがつまり「列挙」です。この列挙された選択肢が「列挙体」というわけです。

目次で「Enumeration」の一覧を見てください。「FontWeight」や「FontStyle」、「FillBehavior」がありますね。

じゃあ「FontWeight」などは「プロパティ」じゃないの？

このように一旦理解すれば、あとは悩むことはありません。

「FontWeight」は、「プロパティ」だ。

図10 プロパティ「FontWeight」の使い方

「FontWeight="FontWeight"」と書いてある、この後者の「FontWeight」はリンクの形になっています。
これをクリックすると、「Enumerations」の下にある「FontWeight」の説明ページに移動し、どのような値が取れるかを知ることができるのです。

すなわち、後者の「FontWeight」は

プロパティFontWeightがとれる特定の列挙体

を示しているというわけです。

ということで、目次上でのこの「Enumerations」の一覧は、ここで閉じてしまいましょう。

いくつかの重要な復習事項

JavaScriptでオブジェクトを扱う

(1)すでにXAML中にあるオブジェクトを指定する場合
XAML中でと書かれたオブジェクトをJavaScript中で扱うのに、

ellipse=...

などといきなり書くことはできません。以下の二つの方法を使います。

• 関数の呼び出し元として扱う
  「Ellipse」を例にとって「メソッド」の調べ方を実践した通りです。XAML中で「Ellipse」に「イベント」を設定しておき、その「イベント」で呼び出す関数(sender,args)中で、呼び出し元senderとして扱います。
• ・名前で選び出す
  オブジェクトには、「x:Name」で名前をつけることができます。 ヘルプの「Ellipse」の説明ページで確認しましょう。使えるプロパティの中に「Name」があったら、「x:Name」で名前がつけられます。

図11 「Ellipse」で使えるプロパティにも「Name」がちゃんとある

こうしておいて、Canvasなど他の適当なオブジェクトを呼び出し元にした関数を書き、その中で

var myellipse=sender.findName(....);

と名前を指定して呼び出せば、そのEllipseを変数「myellipse」として使うことができます。

(2)新しくオブジェクトを作成する場合
へルプの「Ellipse」の説明ページにはこんな風に書いてあります。

図12 Ellipseの「Scripting」の方法に注目しよう

「スクリプトを用いてオブジェクトを作成するには、CreateFromXAMLを見なさい」

これで思い出しましたね。しかし、そうやって作ったオブジェクトの扱いも、さらに二通りの場合によって違います。これについては他の復習事項との関連もあるので、後述します。

プロパティの書き方

図13 プロパティ「Fill」の使い方

プロパティの使い方は、このようにXAML形式でもJavaScript中でも、具体的に示されています。
「object」とイタリックで書かれた部分を、たとえば「Ellipse」に読み替えればよいのです。

<Elliipse Fill="..."/>

<Ellipse>
	<Ellipse.Fill>
		.....
	</Ellipse.Fill>
</Ellipse>

と、「子要素」の形でも書けることがわかります。

図13で「プロパティ」として書かれている「Brush」とは、「SolidColorBrush」とか「LinearGradientBrush」などをまとめて呼んだものだろうと見当がつきますね。

では、「Fill="Red"」という書き方についてはどうなの？

図14 「色」か「ナントカブラシ」を使えばいいんだナとわかる

こちらはカンタンですね。
関数の呼び出し元なら「sender」、
あるいは、「var myellipse=sender.findName...」のようにすれば他のオブジェクトを取得できますから、これらを

sender.fill myellipse.fill

のように書けば、プロパティを取得したり設定したりできます。

最後に、あるオブジェクトのプロパティの値がオブジェクトとなることが多々あることに気をつけておきましょう。

今あげたばかりの

<Ellipse.Fill>
	<SolidColorBrush.../>
</Ellipse.Fill>

createFromXAMLの使い方

本書では「createFromXAML」をずいぶん使いました。最後に確認しておきましょう。このメソッドを使う場合は、二通りあります。

(1)オブジェクトを新規作成してCanvas中に置く場合
「Canvas」という要素の「子要素」として、付加する必要があります。

[例]　Canvasから関数を呼び出せば、その関数のsenderはCanvasになりますから、

var myplugin=sender.getHost();
var myelement=
		myplugin.content.createFromXaml(...XAML文...);
sender.children.Add(myelement);	

(2)あるオブジェクトのプロパティの値として、オブジェクトを新規作成する場合
JavaScriptで記述したプロパティ」に代入すればよいだけです。

[例] オブジェクトから関数を呼び出して、そのオブジェクトのプロパティmypropertyとして、新しいオブジェクトを作成する場合は

var myplugin=sender.getHost();
sender.myproperty=myplugin.content.createFromXaml(...XAML文...);