日曜プログラマーのためのVisual Studio 2010入門 第2回

癒しのSilverlightコンテンツはこうして生まれた

Visual Studio 2010で始めるSilverlightコンテンツ制作

　癒しをテーマに空の移り変わりを表現することをコンセプトにしたSilverlightコンテンツ「倫子の空模様」が、ASCII.jp内の特設サイトで公開となった。機能やデザインは今後、段階を追って変更していく予定だが、第1弾としては、時刻と天候に合わせて変わる、空のグラフィックス、時間によってさまざまな表情の青山倫子さんの写真が見られる時計機能の2種類を盛り込んでいる。

倫子の空模様のページイメージ。時刻や天候に応じてグラフィックスが変わるので、何回かに分けてアクセスしてほしい。画面をゆらゆら動いている光の球を押すと、時計が表示される

　ここでは、こうしたSilverlightコンテンツをどう作成していくか、時刻や天候に応じて変わる空はどういった仕組みで実現されているかを中心に紹介していこう。少ないスペースでは、実際のコードを載せたり、細かな解説をしていくことは困難だが、この記事でもし仮にSilverlightコンテンツの作成に興味を持ったなら、読者自身も開発にチャレンジしてみてはどうだろうか。

Silverlight 4の開発環境を準備する

　まず最初に基本的な話として、Silverlightコンテンツを作るために何が必要かを簡単にまとめておこう。

• Silverlight 開発者向けランタイム
• Microsoft Visual Studio 2010 Professional
• Microsoft Silverlight 4 Tools
• Microsoft Expression Studio 4（Blend 4を含む）

　Visual StudioとExpress Studioは有償で販売されているツールだが、ともに無償提供されている試用版がある。Silverlightを体験したいという人は、まずは試用版をインストールしてみよう。試用期間内なら機能的な制限はほぼないため、操作方法の確認だけでなく、実際にさまざまな開発ができる。

　なお、Visual Studio上でSilvelight 4関連の開発をするためにはもう一つ準備が必要。Visual Studioをインストールした後に、マイクロソフトのサイトで提供されているSilverlight 4 Toolsをダウンロードし、追加でインストールする必要がある。

Silverlightコンテンツ開発の流れ

　次に、Silverlightのコンテンツを作成し、ウェブサイトに公開するまでの手順を簡単に見ていく。利用するツールとしては「Blend 4」と「Visual Studio 2010」の二種類が基本。

　コンテンツ内のレイアウトやアニメーションの作成など、クリエイティブに関わる部分はBlend 4、コンテンツ内に置かれたボタンを押した際に実行する動作を決めたり、今回紹介するような外部サイトのRSS情報を取得し、その内容に沿って表示内容を変える……などといった、プログラミングに関わる部分はVisual Studio 2010を使うと便利。

　まずはVisual StudioでSilverlightのプロジェクトファイルを作成してみる。初回作成時に、Silverlightの開発者向けランタイムのインストールが求められるので、合わせてインストールを進める。注意点としては、この「Silverlight 開発者向けランタイム」をインストールした後に、Internet Explorerなどのブラウザーなどで使う、通常のSilverlightプラグインをインストールしないこと。開発に必要となる機能の一部（デバッグなど）が、利用できなくなってしまうためだ。

　Visual Studioで作成したプロジェクトファイルは、デフォルト状態では、

C:\Users\【ユーザー名】\Documents\Visual Studio\Projects\【プロジェクト名】

の中に保存される。ほかのソフトで読み込むには【プロジェクト名】のフォルダ内にあるSLN形式のファイルを読み込む。

　試しに、Blend 4を起動して、Visual Studio 2010で作成したプロジェクトファイルを読み込んでみよう。Blend 4を起動すると、中央にウィンドウが表示されるので、Projectsタブを選び、「Open Project...」のアイコンをクリックし、SLN形式のファイルを指定するだけでいい。プロジェクトが読み込めたら、左ペインの「Projects」タブにある「MainPage.xaml」をクリックしてみよう。

　最初なので、ウィンドウ上に文字を表示するだけの簡単なSilverlightのコンテンツを作ってみることにする。文字を表示するだけであれば、Blend 4だけでもできる。左端にあるツール（Control）の中から「T」の形をしたアイコンを選び、中央に表示されている白い四角の上で、テキストを置きたい場所をドラッグして指定する。テキストブロックが作成され、好きな文字が入力できるようになるはずだ。

