Transcript [コース: B5] .NET Framework 2.0 ASP.NET AJAX

Microsoft ON ― 出張ワークショップ ―
[コース: B5]
.NET Framework 2.0
ASP.NET AJAX
（講師向け）
本日の内容
より進化した Web エクスペリエンスの追求
Web 環境進化の歴史
次世代の Web 環境に求められるもの
AJAX とは
ロードマップ
ASP.NET AJAX テクノロジー
ASP.NET AJAX とは
ASP.NET AJAX の構成
サーバ中心の AJAX アプリケーション
クライアント中心の AJXA アプリケーション構築
より進化した Web エクスペリエンスの追求
Web 環境進化の歴史
2000s
XMLHTTP
クライアントサイドロジックから
XML を利用 （IE 6 ～）
XML
HTTP によるデータ交換の実現
ASP.NET
フレームワークによる、より進化した
ビジネスロジック集中
Dynamic HTML
1990s
Web UI の動的更新
ASP
JavaScript
スクリプティング言語による簡易実装
（ビジネスロジックはCOMとシームレ
スに連携）
クライアントサイドのロジック実現
CGI プログラム
サーバサイトでの動的UIの実現
次世代の Web 環境に求められるもの
より快適で、より自然で、ユーザ生産性の高い
操作性
⇔ 頻繁なポストバック、ロード待ち、etc
クライアントテクノロジー
(AJAX)の有効活用
ビジネスロジックへの集中
HTML、プロトコル、などを意識しない実装
サーバ/クライアントを意識しないシームレスな実装
ブラウザの相違を意識しない実装
etc
開発パターン、ツール類（デバッグ環境等）の
充実
現行の ASP.NET / Visual
Studio へのテクノロジー統合
AJAX とは
AJAX = Asynchronous JavaScript + XML
JavaScript による非同期通信を利用した、
ダイナミックな html の更新
プラグインは不要
リッチな Web エクスペリエンスの実現
ASP.NET とは …
AJAX の例
Outlook Web Access
Windows Live Search (Virtual Earth)
ドラッグ＆ドロップで
メッセージを移動
ホイール操作で
拡大率を変更
ロードマップ
現在： Visual Studio / ASP.NET 2.0 の Extension
ASP.NET AJAX 1.0 Extension (リリース)
Futures January CTP
ASP.NET AJAX Control Toolkit
今後:
Future 機能を含めて ASP.NET AJAX のコア機能と
して組み込み （予定）
ASP.NET AJAX 1.0 Extension
(リリースされているコア機能)
Futures CTP
(将来コアとして組み込みを予定している追加機能)
Control Toolkit
(サンプルのシェアドソース)
※ 将来のリリース内容については、今後変更される可能性があります
ASP.NET AJAX テクノロジー
ASP.NET AJAX とは
クライアントサイドからサーバサイドまでを網羅
既存の ASP.NET に開発環境として統合
サーバとクライアントの振る舞いをカプセル化
ASP.NET のアプリケーションサービス（認証、承認、
セッション管理、キャッシュ）との統合
高い開発生産性と拡張性の提供
フレームワークによる、ビジネスロジックへの集中
ブラウザ間の相違など、ビジネスロジック以外の煩
わしさを隠蔽
独自のコンポーネント開発
ASP.NET AJAX の構成
ASP.NET AJAX サーバ機能
(System.Web.Extensions.dll)
ASP.NET AJAX
クライアントライブラリ
MicrosoftAjax.js
ScriptManager
UpdatePanel
UpdateProgress
Timer
MicrosoftAjaxWebForms.js
MicrosoftAjaxTimer.js
Validator
etc …
ASP.NET 2.0
IE
IIS
Firefox
Safari
サーバ中心の AJAX アプリケーションモデ
ル ページ内の非同期な部分更新が可能
プログラミングモデルは、ASP.NET と統合
動作（ビヘイビア） = ドラッグ&ドロップ、ツールチップ、など
サーバーアプリケーション
ブラウザ
初期レンダリング
( UI + 動作 )
ﾌﾟﾚｾﾞﾝﾃｰｼｮﾝ層
(HTML/CSS)
データ
UI + 動作の更新
スクリプトフレームワーク
ｺﾝﾎﾟｰﾈﾝﾄ /UI
ﾌﾚｰﾑﾜｰｸ,
ｺﾝﾄﾛｰﾙ
クライアント
アプリケーション
サービス
ページ
UI 動作
(マネージ
コード)
ASP.NET
ﾍﾟｰｼﾞ
ﾌﾚｰﾑﾜｰｸ,
ｻｰﾊﾞｰ ｺﾝﾄﾛｰﾙ
アプリケーション
サービス
サーバ中心の AJAX アプリケーションモデル
コントロールエクステンダとパーソナライズ
AJAX テクノロジーによる、ASP.NET 2.0 サー
バコントロールの拡張（エクステンダ）
パネルへのフローティング機能の実装
etc
パーソナライズ機能との連携
フローティングパネルの位置情報
etc
プログラミングモデルは、ASP.NET へ完全統
合
クライアント中心のAJAXアプリケーションモデ
ル .NET Framework に似たライブラリを提供
JavaScript 向けのデータセット、ASP.NET データサービスと
の統合、など
サーバーアプリケーション
ブラウザ
ﾌﾟﾚｾﾞﾝﾃｰｼｮﾝ層
(HTML/CSS)
初期 レンダリング
(UI + 動作)
サービス
プロキシ
UI 動作
(Script)
UI 動作
(マネージ
コード)
データ
AJAX スクリプトフレームワーク
ｺﾝﾎﾟｰﾈﾝﾄ /UI
ﾌﾚｰﾑﾜｰｸ,
ｺﾝﾄﾛｰﾙ
データ
クライアント
アプリケーション
サービス
ページ
ASP.NET
ﾍﾟｰｼﾞ
ﾌﾚｰﾑﾜｰｸ,
ｻｰﾊﾞｰｺﾝﾄﾛｰﾙ
アプリケーション
サービス
クライアント中心のAJAXアプリケーションモデル
Web サービスの非同期呼び出し
Web サービス ブリッジによるアクセスの抽象化
ASP.NET Web サービスへのアクセスを提供
クライアント プロキシの自動生成
<script src=“WebService.asmx/js” />
Web.Net.ServiceMethodRequest.createProxyMethod
<asp:ScriptManager>
自動的な.NET シリアル化と JavaScript 間の相互変換
JSON (JavaScript Object Notation) による通信
public class Location {
public Point Coordinates;
public String Name;
}
{ Coordinates : { X: 2.17, Y: 48.51 },
Name : "Eiffel Tower" }
技術情報リソース
ASP.NET AJAX コミュニティサイト:
http://ajax.asp.net/
ASP.NET AJAX の最新ビルド（ダウンロード）、ドキュメント（含むリファレンス）、ビデ
オキャスト、チュートリアルなど全般
ASP.NET 関連フォーラム (US):
http://forums.asp.net/
.NET Framework デベロッパー センター:
http://www.microsoft.com/japan/msdn/netframework/
ASP.NET デベロッパー センター:
http://www.microsoft.com/japan/msdn/netframework/
© 2006 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.