DLR⾔語による
Silverlightプログラミング
       ⼋⽊ 照朗
         株式会社コスモルート
          クラウドR&Dグループ
       terurou
         ⼤名古屋, DSTokai,
         FLOSS桜⼭, DeLLa.JS, Python東海, ...
Agenda




         1
Agenda

•   ⾃⼰紹介
•   DLRとは
•   DLR⾔語を使った開発の特徴
•   DLR⾔語での開発⼿順
•   まとめ




                     2
⾃⼰紹介




       3
⾃⼰紹介

普段やってること
• 研究開発職/RIAエンジニア
 – RIA(Siverlight、JavaScript)
 – Android
 – ⼤規模分散技術(Cassandra、Hadoop)
• DSTokai管理⼈
• ⼤名古屋のterurouです!



                                4
⾃⼰紹介

Silverlightと私
• Silverlight開発暦は約2年
• DLR⾔語での開発歴も約2年
• Silverlight 2 beta2の頃からやってます




                                 5
⾃⼰紹介

今までに関わってきたSilverlight案件
• 製造業向けガントチャートアプリ
 – Silverlight 2 + IronPython 2.0
 – ⼤⼈の事情により開発打ち切り
 – 関連URL
  http://www.microsoft.com/japan/powerpro/tf/interview/23_1.mspx
  http://d.hatena.ne.jp/terurou/20081210/1228840074

• 某⼤⼿企業の情報システム
 – Silverlight 3 + C#
 – DeepZoopをフル活⽤
 – NDAのせいであまり詳しく書けない

                                                                   6
DLRとは




        7
DLRとは

