gihyo.jpサイトのロゴ

Ruby Freaks Lounge

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

2009-08-03

はじめに

SilverlightとIronRubyはMicrosoftが開発した次世代Webプラットフォーム技術です。Microsoftといえば.NET環境、というイメージが強いので普段Ruby on Railsで開発している方にとってはなじみが薄いかもしれません。

しかし、SilverlightとIronRubyを使った開発では.NET環境に依存せずに開発することも可能で、より多様なインターフェイスを持ったWebアプリケーション（RIA）を作りやすくなっています。

Ruby on Railsで開発したWebシステムにSilverlightの持つ機能を組み込むことで、より進んだWebアプリケーションを開発できるのではないかと期待しています。

今回は、SilverlightとIronRubyについて簡単に紹介を行ったあと、Ruby on Rails上にSilverlightの開発環境を構築し、簡単なアプリケーションの作成を行います。

SilverlightとIronRuby

Silverlightについて

Silverlightは2007年にリリースされたプラットフォームで、現時点での最新版は2009年7月20日にリリースされたバージョン3.0です。

Silverlightを非常にシンプルに言ってしまうと、Flashの対抗技術です。Silverlightアプリケーションを動かすためにはSilverlightを含むページにアクセスして、ブラウザにアドオンをインストールします。この手順はflashとほとんど同じです。また、提供される機能も複雑な図形やアニメーションなどFlashとの共通項は多いです。動画サポートなどSilverlightが得意としている機能もあるのですが、完成したアプリケーションの多くはFlashアプリケーションに近いといえるでしょう。

しかし、基盤となる技術やアプリケーションの開発スタイルという点ではかなり異なります。技術面で最も特徴的なのはSilverlightが多くの言語での開発を可能にしている点です。Flashでは基本的にActionScriptで開発を行うのに対して、SilverlightではMicrosoftが提供しているVisualBasicの他、今回紹介するRubyやPythonでの開発もサポートしています。

これはDynamic Language Runtime（DLR）技術を基盤として実現しています。以下の図のようにSilverlightアプリケーションをさまざまな言語で記述されたコードで動かすことができます。

図1　Dynamic Language Runtime
図1　Dynamic Language Runtime

また、SilverlightではUIに関する情報とUIを制御するコードが分離されています。 UIに関する情報はXAMLというXMLフォーマットで記述されます。

制御コードはSilverlightでは「マネージコード」と呼ばれ、先述したようにさまざまな言語で記述することが可能です。XAMLとマネージコードの関係はちょうどHTMLとJavaScriptと同じような関係と考えればわかりやすいでしょう。

以下の図のXAMLとHTMLがそれぞれインターフェイスを定義し、JavaScriptとマネージコードがそれぞれのインターフェイスを制御します。

また、SilverlightのマネージコードはHTMLの要素を直接操作したり、JavaScriptの関数を叩くような処理もできます。これは点線で表現しています。

図2　UI情報と制御コードの分離
図2　UI情報と制御コードの分離

gihyo.jp上にSilverlightを紹介する記事が掲載されているので、そちらも参考にしてください。

IronRubyについて

IronRubyはSilverlight上でRubyを動かすためのインタプリタです。一般的に配布されているRubyをそのままSilverlight上で動かすことはできないため、別のRuby処理系として開発されています。

類似コンセプトのプロダクトとして、JRubyをイメージするとわかりやすいかもしれません。

IronRubyはオープンソースで開発されているので、コードを参照することも可能です。

IronRubyを動かす

本稿ではIronRubyをSilverlight上で動かすことがメインになりますが、IronRubyはRubyの処理系なので単独で動かすこともできます。まず動作確認をしてみましょう。

Note:
この部分だけはWindowsでの動作を前提としていますのでご注意ください。

インストールと動作確認

インストールは、以下の手順で実行してください。

  1. IronRubyのダウンロードページからダウンロードする
  2. zipファイルを展開（なるべくわかりやすいディレクトリがいいでしょう）
  3. コマンドプロンプトを開く
    • [スタート]⇒[プログラム]⇒[アクセサリ]⇒[コマンドプロンプト]
    • [スタート]⇒[ファイル名を指定して実行]⇒cmdと入力
  4. IronRubyを展開したディレクトリに移動 
    > cd [IronRuby Directory]\bin
  5. IronRubyを実行 
    > ir
IronRuby 0.6.0.0 on .NET 2.0.50727.3082
Copyright (c) Microsoft Corporation. All rights reserved.

これでIronRubyの実行準備は完了です。

Rubyが実行できるか確認してみましょう。

>>> 1+1
=> 2
>>> Time.now.strftime("%Y-%m-%d")
=> "2009-07-28"
>>> [1, 2, 3].map {|i| i+1}
=> [2, 3, 4]

IronRubyでSilverlightを動かす

次にSilverlight上でIronRubyを動かす実験をしてみましょう。

> cd [IronRuby Directory]\silverlight\bin
> Chiron.exe /b /d:..\samples

Chiron.exeを実行するとWebサーバとブラウザが立ち上がります。samplesのディレクトリをたどって、samples\***\ruby\index.htmlを開くとサンプルが表示されます。

Silverlightではアプリケーションの配布形式としてxapという形式を使います（flashでいうところのswfに相当します⁠）⁠。Chiron.exeはxapファイルを動的に生成してブラウザに表示しています。xapパッケージの中にはxaml、Rubyのマネージコード、IronRubyを処理するためのライブラリなどが含まれています。app以下でソースコードを見ることができるので、いろいろ値を変えてみて動作を確認することもできます。

