Silverlight Day Breakout Session 3

Size: px

Start display at page:

Download "Silverlight Day Breakout Session 3"

えりかわしあし
4 years ago
Views:

1 Silverlight で実現する RIA - アプリケーション UI の作成とデータ & サービス連携 - マイクロソフト株式会社デベロッパー & プラットフォーム統括本部アーキテクトエバンジェリスト鈴木章太郎 shosuz@microsoft.com Agenda Silverlight のアーキテクチャ実際のソリューションの開発完成済みソリューションの紹介 - 中古自動車販売店レイアウトコントロールカスタムコントロールデータ連携データバインディングアニメーション HTML 統合スタイルテンプレート商用カスタムコントロールのご紹介グレープシティ様 - InputMan for Silverlight Preview 業務パッケージのご紹介日本デジタルオフィス様 - DO!Cat LT Version 4.0 まとめ 1

2 Silverlight の特徴 1. 魅力的なクロスプラットフォーム体験を提供注力分野その1: メディア体験 HD 画質ビデオ配信 DRM(Digital Rights Management) 注力分野その2:RIA ー豊富なコントロール ( レイアウト UI) ー優れたデータ連携通信処理ー Deep Zoom 2. 開発生産性が高いー柔軟な開発言語ースキルコード資産の再利用が可能ーデザイナーと開発者の協業が可能 Silverlight のアーキテクチャ 2

S-3 Silverlight で実現する RIA Silverlight の RIA 実装アーキテクチャ Web ブラウザ Silverlight 2

サーバー Isolated Storage SQL ストレージ Application Package -.

3 S-3 Silverlight で実現する RIA Silverlight の RIA 実装アーキテクチャ Web ブラウザ Silverlight 2 プラグイン HTTP (1) HTML/JS ASP.NET または HTML ページ (2) XAML/.NET Assembly XAML and.net アセンブリ.xap (3) POX, RSS, JSON or SOAP REST, RSS または SOAP Web サービス XAML コードビハインド Web サーバー Isolated Storage SQL ストレージ Application Package -.xap 形式 code codefile file code file (.cs (.cs,.vb),.vb) (.cs,.vb) Csc.exe MyApp.dll XAML XAML <media> リソース Business.dll Business.dll. <media> コンテンツ Manifest.xml 3 MyApp.xap

4 実際のソリューションの開発完成済みソリューションご紹介中古自動車販売店 1. 検索画面 2. 登録画面下記にプロジェクトファイルを公開予定 4

5 アプリケーション開発ワークフロープロジェクトユーザーインターフェース開発レイアウトコントロールビジネスロジック開発データ連携データバインディングユーザーインターフェース拡張スタイルテンプレート統合デバッグ配布レイアウトコントロールカスタムコントロール 5

6 S-3 Silverlight で実現する RIA レイアウト画面構成は全てレイアウトを基本にまずはレイアウトから画面サイズ変更への適応を考慮するパネルは操作単位をまとめるグループ化, レイヤーとして利用レイアウトパネル管理単位を構成アイテム階層可能ベースパネル Window 構成グループパネルコンテナを構成グループパネルコンテナを構成 6 アイテム階層可能

7 コントロールの利用 Control 標準コントロールが利用可能 Textbox, Checkbox, Radiobutton, Canvas, StackPanel, Grid, Slider, ScrollViewer, ProgressBar, Datagrid, ToolBar Control 機能拡張 1. ユーザーインターフェースを変更 2. エフェクトの実装 Control 3. ユーザーコントロールへの変更プロパティの追加カプセル化 Clicked カスタムコントロールを再利用する Silverlight の豊富な標準 UI コントロール 7

8 カスタムコントロール実装するには Expression Blend でデザインを行う Visual Studio で Silverlight カスタムコントロールアイテムテンプレートを使いユーザーコントロールを Silverlight Client または Silverlight Class Library project に追加することも可能 XAML とコードビハインドの組み合わせページの場合と同じパターンを踏襲利用するには XML の名前空間の参照を当該カスタムコントロールを参照する XAML ページに付加カスタムコントロールをインスタンス化するために XAML タグをページ内部に付加カスタムコントロール作成 8