Silverlightの3つの開発スタイル
• JavaScript API
• CLR⾔語(C#、VB.NET)
• DLR⾔語(IronPython、IronRuby)




                               8
DLRとは

JavaScript API
• Silverlight 1.0からのレガシースタイル
• 限られたAPI(Silverlight 1.0+α)しか
  利⽤できない
• 今でもスプラッシュスクリーンを実装に
  必要




                                 9
DLRとは

CLR⾔語(C#、VB.NET)
• Silverlight 2以降の標準的な開発スタイル
• 普通はみんなこれで開発するはず




                           10
DLRとは

DLR⾔語(I ronPython、I ronRuby)




          「えっ?」




                               11
DLRとは

ここで質問




そもそもCLRとDLRとは何か知ってますか?




                     12
DLRとは

CLRとDLR
• CLR
  – Common Languate Runtime
  – 共通⾔語ランタイム
  – .NETの根幹、仮想マシン
• DLR
  – Dynamic Language Runtime
  – 動的⾔語ランタイム
  – 元々IronPythonの⼀部だったが、DLRとして
    独⽴し、.NET Framework 4/Silverlight 4に
    組み込まれた
                                      13
DLRとは

動的⾔語?
• RubyとかPHPとかJavaScriptとか
• 動的型付け⾔語
• 反意語?は静的型付け⾔語




                            14
DLRとは

静的型付けと動的型付け
• 静的型付け⾔語(C#)
  – int i = 0;
  – TextBlock tb = new TextBlock();
• 動的型付け⾔語(Python)
  –i = 0
  – tb = TextBlock()
  – 変数の型を指定しない


                                      15
DLRとは

DLRで出来ること
• dynamic型
  – ダックタイピング
  – 遅延バインディング
• 動的⾔語の共通基盤
  – コンパイラフレームワーク
  – 動的型付け⾔語⽤のランタイムライブラリ




                          16
DLRとは

「DLRで出来ること」を簡単に⾔うと
• dyanamic型
  – C#やVB.NETでも動的型付け的な『ゆるい』
    コードが書ける
• 動的⾔語の共通基盤
  – .NET上で動く俺様⾔語(動的型付け⾔語)を
    作れる




                          17
DLRとは

個⼈的には




    『DLRは.NETの⿊魔術』
       だと思ってます



                     18
DLRとは

DLRで実装されたプログラミング⾔語
• IronPython(Microsoft製)
• IronRuby(Microsoft製)
• IronScheme




                           19
DLR⾔語を使った開発の特徴




                 20
DLR⾔語を使った開発の特徴

DLR⾔語での開発のメリット
• Python、Rubyで書ける
• コンパイル不要、すぐに動作確認できる
• VisualStudioを使わなくても良い
• Macでも開発できる




                          21
DLR⾔語を使った開発の特徴

DLR⾔語での開発のデメリット
• 動作が遅い、特に起動が遅い
 – 初期化が遅いのがDLR⾔語共通の弱点
• DLR⾔語では実装が⾯倒な事がある
 – DataBindingやOut-of-Browserなど
• 困った時の情報が少ない




                                  22
DLR⾔語を使った開発の特徴

具体的にどれぐらい遅いのか?
ベンチマークをとってみた
• ランタイム⾃体の速度差
 – フィボナッチ数(再帰)
 – フィボナッチ数(ループ)
• レンダリングパフォーマンスの差
 – 四⾓形を繰り返し表⽰
 – ⽂字列を繰り返し表⽰
 – 両⽅
• ベンチマークコードは後⽇公開予定
                     23
DLR⾔語を使った開発の特徴

ベンチマーク取得対象
• Silverlight 4 C#
• Silverlight 4 IronPython 2.6(Gestalt)
• Flash Player 10.1
  – DLR⾔語がCLR⾔語よりも遅いことは
    判ってるのでFlashも⽐較対象に⼊れた




                                          24
DLR⾔語を使った開発の特徴

ベンチマーク実施マシン
• VAIO type Z(2世代前のモデル)
 – Windows 7 Professional
 – Core 2 Duo P9700(2.8GHz)
 – 6GB Memory
 – NVIDIA GeForce 9300M GS




                              25
DLR⾔語を使った開発の特徴

ベンチマーク結果




                               単位 [msec] 
 (*1)実際には10秒程度描画されず  (*2)実際には2分以上描画されず    26
DLR⾔語を使った開発の特徴

ベンチマーク結果
• Silverlightは⾮常に⾼速
• Flash Player10.1で図形描画が超⾼速化
 – Flash Player 10の頃のベンチマーク
   http://d.hatena.ne.jp/terurou/20081210/1228840074

 – 以前は1万個の図形描画で危なかった
• 総合的に判断するとIronPythonはFlashと
  いい勝負をしている
 – C#と⽐較すると遅いが、IronPythonは⼗分
   使えるパフォーマンス
                                                       27
DLR⾔語を使った開発の特徴

DLR⾔語が得意な開発ターゲット
• プロトタイピング
• ⼩規模開発
• UIの微調整を頻繁に繰り返す
• サーバサイドがPython、Ruby




                       28
DLR⾔語を使った開発の特徴

DLR⾔語での開発に向いている⼈
• Python、Rubyが好き
• Macでも開発したい
• VisualStudioが嫌い
• ⽞⼈って⾔葉が好き
• マゾな⼈




                    29
DLR⾔語での開発⼿順




              30
DLR⾔語での開発⼿順

DLR⾔語で開発するための⽅法
• Chiron.exe(旧名AgSDK)
  – 去年の秋頃まで使われていた⽅法
  – 現在は積極的にメンテナンスされていない
• Gestalt(dlr.js)
  – Microsoft(MixLab)が突然⼤きく⽅針転換し
    去年夏ごろprototype、今年の2⽉に1.0が出た
  – Silverlight 3以降で動作
  – 現在のIronPython/IronRubyのドキュメント
    にはGestaltを使った⽅法しか載っていない
                               31
DLR⾔語での開発⼿順

Chiron.exe vs Gestalt
• Microsoftからは正式に「Chiron.exeの
  開発終了」アナウンスは出ていないが…
• 現状はChiron.exeにしかできないこと
  (Out-of-Browser)があるため、
  「使い分けてね」的な雰囲気
• 特別な理由がなければGestaltで開発して
  おいた⽅が良いと思う


                                32
DLR⾔語での開発⼿順

Gestaltでの実装サンプル
• Gestaltでの開発⽅法を紹介する前に、
  Gesltaltのサンプルアプリを紹介
• PyCon 2010のデモ
 – githubで公開されている
   http://github.com/jschementi/pycon2010/
 – Gestaltで開発する際に困るような部分が
   だいたいサンプルコードになっている
 – 起動スクリプトがバグってるので要修正
• Gestalt製のプレゼンツール作っていたが
  完成しなかった。。。             33
DLR⾔語での開発⼿順

PyCon 2010のデモを動かしてみる
• githubからチェックアウトしrun.batを
  修正
 – 誤 %~dp0bin3Chiron.exe /b:index.html
 – 正 %~dp0ironpythonChiron.exe /b:index.html
• run.batを実⾏すると、デモが起動する




                                                34
DLR⾔語での開発⼿順

PyCon 2010のデモを動かしてみる
デモとしておもしろいもの
• webcam (sl4)
• snow (particles)
• name swirl (trig)




                       35
DLR⾔語での開発⼿順

GestaltでHello World
• 開発環境
 – テキストエディタ
   • MacにはTextMate⽤のハイライト定義がある
    http://visitmix.com/labs/gestalt/downloads/
 – ローカルWebサーバ
 – ブラウザ+Silverlightランタイム
• 基本⼿順
 1.HTMLにdlr.jsをインクルードする
 2.HTMLにコードを書く(JavaScript感覚)
 3.ブラウザで動作確認
                                                  36
DLR⾔語での開発⼿順

GestaltでHello World
1.HTMLにdlr.jsをインクルードする
 – http://gestalt.ironpython.net/dlr-latest.js
   <script src="中略" type="text/javascript"></script>
 – 常にGestaltの最新版を取得できる




                                                       37
DLR⾔語での開発⼿順

GestaltでHello World
2.HTMLにコードを書く
 – <script type="text/python">
   window.Alert("Hello Gestalt!")
   </script>
 – Rubyの場合は"text/ruby"
 – JavaScriptのように「<!--」や「//-->」は
   構⽂エラーになるので付けてはダメ




                                    38
DLR⾔語での開発⼿順

GestaltでHello World
3.ブラウザで動作確認
 – コンパイル不要
 – JavaScriptファイルを1つインクルードする
   だけでOK
 – Gestaltの制約上、Webサーバ経由でないと
   動作しません




                               39
DLR⾔語での開発⼿順

GestaltでHello World
• DLR⾔語でのプログラミングについての
  詳細情報はIronPythonのドキュメントを
  参照してください。
  今回のセッションでは割愛します。
• http://ironpython.net/browser/




                                   40
DLR⾔語での開発⼿順

Gestaltのしくみ
1.ブラウザがdlr.jsを読み込む
2.dlr.jsが⾃動的にdlr.xapをロードする
 – dlr.xap内にはGestaltで使える⾔語(Python、
   Rubyなど)が定義されている
3.dlr.xapの情報を元に利⽤する⾔語の最新
  ランタイムをダウンロードしてくる
 – dlr.xap⾃体にはランタイムは含まれていない
4.アプリ実⾏

                                41
DLR⾔語での開発⼿順

Gestaltのしくみ
• dlr.xapや⾔語ランタイムのダウンロードは
  初回のみで、2回⽬以降はダウンロード
  キャッシュを参照する(透過キャッシュ)
 – 初回のみロードが遅いが2回⽬以降は速くなる
• このキャッシュはブラウザのキャッシュを
  クリアすると消えてしまう




                       42
DLR⾔語での開発⼿順

デバッグ⽅法
• ドキュメントには「debuggerをブラウザ
  にアタッチしろ」と書いてある
• Visual Web Developer Expressには
  アタッチなんてメニューが存在しない
• VisualStudioがない⼈はどうすんの…




                               43
DLR⾔語での開発⼿順


               |
            \  __  /
            _ (m) _ビコーン
               |ミ|
            /  .`´  \
              ('A`)     
              ノヽノヽ
                くく

                           44
DLR⾔語での開発⼿順

もしかして
• 以前、ブログに書いたJavaScriptの
  デバッグ⽅法がそのまま使えるんじゃ?
 http://d.hatena.ne.jp/terurou/20071218/1197965733

• 試してみたらビンゴ!
  ちゃんとステップ実⾏できました!
• 英語版Visual Web Developerですが
  ⼿順を紹介します



                                                     45
DLR⾔語での開発⼿順

デバッガの設定⼿順
1.DLRの設定を変更しデバッグ可能にする
 – dlr.jsインクルードの<script>タグの前に
   以下のようなJavaScriptを埋め込む

   <script type="text/javascript">
   DLR = {
      settings: { debug: true }
   };
   </script>

                                     46
DLR⾔語での開発⼿順

デバッガの設定⼿順
2.Visual Web Developer起動
3. File > Open Web Site...




                             47
DLR⾔語での開発⼿順

デバッガの設定⼿順
4.File System でデバッグ対象ファイルの
  ディレクトリを開く




                             48
DLR⾔語での開発⼿順

デバッガの設定⼿順
5.WebSite > Start Options を開く




                                49
DLR⾔語での開発⼿順

デバッガの設定⼿順
6.Start Options > DebuggersのSilverlight
  だけONにする




                                     50
DLR⾔語での開発⼿順

デバッガの設定⼿順
7.Build > Before running startup pageを
  No Buildにする




                                     51
DLR⾔語での開発⼿順

デバッガの設定⼿順
8.デバッグ対象ファイルを開きbreakpointを
  仕込む




                        52
DLR⾔語での開発⼿順

デバッガの設定⼿順
9.デバッグ実⾏すると初回のみダイアログが
  出るがそのままOKしておく




                    53
DLR⾔語での開発⼿順

デバッガの設定⼿順
10.設定が正しければ、DLR⾔語のコードを
 ステップ実⾏できる




                     54
DLR⾔語での開発⼿順

デバッガの設定⼿順
11.IE以外のブラウザが起動されてしまう場
 合、IDEの規定のブラウザを変更する。
 – Solution Explorerで適当なHTMLファイルを
   右クリックし、Browse With...を開き、
   IEを既定値に設定する。




                                55
DLR⾔語での開発⼿順

もうひとつのデバッグ⽅法
• REPLを利⽤する
 – Read-eval-print loop
 – 要は対話シェル環境
• repl.pyで簡単にREPLが使える
 – これもPyCon2010のデモに含まれている
   http://github.com/jschementi/pycon2010/blob/master/repl.py




                                                                56
DLR⾔語での開発⼿順

repl.pyの使い⽅
• repl.pyをインクルードするだけ
 <script type="text/python" src="repl.py"></script>
• URI(QueryString)にconsoleと付けて
  ブラウザで表⽰する




                                                 57
DLR⾔語での開発⼿順

Gestaltの将来像
確定的なものはないが…。
• Out-of-Browserのサポート
 – Silverlight 4以降になら対応しそう
   http://www.ironpython.net/browser/docs.html#faq

• XAMLからのイベントハンドラ設定
• デバッグ機能の拡充
 – http://www.ironpython.net/browser/docs.html#ideas




                                                       58
まとめ




      59
まとめ


• 開発環境を整えるのは⾮常に簡単、⼿軽に
  始められる
• パフォーマンスはそこそこ。悪くはない。
• 開発ターゲットさえ間違えなければ⾮常に
  有⽤な道具
• CLR⾔語でのプログラミングに不満のない
  ⼈が無理して覚えるようなものではない



                     60
まとめ




  ⾝も蓋も無いですが、
  やっぱりDLRはキワモノです。
  ご利⽤は計画的に。



                    61
ご清聴ありがとうございました




                 62

DLR言語によるSilverlightプログラミング