• [アーティクル]

Hey, Scripting Guy!Silverlight の光あれ

Microsoft Scripting Guys

この記事で使用しているコードのダウンロード: HeyScriptingGuy2007_10.exe (156KB)

人類の歴史上、 相反する勢力の衝突は昔からありました。ローマ人対野蛮人の群れ、ハットフィールド家対マッコイ家、Scripting Guys 対 "システム管理スクリプトについてのコラムでは実際にシステム管理スクリプトを話題にするべきで、歴史上の相反する勢力の衝突 (あるいは、げんこつの話。(編集者注)) などを話題にするべきではない" と考えている人々の衝突です。

コンピュータの世界も相反する勢力の衝突と無縁ではありません。特に開発者とシステム管理者の対立が思い出されます。カール マルクスがこのような状況を評して言ったように、「こいつが死んでるか、でなけりゃオレの腕時計が止まっているかのどっちか」でした。

待ってください、すみません。これはグルーチョ マルクスの言葉でした。カール マルクスは「芸術は常にあらゆる場所で秘密の告白であり、同時に時の不滅の動きである」と言った人です。実際のところ、私たちにはこの言葉の意味がわかりません。それに、グルーチョの皮肉が開発者とシステム管理者の対立にあまり関係ないとしても、グルーチョ マルクスの方がカール マルクスよりずっと気が利いていました。

それでも、Scripting Guys が毎朝仕事の前に「システム管理者は開発者ではない」と機械的に忠誠の誓いを述べていたのは、カール マルクスのおかげだったと確信しています。この文句は確かに本当でした。システム管理者は開発者ではありませんでした。開発者とはコンピュータ プログラムを記述する人ですが、システム管理者とは、ええと、実のところ、マイクロソフトにシステム管理者が何をしているか知っている人がいるかどうか自信がありません。しかし、システム管理者の仕事が何であれ、コンピュータ プログラムの記述でなかったことは確かです。

もちろん、カール マルクスは「時代は変わる」という歌も作りました (または、少なくともその歌を作ったと言いました)。

TechNet スクリプト センター (microsoft.com/technet/scriptcenter) のおかげもあって、システム管理者は徐々に VBScript の長所を理解し、独自のユーティリティを書き始めました。このユーティリティは一般的なコンピュータ プログラムほど完璧でも包括的でもありませんが、それでも便利な管理タスクが実行されます。システム管理者は、このようなユーティリティを書く際に、開発者が使うスキルとよく似たスキルを身に付ける必要がありました。

話はここからです。Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) が出現したことで、システム管理者やスクリプト作成者も Microsoft® .NET Framework を使用できるようになりました。Windows Vista® ではガジェット (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx) が導入され、システム管理者、少なくともスクリプトを作成するシステム管理者は、開発者と対等な立場になりました。そして現在 (太鼓の連打をお願いします)、Microsoft Silverlight が公開されています。Microsoft Silverlight は、「Web 上で次世代の Microsoft .NET ベースのメディア エクスペリエンスとリッチ インタラクティブ アプリケーションを実現する、クロスブラウザ、クロスプラットフォーム対応のプラグイン」です。

おもしろそうですね。しかし、それが自分のようなシステム管理スクリプト作成者にどう関係があるのか、と言われそうですね。正直、私たちも完全に確信しているわけではありません。しかし、Silverlight を使用すると、とてもかっこいいユーザー インターフェイスやマルチメディア プレゼンテーションを実に簡単に作成できます。また、宣伝材料では Web アプリケーションを作成する手段として、必ず Silverlight が話題になりますが、これに関してあまり知られていない事実があります。Silverlight はスクリプト作成者が大好きなメディアである HTML アプリケーション (HTA) (microsoft.com/technet/scriptcenter/hubs/htas.mspx) でも、同じようにうまく機能するようです。したがって、Silverlight を試してみる価値は十分にあるでしょう。

先に進む前に

今回は Silverlight の多くの機能や考えられる使い方を説明するつもりがないことをお伝えしておきます。このテクノロジをいろいろ試すのに十分なコード例を紹介することが今回の主な目標です。Silverlight をインストールするには (ちなみに無料です)、Silverlight のホーム ページ (microsoft.com/silverlight) を参照してください。また、silverlight.net/GetStarted では SDK、サンプル プロジェクトなど、さまざまな役に立つものを入手できます。

