silverlight で実現する riadownload.microsoft.com/.../s3-silverlightday.pdfmix essentials....
TRANSCRIPT
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
1
Silverlight で実現する RIA- アプリケーション UI の作成とデータ ＆ サービス連携 -
マイクロソフト株式会社デベロッパー＆プラットフォーム統括本部アーキテクトエバンジェリスト
鈴木 章太郎[email protected]://builder.japan.zdnet.com/member/u508527/blog/
Agenda• Silverlight のアーキテクチャ
• 実際のソリューションの開発• 完成済みソリューションの紹介 - 中古自動車販売店
• レイアウト、コントロール、カスタムコントロール
• データ連携、データバインディング
• アニメーション、HTML 統合
• スタイル、テンプレート
• 商用カスタムコントロールのご紹介• グレープシティ様 - InputMan for Silverlight Preview
• 業務パッケージのご紹介• 日本デジタルオフィス様 - DO！Cat LT Version 4.0
• まとめ
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
2
Silverlight の特徴1. 魅力的なクロスプラットフォーム体験を提供
注力分野その１：メディア体験
― HD 画質ビデオ配信
― DRM（Digital Rights Management)
注力分野その２：RIA
ー 豊富なコントロール（レイアウト・UI)
ー 優れたデータ連携、通信処理
ー Deep Zoom
2. 開発生産性が高いー 柔軟な開発言語
ー スキル・コード・資産の再利用が可能
ー デザイナーと開発者の協業が可能
Silverlight のアーキテクチャ
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
3
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 AssemblyXAML and .NET
アセンブリ（.xap）
HTTP
MyApp.xap
Application Package - .xap 形式
.<media> コンテンツ
XAML
<media> リソース
XAML
code file(.cs ,.vb)code file(.cs ,.vb)
code file(.cs ,.vb) MyApp.dll
Business.dllBusiness.dll
Csc.exe
Manifest.xml
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
4
実際のソリューションの開発
完成済みソリューションご紹介中古自動車販売店
1．検索画面2．登録画面
下記にプロジェクトファイルを公開予定http://cid-1c511c93217c3e4d.skydrive.live.com/browse.aspx/Silverlight-Day-Session3
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
5
アプリケーション開発ワークフロー• プロジェクト
• ユーザーインターフェース開発• レイアウト
• コントロール
• ビジネスロジック開発• データ連携、データバインディング
• ユーザーインターフェース 拡張• スタイル、テンプレート
• 統合
• デバッグ
• 配布
レイアウト、コントロール、
カスタムコントロール
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
6
レイアウト
• 画面構成は全てレイアウトを基本に
• まずはレイアウトから• 画面サイズ変更への適応を考慮する
パネルは操作単位をまとめるグループ化, レイヤーとして利用
ベースパネルWindow 構成
レイアウトパネル管理単位を構成
グループパネルコンテナを構成
グループパネルコンテナを構成 アイテム
階層可能
アイテム階層可能
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
7
コントロールの利用• 標準コントロールが利用可能
• Textbox, Checkbox, Radiobutton, Canvas, StackPanel, Grid, Slider, ScrollViewer, ProgressBar, Datagrid, ToolBar Control
• 機能拡張1. ユーザーインターフェースを変更
2. エフェクトの実装
3. ユーザーコントロールへの変更• プロパティの追加
• カプセル化
• カスタム コントロールを再利用する
Control
Control
Clicked
Silverlight の豊富な標準 UI コントロール
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
8
カスタムコントロール• 実装するには
• Expression Blend でデザインを行う• Visual Studio で、Silverlight カスタム コントロールアイテム テンプレートを使い、 ユーザーコントロールを、Silverlight Client または Silverlight Class Library project に追加することも可能
• XAML と、コードビハインドの組み合わせ• ページの場合と同じパターンを踏襲
• 利用するには• XML の名前空間の参照を、当該カスタムコントロールを参照する XAML ページに付加
• カスタムコントロールをインスタンス化するために、XAML タグをページ内部に付加
カスタムコントロール作成
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
9
データ連携、データバインディング
Web サービス連携シナリオローカルの
バックエンドサービス
自分が所有するサービス
SL2 専用に構築
SOAP
interop
基本プロファイル1.0
Web APIs
(REST/POX/JSON)
シンジケーション
フィード
RSS, Atom
自動生成プロキシWCF 利用、“サービス参照の追加”
Web ClientWebRequest / Web Response
サービスのマニュアル利用
その他の専用サービス
専用のクラスの利用
Syndicationfeed feed =
Syndicationfeed.Load(new Uri(
“http://rss.cnn.com/latest.rss”));
foreach (FeedItem i in feed) {
//…
}
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
10
ネットワーキングとコミュニケーション
• 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>
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
11
クロス ドメイン スクリプティング• Silverlight アプリケーションは下記いずれも可能
• 自分のドメインのサーバーへの呼び出し
• クロスドメイン呼び出しをサポートするように構成されたサーバー環境への呼び出し
• このクロス ドメインアクセスをサービス上で有効にするためには
• Clientaccesspolicy.xml
または
• Crossdomain.xml （Flashポリシーファイルのサブセット）
ファイルを、ドメインサーバーのルートに配置する必要がある
例 : Silverlight ポリシーファイル
<?xml version="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><policy>
<allow-from><domain uri="*"/>
</allow-from><grant-to><grant path="/api" include-subpaths="true"/>
</grant-to></policy>
</cross-domain-access></access-policy>
http://orders.shop.com/accesspolicy.xml
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
12
データバインディング
• データバインディングとは、UI とビジネスオブジェクトの間のコネクションやバインディングを確立するもの
• 当該ビジネスオブジェクトが、データを、当該 UI との間でやり取りすることができるようにしていることが前提
• 全てのバインディングは、source と target とを持つ
•Source = 当該ビジネスオブジェクト
•Target = 当該 UI 要素• 簡単にサービス呼び出しからのコレクションを取得でき、
ListBox や、DataGrid のようなリスト志向の UI 要素にバインドできる
データ連携、データバインディング
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
13
アニメーション、 HTML 統合
アニメーション• タイムラインアニメーション
• プロパティを時間変化• 移動、x,y
• 回転、Angle
• 色 RGBA
• ベジェ曲線などの頂点はプロパティではないのでアニメーションできない
• スプライン補完• 加速と減速
• ブロックをまとめてアニメーション可能
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
14
HTML DOM 統合
• Silverlight は、ブラウザアプリケーション
• ブラウザホストとの連携はきわめて重要
• .NET のコードと、HTML 要素やスクリプトオブジェクトとの相互連携や、 .NET のコードから、HTML 要素やスクリプトオブジェクトの生成可能
• .NET オブジェクトの JavaScript への公開が可能
• ブラウザ共通サービスへのアクセスが可能
• 警告
• ブラウザの履歴
• 既存の Web アプリケーション機能
アニメーション、 HTML 統合
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
15
スタイルとテンプレート
スタイルとテンプレート
• スタイルとテンプレートを使うことにより、アプリケーションの作成に、柔軟性をもたらすことができる
• スタイル• グループに同時にプロパティ値を適用すると同時に、そのコレクションに名前（通称：Key）を与えることができる
• テンプレート• UI 要素のビジュアルツリーを、機能はそのままで、好きなように置換することができる
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
16
スタイルとテンプレート
商用カスタムコントロールご紹介
グレープシティ様InputMan for Silverlight Preview
http://www.grapecity.com/japan/inputman5/Silverlight/
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
17
InputMan for Silverlight Preview• InputMan for Silverlight （仮称）
• グレープシティで研究開発中の、Silverlight 2 プラットフォーム用入力コンポーネント
• コントロール
マスクコントロール 正規表現を使った書式設定
数値コントロール 桁区切り記号、小数点、負号、通貨記号などの書式設定、ドロップダウン電卓
日付コントロール 和暦表示、モードによる表示切替、ドロップダウンカレンダー
フィールド表示コントロール 入力コントロールにアップダウンボタンやドロップダウンなどの入力方法を提供
検証コンポーネント 検証定義、検証動作を XAML のみで記述可能
イベント トリガコンポーネント 特定のイベントに対して様々な動作を実行するように XAML で記述可能
※ InputMan for Silverlight （仮称）の製品版リリース時期は未定です。こちらで紹介した機能などについては今後の研究開発によって変更が生じる可能性がございます。
InputMan for Silverlight Preview• デモご紹介内容
• 非編集時のマウス入力補助アクション（フィールド表示コントロール ）
• 不正文字の検証と検証時のアクション（検証コントロール）
• 非編集時の文字フィールドレイアウト自由設定（フィールド表示コントロール）
InputMan for Silverlight Preview
ご紹介ページhttp://www.grapecity.com/japan/inputman5/Silverlight/
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
18
InputMan for Silverlight Preview
業務パッケージのご紹介
日本デジタルオフィス株式会社様DO！Cat LT Version 4.0
http://www.do-cat.com/
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
19
日本デジタルオフィス株式会社 ご紹介
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 カタログのリンク作成に手間がかかる 見たいページを素早く探せない
変更箇所のみ抽出して Silverlight 用コンテンツを自動作成
DO!Cat LT
自動処理
３Ｄビュー
BOOK表示
付箋
ルーペ ＆
ズーム
切り取り
デザイン切り替え
3D 空間で画面の動きを演出
Deep Zoom で高精細拡大を実現
ページをぱらぱらめくる楽しいインターフェイス
Deep Zoom で最適解像度選択
分離ストレージ( Isolated Storage) を利用したメモ機能
Expression Blend2 で美しいデザインを組み込み
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
20
Silverlight 対応 Ver. 4.0 機能ご紹介
デザイン切り替え切り取り
ＢＯＯＫ表示３Ｄビューフォルダーツリー・表紙一覧・ページ一覧の３ つの画面を美しい動きで連係。ページ単位全文検索などの優れた機能にビジュアル効果を加えることに成功しました
スピーディに PDF ファイルをブック形式でプレビュー。目次やページサムネイルなどの動作にも Silverlightならではの表現力を付加しています
Deep Zoom 機能で高速・高精細参照を実現。ネットワーク負荷の低減も可能となりました。
分離ストレージ ( Isolated Storage )を利用して、ご利用ユーザが自由に付箋貼り付けが可能。
Deep Zoom の各解像度の画像を利用し解像度を指定して画像切り出しを実現。
お客様ごとに背景画像や色、ボタンレイアウトなどもプログラムを変えずに変更可能。オンリーワンの Web カタログを素早く作成します。
ルーペ＆ＺＯＯＭ
付箋
Do！Cat LT Version 4.0 ( Silverlight 対応版 )
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
21
まとめ• 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/expression
• Silverlight.net (最新事例、チュートリアル、ほか）http://silverlight.net
• The Next Web Nowhttp://www.microsoft.com/japan/msdn/nextweb/
MIX essentials. “Silverlight Day”S-3「Silverlightで実現する RIA」
22
43
© 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.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.