ASP.NET AJAX

Download Report

Transcript ASP.NET AJAX 

セッション ID：T6-306
jQuery と ASP.NET AJAX
Control Toolkit による
AJAX アプリケーション開発
マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
物江 修
セッションの目的とゴール
Session Objectives and Takeaways
セッションの目的
ASP.NET 4 に用意されている AJAX 開発のため
の機能を整理
ASP.NET 4 での AJAX 開発について解説
セッションのゴール
ASP.NET 4 が提供する複数の AJAX 開発機能
について、目的に応じて適宜使い分けができる
ようになる
jQuery にプラグインを追加し、機能を
拡張できるようになる
今後 jQuery に追加される新機能の概要が
理解できる
3
アジェンダ
ASP.NET の AJAX 機能
歴史と現在の状況
ASP.NET AJAX
ASP.NET ScriptManager と CDN
ASP.NET AJAX Toolkit
Ajax Minifier ツール
jQuery
jQuery の拡張
今後追加が予定されている機能
まとめ
4
ASP.NET 4
Web フォーム
ASP.NET MVC
Dynamic Data
コア サービス
5
ASP.NET の
AJAX 機能
～ 構成と歴史、そして現在 ～
ASP.NET と AJAX の歩み Version UP
Visual Studio
2008
Visual Studio
2005
.NET Framework
2.0
3.0
.NET Framework
3.5
Visual Studio
2010
.NET Framework 4
ASP.NET 2.0
ASP.NET 3.5
ASP.NET 4
ASP.NET AJAX 1.0
ASP.NET
AJAX 3.5
ASP.NET
AJAX
7
ASP.NET の AJAX フレームワーク
ASP.NET 4
2 つのフレームワーク
8
現在の ASP.NET AJAX の構成
ASP.NET 4
ASP.NET AJAX Extensions
Microsoft AJAX Library
ASP.NET AJAX Control Toolkit
9
ASP.NET AJAX Library 4.0
～ Web クライアント開発の総合ライブラリー ～
Microsoft Ajax
Library
+
Ajax Control Toolkit
+
jQuery
10
2009 Q1
ADO.NET Data Services 連携
クライアント テンプレート
ライブ バインディング
マークアップ拡張
コマンドバブリング
etc…
2009 Q2
既存のスクリプト ファイルの分割
MicrosoftAjax.js を含めない
Script Manager の使用
jQuery のサポート
etc…
2009 Q4
クロスドメイン リクエスト
ユーザー クライアント コントロール
ASP.NET AJAX テンプレート
クライアント データのサーバー 統合
etc…
ASP.NET AJAX のロード マップの変更
U U
U
11
ASP.NET AJAX Library 4.0 のゆくえ
What’s going to
happen to me?
U U
U
No future.
メンテナンス モードでのリリース
以後のバージョン アップは行われない
CDN でのみ提供
CodePlex によるバグフィックスは提供
12
これからの ASP.NET における
Ajax 開発
Let's use
jQuery.
13
ASP.NET
AJAX
ASP.NET AJAX とは?
Web フォーム アプリケーション向けの AJAX
フレームワーク
Web フォーム コントロールに AJAX 機能を付与
ScriptManager と UpdatePanel
JavaScript の記述が不要
15
ASP.NET ScriptManager の使用
ScriptManager – ScriptManager1
ScriptManagerProxy – ScriptManagerProxy1
ASP.NET ScriptManager の機能:
debug/release スクリプトの切り替え
Globalization/Localization 3.5
分割スクリプト 3.5
複合スクリプト 3.5 SP1
Microsoft Ajax CDN の使用 4
16
3.5
複合スクリプト機能の使用
ScriptManager スクリプトは
結合と圧縮が可能
スクリプトのキャッシュと
Expires (Far Future)
ヘッダー
応答を1 つにまとめたい
スクリプト ファイルを指定
17
スクリプト ファイルの圧縮
gzip 圧縮
キャッシュ
の有効期限
18
ScriptManager からの CDN の使用
EnableCdn プロパティの値を true に
設定するだけ
CDN の場所を知らなくても良い
カスタム コントロール CDN の場所を指定す
ることも可能
ScriptManager – ScriptManager1
ScriptManagerProxy – ScriptManagerProxy1
19
Microsoft Ajax CDN #1
Microsoft Ajax Content Delivery Network
ajax.microsoft.com ドメインで主要 JS ファイル
をホスト
Microsoft AJAX や jQuery の利用を容易に
最小限のネットワーク ホップ数で効率的にロード
無償サービス
Web サーバー
エッジ キャッシュ
サーバー
20
ajax.microsoft.com
Microsoft Ajax CDN #2
ホストされる JavaScript ライブラリ
jQuery 1.4.2
jQuery 1.4.1
jQuery 1.4
http://www.asp.net/ajaxLib
jQuery 1.3.2
rary/CDN.ashx
jQuery Validate 1.7
jQuery Validate 1.6
jQuery Validate 1.5.5
AJAX Control Toolkit 40412
ASP.NET AJAX 4
ASP.NET AJAX 3.5
ASP.NET MVC 1.0
21
ASP.NET AJAX Control Toolkit (ACT)
～ ASP.NET AJAX の機能を利用するリッチ コントロール群 ～
ASP.NET 3.5
ASP.NET 4
オープンソース
CDN
Ajax Minifier
ツール
22
Ajax Minifier ツール #1
*.js
*.css
ajaxmin test.js -o test.min.js
ajaxmin test.css -o test.min.css
23
Ajax Minifier ツール #2
圧縮ツール
圧縮前ファイル
圧縮後ファイル
24
まとめ - ASP.NET AJAX
for
ASP.NET AJAX は、
Web フォーム
アプリケーション 向け
25
jQuery
jQuery とは
高速・軽量な JavaScript ライブラリ
DOM 操作 / CSS 操作 / Ajax 処理を容易に
オープン ソース
jQuery 公式サイト http://jquery.com/
最新バージョンは 1.4.2
ASP.NET 4 と jQuery
$(function() {
$('#button1').click(function() {
$('#div1').fadeIn('slow');
});
});
Web フォーム や MVC プロジェクト
で標準採用
jQuery 1.4.1 が標準搭載
インテリセンスとコード スニペット
にも対応
27
jQuery と Non jQuery コードの比較
例) すべての <P> タグ内の文字列の書き換え
<!– HTML -->
<body>
<form>
<h1 class="about">jQueryサンプル</h1>
<p id="about">jQueryとは？</p>
<p>jQueryとは？</p>
<p class="about">jQueryとは？</p>
</form>
</body>
28
jQuery と Non jQuery コードの比較
例) すべての <P> タグ内の文字列の書き換え
<p> タグ
//jQuery を使用しないコード
for(p in document.getElementsByTagName("p"))
{
p.innerHTML = "軽量/高速なライブラリです";
}
29
jQuery と Non jQuery コードの比較
例) すべての <P> タグ内の文字列の書き換え
//jQuery を使用したコード
$("p").text("軽量/高速なライブラリです");
<p> タグ
//<備考> class が “about” のものだけを書き換える場合
$(".about"). text("軽量/高速なライブラリです");
クラス名
//<備考> id が “about” のものだけを書き換える場合
$("#about"). text("軽量/高速なライブラリです");
id
30
jQuery の基本的な構文
セレクター : $(“～“)
セレクターでオブジェクトを選択し、メソッドで処理
を行う
$(“～”).メソッド(引数);
返り値は常にオブジェクトなので メソッド・チェーン
が可能
$(“～”).メソッド(引数).メソッド(引数);
31
jQuery の拡張
ASP.NET プロジェクトに含まれるのは
コア機能のみ
様々な機能をダウンロードして追加可能
jQuery プラグイン
関数形式とメソッド形式
コミュニティが作成した豊富なプラグインが
使用可能
http://plugins.jquery.com/
jQuery UI
UI に特化したプラグイン
http://jqueryui.com/
32
追加が予定されている機能
jQuery テンプレート
jQuery による
HTML テンプレート ソリューション
jQuery データリンク
UI の情報とオブジェクトのプロパティを同期
双方向リンク
コンバーター機能
グローバリゼーション
+
33
jQuery テンプレート誕生の経緯
Microsoft が jQuery 開発者フォーラムに提案
Microsoft の jQuery チームがプロトタイプを
Github に投稿
コミュニティーのフィードバッグに基づき仕様
を策定中
Github 内のプラグインのプロトタイプ
ASP.NET
Ajax Library
提案、
仕様、
プロトタイプ
34
jQuery
Plugins
jQuery
Core
コアチーム
jQuery テンプレートの定義
<!-- 住所テンプレート -- >
<script id="addressTemplate" type="text/html">
<div>
Fast Name:${fastName} <br />
Last Name:${lastName} <br />
Zip Code: ${zipCode} <br />
</div>
</script>
オブジェクトの値が出力
<!– テンプレート コンテナー -->
<div id="addressContainer"></div>
テンプレートの出現場所
35
jQuery テンプレート 情報の表示
①
②
<script src=“Scripts/jquery-1.4.2.js” type=“text/javascript”>
</script>
<script src=“Scripts/jquery.tmpl.js” type=“text/javascript”>
</script>
③
<script type=“text/javascript”>
//データの定義
var addresses = [
{fastName:"太郎",lastName:"山田",zipCade:"141-0021"},
{fastName:”次郎”,lastName:“鈴木",zipCade:"141-0025"}
];
テンプレートの id
④
//テンプレートを使用したデータの表示
$(“#addressTemplate”).tmpl(addresses).appendto(“#
addressContainer”);
</script>
テンプレート コンテナーの id
36
まとめ - jQuery
+
+
+
37
まとめ
ASP.NET 4
ささ
ASP.NET AJAX
Controls Toolkit
jQuery
プラグイン
Microsoft Ajax CDN
38
jQuery
UI
関連セッション
T6-305：ASP.NET 4 で実践する Web フォーム開発と配置
T6-307：ASP.NET MVC 2 Web 開発
～ 全貌と応用、そして vNext に向けて ～
T6-309：詳説! Visual Basic 10、C# 4.0 の新機能
～ Visual Studio 2010 で進化したコーディング環境 ～
BOF-A : マイクロソフトの Web テクノロジ最前線と現実解を語ろ
う
H316 : ASP.NET MVC 2 と jQuery による Web 開発
～ "Edtter" を作ろう ～
39
リファレンス #1
ASP.NET デベロッパー センター
http://msdn.microsoft.com/ja-jp/asp.net/default.aspx
The Official Microsoft ASP.NET Site
http://www.asp.net
jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/
CodePlex – ASP.NET
http://aspnet.codeplex.com/
Microsoft Web Platform
http://www.microsoft.com/web
40
リファレンス #2
Microsoft Ajax Minifier
http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx
jQuery Code Snippets for Visual Studio 2010
http://jquerysnippets.codeplex.com/
.NET Framework 4 技術資料一覧
http://msdn.microsoft.com/ja-jp/netframework/ee959223.aspx
monoe’s blog
http://blogs.msdn.com/b/osamum/
THE TRUTH IS OUT THERE
hhttp://blogs.msdn.com/b/chack/
41
ご清聴ありがとうございました。
T6-306
アンケートにご協力ください。
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows 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.