ここでは、Silverlight が既にインストールされていること、さらに、TechNet Magazine Web サイトのコード ダウンロード セクション (technetmagazine.com/code07.aspx) から図 1 で説明するファイルをダウンロード済みであることを前提とします。

Figure 1 Silverlight プロジェクトのコンポーネント

ファイル 説明
CreateSilverlight.js Silverlight の初期スタートアップ設定の指定に使用される JScript スクリプト (初期リリースでは、JScript スクリプトだけをサポートしていました)。ユーザー インターフェイスとグラフィック オブジェクトの構成に使用される XAML ファイルを含みます。
SampleProject.js JScript 関数を入力できる、単なる空のファイルです。
Silverlight.js Silverlight コントロールの初期化に使用するファイルです。
SampleProject.html これこそがおもしろい部分です。SampleProject.html は 3 つの .js ファイルを読み取るコードを含む、簡単な HTML ファイルです。また、Silverlight コントロールを初期化するコードも含んでいます。
SampleProject.xaml このファイルの用途は何でしょう。答えを確かめるには、コラムの本文に戻る必要があります。
   

少なくとも今月のコラムのとおりに操作しない場合は、必ずしも SampleProject.js は必要ではありません。Silverlight では、スクリプトをプロジェクトのオブジェクトやイベントにアタッチできます。このようなスクリプトは、HTML ファイルにハードコーディングすることも、(今回のように) 外部の "インクルード" ファイルから読み取ることもできます。また、SampleProject.html を HTA に変更するつもりです。実は SampleProject.hta と名前を変更するだけです。簡単でしょう。

必ず、すべてのファイルを 1 つのフォルダに保存してください。さて、ここからがおもしろいところです。

XAML ファイル

ご想像のとおり、今月の Hey, Scripting Guy! のポイントはどれも XAML ファイルに関係しています (ついでに、XAML は "ザメル (zamel)" と発音します。"キャメル (camel)"、"ママル (mammal)"、"エナメル (enamel)" などと韻を踏んでいます)。XAML は Extensible Application Markup Language の略です。特に、XAML は、XML に似た言語を使って、ユーザー インターフェイスを作成する方法を提供します。この機能を使えば、特にシステム管理者がユーザー インターフェイスを簡単に作成できるようになるのでしょうか。答えはすぐにわかります。

この答えを探すには、まずメモ帳を起動して SampleProject.xaml ファイルを開きます。既存のコードがある場合は、次のコードに置き換えます。

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

注 : SampleProject.hta は SampleProject.xaml から情報を読み込むようにあらかじめ構成されています。別の XAML ファイルを使用するには、CreateSilverlight.js ファイルを編集する必要があります。

コードを貼り付けたら、SampleProject.xaml ファイルを保存し、SampleProject.hta ファイルをダブルクリックします。何が表示されるでしょうか。そうですね、大きくて間の抜けた灰色の四角形が表示されます。

待ってください。まだ行かないでください。確かに表示されるのはこれだけです。

見栄えが悪いのは、まだ何もしていないからです。ここまでの作業では、XAML ファイルにキャンバス (Canvas) を追加しただけです。しかし、これは大事な一歩です。つまり、油絵を始めるには、まず絵の具を塗るキャンバスを用意する必要があります。同じことが、Silverlight にも当てはまります。プロジェクトに要素を追加する前に、まず "絵の具を塗る" キャンバスを用意する必要があります。そして今、キャンバスの用意ができました。

ところで、幅 300 ピクセル、高さ 300 ピクセルの灰色の四角形が表示されたのはなぜでしょう。答えは簡単です。CreateSilverlight.js ファイルの既定の仕様だからです。この既定値が気に入らなければ、CreateSilverlight.js を開いて、必要に応じて設定を調整するだけです。幅 300 ピクセル、高さ 800 ピクセルの白いキャンバスはいかがでしょう (これから例に使うこの設定は、気に入っていただけると思います)。では、CreateSilverlight.js に次の 3 行があることを確認します。

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

注 : お気付きのように、元の .js ファイルでは、背景色は #D6D6D6 に設定されていました。ここでは白 (white) に設定しました。つまり、XAML ファイルでは RGB 値と色の名前の両方で色を表すことができることがわかります (色の名前と値の完全な一覧については、msdn2.microsoft.com/bb188314.aspx を参照してください)。Scripting Guys は色を RGB 値で表す方が好みなのですが (「我が家は FFFFFACD 色に FFCD5C5C 色の飾りが付いているんだ」)、ここでは色の名前を使うことにします。

