山田 達也インフラジスティックスジャパン株式会社

テクニカルエバンジェリスト

デベロッパーサポートエンジニア

12-D-6

SilverlightによるハイグレードなLOB/BI実現のためのコンポーネント活用法

簡単に自己紹介

• NetAdvantage シリーズを開発・販売インフラジスティックス・

ジャパン

• テクニカルエバンジェリスト

• デベロッパーサポートエンジニア私のお仕事

• http://blogs.infragistics.com/blogs/tyamada/

• http://tan2men.blogspot.com/ Blog

• Windows Forms, Silverlight, NetAdvantage好物

このセッションのキーワード

• 期待の新星Silverlight

• いわゆる業務アプリケーションLOB

（Line of Business）

• 意志決定や情報共有のためのツールBI

（Business Intelligence）

• 情報をグラフィカルに視覚化するData Visualization

• おもてなしUX

（ユーザーエクスペリエンス）

• UIコントロールなどの再利用可能なプログラミング・パーツ

コンポーネント

皆さん、Silverlight 始めてますか？

マルチプラットフォーム

• Webブラウザ用プラグイン

• IE, Firefox, Safari をサポート

マルチメディア機能

• DRM対応動画再生

• Deep Zoom

開発生産性

• .NET Framework互換エンジン

• XAMLベースのUI開発

• C# , VBなど多数の言語対応

開発環境

• Visual Studio 2008 SP1

• Expression Blend 2 SP1

Silverlight

の特徴

今年は・・・LOBの分野でSilverlightを！

革新的なUXを持つ

RIAベースのLOB/BIを実現

Webに新たな可能性

よりリッチな表現力 ハイレベルなユーザビリティ

Silverlight2の登場!!

40以上の標準UIコントロール 本格的な.NET開発が可能に

Silverlightを活用したアプリケーションの事例

Microsoft Health CUI

• 医療ポータルのデモサイト

• http://www.mscui.net/

FSDA Supporting System / TDKラムダ株式会社

• BIポータル事例

face Out / インフラジスティックス

• 営業員管理アプリケーションの学習事例

• http://labs.infragistics.com/silverlight/faceout/

Quince / インフラジスティックス

• UXパターンビューワー

• http://quince.infragistics.com/

Silverlight の BI / LOB 事例

TDKラムダ株式会社

FSDA Supporting System

Silverlight の BI / LOB 事例

インフラジスティックス

UX パターンビューワー

Infragistics UX Pattern Explorer

デモ ～Silverlight 事例

Silverlightを活用したアプリケーションの事例

どうやって作れば良いの？

Silverlight 導入に向けた2つのアプローチ

部分的アプローチ

•既存のWebサイトにプラスα

全面的アプローチ

•新しいUIプラットフォームとして

部分的アプローチ既存のWebサイトの一部をSilverlight化

• ASP.NET / AJAX ベースの BIポータル

• 販売促進の意志決定に活用している

例

• 表によるデータ表現が多く直感的ではない

• 特にエリアごとのセールスファクターを判りやすくしたい

問題点

• Silverlight コントロールを活用

• データの視覚化によりBIとしてのUXを向上

ソリューション

デモ既存のWebサイトの構成

ASP.NET 3.5

ADO.NET

Data Service

Webページ

サーバーサイドクライアントサイド

インターネットブラウザ

デモSilverlightを加えたWebサイトの構成

ASP.NET 3.5

ADO.NET

Data Service

Webページ

サーバーサイドクライアントサイド

インターネットブラウザ

相互連携

データ取得

XamWebMap®

Silverlight Mapコントロールの活用

に収録

GIS業界標準のシェープ ファイルをサポート

マルチレイヤー・オーバーレイ

データに応じた自動カラーリング

キーボード・マウスオペレーション

XamWebMapを使ったデータ・ビジュアライゼーション

シェープファイル

図形情報＋属性情報

データベース

xamWebMap

データ

既存のWebサイトをSilverlightでさらにリッチに

デモ ～部分的アプローチ

Islands of Richness

Brad Abramshttp://blogs.msdn.com/brada/archive/2008/0

2/18/islands-of-richness-with-silverlight-on-

an-asp-net-page.aspx

