Ruby Freaks Lounge

第18回 Ruby on Railsで開発するSilverlightアプリケーション

この記事を読むのに必要な時間:およそ 4.5 分

インターフェイス要素の作成

Silverlightアプリケーションでは基本的なインターフェイス要素をXAML,マネージコードをIronRuby(あるいは他の言語プラットフォーム)で記述するのが基本スタイルです。

しかし,動的にインターフェイス要素を生成する場合はマネージコードからインターフェイス要素を作成する必要があります。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行目は生成したオブジェクトを表示領域(root)に結合しています。12行目,13行目は結合したroot内でのnewtextの相対位置を設定しています。

これを実行して,文字をクリックすると下の表示になります。

図2 

図2 

上のサンプルのnewtextと等価なXAMLが以下のコードです。

  <TextBlock Text="create new object" FontSize="20" Canvas.Top="100" Canvas.Left="100" />

ストーリーボードによるアニメーション

ストーリーボードとはSilverlightでの複数のアニメーションをパッケージした要素です。これもサンプルを見る方がわかりやすいですので,XAMLに記述したストーリーボードをマネージコードで動かしてみます。

まず,xamlのroot要素(Canvas)の中に以下のコードを追加します。

<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秒(Duration)でテキストが下に300ピクセル分動き,同じ速度で戻ってきます(AutoReverse⁠⁠。この動きを延々繰り返しています(RepeatBehavior⁠⁠。

10行目からのイベントハンドラはテキストをクリックしたときの処理で,ストーリーボードの停止,再開を行います。

本格的なアプリケーションを作るために

クリエイターとの連携

大規模なアプリケーション,特にUIの凝ったものを作るためにはデザイナーとの連携が必須になります。SilverlightではUIにあたる部分がマネージコードから分離されているため,XAMLでのデザイン工程とのマネージコードを使ったシステム開発を比較的スムーズに連携することができます。XAMLのデザインツールとしてはMicrosoft Expressionが利用されています。

前回の記事でXAMLとマネージコードの関係はHTMLとJavaScriptの関係に近いという説明をしましたが,ワークフローの面でも近いといえます。

リソースの管理

SilverlightアプリケーションはリッチなUIを持つので,画像,音声などのコンテンツを多用します。そのため外部に置いたファイルを呼び出すことも多くなりますが,注意点が1点あります。それはSilverlightのxapファイルの呼び出し元によってパスの指定方法が変わる点です。

たとえば,以下のURLにあるSilverlightアプリケーションを呼び出したとします。

http://host/path/xxx.xap

ここから同じドメイン内にある外部ファイルを呼び出すときには,以下のURLが起点となります。

http://host/path/

たとえば,XAMLで外部ファイルのパスに「/image.jpg」と設定すると,⁠http://host/path/image.jpg」と解釈されます。http://host/image.jpgを呼び出したい場合は「http://host/image.jpg」と記述する必要があります。

SilverStarプラグインではリソース管理用にpublic/resourcesディレクトリを自動的に作成します。これはSilverlight用の素材データをresources以下に配置して,mod_rewriteでresources以下に変換することを想定しています。

本番環境

SilverStarプラグインはxamlのレンダリング,マネージコードとの結合,xapデータの生成をアクセス時に実行するため,本番環境ではかなり重い処理になってしまいます。

そのため,生成したxapデータはキャッシュする必要があります。最も簡単な方法はRailsのページキャッシュ機構をそのまま適用することです。

  class SilverlightController < ApplicationController
    caches_page
 
    # methods
  end

これだけで生成したxapデータを静的ファイルとして保存できます。

最適化

本番環境ではパフォーマンスが求められます。IronRubyで生成したクラスオブジェクトとSilverlight内のインターフェイス要素では,現在のバージョンではアクセス速度に差があります。動きの多いフレーム処理を行うような場合はこのような点を考慮して実装する必要があります。

どうしてもパフォーマンスが出ない場合はより高速な言語を使って実装する必要性が出てくるかもしれません。ライブラリが共通なので,こういった場合の移植性は高いといえるでしょう。

おわりに

以上がSilverlightの簡単なアプリケーションを作れるまでの説明になります。

Silverlightにはここでは紹介できなかった機能がまだ多くあります。IronRubyはまだβ版ですが,正式版に向けて積極的にメンテナンスされています(2009年8月に最新版0.9.0がリリースされました⁠⁠。多くの可能性を持ったプラットフォームだと思いますので,読者の方にもぜひ実際に動かしてみていただきたいです。

最後にSilverlightとRuby on Railsを使った今回のサンプルより,一歩進んだアプリケーションの紹介をしておきます。

こちらはSilverlightとRuby on Railsを利用した簡単なゲームアプリケーションです。mixiプラットフォーム上で動くので以下の手順でお試しください。

  1. mixiアプリ オープンβコミュニティに参加します
  2. mixiアプリを使用する専用アドレスでログインします
  3. アプリ紹介ページからアプリを登録します
  4. 登録したらアプリを起動します

著者プロフィール

今村庄一(いまむらしょういち)

株式会社ドリコム所属。メイン業務は自社Webサービスの開発だが,プログラミングコンテストの運営,全文検索エンジンの研究やSilverlightでの開発などいろいろ手を出している。