おまけのヒント : キャンバスの背景色には純色以外も使用できます。図 2 のコードを XAML ファイルに貼り付け、表示を確認します。

Figure 2 すてきな色

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

試してみましたか。かなりクールでしょう。

もちろん、空白のキャンバスは、それ自体ではあまりおもしろくありません。そこで、このキャンバスにオブジェクトを追加してみましょう。Silverlight にはあらゆる種類のさまざまなオブジェクト (楕円、四角形、線、多角形など) を追加できますが、古き良き形式のテキスト ブロックをキャンバスに追加することにしましょう。その方法は、次のタグを XAML ファイルの <Canvas> タグと </Canvas> タグの間に挿入することです。

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

ご覧のとおり、この XAML コードはそれほど複雑ではありません。まず、<TextBlock> タグを使い、このタグにさまざまな TextBlock パラメータ (Name、FontSize など) を含めます。次に、</TextBlock> タグを使って、TextBlock の終了を示します。どこがクールなんだと言いたそうですね。オブジェクトを XAML ファイルに追加する方法は、どれもこれとほぼ同じです。幅 300 ピクセル、高さ 100 ピクセルの四角形を追加する場合は、次のコードをご覧ください。

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle>

ところで、四角形などの図形をキャンパスに追加する場合は、必ず、Fill や Stroke の色を指定してください。色を指定しないと、Silverlight ではキャンバスに透明な四角形が追加されます。四角形は確かに存在しますが、スーパーマンのように X 線が見えるのでない限り、この四角形は見えません。

Fill と Stroke の色と言えば、これは一部の Silverlight オブジェクトに色を設定する方法です。オブジェクトによっては、ブラシを使う必要があるものもあります。たとえば、おまけのヒントで示したように (説明はしていませんが)、LinearGradientBrush を使います。オブジェクトを純色で塗りつぶす場合は、その名前が示すとおり SolidColorBrush を使用できます。たとえば、図 3 の、テキストを赤く "塗りつぶして" いる (厳密には、TextBlock の Foreground プロパティを塗りつぶしている) XAML タグを見てください。

Figure 3 テキストを塗りつぶす

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

もっとクールな効果に、テキストを画像で塗りつぶす ImageBrush プロパティがあります。

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

もう 1 つヒントを紹介します。ImageBrush プロパティを使う場合、テキストが大きいほど表示の効果を高めることができるので、FontSize の値を大きくしたくなるでしょう。

試してみて結果をご覧ください。思いどおりの効果が得られるでしょう。

でも待ってください、お楽しみはこれからです

本当のことを言うと、ここまでは私たちに都合の良いことだけを取り上げてきました。Silverlight でテキストを表示できるのはクールです。四角形、楕円、多角形などを描けるのはもっとクールです。しかし、Silverlight プロジェクトにアニメーションを追加できることに比べれば、たいしたことではありません。

繰り返しますが、この記事では、Silverlight アニメーションを作成する方法の一部を紹介するだけです。単にそれ以上の説明のスペースがないためです (私たちを責めないでください。"TechNet Magazine" を Hey, Scripting Guy! **Magazine にするよう提案し続けているのですが、明らかに私たちの電子メールは読まれていません)。

前置きはこれくらいにして、テキストがゆっくりと (しかし確実に) フェードインする、クールな効果を紹介しましょう。図 4 のコードを XAML ファイルの <TextBlock> タグと </TextBlock> タグの間に追加します。

Figure 4 TextBlock の妙技

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

確かにこのコードではとても複雑な処理をしているように見えますが、さいわいにも大部分はお決まりのタグです。まず、アニメーションを XAML ファイルに追加するだけではいけません。アニメーションを実行するタイミングを指定する必要があります。そのためには TextBlock に一連のトリガを指定する必要があります。今回は、次のように TextBlock が読み込まれるたびに起動するトリガを作成しましょう。

<EventTrigger RoutedEvent="TextBlock.Loaded">

Silverlight では、アニメーションはストーリーボード (映画業界からの借用語) 上で実行する必要があります。<BeginStoryboard> タグと <Storyboard> タグがあるのはこのためです。

