Silverlight / WPFの最近のブログ記事

Gyaoが7/1（火）にリニューアル予定で、今後にSilverlightを視聴環境に推奨予定となりました。 

「GyaOリニューアルのお知らせ」

SilverlightがインストールされていないPCでGyaoにアクセスすると、Silverlight利用推奨の案内が表示されます。
 

このブログでは、立ち上げ当初からAdobe AIRやSilverlightなどの、RIA技術を追いかけてきました。
いまでは随分と余計な要素（いわゆるノイズ）が混じるようになってしまいましたが・・・

Adobeの「AIR」、Microsoftの「Silverlight」、Googleの「Gears」、Sunの「Java FX」、Curlの「Nitro」等々・・・
いずれも、ブラウザとデスクトップの両方にRIAを実現する技術で、アプローチ方法やベースとなる技術が違うだけで、その狙いはほぼ同じものだと思います。

それは、OSを影の存在にすることです。

ブラウザの枠を超えて、リッチなWebアプリケーションを実現するとか、ブラウザからPCのローカルデータにアクセスすることが「真の」目的ではないと思います。
どちらかというとそれはMicrosoftやAppleといった、OSを提供している企業を刺激しないための目くらましだと思います。

さて、ここ最近の私が個人的に気になった記事が3つあります。

• 新プラットフォーム戦争に備えよ。Google GearsはMicrosoftの利益を直撃する
• Curl、デスクトップRIA対応の”Nitro”をリリース
• OperaがGoogleの「Gears」をサポート

とうとうYahoo! 動画　Silverlight採用へ・・・
各ニュースサイトで、同様の記事がありました。

• 「Yahoo！動画」でSilverlight採用へ　Macで閲覧可能に - ITmedia News
• ヤフー、Silverlightを採用 - ITmedia エンタープライズ
• Yahoo! JAPAN、Silverlight対応の動画配信サービス提供へ | ネット | マイコミジャーナル
• ヤフー、マイクロソフトの「Silverlight」採用を表明～Windows・Mac・UNIXのマルチプラットフォームで動画展開（RBB TODAY） - Yahoo!ニュース

マイクロソフト自身も同様の発表をしています。
「Microsoft Silverlight テクノロジをヤフー株式会社が採用することを表明」

MicorsoftがSilverlightを使った検索サイトを公開しました。
その名も「tafiti」
http://www.tafiti.com/

実際試しにアクセスしてみました。
残念ながら私の環境ではFirefoxでは見れませんでした。
仕方が無いのでInternet Explorerでアクセスしなおすと、無事表示されました。

WEB検索、イメージ検索、RSS検索、ニュース検索とエフェクトかけながら検索対象を切り替えることができます。
検索結果をドラッグして、右側のボックスに登録してラベル名をつけることもできます。
ちなみに検索エンジンは、同社のWindows Live Searchのエンジンを使っているようです。

Microsoft Expression Blendで今度はRSSの取得をしてみます。

新規プロジェクトを作成。
[Combo Box]と[Text Block]を配置します。

[Objects and Timeline]パネルでLayoutRootを選択します。
画面右側の[Projects]パネルで[Data]の[+XML]をクリック。
[Add new XML data source]ダイアログが開きますので、取得したいRSSフィードのURLを入力します。
ちなみにRSSフィードの取得に失敗するとエラー画面が表示されます。

続いて、[Properties]パネルで[Common Properties]の[Data Context]のNEWボタンの横にある[Advanced property options]をクリックして、[Create Data Binding]ダイアログを開きます。

Microsoft Expression Blendをちょこちょこと触っています。
今度はデータのバインドのやり方です。
ちなみに画面はすべてMicrosoft Expression Blend　RC（英語版）です。
話もRC（英語版）で進めていきますが、ベータ（日本語版）でもそんなに違いは無いと思います（たぶん）

■STEP1

新規プロジェクトを作成。
[ToolBox]にある[Asset Library]からアートボードにつぎの4つを配置していきます。

まず[ScrollViewer]を配置。
これはスクロールバーが出る領域と考えてください。
次に、その中に[TextBlock]を追加。
中に適当に長いテキストを流し込みましょう。できれば[ScrollViewer]の領域をはみ出るくらいに。

※注意点その１
[TextBlock]オブジェクトが[ScrollViewer]内にあることを確認しましょう。
画面左下の[Objects and Timeline]パネルに、オブジェクトの階層が表示されています。
子要素を持つオブジェクト名の左側には白い逆三角マークがついています。
[ScrollViewer]の左側に白い逆三角マークがついており、そこをクリックすると[TextBlock]が表示されることを確認しておきます。