おまけ：IronRubyでRuby on Railsを動かす

実はRuby on RailsをIronRuby上で動かすことも可能です。……が、これは今回の記事の趣旨からは外れるので省略します。

興味のある方は荒井省三氏の記事をご覧ください。

Ruby on Rails上にSilverlight開発環境を作る

さて、いよいよRuby on Rails上にSilverlightアプリケーションの開発環境を作ります。まずはRuby on Railsアプリケーションを用意してください。

プラットフォームは何でも構いません。普段Ruby on Railsを利用している環境をご利用ください。

SilverStarプラグイン

Ruby on RailsでSilverlightアプリケーションを作るには、拙作のプラグインを導入すると便利です。プラグインの導入には以下が必要です。

  • git環境（githubにソースがあるので）
  • rubyzip（gem install rubyzipでインストールできます）
> cd RAILS_ROOT
> ./script/plugin install git://github.com/imasho/silverstar.git
remote: Counting objects: 40, done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 40 (delta 4), reused 0 (delta 0)
Unpacking objects: 100% (40/40), done.
From git://github.com/imasho/silverstar
 * branch            HEAD       -> FETCH_HEAD
> ./script/generate silverlight test
      create  app/silverlight
      create  lib/silverlight
      create  public/resources
      create  lib/silverlight/silverlight.rb
      create  app/silverlight/test.rb
      readme  readme.txt

[XAML templates]
  app/views/**/*.xaml.erb

[Images, sounds, and movies]
  public/resources

[IronRuby scripts]
  app/silverlight

[IronRuby modules]
  lib/silverlight

これでSilverlightアプリケーションの開発準備はOKです。

ここで、プラグインが作成するファイル、開発者が作成する必要があるファイルについてそれぞれ簡単に説明します。詳しい使い方については後述します。

1. RAILS_ROOT/app/views/*.xaml.erb
Silverlightのインターフェイスをxaml形式で記述します。ERBによってレンダリングされるので、通常のviewと同様にコードを埋め込んで実行することができます。
2. RAILS_ROOT/app/silverlight/*.rb
Silverlightのマネージコードです。このコードはSilverlightのxapパッケージの一部としてブラウザ上で実行するため、ここに記述するRubyのコードはSilverlightライブラリを使って書きます。
3. RAILS_ROOT/public/resources/
画像や動画を置くためのディレクトリです。
4. RAILS_ROOT/lib/silverlight.rb
プラグインが自動的に生成します。2. のマネージコードを記述するのに便利な関数が定義されています。
5. RAILS_ROOT/lib/*.rb
自分でライブラリを書きたい場合はここにファイルを作成すると、Silverlightの実行データを作成するときに同時に取り込まれます。

Hello! Silverlight

実際に動く単純なSilverlightアプリケーションを作ってみます。

controllerを定義

アプリケーションに必要なコントローラを定義しましょう。 

$ ./script/generate controller top index
$ ./script/generate controller silverlight

Silverlightの配布ファイルとHTMLは別々になのでコントローラを分けています。次にapp/controller/silverlight_controller.rbを編集します。

リスト1　app/controller/silverlight_controller.rbの編集
class SilverlightController < ApplicationController
  def test
    render_silverlight :script => "test"
  end
end

render_silverlightでSilverlightのxamlおよびxapのレンダリングを実行します。:scriptは呼び出すマネージコードの指定です。上の例ではRAILS_ROOT/app/silverlight/test.rbをマネージコードとして利用します。

xamlを作成

次にxamlを作成します。xamlの記法についてはこちらのページをご覧ください。ここではルート要素を描画領域を表現するCanvasとして、TextBlockを一つだけ作ります。

リスト2　xamlの作成
<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 Text="Hello! Silverlight!!" FontSize="64" />
</Canvas>

ここで、render_silverlightが動作しているかどうか確認するために、http://[host]/silverlight/test/1.xamlにアクセスしてみてください。上記のxamlが表示される（orダウンロードできる）はずです。

マネージコードを確認

次にマネージコードであるRAILS_ROOT/app/silverlight/test.rbを見てみます。以下の雛形が用意されています。これはこのままでも動作するので今回はそのままにしておきます。

リスト3　RAILS_ROOT/app/silverlight/test.rb
require "lib/silverlight"
require "mscorlib"

class App < SilverlightApplication
  use_xaml(:type => Canvas, :name => "app")

  def initialize
  end
end

$app = App.new

HTMLタグを埋め込む

最後に呼び出し側のHTMLにSilverlightを呼び出すタグを埋め込みます。先ほど作成したRAILS_ROOT/app/views/top/index.html.erbを下記に置き換えましょう。

リスト4　RAILS_ROOT/app/views/top/index.html.erb
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="600px" height="400px">
  <param name="source" value="/silverlight/test/1.xap" />
</object>

これで作業完了です。すべての作業がRails上で完結しています。アクセスしてみましょう。

http://[host]/top/index

Silverlight読み込み画面の後、以下が表示されればOKです。

図3　Hello! Silverlight!!
図3　Hello! Silverlight!!

次回について

Silverlightを操作するための詳しいリファレンスはこちらにあります。 ここにはRubyのサンプルコードが無く、どのオブジェクトがどの名前空間に定義されているのか 探すのに多少時間がかかるかもしれません。

次回は.NET FrameworkのライブラリをRubyから利用してSilverlightアプリケーションに図形、アニメーションなどさまざまな機能を追加していきます。

おすすめ記事

記事・ニュース一覧