Silverlight で実現する RIA
アプリケーション UI の作成とデータ ＆ サービス連携 -マイクロソフト株式会社 デベロッパー＆プラットフォーム統括本部 アーキテクトエバンジェリスト鈴木 章太郎
[email protected] http://builder.japan.zdnet.com/member/u508527/blog/Agenda
• Silverlight のアーキテクチャ
• 実際のソリューションの開発
• 完成済みソリューションの紹介 - 中古自動車販売店 • レイアウト、コントロール、カスタムコントロール • データ連携、データバインディング • アニメーション、HTML 統合 • スタイル、テンプレート• 商用カスタムコントロールのご紹介
Silverlight の特徴
1. 魅力的なクロスプラットフォーム体験を提供
注力分野その１：メディア体験
― HD 画質ビデオ配信
― DRM（Digital Rights Management)
注力分野その２：RIA ー 豊富なコントロール（レイアウト・UI) ー 優れたデータ連携、通信処理 ー Deep Zoom
2. 開発生産性が高い
ー 柔軟な開発言語 ー スキル・コード・資産の再利用が可能 ー デザイナーと開発者の協業が可能Silverlight のアーキテクチャ
Silverlight の RIA 実装アーキテクチャ
Web サーバー REST, RSS または SOAP Web サービス ASP.NET または HTML ページ Isolated Storage コードビハインド XAML Silverlight 2 プラグイン Web ブラウザ SQL ストレージ (1) HTML/JS(3) POX, RSS, JSON or SOAP
(2) XAML/.NET Assembly XAML and .NET
アセンブリ（.xap） HTTP
MyApp.xap
Application Package - .xap 形式
XAMLXAML code file (.cs ,.vb)code filecode file(.cs ,.vb)
(.cs ,.vb) MyApp.dll Csc.exe
実際のソリューションの開発
完成済みソリューションご紹介
中古自動車販売店 1．検索画面 2．登録画面 下記にプロジェクトファイルを公開予定 http://cid-1c511c93217c3e4d.skydrive.live.com/browse.aspx/Silverlight-Day-Session3アプリケーション開発ワークフロー
• プロジェクト
• ユーザーインターフェース開発
• レイアウト • コントロール• ビジネスロジック開発
• データ連携、データバインディング• ユーザーインターフェース 拡張
• スタイル、テンプレート• 統合
• デバッグ
• 配布
レイアウト、コントロール、
カスタムコントロール
レイアウト
• 画面構成は
全てレイアウトを基本に
• まずはレイアウトから
• 画面サイズ変更への適応
を考慮する
パネルは操作単位をまとめる
グループ化, レイヤーとして利用
ベースパネル Window 構成 レイアウトパネル 管理単位を構成 グループパネル コンテナを構成 グループパネル コンテナを構成 アイテム 階層可能 アイテム 階層可能コントロールの利用
• 標準コントロールが利用可能
• Textbox, Checkbox, Radiobutton, Canvas,
StackPanel, Grid, Slider, ScrollViewer, ProgressBar, Datagrid, ToolBar Control
• 機能拡張
1. ユーザーインターフェースを変更 2. エフェクトの実装 3. ユーザーコントロールへの変更 • プロパティの追加 • カプセル化• カスタム コントロールを再利用する
Control Control ClickedSilverlight の豊富な標準 UI コントロール
カスタムコントロール
• 実装するには
• Expression Blend でデザインを行う
• Visual Studio で、Silverlight カスタム コントロールアイテム テ ンプレートを使い、 ユーザーコントロールを、Silverlight Client または Silverlight Class Library project に追加することも可能
• XAML と、コードビハインドの組み合わせ • ページの場合と同じパターンを踏襲
• 利用するには
• XML の名前空間の参照を、当該カスタムコントロールを 参照する XAML ページに付加 • カスタムコントロールをインスタンス化するために、 XAML タグをページ内部に付加カスタムコントロール作成
データ連携、データバインディング
Web サービス連携シナリオ
ローカルの バックエンド サービス 自分が 所有する サービス SL2 専用に 構築 SOAP interop 基本プロファイル 1.0 Web APIs (REST/POX/JSON) シンジケー ション フィード RSS, Atom その他の 専用サービスネットワーキングとコミュニケーション
• Silverlight は、REST 及び SOAP の Web サービス
をサポート
• ただし全てにおいて呼び出しは非同期
• SOAP に関しては、WCF を使用することにより、
Visual Studio が、Client proxy 及び必要な構成情
報を生成する
• REST に関しては、WebClient クラスを作り、それ
に Uri パラメータを与えてやる必要がある
• WebRequest / Web Response クラスは、HTTP
POST、GET などを使え、 JavaScript に慣れてい
る場合には有効
WCF サービスコンフィギュレーション
• Web サービスのプロジェクトを作る際の制約として、
Web.config file を修正する必要がある
• Web.config ファイルの中の <endpoint> 要素 • <system.serviceModel> の中の <service> 要素にある• デフォルトのバインディングである wsHttpBinding
を、 basicHttpBinding に変更する必要がある
• Silverlight-Enabled WCF Service を使えば、最初
から設定される
<endpoint address="" binding="basicHttpBinding" contract="IMyService"> </endpoint>クロス ドメイン スクリプティング
• Silverlight アプリケーションは下記いずれも可能
• 自分のドメインのサーバーへの呼び出し • クロスドメイン呼び出しをサポートするように構成さ れたサーバー環境への呼び出し• このクロス ドメインアクセスをサービス上で有効
にするためには
• Clientaccesspolicy.xml
または
• Crossdomain.xml
（Flashポリシーファイルのサブセット）ファイルを、ドメインサーバーのルートに配置す
る必要がある
例 : Silverlight ポリシーファイル
<?xmlversion="1.0"?> <access-policy> <cross-domain-access> <policy> <allow-from><domain uri="http://customers.shop.com”/>"
<domain uri="http://list.com"/>
<domain uri="http://partner.com/app.xap"/> </allow-from>
<grant-to>
<grant path="/sales/serialnumbers.xml"/> <grant path="/partners"include-subpaths="false"/> </grant-to>
</policy>
データバインディング
• データバインディングとは、UI とビジネスオブジェクトの 間のコネクションやバインディングを確立するもの • 当該ビジネスオブジェクトが、データを、当該 UI との間 でやり取りすることができるようにしていることが前提 • 全てのバインディングは、source と target とを持つ• Source = 当該ビジネスオブジェクト
• Target = 当該 UI 要素
• 簡単にサービス呼び出しからのコレクションを取得でき、 ListBox や、DataGrid のようなリスト志向の UI 要素に バインドできるデータ連携、データバインディング
アニメーション、 HTML 統合
アニメーション
• タイムラインアニメーション
• プロパティを時間変化
• 移動、x,y • 回転、Angle • 色 RGBA• ベジェ曲線などの頂点は
プロパティではないので
アニメーションできない
HTML DOM 統合
• Silverlight は、ブラウザアプリケーション
• ブラウザホストとの連携はきわめて重要
• .NET のコードと、HTML 要素やスクリプト オブ
ジェクトとの相互連携や、 .NET のコードから、
HTML 要素やスクリプトオブジェクトの生成可能
• .NET オブジェクトの JavaScript への公開が可能
• ブラウザ共通サービスへのアクセスが可能
• 警告
• ブラウザの履歴
• 既存の Web アプリケーション機能
アニメーション、 HTML 統合
スタイルとテンプレート
スタイルとテンプレート
• スタイルとテンプレートを使うことにより、
アプリケーションの作成に、柔軟性をもたら
すことができる
• スタイル
• グループに同時にプロパティ値を適用すると
同時に、そのコレクションに名前（通称：
Key）を与えることができる
スタイルとテンプレート
商用カスタムコントロールご紹介
グレープシティ様
InputMan for Silverlight Preview
http://www.grapecity.com/japan/inputman5/Silverlight/InputMan for Silverlight Preview
• InputMan for Silverlight （仮称）
• グレープシティで研究開発中の、 Silverlight 2 プラットフォーム用入力コンポーネント • コントロール マスクコントロール 正規表現を使った書式設定 数値コントロール 桁区切り記号、小数点、負号、通貨記号 などの書式設定、ドロップダウン電卓 日付コントロール 和暦表示、モードによる表示切替、 ドロップダウンカレンダー フィールド表示コントロール 入力コントロールにアップダウンボタン やドロップダウンなどの入力方法を提供 検証コンポーネント 検証定義、検証動作を XAML のみで記述 可能 イベント トリガコンポーネント 特定のイベントに対して様々な動作を 実行するように XAML で記述可能
※InputMan for Silverlight （仮称）の製品版リリース時期は未定です。こちらで紹介した機能 などについては今後の研究開発によって変更が生じる可能性がございます。
InputMan for Silverlight Preview
• デモご紹介内容
• 非編集時のマウス入力補助アクション （フィールド表示コントロール ） • 不正文字の検証と検証時のアクション （検証コントロール） • 非編集時の文字フィールドレイアウト自由設定 （フィールド表示コントロール）InputMan for Silverlight
Preview
業務パッケージのご紹介
日本デジタルオフィス株式会社様
DO！Cat LT Version 4.0
http://www.do-cat.com/日本デジタルオフィス株式会社 ご紹介
DO ! Cat LT ： Web カタログソリューション
DO ! Cat Server ： SharePoint 連携 のドキュメント管理システム
●日本デジタルオフィス株式会社様 営業支援ソリューションやドキュメント管理のパッケージシステムをご提供される ISV 企業様。 ユーザインターフェイスの最適化を追求して操作性の優れた各種ソリューションを開発。 2008 年 6 月に、大日本印刷様、マイクロソフトと Web ドキュメントソリューション分野で協業。 ●DO ! Cat シリーズ SharePoint に登録したファイルをプレビュー付のインターフェイスでイントラ公開 Microsoft Office のファイルをページ単位で編集も実現しているドキュメント管理システム Webカタログ自動作成ツール Ver. 4.0 から Silverlight を全面採用し、3D ライクなインターフェイスとブックレット表示機能 など、先進の技術を利用した Web カタログをボタン一つで作成 豊富な実績 パナソニック電工（株）様 大建工業（株）様 サンウエーブ工業（株）様 （株）カクダイ様
DO ! Cat LT Version 4.0 概要
DO ! Cat LTの特長 自動更新機能 カタログ PDF をフォルダーに分類して登録。 ボタン一つで Web カタログを自動作成。 差分更新機能により、変更された箇所を自動的抽出。 Deep Zoom 用画像もサーバで自動作成します。 公開サイトの機能 （Silverlight） 従来の問題点 PDF ファイルの起動に時間がかかる ホームページに PDF カタログのリンク作成に手間がかかる 見たいページを素早く探せない ３Ｄビュー ルーペ＆ ズーム 3D 空間で 画面の動きを演出 Deep Zoom で高精細拡大を実現Silverlight 対応 Ver. 4.0 機能ご紹介
デザイン切り替え 切り取り ＢＯＯＫ表示 ３Ｄビュー フォルダーツリー・表紙一覧・ページ一覧の３ つの画面を 美しい動きで連係。ページ単位全文検索などの優れた 機能にビジュアル効果を加えることに成功しました スピーディに PDF ファイルをブック形式でプレビュー。 目次やページサムネイルなどの動作にも Silverlight ならではの表現力を付加しています Deep Zoom 機能で高速・高精細参照を実現。 ネットワーク負荷の低減も可能となりました。 分離ストレージ ( Isolated Storage )を利用して、 ご利用ユーザが自由に付箋貼り付けが可能。 Deep Zoom の各解像度の画像を利用し解像度を指定して画像切り出しを実現。 お客様ごとに背景画像や色、ボタンレイアウトなども プログラムを変えずに変更可能。 オンリーワンの Web カタログを素早く作成します。 ルーペ＆ＺＯＯＭ 付箋Do！Cat LT Version 4.0
( Silverlight 対応版 )
まとめ
• Silverlight 2 は真の Rich Interactive Application
を作成できる環境
• クロスブラウザ / クロスプラットフォームのブラウ
ザプラグイン
• .NET Framework 3.5 プログラミングモデル採用
• Visual Studio 2008 と Expression Blend により
開発者とデザイナーとの間のギャップを埋めること
ができる
• 既存の .NET の開発スキルを活用することにより、
Silverlight を使った Rich Interactive Application
の構築が可能
参考リソース
• Silverlight 製品ページ http://www.microsoft.com/japan/silverlight • MSDN Silverlight デベロッパーセンター http://www.microsoft.com/japan/msdn/silverlight/ • Expression 製品ページ http://www.microsoft.com/japan/expression43
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
