SESSION-5

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

顧客が複数のレストランを対象に食事を注文可能な仮想マーケットプレース

様々な Microsoft テクノロジーを有機的に活用したシナリオ

配達業者

レストラン責任者

顧客

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アプリケーションの動作１．Webブラウザ上で、JavaScriptがSilverlightインスタンスを生成。

２．生成された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>// １．Silverlight.jsへの参照

<script type="text/javascript"

src="js/Silverlight.js"></script>

// ２．createSilverlight関数

<script type="text/javascript" >

function createSilverlight() {// 内容は後で記述

}

</script>

</head>// ３．createSilverlight()関数の読み込み

<body onload=“createSilverlight()”>

// ４．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.