asp.net and silverlightdownload.microsoft.com/download/2/6/6/266a5665-2cfe-410e...asp.net...
TRANSCRIPT
ASP.NET AJAXのご紹介とその実装方法について- デモ:JSON Webサービス, WCF連携
.NET Framework 3.5を使用して構築されたサンプルアプリケーション – DinnerNow.NETのご紹介
リソースその他
Visual Studio 2008における次世代Webアプリケーション開発の強化
Silverlightのご紹介とその実装方法について- デモ:LINQ, JSON Webサービス連携
AJAX スタイルのリッチな Web ブラウザ アプリケーションの開発を実現
ASP .NET AJAX の統合
JavaScriptでのIntelliSense有効化、ソースレベル デバッグ
強化された Web ページのデザイン ツール
Web テストの強化
次世代 Web プラットフォームの実現
REST スタイルのアプリケーション
Web GET, RSS, ATOM, JSON 対応
.NET Framework 3.5 対応
LINQ, WCF, WF, CardSpace の活用
Silverlightの開発が可能
クロスブラウザ、クロスプラットフォーム
Webブラウザプラグイン
Rich Interactive Application (RIA)
ASP.NET FuturesによるASP.NETとの連携、Expression Blendとの併用
Silverlight
クロスプラットフォームクロスブラウザ
Microsoft UX プラットフォーム
WPFWindowsPresentationFoundation
Windows Vistaアプリケーション
ASP. NET AJAX
リッチクライアントWebアプリケーション
仕組み
1.クライアントスクリプトから、Msxml2.XMLHTTP (Internet Explorer) 、またはXMLHttpRequest (その他のブラウザ) オブジェクトを使用して Web サーバーにリクエストを投げる
2. レスポンスされたコンテンツを使用して<div> タグ中の innerHTML プロパティ等を書き換える
3. 表示されているページの一部分のみが更新される
ホイール操作で拡大率を変更
ドラッグ&ドロップでメッセージを移動
Outlook Web Access Windows Live Search (Virtual Earth)
AJAXとは?
Asynchronous JavaScript + XML
JavaScript、CSS、XMLHttpRequestを利用した、Webアプリケーション開発技術
既存の技術で実現されているためプラグインなどは不要
使用例
構成
Microsoft AJAX Libraryクライアントサイドの開発(JavaScript + DHTML)向けASP.NET での使用に限定されない
ASP.NET AJAX ExtensionsAJAX を使用した ASP.NET Web フォームコントロール
VisualStudio 2008 では .NET Framework 3.5 を選択するとツールボックスから選択可能となる
ASP.NET Control Toolkit無償で提供されるAJAX を使用したASP.NET Web フォームコントロール
ASP.NET FuturesAJAX Extensionsに含まれていない開発中の機能
特徴3 つの JavaScript ファイルで機能を提供
ブラウザごとの独自性を吸収
.NET Framework に似たオブジェクトモデル
ASP.NET を使わない単独での利用も可
ScriptManager による自動提供
AJAX Library を提供するコントロール
AJAX プログラミングから JavaScript コーディングを解放
ASP.NET AJAX サーバ機能
(System.Web.Extensions.dll)
ScriptManager
UpdatePanel
UpdateProgress
ASP.NET 2.0
IIS
ASP.NET AJAXクライアントライブラリ
MicrosoftAjax.js
MicrosoftAjaxWebForms.js
MicrosoftAjaxTimer.jsTimer
etc …
IE Firefox Safari
配達業者
レストラン責任者
顧客
http://
IT Pro
Web アプリケーション
IIS 7, ASP.NET "AJAX"
Windows CardSpace
Webブラウザ(ASP.NET AJAX)他サイドバー ガジェット
WPF アプリケーション
ワークフロー(WF)
Web サービス (WCF)
Windows Mobile
PowerShellMMC スナップイン
http:www.dinnernow.net/
構成要素ASP.NET
ASP.NET AJAX
JSON
LINQ To SQL
WCF
方法1. LINQ to SQLによるDBへの接続
2. WCF Webサービスを構築
3. WCF のエンドポイントの構成
4. JSON Webサービスを構築
5. WebサイトのAJAX化(ScriptManager等使用)
サービス側1. LINQ to SQL でテーブルの内容を取り出し
2. WCF を使用したサービス 設定ファイル (web.conig) の編集だけでインターフェースの変
更が可能
SOAP
JSON
<service name="myWCFService.Service1" behaviorConfiguration="myWCFService.Service1Behavior">
<endpoint address="" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="myWCFService.IService1"/>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
</services>
<endpointBehaviors>
<behavior name="jsonBehavior"><enableWebScript/>
</behavior>
</endpointBehaviors>
<service name="myWCFService.Service1" behaviorConfiguration="myWCFService.Service1Behavior">
<endpoint address="" binding="wsHttpBinding" contract="myWCFService.IService1"/>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
クライアント側Windows アプリケーションからの呼び出し(SOAP)
HTML 上の JavaScript からの呼び出し(JSON)
ASP.NET AJAX の ScriptManager を使用
ServiceReference.Service1Client WebSrv = new
ServiceReference.Service1Client();
ServiceReference.employeeInfo[] employees =
WebSrv.getEmployeeInfo("London");
tempuri.org.IService1.getEmployeeInfo(arg,onSuccess,onError);
function onSuccess(arg){} 成功時のコールバックルーチンfunction onError(arg){} 失敗時のコールバックルーチン
.NET Framework 3.5 より ASP.NET AJAX の機能が追加
クライアントブラウザの種別を意識することなく AJAX を使用したアプリケーションの作成が可能
JavaScript を記述しなくても AJAX の機能を利用したアプリケーションを開発することが可能(サーバーサイドのコントロールを使った場合:UpdatePanel等々)
ASP.NET Futuresにより、SilverlightとASP.NETの連携が可能
Microsoft Silverlightは、
クロスブラウザ
クロスプラットフォーム
に対応する Webブラウザの
プラグインです。
.NET を基盤とし、
Web における次世代の
メディアエクスペリエンスと
RIA* を実現します。
*RIA (Rich Interactive Application)
WindowsとMacで共通のユーザエクスペリエンスを提供
Internet Explorer・Firefox・Safari をサポート
Linux対応の “Moonlight” がMonoプロジェクトで始動
XAML によるデザインと開発の分離 Web の標準技術であるHTML や JavaScript との連携 .NET Framework ベースの開発環境
Ruby PythonVisual
Basic
JavaScript
CLR (共通言語ランタイム)
DLR (動的言語ランタイム)
C#
配信
Windows Server® 2008
インターネットインフォメーション サービス 7.0
IIS7
メディア配信
HD 720pMacintoshとWindows
様々なデバイスをサポートする
SMTPE VC-1
コンテンツの著作権を保護する
DRM(デジタル著作権管理)
エンコード
Tarari® Encoder Accelerator
高速なエンコード
プロフェッショナル向けビデオエンコーダ
XAMLデザインテンプレート
• Silverlightアプリケーションのファイル構成
• 必要最低限の構成は以下の通り
ファイル 用途
xxxx.htm スタートページ。Silverlightオブジェクトの作成ロジックの呼び出し。
Silverlight.js Silverlightプラグインのインスタンス生成を行う。Silverlight SDKに付属。
xxxx.xaml Silverlightアプリケーションの描画やイベントの定義を格納。
XXX.dll (1.1) XAMLのNameSpaceの箇所に、以下の参照が追加される
xmlns:Custom="clr-namespace:XXXXXXXXXXXXXXX;assembly=ClientBin/XXX.dll“
• Silverlightアプリケーションの動作1.Webブラウザ上で、JavaScriptがSilverlightインスタンスを生成。
2.生成されたSilverlightインスタンスは、指定されたXAMLの内容に従い画面の動的な描画を行う。
(ブラウザ上に、もう一層、ブラウザ非依存のXAMLレンダリングエンジンを搭載しているイメージ)
ブラウザ
HTM
L
Java
Scrip
t(h
tml
内)
Java
Scrip
t(S
ilverlig
th.js)
Silve
rligh
t
XA
MLレスポンス
• Silverlightアプリケーション開発に最低限必要なもの• Silverlight1.0ランタイム(プラグイン)
• Silverlight1.0 Software Development Kit
• Webブラウザ
• フォルダを作成し、以下のファイルを配置• Silverlight.js
• Silverlight1.0 SDKのインストール先(デフォルトでは、C:¥Program Files¥Microsoft Silverlight 1.0 SDK¥Resources)より、コピーして使用
• HTMLファイル
• XAMLファイル
js/Silverlight.js
XAML/demo.xaml
Default.html
<html>
<head>// 1.Silverlight.jsへの参照
<script type="text/javascript"
src="js/Silverlight.js"></script>
// 2.createSilverlight関数
<script type="text/javascript" >
function createSilverlight() {// 内容は後で記述
}
</script>
</head>// 3.createSilverlight()関数の読み込み
<body onload=“createSilverlight()”>
// 4.Silverlightアプリケーションの表示位置
<div id="SilverlightControlHost"></div>
</body>
</html>
Silverlightプラグインのインスタンス生成に必要な引数の記述
function createSilverlight()
{
Silverlight.createObjectEx({source: “XAML/demo.xaml”, // XAMLファイルparentElement: document.getElementById(“SilverlightControlHost”),
id: “SilverlightControl”, // このオブジェクトのID
properties:{width: “100%”, // 表示領域の横幅height: “80%”, // 表示領域の縦幅version: “1.0” // バージョン
},
events:{},
});
}
<div id="SilverlightControlHost"></div>
• Canvasの左端から10、上端から10、高さ100、幅100、色ライトブルーの矩形を黒い幅10の枠線で描画
demo.xamlファイル
<Canvas
xmlns = “http://schemas.microsoft.com/client/2007”
xmlns:x =
“http://schemas.microsoft.com/winfx/2006/xaml”>
<Rectangle
Canvas.Top = “10”
Canvas.Left = “10”
Height = “100”
Width = “100”
Fill = “LightBlue”
Stroke = “Black”
StrokeThickness = “10”
/>
</Canvas>
• XAMLとは?• XAMLは、グラフィックデータ、UI、ア
ニメーションなどの定義に使用できるXMLベースの言語。.NET Framework 3.0のWPF (Windows Presentation Foundation)で使用するマークアップ言語として導入された。
• アプリケーション開発時に、デザイナーとデベロッパーとの間の共同作業を円滑にするように設計されている。
Designer Developer
• 作成方法• Expressionなどのツールを使用する
• 作成したデザインがそのままXAMLとして出力され、生産性が高い。
• テキストエディタなどを使用して直接記述• XAMLを直接記述するため、XAMLの知識があれば、効率的
な記述が可能
• Expression Blend、Designer、Encoder、Media、等をVisual Studio 2008 と組み合わせて使用するのがベスト
• 他社製品のファイル形式も読み込み可能
• 3rdパーティ製プラグインも存在(SWF, Illustrator、・・・)
• デベロッパーもBlendだけは使えるようにする必要がある
・Silverlightアプリケーションのイベントは、XAMLの属性を使用してJavaScriptのイベントハンドラを割り当てることができる
・イベントハンドラの引数は共通で、常に、senderとargs
・引数senderを使用してイベントの発生元オブジェクトにアクセス可能
<Ellipse x:Name="elipse1“
MouseLeftButtonDown=“elipse1_onClick”
Height=“100"
Width=“100“
Stroke=“Black”
StrokeThickness=“5”
Canvas.Left="30"
Canvas.Top="30“
Fill="Green"/>
function elipse1_onClick(sender, args)
{alert(sender.Name + “がクリックされ
ました。”);
}
XAML JavaScript
JavaScriptからSilverlightアプリケーション内のオブジェクトに
アクセスするには、getElementByIdメソッドを使用する
getElementByIdメソッドの引数は、createSilverlight()関数で指定した
SilverlightオブジェクトのID(例えば、”SilverlightControl”)
function ClickMe()
{
var agCtrl=document.getElementById(“SilverlightControl”);
agCtrl.content.findName(“elipse1”).fill=“yellow”;
}
JavaScript
Visual Studio 2008 + Silverlight Tools + ASP.NET Futures + Expression Suite
全てダウンロード可能
サンプルが豊富にあるので、それらをダウンロードして試行
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=4
DLR 言語実行時の特徴
IronPython や Managed JScriptファイルは、アセンブリにコンパイルされず、実行時にクライアント上でコンパイルされる
従ってWebサーバに正しくMIME Typeを設定する必要がある
例) .py == text/python
複数DL間及び.NET対応言語との間でのオブジェクト相互利用も可能
Python ←→ Jscript、C# ←→ Python、・・・
.NET 言語実行時の特徴
C#や VB.NETで書かれたコードビハインドファイルは、各々のオブジェクトを記述したXAMLファイルとともに、コードの場所は、.jsファイルから、アセンブリ(DLL)にコンパイルされたものになり、クライアント上で実行される
従って高速な実行と、クライアントマシンのパワーを引き出すことが可能
これにより、XAMLファイル等の著作権に対するケアと、HTML上での実行によるSEO的な効果の、双方を付与できる
最新.NET Framewokrの他のテクノロジ(ASP.NET AJAX、WCF、LINQ、JSON、等々)との緊密な連携が可能
構成要素
Silverlight 2.0
WCF
LINQ
Webサービス
方法1. LINQ to SQLによるDBへの接続
2. JSON Webサービスを構築
3. WCF のエンドポイントの構成
4. Silverlight 2.0によるWCFクライアント実装
5. Webサービスへの接続
サービス側1. LINQ to SQL でテーブルの内容を取り出し
2. WCF を使用したサービス 設定ファイル (web.conig) の編集だけでインターフェースの変
更が可能
SOAP
JSON
<service name="myWCFService.Service1" behaviorConfiguration="myWCFService.Service1Behavior">
<endpoint address="" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="myWCFService.IService1"/>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
</services>
<endpointBehaviors>
<behavior name="jsonBehavior"><enableWebScript/>
</behavior>
</endpointBehaviors>
<service name="myWCFService.Service1" behaviorConfiguration="myWCFService.Service1Behavior">
<endpoint address="" binding="wsHttpBinding" contract="myWCFService.IService1"/>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
クライアント側Windows アプリケーションからの呼び出し(SOAP)
Silverlight 2.0 からの呼び出し(JSON)
Silverlight 2.0 からサポートされるマネージコードを使用
ServiceReference.Service1Client WebSrv = new ServiceReference.Service1Client();
ServiceReference.employeeInfo[] employees = WebSrv.getEmployeeInfo("London");
localhost.Service1 webSrv = new localhost.Service1();
localhost.employeeInfo[] employees = webSrv.getEmployeeInfo("London");
• Silverlightとは
リッチWebユーザーエクスペリエンスを実現するクロスブラウザ、クロスプラットフォームのWebブラウザプラグイン
• Silverlight1.0 アプリケーション開発の準備
SDKからSilverlight.jsをローカルにコピーし、htmlファイル、XAMLファイルを用意する
• Silverlight1.0 アプリケーションの開発
1. htmlファイル作成、2. XAMLファイルの作成、3. JavaScriptの記述
• Silverlight 2.0 アプリケーションの開発Visual Studio 2008を用い、最新.NET Framewokrの他のテクノロジ(ASP.NET AJAX, WCF, LINQ, JSON, 等々)との緊密な連携が可能。
• 開発方法について
開発ツール、デザインツール、サンプルアプリケーションなどを利用して、効率よく開発が可能
DinnerNow.NET テクノロジー全般(http://www.codeplex.com/DinnerNow/
Visual Studio
http://www.microsoft.com/japan
/msdn/vstudio/
ASP.NET AJAX
http://asp.net/ajax/
Silverlight開発 / デザインに必要な
ツール群
・1.0 / 1.1 プラグイン
http://www.microsoft.com/japan/silverlight/tools.aspx
・SDKおよび開発ツール
http://www.microsoft.com/japan/silverlight/tools.aspx
Silverlight 製品ページ
http://www.microsoft.com/japan/silverlight
MSDN Silverlightデベロッパーセンター
http://www.microsoft.com/japan/msdn/silverlight/
Expression 製品ページ
http://www.microsoft.com/japan/expression/
Silverlight Showcase
http://silverlgiht.net
1.0 / 1.1 コミュニティサンプルソース
http://silverlight.net/community/communitygallery.aspx
デザインツール
http://www.microsoft.com/japan/silverlight/design-content.aspx
© 2007 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.