Maiking RIA Apps by Ruby

邪道編～ Ruby で RIA を作ろう - IronRuby の活用 -

マイクロソフト株式会社デベロッパー & プラットフォーム統括本部デベロッパーエバンジェリスト荒井　省三

IronRuby ヒストリー簡易編John Lam が Redmond へ来たのが2006 年 10 月 ( ブログより )IronRuby プロジェクトを MIX 07 (2007 年 4 月 ) で発表

約 3 年半かかりました色々ありましたJohn Lam が抜けたりとか

1.0 を 2010 年 4 月にリリース祝

邪道編 Ruby を 256 倍使う本

<head> <title>Hello Active Script Ruby</title> <script language= "RubyScript" > @doc = @window.document def click(btn) @doc.all(btn).value = btn + " is here" end</script></head><body onload="@windows.alert 'Body is loaded !'" language= "RubyScript" > <input type= "button" id= "btn1" onclick= "click('btn1')" language= "RubyScript" > <input type= "button" id= "btn2" onclick= "@doc.all('btn2').value='btn2 is here'" language= "RubyScript" ></body></html>

おもしろい

本日のお題

邪道編の HTML スクリプトでRich Internet Application を作ること

予備知識IronRuby を使用しますIronRuby には３種類の実装があります

IronRubyon .NET 2.0

IronRubyon .NET 4

IronRubyon

Silverlight= >

説明より見てみましょう

動かしたもの

DOM スクリプティング

ハローワールド－その１－<head> <title> ハローワールド by Gestalt</title> <script type="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js"> </script>

</head><body> <h1> 初めてのゲシュタルト </h1> <script type="text/ruby"> window.alert " ルビーで表示します " </script> <script type="text/python"> window.Alert("Python で表示します ") </script></body></html>

利用するためのおまじない

利用するために「 dlr.js 」の宣言をします

<script type="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js"></script>

このコードに着目

type 属性に「 text/ruby 」とか「 text/python 」を指定するだけ後は、指定した言語のコードを記述

<script type="text/ruby"> window.alert " ルビーで表示します "</script><script type="text/python"> window.Alert("Python で表示します ")</script>

邪道編との比較

「 language 」属性が「 type 」属性に「 @window 」が「 windows 」に「 input 」要素などに「 language 」属性がないことを除けば、似ている？

<script type= "text/ruby" > window.alert " ルビーで表示します "</script>

<script language= "RubyScript" > @doc = @window.document def click(btn) @doc.all(btn).value = btn + " is here" end</script>

似てるよねー = おもしろくない？

じゃあ、DOM イベントを使ってみよう

ハローワールド –その２ -<p> メッセージ :<input type="text" id="txtMessage" /></p><input type="button" id="btnRun" value=" 実行します "/><p> 結果 :</p><div id="outArea1"></div><div id="outArea2"></div><script type="text/ruby"> # イベントハンドラの関数定義 document.btnRun.onclick do |s, e| document.outArea1.html = document.txtMessage.value + "byruby" end # ruby では、 innerHtml も html の指定も可能</script><script type="text/python"> def click(s, e): # イベントハンドラの関数定義 msg = document.txtMessage.value + " by Python" window.Alert(msg) document.outArea2.innerHtml = document.txtMessage.value + " by Python" # イベントハンドラを関連付ける document.btnRun.events.onclick += click</script>

HTML DOM スクリプティング

基本的に Java Script と同じPython では

DOM オブジェクト .events. イベント名 += ハンドラattachEvents( イベント名 , ハンドラ ) と等価div タグは、document.id 名 .innerHtml

Ruby ではDOM オブジェクト . イベント名 do又はオブジェクト . イベント名 = Proc.new {|s,e| }div タグは、document.id 名 .html 、 innerHtml は同じこの規則はソースコードの「 init.rb 」で定義

インラインスクリプトって邪魔くさくない？

ハローワールド –その３ - <h1> ハローワールド改２ </h1> <p> メッセージ： <input type="text" id="txtMessage" /></p> <input type="button" id="btnRun" value=" 実行します " /> <p> 結果： </p> <div id="outArea1" ></div><div id="outArea2" ></div> <script type="text/ruby" src="DLR/helloworld.rb"> </script> <script type="text/python" src="DLR/helloworld.py"> </script>

# イベントハンドラの関数定義 (DLR/helloworld.rb)document.btnRun.onclick do |s, e| document.outArea1.html = document.txtMessage.value + " by ルビー " end

スクリプトの外部ファイル化

script タグの src 属性でファイルを指定できるスクリプトファイルの部品化に有効

記述順序に注意ライブラリをまとめる場合は ZIP 化する

<script type="application/x-zip-compressed" src=" ライブラリの ZIP ファイル名 "></script><script type="text/ruby"> require “ アーカイブ / ライブラリ名 " # Python であれば import アーカイブ . ライブラリ名</script>