　テキストブロックの位置や大きさは、Ctrlキーを押しながらのマウス操作で、細かく調整できる。色やフォントを変えたい場合は、文字を選択した状態で右ペインに出る「Brushes」「Text」などで操作する。

　これだけで文字を表示するSilverlightコンテンツは作れる。しかし、面白味に欠けるので、文字を動かしてみることにする。下準備としてBlend上で、クリエイティブと同じサイズのCanvasを作成し、この下にTextBlockを移動しておく。また、CanvasとTextblockに名前を付ける。名前は右ペインにあるPropetiesで変更できる。ここではそれぞれCanvas、Helloとした。ここまで済んだら、プロジェクトをBlend上で一度保存して、先ほどと同じSLNファイルをVisual Studioで開く。

　Visual Studioで開いたら、右ペインのソリューションエクスプローラーにある「MainPage.xaml」という項目をクリックする。すると以下のようなコードが表示されるハズだ。赤枠内に注目してみよう。先ほど入力した文字がタグに囲まれているはずだ。

　この文字を動かすためには、プログラムを書く必要がある。右ペイン（ソリューションエクスプローラー）で、MainPage.xamlの下にある「MainPage.xaml.cs」をダブルクリックしてみよう。プログラムが書かれたエディターに画面が切り替わる。なお、拡張子の「.cs」はC#の略で、ここではプログラミング言語としてC#が選択されている。プロジェクトを作成する際には、Visual Basicなど別の言語を使うことも可能で、その場合は「.vb」という形で表示される。

図1 Hello Worldの文字が、動くプログラム

　細かい内容の解説は紙幅の関係で今回は割愛するが、取り急ぎ図1のようなコードを追加してみた。最初なら、ひとつひとつ手入力してみよう。デフォルトでも一部のコードがすでに書かれているし、補完機能などが働き、思った以上に簡単にコードが書けることが分かるはずだ。興味がある読者は、プログラミングの内容も詳しく見ていってほしい。

　入力が終わったら、メニューの「デバッグ」から「デバッグの開始」を選択。エラーがなければ、ブラウザーが立ち上がって、Silverlightのコンテンツが表示されるハズだ。なお、この際デフォルトで使用するブラウザーは32bit版のInternet Explorer 8にしておくことをお勧めする。

　問題なければ、先ほど入力した文字が画面内を跳ねまわるコンテンツが表示されるハズだ。不幸にもうまくいかなかった場合は、プログラムの入力内容を修正し、うまくいくまでトライする。

　これでSilverlightコンテンツができたわけだが、ウェブに公開するにはどうしたらいいだろうか？　ソリューションエクスプローラーから「HelloWorld.Web」を右クリックし、発行を選べばいい。Silverlightを貼り付けたHTMLファイルを含む、必要なファイル一式が用意されるので、あとはFTPなどで、それをそのままウェブサーバーにアップロードするだけ。それだけでSilverlightコンテンツの公開が可能になる。

RSS情報を取得して、コンテンツの動作を変えてみる

　特設サイトで公開しているSilverlightコンテンツ「倫子の空模様」では、時刻に合わせて空の色が変わり、晴れ・曇り・雨の天候が表現されている。天候の表現は、MSNのサイトで配信されている天気予報のRSS情報を利用して変えている。ここではRSSを扱う方法に関しても簡単に触れておこう。

　まずは、MSNのサイトからどのようなRSS情報が配信されているかを確認してみる。MSN天気（関連サイト）で、自分の住んでいる地域を絞り込んでいくと見慣れたRSSのアイコンが表示されるページにたどりつくはずだ。RSSアイコンをクリックし、Internet Explorerの「表示」メニューから「ソース」を選ぶと、MSN天気から配信されているRSSフィードの内容を確認することができる（RSS配信サイトの例）。

　サイトによって配信されるRSSの内容は異なるが、まずは必要な情報がどこに書かれているかを確認。大体は<title>、<Description>、<Link>などに必要な情報が書かれている。その部分の情報を読み込んで、それに応じた操作をするプログラムを書いていけばいい。

