Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

部分的にSilverlight2を使ってみるテスト（既存のWebアプリ+α のα 的な意味で…）

きよくら ならみOkayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

自己紹介



名前 － きよくら ならみ （もちろん、偽名。）
コミュニティとか － OITECで勉強会とか仕事 － 社内ＳＥやってます。（開発メイン）
最近扱っているテクノロジ– ASP.NET とか。
– 仕事ではまだ未導入ですが、Silverlight2いじってます。
– 関係ないけど、inkscapeでお絵かきを始めました。
– そろそろ10年ぶりくらいにFlash弄ってみようか思う今日この頃。

コンタクト– Kiyokura[at]gmail.com– はてダ： http://d.hatena.ne.jp/kiyokura/– mixiとかぼちぼち適当なコミュニティとかSNSとかにいるかも。

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

OITECの紹介Okayama IT Engineers Community– オカヤマ アイティー エンジニアズ コミュニティ– 略称はOITEC（おーあいてっく）



2008年に発足しました！
– 岡山県でIT関連の勉強会開催の促進を行う– 勉強会に限らず、意見交換の場（オフライン重視）– 取り上げる技術は特に定めない
2009年2月現在、オフライン勉強会を3回実施しています。
http://oitec.vbstation.net/

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

Silverlight2とは

クロスブラウザ＆プラットホームなブラウザのプラグイン– Windows / Mac / Linux– IE / Firefox / Safari

ブラウザのプラグインとして動くものを、マネージコードで開発可能
UIはXAMLで記述– WPF のサブセット＋α

Visual Studioで開発可能

誤解を恐れず超大ざっぱにてっとり早く伝えるには…
– とりあえず、Microsoft版の○lash/○lex……っぽいものOkayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

Silverlight2のいいところ（Ｗｅｂアプリから見て）
リッチなＵＩ– XAMLによる豊富なコントロール– WPF（のサブセット的）な感じ

クライアントサイドで動く部分が、マネージドコード開発– C#、VB.NETが使える– IDEのサポート（Visual Studio）– Javascriptより早い

クロスブラウザ/クロスプラットホーム– え、HTML+Javascriptの方がクロスプラットホームなのでは？
細かな差分やらバグやらで、バッドノウハウの塊…

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

Silverlight2の面倒臭いところ（Ｗｅｂアプリから見て）
直接データアクセスが面倒– ブラウザのサンドボックス上で動くので、当然直接DB接続なんてできない– なんらかWebサービス等を使ってやりとりする…？
WCF Webサービス
 ASP.NET Webサービス
 SOAP ADO.NET DataService– Webサービスとの認証機能やセキュリティの確保

Okayama IT Engineers Communityわんくま同盟 大阪勉強会 #27

その他、いろいろ

既存のWebアプリとは違う考え方で作らなければならない– 「技術習得」というイニシャライズコスト– 継続したメンテナンスのための要員確保

開発環境（現状では…）– Visual Studio標準のデザイナが若干力不足……
WYSIWYGではなくて、READ ONLY……

– 本格的にやるにはExpression Blend2が必要
この予算を認めてもらえるかどうか…（ToT) MSDN Professional Subscriptionに入ってない– Premiumじゃないと使えない……
Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

決してdisってるわけじゃないんです(^^;

機能も多いし、できることもたくさんあるので、「ちょっと使ってみよう」とすると、若干、裾野が広い。
趣味ベースで触るならともかく社内アプリとは言え、業務で触るには、いろいろクリアしないといけないハードルがあると思うのです。

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

じゃあ、部分的に使ってみる！


しかし、部分的にでも、使えるところがあるなら使ってみたい！！
– 必要最低限の知識で可能なら、イニシャライズコストも抑えれる

例えば、Gridとか、使ってみたい！！

『さあ、できることから！！』Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

実装のポイントHTMLブリッジ機能を使う！！
– Silverlight2には、HTMLブリッジ機能というものがあります！
– これを使うと、こんなことが可能！
マネージドコードのメソッドをJavascriptから呼ぶ
 Javascriptの関数をマネージドコード中から呼ぶ
– 応用すると、こんなこともできる！
HTMLの要素にもアクセスできる
 FlashやFlexにもアクセスできるOkayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

JavascriptからSilverlightのメソッドを呼ぶ！


マネージドコードのメソッドをJavascript側に公開し、Javascriptからキックすることができます。
手順は、以下の通り– 公開したいメソッドにScriptableMember属性を付加– 公開したいメソッドが属するインスタンスをHtmlPage.RegisterScriptableObject()で公開用に登録– JavascriptからコールOkayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

Silverlight から Javascriptの関数を呼ぶ！
Javascriptの関数をマネージドコード側から呼ぶことができます。
手順は以下の通り– マネージコードからHtmlPage.Window.Invoke（）でJavascriptの関数を呼ぶ！！

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

デモ

DataGridにJavascript経由でデータを渡してバインドするデモをご覧ください。

Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

さらにこんなことも！！
たぶん、こんな使い方もできるのでは？
– ファイルアップロードのフロントとして
⇒ CSVファイルのアップロード時にいったんローカルで読み込んでチェック、等– UI要素なしのエンジンとしてクライアントサイドで業務ロジックを動作させたい場合– Javascriptでガリガリ業務ロジックをかくのはダルイ(^^; 速度が必要な処理を実装– マネージドコードのほうが、Javascriptより高速Okayama IT Engineers Community

わんくま同盟 大阪勉強会 #27

参考

HTML ブリッジ（MSDN）– http://msdn.microsoft.com/ja-jp/library/cc645076(VS.95).aspx