9 S-3 Silverlight で実現する RIA データ連携データバインディング Web サービス連携シナリオローカルのバックエンドサービス自分が所有するサービス SOAP interop Web APIs (REST/POX/JSON) 基本プロファイル 1.0 シンジケーションフィードその他の専用サービス RSS, Atom SL2 専用に構築自動生成プロキシ WCF 利用サービス参照の追加 Web Client WebRequest / Web Response サービスのマニュアル利用 9 専用のクラスの利用 Syndicationfeed feed = Syndicationfeed.Load(new Uri( )); foreach (FeedItem i in feed) { // }

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> 10

11 クロスドメインスクリプティング Silverlight アプリケーションは下記いずれも可能自分のドメインのサーバーへの呼び出しクロスドメイン呼び出しをサポートするように構成されたサーバー環境への呼び出しこのクロスドメインアクセスをサービス上で有効にするためには Clientaccesspolicy.xml または Crossdomain.xml (Flash ポリシーファイルのサブセット ) ファイルをドメインサーバーのルートに配置する必要がある例 : Silverlight ポリシーファイル <?xml version="1.0"?> <access-policy> <cross-domain-access> <policy> <allow-from> <domain uri=" />" <domain uri=" <domain uri=" </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> 11

12 データバインディングデータバインディングとは UI とビジネスオブジェクトの間のコネクションやバインディングを確立するもの当該ビジネスオブジェクトがデータを当該 UI との間でやり取りすることができるようにしていることが前提全てのバインディングは source と target とを持つ Source = 当該ビジネスオブジェクト Target = 当該 UI 要素簡単にサービス呼び出しからのコレクションを取得でき ListBox や DataGrid のようなリスト志向の UI 要素にバインドできるデータ連携データバインディング 12

13 アニメーション HTML 統合アニメーションタイムラインアニメーションプロパティを時間変化移動 x,y 回転 Angle 色 RGBA ベジェ曲線などの頂点はプロパティではないのでアニメーションできないスプライン補完加速と減速ブロックをまとめてアニメーション可能 13

14 HTML DOM 統合 Silverlight はブラウザアプリケーションブラウザホストとの連携はきわめて重要.NET のコードと HTML 要素やスクリプトオブジェクトとの相互連携や.NET のコードから HTML 要素やスクリプトオブジェクトの生成可能.NET オブジェクトの JavaScript への公開が可能ブラウザ共通サービスへのアクセスが可能警告ブラウザの履歴既存の Web アプリケーション機能アニメーション HTML 統合 14

15 スタイルとテンプレートスタイルとテンプレートスタイルとテンプレートを使うことによりアプリケーションの作成に柔軟性をもたらすことができるスタイルグループに同時にプロパティ値を適用すると同時にそのコレクションに名前 ( 通称 : Key) を与えることができるテンプレート UI 要素のビジュアルツリーを機能はそのままで好きなように置換することができる 15

16 スタイルとテンプレート商用カスタムコントロールご紹介グレープシティ様 InputMan for Silverlight Preview 16

17 InputMan for Silverlight Preview InputMan for Silverlight ( 仮称 ) グレープシティで研究開発中の Silverlight 2 プラットフォーム用入力コンポーネントコントロールマスクコントロール数値コントロール日付コントロールフィールド表示コントロール検証コンポーネントイベントトリガコンポーネント正規表現を使った書式設定桁区切り記号小数点負号通貨記号などの書式設定ドロップダウン電卓和暦表示モードによる表示切替ドロップダウンカレンダー入力コントロールにアップダウンボタンやドロップダウンなどの入力方法を提供検証定義検証動作を XAML のみで記述可能特定のイベントに対して様々な動作を実行するように XAML で記述可能 InputMan for Silverlight ( 仮称 ) の製品版リリース時期は未定ですこちらで紹介した機能などについては今後の研究開発によって変更が生じる可能性がございます InputMan for Silverlight Preview デモご紹介内容非編集時のマウス入力補助アクション ( フィールド表示コントロール ) 不正文字の検証と検証時のアクション ( 検証コントロール ) 非編集時の文字フィールドレイアウト自由設定 ( フィールド表示コントロール ) InputMan for Silverlight Preview ご紹介ページ 17

18 InputMan for Silverlight Preview 業務パッケージのご紹介日本デジタルオフィス株式会社様 DO!Cat LT Version

S-3 Silverlight で実現する RIA 日本デジタルオフィス株式会社ご紹介日本デジタルオフィス株式会社様営業支援ソリューションやドキュメント管理のパッケージシステムをご提供される ISV 企業様ユーザインターフェイスの最適化を追求して操作性の優れた各種ソリューションを開発 2008 年 6 月に大日本印刷様マイクロソフトと Web ドキュメントソリューション分野で協業

Cat Server SharePoint 連携のドキュメント管理システム SharePoint に登録したファイルをプレビュー付のインターフェイスでイントラ公開 Microsoft Office のファイルをページ単位で編集も実現しているドキュメント管理システム DO! Cat LT Web カタログソリューション Webカタログ自動作成ツール Ver. 4.

19 S-3 Silverlight で実現する RIA 日本デジタルオフィス株式会社ご紹介日本デジタルオフィス株式会社様営業支援ソリューションやドキュメント管理のパッケージシステムをご提供される ISV 企業様ユーザインターフェイスの最適化を追求して操作性の優れた各種ソリューションを開発 2008 年 6 月に大日本印刷様マイクロソフトと Web ドキュメントソリューション分野で協業豊富な実績パナソニック電工株様大建工業株様サンウエーブ工業株様株カクダイ様 DO! Cat シリーズ DO! Cat Server SharePoint 連携のドキュメント管理システム SharePoint に登録したファイルをプレビュー付のインターフェイスでイントラ公開 Microsoft Office のファイルをページ単位で編集も実現しているドキュメント管理システム DO! Cat LT Web カタログソリューション Webカタログ自動作成ツール Ver. 4.0 から Silverlight を全面採用し 3D ライクなインターフェイスとブックレット表示機能など先進の技術を利用した Web カタログをボタン一つで作成 DO! Cat LT Version 4.0 概要従来の問題点 PDF ファイルの起動に時間がかかるホームページに PDF カタログのリンク作成に手間がかかる見たいページを素早く探せない DO! Cat LTの特長公開サイトの機能 Silverlight 自動更新機能カタログ PDF をフォルダーに分類して登録ボタン一つで Web カタログを自動作成差分更新機能により変更された箇所を自動的抽出 Deep Zoom 用画像もサーバで自動作成します DO!Cat LT 自動処理変更箇所のみ抽出して Silverlight 用コンテンツを自動作成 19 ３Ｄビュールーペズーム 3D 空間で画面の動きを演出 Deep Zoom で高精細拡大を実現 BOOK表示切り取りページをぱらぱらめくる楽しいインターフェイス Deep Zoom で最適解像度選択付箋デザイン切り替え分離ストレージ ( Isolated Storage) を利用したメモ機能 Expression Blend2 で美しいデザインを組み込み

20 S-3 Silverlight で実現する RIA Silverlight 対応 Ver. 4.0 機能ご紹介３Ｄビューフォルダーツリー表紙一覧ページ一覧の３つの画面を美しい動きで連係ページ単位全文検索などの優れた機能にビジュアル効果を加えることに成功しました付箋分離ストレージ ( Isolated Storage )を利用してご利用ユーザが自由に付箋貼り付けが可能ＢＯＯＫ表示スピーディに PDF ファイルをブック形式でプレビュー目次やページサムネイルなどの動作にも Silverlight ならではの表現力を付加しています切り取りルーペＺＯＯＭ Deep Zoom 機能で高速高精細参照を実現ネットワーク負荷の低減も可能となりましたデザイン切り替え Deep Zoom の各解像度の画像を利用し解像度を指定して画像切り出しを実現お客様ごとに背景画像や色ボタンレイアウトなどもプログラムを変えずに変更可能オンリーワンの Web カタログを素早く作成します Do Cat LT Version 4.0 ( Silverlight 対応版 ) 20

21 まとめ Silverlight 2 は真の Rich Interactive Application を作成できる環境クロスブラウザ / クロスプラットフォームのブラウザプラグイン.NET Framework 3.5 プログラミングモデル採用 Visual Studio 2008 と Expression Blend により開発者とデザイナーとの間のギャップを埋めることができる既存の.NET の開発スキルを活用することにより Silverlight を使った Rich Interactive Application の構築が可能参考リソース Silverlight 製品ページ MSDN Silverlight デベロッパーセンター Expression 製品ページ Silverlight.net ( 最新事例チュートリアルほか ) The Next Web Now 21

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.

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

22 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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション DE - 003 Windows 8.1 時代のクライアントアプリケーション開発日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井戸文彦本セッションの目的 Windows 8.1 におけるデスクトップとストアアプリの違いと使い分けをご理解いただくこと今日の内容 Windows 8.1 プラットフォームデスクトップアプリ開発 Windows ストアアプリ開発