More Related Content Similar to Maiking RIA Apps by Ruby
Similar to Maiking RIA Apps by Ruby (20) Maiking RIA Apps by Ruby1. 邪道編 ~ Ruby で RIA を作ろう-IronRuby の活用 - マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 デベロッパー エバンジェリスト 荒井 省三 2. IronRuby ヒストリー 簡易編 JohnLam が Redmond へ来たのが2006 年 10 月 (ブログより) IronRuby プロジェクトを MIX07(2007 年 4 月) で発表 約 3 年半かかりました 色々ありました JohnLam が抜けたりとか 祝 1.0 を 2010 年 4 月にリリース 3. 邪道編 Ruby を 256倍使う本 <head> <title>Hello Active Script Ruby</title> <scriptlanguage= "RubyScript"> @doc = @window.document defclick(btn) @doc.all(btn).value = btn + " is here" end </script> </head> <bodyonload="@windows.alert'Body is loaded !'" language= "RubyScript"> <inputtype="button"id="btn1" onclick= "click('btn1')"language= "RubyScript"> <inputtype= "button"id= "btn2" onclick= "@doc.all('btn2').value='btn2 is here'" language= "RubyScript"> </body> </html> おもしろい 4. 本日のお題 邪道編 の HTML スクリプトでRichInternetApplication を作ること 予備知識 IronRuby を使用します IronRuby には 3 種類の実装があります IronRuby on .NET 2.0 IronRuby on .NET 4 IronRuby on Silverlight = > 8. ハローワールド -その1- <head> <title>ハローワールドby Gestalt</title> <scripttype="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js"> </script> </head> <body> <h1>初めてのゲシュタルト</h1> <scripttype="text/ruby"> window.alert "ルビーで表示します" </script> <scripttype="text/python"> window.Alert("Pythonで表示します") </script> </body> </html> 11. 邪道編との比較 <scriptlanguage= "RubyScript"> @doc = @window.document defclick(btn) @doc.all(btn).value = btn + " is here" end </script> <scripttype= "text/ruby"> window.alert"ルビーで表示します" </script> 「language」 属性が 「type」属性に 「@window」が「windows」に 「input」要素などに 「language」属性がないことを除けば、似ている? 似てるよねー = おもしろくない? 13. ハローワールド –その2- <p>メッセージ:<inputtype="text"id="txtMessage"/></p> <inputtype="button"id="btnRun"value="実行します"/> <p>結果:</p><divid="outArea1"></div><divid="outArea2"></div> <scripttype="text/ruby"> # イベントハンドラの関数定義 document.btnRun.onclick do |s, e| document.outArea1.html = document.txtMessage.value + "byruby" end #rubyでは、innerHtml も html の指定も可能 </script> <scripttype="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> 14. HTMLDOM スクリプティング 基本的に JavaScript と同じ Python では DOM オブジェクト.events.イベント名 += ハンドラ attachEvents(イベント名, ハンドラ) と等価 divタグは、document.id名.innerHtml Ruby では DOM オブジェクト. イベント名 do又は オブジェクト.イベント名 =Proc.new{|s,e|} divタグは、document.id名.html、innerHtmlは同じ この規則はソースコードの「init.rb」で定義 16. ハローワールド –その3- <h1>ハローワールド改2</h1> <p>メッセージ:<inputtype="text"id="txtMessage"/></p> <inputtype="button"id="btnRun"value="実行します"/> <p>結果:</p> <divid="outArea1"></div><divid="outArea2"></div> <scripttype="text/ruby"src="DLR/helloworld.rb"> </script> <scripttype="text/python"src="DLR/helloworld.py"> </script> # イベントハンドラの関数定義 (DLR/helloworld.rb) document.btnRun.onclick do |s, e| document.outArea1.html = document.txtMessage.value + " by ルビー" end 17. スクリプトの外部ファイル化 script タグの src 属性でファイルを指定できる スクリプトファイルの部品化に有効 記述順序に注意 ライブラリをまとめる場合は ZIP化する <scripttype="application/x-zip-compressed" src="ライブラリのZIPファイル名"> </script> <scripttype="text/ruby"> require “アーカイブ/ライブラリ名" #Pythonであれば import アーカイブ.ライブラリ名 </script> 20. プログラムのデバッグ方法 <head> <title>Ruby コンソールデバッグ用</title> <scripttype="text/javascript"> window.DLR= {settings: {console: true, debug: true}} </script> <scripttype="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js"> </script> </head> <body> <h1>デバッグシナリオ</h1> <divid="message">Loading ...</div> <scripttype="text/ruby"> document.message.html = "こんにちは、Rubyです!" </script> </body> 22. ハローワールド1–XAML- <scripttype="application/xml+xaml"id="inlineXaml" width="400"height="400"> <Canvas xmlns="http://.../winfx/2006/xaml/presentation" xmlns:x="http://.../winfx/2006/xaml"> <TextBlockHorizontalAlignment="Center"Height="23" Width="Auto" FontSize="18"Text="ハローワールドXAML 版"/> <TextBlockHorizontalAlignment="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> 25. ハローワールド 2–XAML- <body> <h1>ハローワールドXAML版改(Ruby)</h1> <scripttype="application/xml+xaml"id="externalXaml" src="DLR/HelloWorld.xaml"width="400"height="300"> </script> <!-- ポイントは、xamlタグのidをclassに設定すること--> <scripttype="text/ruby"class="externalXaml"> root = xaml.hellocanvas root.txtMessage.text = "てすと" # イベントハンドラを設定します root.btnRun.click { |s ,e| root.outArea.text = root.txtMessage.text + " by ルビー" } </script> </body> 26. XAML+ スクリプティング script タグ の特徴 application/xml-xaml に id 属性を指定 text/ruby に class 属性を使って、xml-xaml の id を指定 Ruby や Python スクリプトでは、「xaml」オブジェクトを使ってアクセス xaml が XAML の親オブジェクト 定義したXAML 要素は子オブジェクトxml.hellocanvas 30. ハローワールド3–XAML- <body> <h1>ハローワールドXAML版改(Ruby)</h1> <scripttype="application/xml+xaml"id="internalXaml" defer=“true”width="400"height="300" > XAMLを記述 </script> <!-- ポイントは、xamlタグのidをclassに設定すること--> <scripttype="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> 31. XAML+ スクリプティング script タグに 「defer=“true”」を指定 DOM 解析が即座にされない スクリプトで読み込む必要がある DynamicApplication クラス ゲシュタルトのホストオブジェクト Current プロパティで現在のオブジェクト LoadRootVisualFromString メソッドで XAML 文字列をルートビジュアルに設定 速度が向上した理由は、object タグが 1つになったため 34. スクリプト タグ dlr.js によって、silverlight に必要な object タグが 自動的に追加される 複数の object タグが追加される場合もある document、window オブジェクトなどは JavaScript と同様に利用できる コードに class 属性を使用すると以下の使い方ができる XAML の id 属性を指定することで、 xml 変数でアクセスできる DLR.createSilverlightObject メソッドで使う場合のエントリポイントとしても使用できる (xamlid パラメータ) 35. dlr.xap の構造 Microsoft.Scripting.slvx Silverlight のライブラリキャッシュ (ZIP)Silverlight3 から提供された機能 XAML スクリプティング と 言語サポートを提供 言語用 ZIP ファイル (slvx) languages.config で定義 DynamicApplication クラスが、必要に応じて言語用ライブラリを読み込む 36. 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 が記載されている 37. dlr.js のオプション 2/2 windows.DLR に設定できるもの settings : Silverlight の オブジェクトタグのパラメータや initParams のパラメータ(名前 : 値) id:オブジェクトタグの ID 属性 width、height: オブジェクトタグの幅と高さ console や debug は、initParams パラメータ 「autoAdd: false」は、マニュアルモード 「path: パス」は、DLR.xap の置き場所 マニュアルモード 「DLR.createSilverlightObject」関数を使用する 39. 動的言語の Silverlight ホスト Silverlight2.0 から提供された動的言語ホストの機能拡張 =Gestalt 機能拡張 script タグへの拡張 (XAML、Python、Ruby) 仮想ファイルシステム application/x-zip-compressedPython では アーカイブ名がパッケージRuby では、アーカイブ名がフォルダ Ruby で扱うデータファイルは、エンコーディングに注意が必要 動的言語と HTMLDOM の連携機能 動的言語と XAML の連携機能 理論上は Moonlight3.0Preview なら動く Preview7 は Silverlight4 ベータ対応 次のリリースで Silverlight4 対応を予定 40. Gestalt が実現するもの Silverlight アプリを動的言語で記述できるようにしたもの インライン スクリプトでの開発 必要なランタイムを ネットワークダウンロード 事前配布やパッケージングが不要 Ruby などで Silverlight アプリを開発できる環境を実現したもの 組合わせは自由です サーバー RoR 、クライアント RIA とか アイディア次第で RIA ができます 42. Gestalt とは何か 読み方は「ゲシュタルト」 ドイツ語で意味は「形、形態、状態」 ゲシュタルト心理学 「人間の精神は部分や要素の集合ではなく、全体性や構造こそ重要視されるべきとした。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ」 -ウィキペディアより – じゃ、なくて 43. Gestalt とは HTML の script タグを拡張して、Silverlight アプリの開発を可能にしたプロジェクトの名前です 由来 MIX2009 で MIXLab に登場 日本でマイナーな存在 script タグで実現できること Ruby スクリプト Python スクリプト XAML スクリプト (厳密には、コンテンツ) 44. 作成に必要なもの テキストエディタ ライブラリの URL(オンライン用) 「http://gestalt.ironpython.net/dlr-latest.js」 便利なツール XAMLPlayGround(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/ 45. リソース ドキュメント 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 の方が新しい XAMLPlayGround は Gestalt のソースコードに含まれる 参考になるサンプル IronRuby1.0.zip(.NETFramework2.0 用) に含まれている