テキストをフェードインするには、Opacity プロパティを変更する必要があります。 プロパティの値を 0.0 (透明) から 1.0 (不透明) に徐々に増やします。Opacity は Double のプロパティ (倍精度の数値に基づくプロパティ) なので、DoubleAnimation アニメーションを使用します。では、DoubleAnimation アニメーションはどのように使うのでしょうか。もちろん、アニメーションで動かすオブジェクト (この場合は TextBox に付けた Test という名前) と、対象にするプロパティ (Opacity) を指定します。さらに、アニメーションの範囲 (透明度 0.0 ～ 1.0) とアニメーション全体の実行時間 (5 秒間) の両方を指定します。つまり、次のようになります。

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

注 : 5 秒間を指定する構文が 0:0:5 (時、分、秒) となっていることを確認してください。5 とだけ指定してもエラーは発生しませんが、アニメーションが完了するまで 5 日間かかります。

試してみましたか。では、今度は次のスクリプトを試してみてください。次のように、DoubleAnimation タグの内部で AutoReverse プロパティを True に設定します。

AutoReverse="True"

アニメーションがフェードインし、その後フェードアウトして元に戻ります。

RepeatBehavior プロパティを Forever に設定すると、テキストはフェードインとフェードアウトを、永遠に繰り返します。

RepeatBehavior="Forever"

永遠は少々長すぎるでしょうか。では RepeatBehavior を、たとえば 3x に設定して、アニメーションを 3 回再生して停止するようにしましょう。

RepeatBehavior="3x"

自分で言うのもなんですが、なかなかクールでしょう。しかし、フェードインとフェードアウトを繰り返すテキストではなく、少しずつ色が変わるテキストを表示する場合はどうでしょうか。この場合は、次の例のように ColorAnimation アニメーションを使います。

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

注 : この例を試す場合は必ず赤いテキストから始めてください。テキストを赤く塗りつぶす方法はもう説明しましたね。

どうです、おもしろかったでしょう。おや、少しがっかりしているようですね。気持ちはわかります。ColorAnimation はすてきでしたが、本当は、画面のあちこちに画像を動き回らせたかったんですよね。落ち込まないでください。画面のあちこちに画像が動き回るようにできなければ、Silverlight ではありません。次のスクリプトを試してみてください。

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

ご覧のように、TextBlock が最初の位置から、キャンバスの左端 (Canvas.Left) から 150 ピクセルの位置までゆっくり移動します。TextBlock を上下に動かすには、次のように Canvas.Top プロパティを使用するだけです。

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

このようなアニメーションを組み合わせて、TextBlock を上下左右の両方に動かすことはできるでしょうか (わくわくしますね)。さっぱり分かりません。しかし、ヒントをお教えします。両方のアニメーションを (次々に) XAML ファイルに貼り付け、結果を確認します。

注 : 今のは嘘です。最初からこのアニメーションを組み合わせることができることはわかっていました。実際、1 つの Silverlight プロジェクトに大量のアニメーションを詰め込むことができます。1 つのアニメーションが終わってから次のアニメーションが開始するようにタグの追加が必要な場合があるので、これは少々厄介です。しかし、XML に似たタグを少し入力するだけで、とてもおしゃれなアニメーションを作成できます。

残念ですが、今日はここまで

ええ、わかっています。私たちも終わりにしたくはありません。すてきなものが完成したときは特にそうです。でも、心配しないでください。これで終わりにする必要はありません。Silverlight についてもっとお知りになりたい方は、scripter@microsoft.com (英語のみ) までご連絡ください。皆さんの関心が高ければ、今後のコラムで取り上げることを検討します。また、TechNet スクリプト センター (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx) を参照してください。完全な XAML の例 (これが本当の eXAML でしょうか) へのリンクを掲載します。それまでは、カール マルクスとフリードリヒ エンゲルスがその宣言『ブリュッセル共産主義通信委員会から G. A. ケトゲンへの手紙』の末尾で述べたように、「おやすみなさい、お帰りの際は安全運転で」。

Microsoft Scripting Guys は、マイクロソフトの仕事をしています、というよりもマイクロソフトにより雇われています。野球をプレイしたり監督したり観戦したり (または他のさまざまな活動を) しているのでない限り、彼らは TechNet スクリプト センターを運営しています。詳細については、www.scriptingguys.com を参照してください。

© 2008 Microsoft Corporation and CMP Media, LLC. All rights reserved; 許可なしに一部または全体を複製することは禁止されています.