デバッグはどうするの？

プログラムのデバッグ方法

プログラムのデバッグ方法<head> <title>Ruby コンソールデバッグ用 </title> <script type="text/javascript"> window.DLR = {settings: {console: true, debug: true}} </script> <script type="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js" > </script>

</head><body> <h1> デバッグシナリオ </h1> <div id="message">Loading ...</div> <script type="text/ruby"> document.message.html = " こんにちは、 Ruby です !" </script></body>

グラフィックスは？（ XAML です）

ハローワールド 1 –XAML-<script type="application/xml+xaml" id="inlineXaml" width="400" height="400"> <Canvas xmlns="http://.../winfx/2006/xaml/presentation" xmlns:x="http://.../winfx/2006/xaml"> <TextBlock HorizontalAlignment="Center" Height="23" Width="Auto" FontSize="18" Text=" ハローワールド XAML 版"/> <TextBlock HorizontalAlignment="Right" Width="78" Height="23" Margin="10" Text=" メッセージ： "/> <TextBox x:Name="txtMessage" Width="248" Height="25" HorizontalAlignment="Center" /> <Button x:Name="btnRun" HorizontalAlignment="Left" Width="93" Height="29" Content=" 実行します "/> <!– 省略しています --> </Canvas></script>

このコードに着目

type 属性に「 application/xml+xaml 」と id 属性を指定するだけ

<script type="application/xml+xaml" id="inlineXaml" width="400" height="400"> XAML コンテンツを記述</script>

XAML + スクリプティング

ハローワールド 2 –XAML-

<body> <h1> ハローワールド XAML 版改 (Ruby)</h1> <script type="application/xml+xaml" id="externalXaml" src="DLR/HelloWorld.xaml" width="400" height="300"> </script>  <script type="text/ruby" class="externalXaml"> root = xaml.hellocanvas root.txtMessage.text = " てすと " # イベントハンドラを設定します root.btnRun.click { |s ,e| root.outArea.text = root.txtMessage.text + " by ルビー " } </script></body>


script タグの特徴application/xml-xaml に id 属性を指定text/ruby に class 属性を使って、 xml-xaml の id を指定

Ruby や Python スクリプトでは、「 xaml 」オブジェクトを使ってアクセス

xaml が XAML の親オブジェクト定義した XAML 要素は子オブジェクトxml.hellocanvas

なんか、遅くねー？

実行した結果

少し、遅い理由は何か…

htmlhead

body

objectsilverlightDLRObject1

objectsilverlightDlrObject_DOMOnly

次のミッション「早くすべし」

ハローワールド 3 –XAML-<body> <h1> ハローワールド XAML 版改 (Ruby)</h1> <script type="application/xml+xaml" id= "internalXaml" defer=“true” width= "400" height= "300" > XAML を記述 </script>  <script type="text/ruby" class= " internalXaml"> include Microsoft::Scripting::Silverlight app = DynamicApplication.Current root = app.LoadRootVisualFromString( document.externalXaml.innerHTML) root.txtMessage.text = " てすと " # イベントハンドラを設定します root.btnRun.click { |s ,e| root.outArea.text = root.txtMessage.text + " by ルビー " } </script></body>


script タグに「 defer=“true” 」を指定DOM 解析が即座にされないスクリプトで読み込む必要がある

DynamicApplication クラスゲシュタルトのホストオブジェクトCurrent プロパティで現在のオブジェクトLoadRootVisualFromString メソッドで XAML 文字列をルートビジュアルに設定

速度が向上した理由は、 object タグが 1 つになったため

詳細編

アプリケーションの構造

dlr.js によって、 object タグを追加Silverlight アプリケーション (dlr.xap)

dlr.xap によって、 script タグを解釈して実行

htmldlr.js dlr.xap

text/ruby

スクリプトタグtype id src class defer width

height

application/xml-xaml

必須オプション不要オプション必須

text/python オプション XAML を使用する場合は必須」

不要( 内部では 1 に固定 )

text/ruby

application/x-zip-compressed

必須( 拡張子はzip)

不要

dlr.js によって、silverlight に必要な object タグが自動的に追加される複数の object タグが追加される場合もある

document、window オブジェクトなどは Java Script と同様に利用できるコードに class 属性を使用すると以下の使い方ができる

XAML の id 属性を指定することで、 xml 変数でアクセスできるDLR.createSilverlightObject メソッドで使う場合のエントリポイントとしても使用できる ( xamlid パラメータ )

dlr.xap の構造

Microsoft.Scripting.slvxSilverlight のライブラリキャッシュ (ZIP)Silverlight 3 から提供された機能XAML スクリプティングと言語サポートを提供

