View
2.344
Download
2
Category
Preview:
DESCRIPTION
RubyでRIAを作ろう
Citation preview
邪道編 ～ 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> <!-- ポイントは、 xaml タグの id を class に設定すること --> <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>
XAML + スクリプティング
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> <!-- ポイントは、 xaml タグの id を class に設定すること --> <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>
XAML + スクリプティング
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://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 用 ) に含まれている
© 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.
Recommended