※注意点その２
[TextBlock]のサイズはAutoにします。
[TextBlock]を選択した状態で、画面右にある[Properties]パネルの[Layout]にWidthとHeightがあります。
ここに数字が入っている場合は、その欄の横に[Set to Auto]（四角に矢印が入っているマーク）があるので、クリックしてサイズをAutoにしておきます。
すると、横幅は親要素である[ScrollViewer]の範囲一杯に広がり、縦幅は流し込んだテキストが終わるまでに広がると思います。

次に[Slider]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントサイズを変更できるようにしたいと思います。
画面右にある[Properties]パネルの[Common Properties]があります。
[Maximum]の項目に100と入力。
[Minimum]の項目に5と入力。
[Value]の項目に12と入力。

続いて[Combo Box]を配置。
これを使って[TextBlock]に流し込んだテキストのフォントを変更できるようにしたいと思います。
[Combo Box]の子要素として[ComboBoxItem]を配置します。
[Objects and Timeline]パネルで[Combo Box]と[ComboBoxItem]がツリー上に階層表示されていることを確認して置いてください。
[ComboBoxItem]が[Asset Library]に表示が無かったら、[Asset Library]ウインドウの右上にある[Show All]にチェックを入れれば出てくると思います。
[ComboBoxItem]を選択して、画面右にある[Properties]パネルの[Common Properties]を表示させます。
[Content]欄があるので、そこにフォント名を入力します。例えば、「Arial」とか、「Tahoma」とか、「Courier New」などなど。

Microsoft Expression Blendは制御するためのプログラム言語に複数の選択肢があるのが特徴です。

Expression Blend RC（英語版）でもVisual BasicとC#が選択できます。

■Visual Basicの場合

■C#の場合

Microsoft Expression Blendで今度はWMVビデオを追加とコントロールをしてみます。

ちなみに前回でインストールしたExpression Blend RC（英語版）で話を進めていきます。

Menu > Project > Add Existing Item...で、配置したいムービーファイルを追加します。
今回はWMVファイルにしました。

ツールパネルのAsset LibraryのMediaタブに選択したムービーファイルが表示されます。
アートボードにムービーを配置します。

ついでボタンを2つ配置。
イベント・トリガで、ムービーをポーズさせるボタンと、ムービーを再開させるボタンを作成します。

アートボードに配置したボタンには必ず[プロパティ]パネルで名前をつけておきます。
選択ツールでボタンオブジェクトを選択。
左上の[トリガ]パネルでイベント・トリガを追加します。

ポーズボタンを作成するのだったら、Pause。
プレイボタンを作成するのだったらResumeを割り当てます。

これでプロジェクトをビルド、ショートカットのF5でプロジェクトのテストをすれば確認できます。
この要領で、ムービーをストップさせたり、最初から再生させたりするボタンをどんどん作成できます。

Microsoft Expression Blend：RC(英語版)をダウンロードしました。
RC=Release Candidate　つまり、リリース候補っていうことで、いよいよ製品版に近づいてきたわけです。
英語版ではありますが、ベータ（日本語版）を使ってみたところ、特にメニューとかが英語に変わっても問題無さそうだったので、RC（英語版）を使ってみることにしました。

インストールするにはベータ（日本語版）をアンインストールする必要があります。

添付されているサンプルがクオリティの高いものになっています。

■Animation Studio

→お絵かきソフトです。

Expression Blendの続きです。

今度はコードを記述せず、イベントとアニメーションの基礎をやりたいと思います。
前回と同じように、ボタンとラベルを配置します。
前回はボタンオブジェクトを選択して、右側にある[プロパティ]パネルにある雷マークのついた「イベント」をクリックして、イベント・ハンドラを定義しました。

Expession Blendでは、トリガという機能を使うと、コードを記述しなくてもUI部分の動作をさせることができます。
例えば、ラベルの文字を変えたり、ボタンを色を変えたりすることが、コードを記述しなくてもできるのです。

トリガは2種類あります。
イベント・トリガとプロパティ・トリガです。

イベント・トリガは、ボタンをクリックしたりとかイベントが発生したときに実行されるもの。
プロパティ・トリガは、プロパティの値が変更されたときに実行されるものです。

次の例は、ボタンをクリックしたときに実行されるイベント・トリガです。

まず、アートボードに配置した、ボタンオブジェクトを選択します。
イベント・トリガを作成するには、［組み合わせ］パネルの［トリガ］にある［＋ イベント トリガの追加］ボタンをクリックします。

トリガのオブジェクト（ボタンとかウインドウとかラベルとか）と、対応するイベントがドロップダウンリストで選択できます。

選択したボタンオブジェクトと、イベントにClickを選択することで、ボタンをクリックした際に実行されるトリガになります。

ドロップダウンリストの右下にある、プラス記号のマーク（［新しい値の追加］ボタン）をクリックして、このトリガに対するアクションを追加します。

「使用できる、またはコントロールできるタイムラインが存在しません。タイムラインを1個作成します。」というダイアログが表示されますので、[OK]をクリック。