図2　RSSで取得した天候情報を文字で表すプログラム

　上は今回のコンテンツで使っているコードを一部改変したもの。緑色の文字で書かれた「// ↓ここから↓」～「// ↑ここまで↑」で囲われた部分が追加したコードだ。

　SilverlightでRSSの情報を読み込む際には「WebClient」というクラスがあるので、それを使う。サンプルコードは、RSSフィードを読み込んで、天候に応じた処理を行う簡単なプログラムである。

　beginLoadWeatherと言う関数の中の、「// Request with WebClient」以下、3行分がRSSの読み込みを行う部分となる。WebClientというクラスのインスタンス（downloder）を作成し、完了時に呼ばれるハンドラを設定と、読み込むURLを指定する。

　これで、RSSフィードの読み込みが開始されるので、返ってきたXMLデータをパースする。weatherFeed_OpenReadCompletedという関数の中にあるe.Resultがその結果で、「SyndicationFeed」というRSSを読むクラスを使って、XmlReaderに噛ませると、XMLのツリーから1件分のデータを取得できる。

　MSN天気では1件目に「曇」などのデータが入っているので、それをそのまま使うことができた。perseWetherFeedMsn という関数では、MSNが発行するエントリーのDescriptionのところに入っているHTML部分のタグを正規表現を使って除去し、まず1文字目の文字を見る。これを晴＝0、曇＝1、雨＝2などのように数値に変換し、それぞれの天候に合わせた動作を行うようにしている。

　なお、RSSを利用する際の注意点として、クロスドメインの問題がある。これは、セキュリティーなどへの配慮から、ドメイン名が異なるサーバーに置かれているRSSの取得には制限がかかるという問題である。サーバーが外部からのアクセスを許可できる設定になっている場合であれば問題ないが、そうでない場合は注意。外部サイトのRSS情報を活用する場合には、基本的に自由に利用できるよう公開されているものを使うことになる。

　例えば、自分の運営しているブログなどのRSSフィードを別のサイトで活用する場合などを想定して、こうした外部アクセスを許可するための方法を紹介しておこう。方法は簡単で、以下の内容を書いた「clientaccesspolicy.xml」というファイルを作成し、サーバーに置いておくだけだ。

【図3】clientaccesspolicy.xmlの記述例。テキストエディターなどで書いて、clientaccesspolicy.xmlという名前で保存し、サーバーに置く

　補足として、今回のSilverlightコンテンツでは動作に若干問題があったため、別サーバーにRSSを取得するPHPのファイルを置き、そこからSilverlightで取得する回避策を取っている。MSN天気は一般でも利用できる設定になっているため、本来は取得できるはずだったが、倫子の空模様では他サーバーをプロクシ的に利用している点を書き添えておく。

　ちなみに、図2のプログラムの【Sample.com】がプロクシ経由でRSS情報を取得する際のURLである。

天候は雲の数で表現

　「倫子の空模様」では、天気の表現を雲の数、時刻の表現を空の色のグラデーションで表現している。時間帯×天候で合計12種類に移り変わる。雲は実写画像をベースに4枚のレイヤーで表現されており、手前は速く横に流れ奥に行くにしたがって、遅く移動するよう設定している。

　こういったアニメーションを設定する際にはBlend 4の機能を利用するといい。StoryboardやTimelineといったツールが用意されている。また、時計機能に関しても1時間おきに画像が変わる設定となっており、特設サイトにも時間を変えて何度か訪れていただくとより楽しみが増すのではないかと思う。

　GUIのアプリケーションでは、マウスでボタンを押すといったイベントが発生した際に、それぞれの部品がどんな動作をするかを決め、プログラムを書いていく（イベントドリブン）が、Visual Studioでは、イベント名とその動作（ハンドラ）を結び付ける作業がとても楽だ。数文字を打ち込んでTABキーを押せば、ハンドラまで作成されるので、そこに処理を書いていくだけ。こういった省力化はツールを導入する大きなメリットと言える。

　SilverlightはVisual BasicやC#などのプログラミング言語が使え、Windowsのアプリケーションを作るのに近い感覚でプログラミングが可能な点が特徴だ。Windowsアプリを作った経験がある人にとっては、ほかのウェブ系のツールよりも、簡単に入っていけるのではないだろうか。