言語用 ZIP ファイル (slvx)languages.config で定義DynamicApplication クラスが、必要に応じて言語用ライブラリを読み込む

dlr.xapAppmanifest.xam

llanguages.config

Microsoft.Scripting.slvxDynamicApplication

ホスト関係のアセンブリ

IronPython.slvx言語アセンブリ

IronRuby.slvx言語アセンブリ

dlr.js のオプション 1/2コンソールデバッグ

「 window.DLR = {settings: {console: true, debug: true}} 」を設定実行している言語のコンソールを表示

オフライン実行「 window.DLR = {path: ‘.’}; 」を設定パスに dlr.xap を配置したフォルダーを指定関連するファイルを配置するdlr.xap 、 Microsoft.Scripting.slvx 、IronPython.slvx 、 IronRuby.slvx言語ファイルは必要なものだけで良い

オンライン実行dlr.js 内で dlr.xap への URL が記載されている

dlr.js のオプション 2/2

windows.DLR に設定できるものsettings ： Silverlight のオブジェクトタグのパラメータや initParams のパラメータ ( 名前 : 値 )

id : オブジェクトタグの ID 属性width 、 height ：オブジェクトタグの幅と高さconsole や debug は、 initParams パラメータ

「 autoAdd: false 」は、マニュアルモード「 path: パス」は、 DLR.xap の置き場所

マニュアルモード「 DLR.createSilverlightObject 」関数を使用する

まとめ

動的言語の Silverlight ホスト

Silverlight 2.0 から提供された動的言語ホストの機能拡張 = Gestalt機能拡張

script タグへの拡張 (XAML 、 Python 、 Ruby)仮想ファイルシステム

application/x-zip-compressedPython ではアーカイブ名がパッケージRuby では、アーカイブ名がフォルダRuby で扱うデータファイルは、エンコーディングに注意が必要

動的言語と HTML DOM の連携機能動的言語と XAML の連携機能

理論上は Moonlight 3 .0 Preview なら動くPreview 7 は Silverlight 4 ベータ対応次のリリースで Silverlight 4 対応を予定

Gestalt が実現するもの

Silverlight アプリを動的言語で記述できるようにしたものインラインスクリプトでの開発必要なランタイムをネットワークダウンロード事前配布やパッケージングが不要

Ruby などで Silverlight アプリを開発できる環境を実現したもの組合わせは自由ですサーバー RoR 、クライアント RIA とかアイディア次第で RIA ができます

おまけ

Gestalt とは何か読み方は「ゲシュタルト」

ドイツ語で意味は「形、形態、状態」ゲシュタルト心理学

「人間の精神は部分や要素の集合ではなく、全体性や構造こそ重要視されるべきとした。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト (Gestalt ：形態 )と呼ぶ」 -ウィキペディアより –

じゃ、なくて

Gestalt とは

HTML の script タグを拡張して、 Silverlight アプリの開発を可能にしたプロジェクトの名前です

由来MIX 2009 で MIX Lab に登場日本でマイナーな存在

script タグで実現できることRuby スクリプトPython スクリプトXAML スクリプト (厳密には、コンテンツ )

作成に必要なものテキストエディタライブラリの URL ( オンライン用 )

「 http://gestalt.ironpython.net/dlr-latest.js」

便利なツールXAML PlayGround (XAML 編集ツール )http://visitmix.com/labs/gestalt/downloads/xaml.playground.htmlテスト用 Web サーバー (Chiron.exe)IronPython や IronRuby に含まれている情報リソースhttp://visitmix.com/labs/gestalt/http://www.ironpython.net/browser/

http://gestalt.ironpython.net/dlr-latest.js

http://gestalt.ironpython.net/dlr-latest.js

http://visitmix.com/labs/gestalt/downloads/xaml.playground.html



http://visitmix.com/labs/gestalt/

http://visitmix.com/labs/gestalt/

http://www.ironpython.net/browser/

http://www.ironpython.net/browser/

リソースドキュメント

http://ironpython.net/browser/docs.htmlサンプルとチュートリアル (英語 )

http://www.silverlight.net/learn/dynamic-languages/ソースコード

http://ironpython.codeplex.com/http://ironruby.codeplex.com/http://gestalt.codeplex.com/ソースコードは、 IronPython と IronRuby の方が新しいXAML Play Ground は Gestalt のソースコードに含まれる

参考になるサンプルIronRuby 1.0.zip (.NET Framework 2.0 用 ) に含まれている

http://ironpython.net/browser/docs.html

http://ironpython.net/browser/docs.html

http://www.silverlight.net/learn/dynamic-languages/

http://www.silverlight.net/learn/dynamic-languages/

http://ironpython.codeplex.com/

http://ironruby.codeplex.com/

http://gestalt.codeplex.com/

http://gestalt.codeplex.com/

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Technology

Maiking RIA Apps by Ruby