前回のおさらい
前回記事はSilverlight、
箇条書きで簡単にセットアップの手順をおさらいします。
- Ruby/
Rails環境を準備 (要rubyzipモジュール) - SilverStarプラグインをインストール
- ./
script/ generate silverlight [name]を実行 - viewにインターフェイス要素を記述
(拡張子xaml) - controllerでrender_
silverlightを行う - app/
silverlight/ xxxx. rbにrubyでマネージコード (制御コード) を記述 - http://[host]/[path].xapにアクセスしてみる
準備
前回示したサンプルではrubyのマネージコードにバグがあっても真っ白になるだけです。この後の内容を読者の方に試していただくにあたって、
<div id='errorLocation'></div>
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="600px" height="400px">
<param name="initParams" value="debug=true, reportErrors=errorLocation" />
<param name="source" value="/silverlight/test/1.xap"/>
</object>
これで、
Silverlightアプリを作ってみる
この節ではSilverlightアプリの開発における基本的な要素について解説を行い、
インターフェイス要素へのアクセス
Silverlightのインターフェイス要素には領域
まずは最も基本的な以下の処理を行います。
- UI要素に名前をつける
- 1.でつけた名前を使ってUI要素を呼び出す
- UI要素の属性を変更する
UI要素に名前をつけるには、
<Canvas
x:Class="System.Windows.Controls.Canvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600" Height="460"
Background="White"
x:Name="root">
<TextBlock x:Name="hello" Text="Hello! Silverlight!!" FontSize="64" />
</Canvas>
そして、
require "lib/silverlight"
require "mscorlib"
class App < SilverlightApplication
use_xaml(:type => Canvas, :name => "app")
def initialize
hello.text = "Hello! IronRuby!!"
end
end
$app = App.new
これで最初に表示される文字が

要素名をそのままメソッドにしてアクセスすることが可能です
require "lib/silverlight"
require "mscorlib"
class App < SilverlightApplication
use_xaml(:type => Canvas, :name => "app")
def initialize
name = "he" + "llo"
_(name).text = "Hello! IronRuby!!"
end
end
$app = App.new
上記は変数名を名前としてアクセスしています。これは最初の例と同じ挙動になります。
Silverlightで頻繁に使われる要素とリファレンスへのリンクをここで紹介します。リファレンスにあるサンプルコードはVB及びC#のものしかありません。しかし、
- System.
Windows. Shapes名前空間 - System.
Windows. Controls名前空間 - System.
Windows. Media名前空間 - System.
Windows. Media. Animation名前空間
イベントハンドラ
クリック、
require "lib/silverlight"
require "mscorlib"
class App < SilverlightApplication
use_xaml(:type => Canvas, :name => "app")
def initialize
hello.mouse_left_button_down do |s, e|
s.text = "Click! Silverlight!"
end
root.key_down do |s, e|
hello.text = "Key pushed!" if e.Key = Input::Key.enter
end
end
end
$app = App.new
上記の太字部分がハンドラの記述です。これを実行すると、
イベントハンドラに渡される2つの引数s, eのsはイベントを発生させたオブジェクト、
入力に関するクラス
インターフェイス要素の作成
Silverlightアプリケーションでは基本的なインターフェイス要素をXAML、
しかし、
1: require "lib/silverlight"
2: require "mscorlib"
3:
4: class App < SilverlightApplication
5: use_xaml(:type => Canvas, :name => "app")
6:
7: def initialize
8: hello.mouse_left_button_down do |s, e|
9: newtext = TextBlock.create(:text => "create new object", :font_size => 20)
10: root.children.add(newtext)
11: Canvas.set_left(newtext, 100)
12: Canvas.set_top(newtext, 100)
13: end
14: end
15: end
16: $app = App.new
10行目はTextBlockオブジェクト新しく生成しています。11行目は生成したオブジェクトを表示領域
これを実行して、

上のサンプルのnewtextと等価なXAMLが以下のコードです。
<TextBlock Text="create new object" FontSize="20" Canvas.Top="100" Canvas.Left="100" />
ストーリーボードによるアニメーション
ストーリーボードとはSilverlightでの複数のアニメーションをパッケージした要素です。これもサンプルを見る方がわかりやすいですので、
まず、
<Canvas.Resources>
<Storyboard x:Name="hello_animation">
<DoubleAnimation Duration="00:00:03" Storyboard.TargetName="hello"
Storyboard.TargetProperty="(Canvas.Top)" From="0" To="300"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</Canvas.Resources>
そして、
1: require "lib/silverlight"
2: require "mscorlib"
3:
4: class App < SilverlightApplication
5: use_xaml(:type => Canvas, :name => "app")
6:
7: def initialize
8: @move = true
9: hello_animation.begin
10: hello.mouse_left_button_down do |s, e|
11: @move ? hello_animation.pause : hello_animation.resume
12: @move = !@move
13: end
14: end
15: end
16: $app = App.new
これを動かすと文字列が上下に動いて、
処理内容は9行目でXAMLに定義したストーリーボードを起動しています。ストーリーボードの内容は3秒
10行目からのイベントハンドラはテキストをクリックしたときの処理で、
本格的なアプリケーションを作るために
クリエイターとの連携
大規模なアプリケーション、
前回の記事でXAMLとマネージコードの関係はHTMLとJavaScriptの関係に近いという説明をしましたが、
リソースの管理
SilverlightアプリケーションはリッチなUIを持つので、
たとえば、
http://host/path/xxx.xap
ここから同じドメイン内にある外部ファイルを呼び出すときには、
http://host/path/
たとえば、
SilverStarプラグインではリソース管理用にpublic/
本番環境
SilverStarプラグインはxamlのレンダリング、
そのため、
class SilverlightController < ApplicationController
caches_page
# methods
end
これだけで生成したxapデータを静的ファイルとして保存できます。
最適化
本番環境ではパフォーマンスが求められます。IronRubyで生成したクラスオブジェクトとSilverlight内のインターフェイス要素では、
どうしてもパフォーマンスが出ない場合はより高速な言語を使って実装する必要性が出てくるかもしれません。ライブラリが共通なので、
おわりに
以上がSilverlightの簡単なアプリケーションを作れるまでの説明になります。
Silverlightにはここでは紹介できなかった機能がまだ多くあります。IronRubyはまだβ版ですが、
最後にSilverlightとRuby on Railsを使った今回のサンプルより、
こちらはSilverlightとRuby on Railsを利用した簡単なゲームアプリケーションです。mixiプラットフォーム上で動くので以下の手順でお試しください。
- mixiアプリ オープンβコミュニティに参加します
- mixiアプリを使用する専用アドレスでログインします
- アプリ紹介ページからアプリを登録します
- 登録したらアプリを起動します