Maiking RIA Apps by Ruby
- 1. 邪道編 ～ 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.documentdefclick(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 には ３ 種類の実装がありますIronRubyon .NET 2.0IronRubyon .NET 4IronRubyon Silverlight=>
- 5. 説明より见てみましょう
- 6. 动かしたもの
- 7. DOM スクリプティング
- 8. ハローワールド －その１－<head><title>ハローワールドby Gestalt</title><scripttype="text/javascript"src=/slideshow/maiking-ria-apps-by-runy/4691164/"http:/gestalt.ironpython.net/dlr-latest.js"></script></head><body><h1>初めてのゲシュタルト</h1><scripttype="text/ruby">window.alert &辩耻辞迟;ルビーで表示します&辩耻辞迟;&濒迟;/蝉肠谤颈辫迟&驳迟;&濒迟;蝉肠谤颈辫迟迟测辫别=&辩耻辞迟;迟别虫迟/辫测迟丑辞苍&辩耻辞迟;&驳迟;飞颈苍诲辞飞.础濒别谤迟(&辩耻辞迟;笔测迟丑辞苍で表示します&辩耻辞迟;)&濒迟;/蝉肠谤颈辫迟&驳迟;&濒迟;/产辞诲测&驳迟;&濒迟;/丑迟尘濒&驳迟;
- 11. 邪道編との比較<scriptlanguage= "RubyScript">@doc = @window.documentdefclick(btn)@doc.all(btn).value = btn + " is here"end</script><scripttype= "text/ruby">window.alert"ルビーで表示します"</script>「language」 属性が 「type」属性に「@window」が「windows」に「input」要素などに 「language」属性がないことを除けば、似ている？似てるよねー = おもしろくない？
- 13. ハローワールド –その２-<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名.innerHtmlRuby ではDOM オブジェクト. イベント名 do又は オブジェクト.イベント名 =Proc.new{|s,e|}divタグは、document.id名.html、innerHtmlは同じこの規則はソースコードの「init.rb」で定義
- 16. ハローワールド –その３-<h1>ハローワールド改２</h1><p>メッセージ：<inputtype="text"id="txtMessage"/></p><inputtype="button"id="btnRun"value="実行します"/><p>結果：</p><divid="outArea1"></div><divid="outArea2"></div><scripttype="text/ruby"src=/slideshow/maiking-ria-apps-by-runy/4691164/"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=/slideshow/maiking-ria-apps-by-runy/4691164/"ライブラリのZIPファイル名"></script><scripttype="text/ruby"> require “アーカイブ/ライブラリ名"#Pythonであれば import アーカイブ.ライブラリ名</script>
- 18. デバッグはどうするの？
- 19. プログラムのデバッグ方法
- 20. プログラムのデバッグ方法<head><title>Ruby コンソールデバッグ用</title><scripttype="text/javascript">window.DLR= {settings: {console: true, debug: true}}</script><scripttype="text/javascript"src=/slideshow/maiking-ria-apps-by-runy/4691164/"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>
- 24. XAML+ スクリプティング
- 25. ハローワールド 2–XAML-<body><h1>ハローワールドXAML版改(Ruby)</h1><scripttype="application/xml+xaml"id="externalXaml"src=/slideshow/maiking-ria-apps-by-runy/4691164/"DLR/HelloWorld.xaml"width="400"height="300"></script><!-- ポイントは、xamlタグのidをclassに設定すること--><scripttype="text/ruby"class="externalXaml"> root = xaml.hellocanvasroot.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
- 27. なんか、遅くねー？
- 29. 次のミッション「早くすべし」
- 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つになったため
- 32. 详细编
- 33. アプリケーションの構造dlr.js によって、object タグを追加Silverlight アプリケーション(dlr.xap)dlr.xap によって、script タグを解釈して実行
- 34. スクリプト タグdlr.js によって、silverlight に必要な object タグが 自動的に追加される複数の object タグが追加される場合もあるdocument、window オブジェクトなどは JavaScript と同様に利用できるコードに class 属性を使用すると以下の使い方ができるXAML の id 属性を指定することで、 xml 変数でアクセスできるDLR.createSilverlightObject メソッドで使う場合のエントリポイントとしても使用できる (xamlid パラメータ)
- 35. dlr.xap の構造Microsoft.Scripting.slvxSilverlight のライブラリキャッシュ (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/2windows.DLR に設定できるものsettings ： Silverlight の オブジェクトタグのパラメータや initParams のパラメータ(名前 : 値)id:オブジェクトタグの ID 属性width、height： オブジェクトタグの幅と高さconsole や debug は、initParams パラメータ「autoAdd: false」は、マニュアルモード「path: パス」は、DLR.xap の置き場所マニュアルモード「DLR.createSilverlightObject」関数を使用する
- 38. まとめ
- 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 ができます
- 41. おまけ
- 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 用) に含まれている