Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
邪道編 ~ Ruby で RIA を作ろう-IronRuby の活用 -<br />マイクロソフト株式会社<br />デベロッパー & プラットフォーム統括本部<br />デベロッパー エバンジェリスト<br />荒井 省三<br />
IronRuby ヒストリー 簡易編<br />JohnLam が Redmond へ来たのが2006 年 10 月 (ブログより)<br />IronRuby プロジェクトを MIX07(2007 年 4 月) で発表<br />約 3 年半...
邪道編 Ruby を 256倍使う本<br /><head><br /><title>Hello Active Script Ruby</title><br /><scriptlanguage= "RubyScript"><br />@doc ...
本日のお題<br />邪道編 の HTML スクリプトでRichInternetApplication を作ること<br />予備知識<br />IronRuby を使用します<br />IronRuby には 3 種類の実装があります<br ...
説明より見てみましょう<br />
動かしたもの<br />
DOM スクリプティング<br />
ハローワールド -その1-<br /><head><br /><title>ハローワールドby Gestalt</title><br /><scripttype="text/javascript"<br />src="http://gestal...
利用するためのおまじない<br /><scripttype="text/javascript"<br />src="http://gestalt.ironpython.net/dlr-latest.js"><br /></script><br ...
このコードに着目<br /><scripttype="text/ruby"><br />window.alert"ルビーで表示します"<br /></script><br /><scripttype="text/python"><br />wi...
邪道編との比較<br /><scriptlanguage= "RubyScript"><br />@doc = @window.document<br />defclick(btn)<br />@doc.all(btn).value = btn...
じゃあ、DOM イベントを使ってみよう<br />
ハローワールド –その2-<br /><p>メッセージ:<inputtype="text"id="txtMessage"/></p><br /><inputtype="button"id="btnRun"value="実行します"/><br /...
HTMLDOM スクリプティング<br />基本的に JavaScript と同じ<br />Python では<br />DOM オブジェクト.events.イベント名 += ハンドラ<br />attachEvents(イベント名, ハンド...
インライン スクリプトって邪魔くさくない?<br />
ハローワールド –その3-<br /><h1>ハローワールド改2</h1><br /><p>メッセージ:<inputtype="text"id="txtMessage"/></p><br /><inputtype="button"id="btn...
スクリプトの外部ファイル化<br />script タグの src 属性でファイルを指定できる<br />スクリプトファイルの部品化に有効<br />記述順序に注意<br />ライブラリをまとめる場合は ZIP化する<br /><scriptt...
デバッグはどうするの?<br />
プログラムのデバッグ方法<br />
プログラムのデバッグ方法<br /><head><br /><title>Ruby コンソールデバッグ用</title><br /><scripttype="text/javascript"><br />window.DLR= {setting...
グラフィックスは ?(XAML です)<br />
ハローワールド1–XAML-<br /><scripttype="application/xml+xaml"id="inlineXaml"<br />width="400"height="400"><br /><Canvas xmlns="ht...
このコードに着目<br /><scripttype="application/xml+xaml"<br />id="inlineXaml"<br />width="400"height="400"><br />XAMLコンテンツを記述<br /...
XAML+ スクリプティング<br />
ハローワールド 2–XAML-<br /><body><br /><h1>ハローワールドXAML版改(Ruby)</h1><br /><scripttype="application/xml+xaml"id="externalXaml"<br ...
XAML+ スクリプティング<br />script タグ の特徴<br />application/xml-xaml に id 属性を指定<br />text/ruby に class 属性を使って、xml-xaml の id を指定<br ...
なんか、遅くねー?<br />
実行した結果<br />少し、遅い<br />理由は何か…<br />
次のミッション「早くすべし」<br />
ハローワールド3–XAML-<br /><body><br /><h1>ハローワールドXAML版改(Ruby)</h1><br /><scripttype="application/xml+xaml"id="internalXaml"<br /...
XAML+ スクリプティング<br />script タグに 「defer=“true”」を指定<br />DOM 解析が即座にされない<br />スクリプトで読み込む必要がある<br />DynamicApplication クラス<br /...
詳細編 <br />
アプリケーションの構造<br />dlr.js によって、object タグを追加Silverlight アプリケーション(dlr.xap)<br />dlr.xap によって、script タグを解釈して実行<br />
スクリプト タグ<br />dlr.js によって、silverlight に必要な object タグが 自動的に追加される<br />複数の object タグが追加される場合もある<br />document、window オブジェクトな...
dlr.xap の構造<br />Microsoft.Scripting.slvx<br />Silverlight のライブラリキャッシュ (ZIP)Silverlight3 から提供された機能<br />XAML スクリプティング と 言語...
dlr.js の オプション 1/2<br />コンソール デバッグ<br />「window.DLR = {settings: {console: true, debug: true}}」 を設定<br />実行している言語のコンソールを表示...
dlr.js のオプション 2/2<br />windows.DLR に設定できるもの<br />settings : Silverlight の オブジェクトタグのパラメータや initParams のパラメータ(名前 : 値)<br />i...
まとめ <br />
動的言語の Silverlight ホスト<br />Silverlight2.0 から提供された動的言語ホストの機能拡張 =Gestalt<br />機能拡張<br />script タグへの拡張 (XAML、Python、Ruby)<br ...
Gestalt が実現するもの<br />Silverlight アプリを動的言語で記述できるようにしたもの<br />インライン スクリプトでの開発<br />必要なランタイムを ネットワークダウンロード<br />事前配布やパッケージングが...
おまけ<br />
Gestalt とは何か<br />読み方は「ゲシュタルト」<br />ドイツ語で意味は「形、形態、状態」<br />ゲシュタルト心理学 <br />「人間の精神は部分や要素の集合ではなく、全体性や構造こそ重要視されるべきとした。この全体性を持...
Gestalt とは<br />HTML の script タグを拡張して、Silverlight アプリの開発を可能にしたプロジェクトの名前です<br />由来<br />MIX2009 で MIXLab に登場<br />日本でマイナーな存...
作成に必要なもの<br />テキストエディタ<br />ライブラリの URL(オンライン用)<br />「http://gestalt.ironpython.net/dlr-latest.js」 <br />便利なツール<br />XAMLPl...
リソース<br />ドキュメント<br />http://ironpython.net/browser/docs.html<br />サンプルとチュートリアル(英語)<br />http://www.silverlight.net/learn/...
Maiking RIA Apps by Ruby
Upcoming SlideShare
Loading in …5
×

Maiking RIA Apps by Ruby

2,825 views

Published on

RubyでRIAを作ろう

Published in: Technology
  • Be the first to comment

Maiking RIA Apps by Ruby

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

×