HTML / DOM Silverlight

公開イベント AreaSelected

公開メソッド Zoom();

① Silverlight ロード

AreaSelected

イベントハンドラー登録

②マップ上で選択

AreaSelected イベント起動

グリッド・チャート更新

③グリッド上で選択

Zoom メソッドを実行

デモHTML/DOM と Silverlight の連携

Silverlight～JavaScript 連携キーポイント

Silverlight側

スクリプトからアクセス可能にマークする

公開するメソッド、クラス、イベントに属性を付加

private void OnLoaded(object sender, RoutedEventArgs e){

HtmlPage.RegisterScriptableObject("Map", this);}

[ScriptableMember]

public event EventHandler AreaSelected;

[ScriptableType]

public class AreaSelectedEventArgs : EventArgs

{…

Silverlight～JavaScript 連携キーポイント

HTML/DOM JavaScript側

Silverlight からの呼び出しに対するアクセスレベルを設定

MSDN Library HTMLブリッジのセキュリティ設定 http://msdn.microsoft.com/ja-jp/library/cc645023(VS.95).aspx

Silverlight メソッドを呼び出し

Silverlight イベントハンドラーを設定

document.getElementById("slMap").Content.Map.Zoom(jcode);

function registerEvent() {

document.getElementById("slMap").Content.Map.AreaSelected = selected;}

<param name="enableHtmlAccess" value="true" />

部分的アプローチ～Islands of Richness

HTML/DOM と Silverlight の親和性

既存のWebサイトの一部分をSilverlight化

最小の労力で

WebアプリケーションのUXを向上

従来のWebと共存・相互連携

ビジネス層の資産を活用

ハイグレードなコンポーネントを活用

XamWebMap®

Silverlight Mapコントロールの活用

に収録

GIS業界標準のシェープ ファイルをサポート

マルチレイヤー・オーバーレイ

データに応じた自動カラーリング

キーボード・マウスオペレーション

MapのLOBへの活用

さまざまな用途に応用可能

Silverlight 導入に向けた2つのアプローチ

部分的アプローチ

•既存のWebサイトにプラスα

全面的アプローチ

•新しいUIプラットフォームとして

全面的アプローチ

Webブラウザベースの

リッチクライアントとして

最大限のUXを実現

LOB/BIのプレゼンテーション

基盤としてSilverlight を採用

LOB基盤としてSilverlightを採用

デモ ～全面的アプローチ

New Frontier

Space: the final frontier...

…to boldly go where no man has gone before!

全面的アプローチLOBの基盤としてSilverlightを採用

• 従来のn層リッチクライアント開発に近い

• サービス連携、UIの非同期処理

Webアプリ開発との差違に注意

• WCF 認証サービス

• ADO.NET Data Service

標準サービスを活用するとスムーズに

• Quince （UXパターン エクスプローラ）

UXパターンを参考に

まとめSilverlight を LOBに活用するためには

最大限のUXを提供

いずれはプラットフォームとして採用

その中でコンポーネントを活用

まずは、今できることから、尐しずつ

～ハイグレード・コンポーネントの活用

NetAdvantage for Silverlight

2009年中に続々リリース！

２つの製品ラインナップ

• さまざまなデータ可視化の方法をご提案

• Chart, Gauge, Map, TimeLineなど

• 2009年春 リリース予定

Data Visualization

• 業務アプリに欠かせないコンポーネント集

• 高機能Grid, Tree, 各種エディタやナビゲーション

• 2009年夏 リリース予定（現在CTPを公開中）

LOB (Line Of Business)

その他ダイアログウィンドウ、メニューなどを搭載！現在公開中のCTPでお試し下さい

参考資料 スライドの最新版とソースコードは後日BlogにUpします

http://blogs.infragistics.com/blogs/tyamada/

NetAdvantage for Silverlightの最新情報

Silverlight Data Visualization http://jp.infragistics.com/hot/silverlight.aspx

Silverlight LOB http://jp.infragistics.com/dotnet/netadvantage/silverlight.aspx

CodeZine リッチクライアント エキスパート

http://codezine.jp/component/infragistics/

デモで使用したシェープファイルは、

ESRIジャパン株式会社の全国市区町村界データを使用しました 。

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