3/2/2017 9:01 AM © 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.

jQuery と ASP.NET AJAX Control Toolkit による AJAX アプリケーション開発 3/2/2017 9:01 AM セッション ID：T6-306 jQuery と ASP.NET AJAX Control Toolkit による AJAX アプリケーション開発 マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 © 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.

セッションの目的とゴール Session Objectives and Takeaways ASP.NET 4 に用意されている AJAX 開発のための機能を整理 ASP.NET 4 での AJAX 開発について解説 セッションのゴール ASP.NET 4 が提供する複数の AJAX 開発機能 について、目的に応じて適宜使い分けができるようになる jQuery にプラグインを追加し、機能を 拡張できるようになる 今後 jQuery に追加される新機能の概要が 理解できる

アジェンダ ASP.NET の AJAX 機能 ASP.NET AJAX jQuery まとめ 歴史と現在の状況 3/2/2017 9:01 AM アジェンダ ASP.NET の AJAX 機能 歴史と現在の状況 ASP.NET AJAX ASP.NET ScriptManager と CDN ASP.NET AJAX Toolkit Ajax Minifier ツール jQuery jQuery の拡張 今後追加が予定されている機能 まとめ © 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.

ASP.NET 4 ASP.NET jQuery Web フォーム ASP.NET MVC ASP.NET AJAX コア サービス Web フォーム ASP.NET AJAX Dynamic Data

ASP.NET の AJAX 機能 ～ 構成と歴史、そして現在 ～

ASP.NET と AJAX の歩み Visual Studio 2005 Visual Studio 2008 Version UP ASP.NET 2.0 Visual Studio 2005 .NET Framework 2.0 Visual Studio 2008　 ASP.NET AJAX 3.5 .NET Framework 3.5 ASP.NET 3.5 ASP.NET 4 .NET Framework 4 ASP.NET AJAX Visual Studio 2010 3.0 ASP.NET AJAX 1.0

ASP.NET の AJAX フレームワーク ASP.NET 4 ASP.NET AJAX 2 つのフレームワーク

ASP.NET AJAX Extensions Microsoft AJAX Library ASP.NET AJAX Control Toolkit ASP.NET AJAX Library 4.0

ASP.NET AJAX Library 4.0 ～ Web クライアント開発の総合ライブラリー ～ 2009 Q1 ADO.NET Data Services 連携 クライアント テンプレート ライブ バインディング マークアップ拡張 コマンドバブリング etc… ASP.NET AJAX Library 4.0 Microsoft Ajax Library 2009 Q2 既存のスクリプト ファイルの分割 MicrosoftAjax.js を含めない Script Manager の使用 jQuery のサポート etc… + Ajax Control Toolkit + 2009 Q4 クロスドメイン リクエスト ユーザー クライアント コントロール ASP.NET AJAX テンプレート クライアント データのサーバー 統合 etc… jQuery

ASP.NET AJAX のロード マップの変更 2010 年 MIX10 キーノート なんで すって っ！ え えぇっ！ ASP.NET AJAX Library 4.0 U U U “今後は、Ajax アプリケーションを 開発する第一の方法として、jQuery を使うことを推奨します。”

ASP.NET AJAX Library 4.0 のゆくえ What’s going to happen to me? ASP.NET AJAX Library 4.0 U U U No future. メンテナンス モードでのリリース 以後のバージョン アップは行われない CDN でのみ提供 CodePlex によるバグフィックスは提供

これからの ASP.NET における Ajax 開発 AJAX Library 4.0 B y e : Let's use jQuery.

ASP.NET AJAX

ASP.NET AJAX とは? 配置するだけで AJAX 対応 Web フォーム アプリケーション向けの AJAX フレームワーク ScriptManager と UpdatePanel JavaScript の記述が不要 配置するだけで AJAX 対応

ASP.NET ScriptManager の使用 ScriptManager – ScriptManager1 ScriptManagerProxy – ScriptManagerProxy1 ASP.NET ScriptManager の機能: debug/release スクリプトの切り替え Globalization/Localization 分割スクリプト 複合スクリプト Microsoft Ajax CDN の使用 3.5 3.5 3.5 3.5 SP1 4

複合スクリプト機能の使用 ScriptManager スクリプトは 結合と圧縮が可能 スクリプトのキャッシュと 　結合と圧縮が可能 スクリプトのキャッシュと Expires (Far Future)　ヘッダー 応答を1 つにまとめたい スクリプト ファイルを指定

スクリプト ファイルの圧縮 gzip 圧縮 キャッシュの有効期限

ScriptManager からの CDN の使用 EnableCdn プロパティの値を true に 　設定するだけ CDN の場所を知らなくても良い カスタム コントロール CDN の場所を指定することも可能 ScriptManager – ScriptManager1 ScriptManagerProxy – ScriptManagerProxy1

Microsoft Ajax CDN #1 Microsoft Ajax Content Delivery Network ajax.microsoft.com ドメインで主要 JS ファイル をホスト Microsoft AJAX や jQuery の利用を容易に 最小限のネットワーク ホップ数で効率的にロード 無償サービス Web サーバー エッジ キャッシュ サーバー ajax.microsoft.com

Microsoft Ajax CDN #2 ホストされる JavaScript ライブラリ jQuery 1.4.2 jQuery 1.4.1 jQuery 1.4 jQuery 1.3.2 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 ※ URL 等、詳細はこちら http://www.asp.net/ajaxLibrary/CDN.ashx

ASP. NET AJAX Control Toolkit (ACT) ～ ASP ASP.NET AJAX Control Toolkit (ACT) ～ ASP.NET AJAX の機能を利用するリッチ コントロール群 ～ ASP.NET 3.5 ASP.NET 4 40 個以上 オープンソース CDN Ajax Minifier ツール

Ajax Minifier ツール #1 ) JavaScript や CSS ファイルを圧縮 ) *.js *.css 改行、コメントの削除 パフォーマンスの向上 コマンドライン ツール ) ) *.js *.css スクリプト ファイルを縮小: ajaxmin test.js -o test.min.js CSS ファイルを縮小: ajaxmin test.css -o test.min.css

Ajax Minifier ツール #2 圧縮ツール 圧縮前ファイル 圧縮後ファイル

まとめ - ASP.NET AJAX for ASP.NET AJAX は、 Web フォーム アプリケーション 向け

jQuery

jQuery とは 高速・軽量な JavaScript ライブラリ jQuery 公式サイト http://jquery.com/ DOM 操作 / CSS 操作 / Ajax 処理を容易に オープン ソース jQuery 公式サイト http://jquery.com/ 最新バージョンは 1.4.2 ASP.NET 4 と jQuery Web フォーム や MVC プロジェクト で標準採用 jQuery 1.4.1 が標準搭載 インテリセンスとコード スニペット にも対応 $(function() { $('#button1').click(function() { $('#div1').fadeIn('slow'); });

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>

jQuery と Non jQuery コードの比較 例) すべての <P> タグ内の文字列の書き換え <p> タグ //jQuery を使用しないコード for(p in document.getElementsByTagName("p")) { p.innerHTML = "軽量/高速なライブラリです"; }

jQuery と Non jQuery コードの比較 例) すべての <P> タグ内の文字列の書き換え //jQuery を使用したコード $("p").text("軽量/高速なライブラリです"); <p> タグ $(".about"). text("軽量/高速なライブラリです"); //<備考> class が “about” のものだけを書き換える場合 クラス名 $("#about"). text("軽量/高速なライブラリです"); //<備考> id が “about” のものだけを書き換える場合 id

jQuery の基本的な構文 セレクター : $(“～“) $(“～”).メソッド(引数); セレクターでオブジェクトを選択し、メソッドで処理を行う $(“～”).メソッド(引数); 返り値は常にオブジェクトなので メソッド・チェーンが可能 $(“～”).メソッド(引数).メソッド(引数);

jQuery の拡張 ASP.NET プロジェクトに含まれるのは コア機能のみ 様々な機能をダウンロードして追加可能 　コア機能のみ 様々な機能をダウンロードして追加可能 jQuery プラグイン 関数形式とメソッド形式 コミュニティが作成した豊富なプラグインが 　使用可能 http://plugins.jquery.com/ jQuery UI UI に特化したプラグイン http://jqueryui.com/

New + 追加が予定されている機能 jQuery テンプレート jQuery データリンク グローバリゼーション jQuery による 　HTML テンプレート ソリューション jQuery データリンク UI の情報とオブジェクトのプロパティを同期 双方向リンク コンバーター機能 グローバリゼーション New +

jQuery テンプレート誕生の経緯 Microsoft が jQuery 開発者フォーラムに提案 Microsoft の jQuery チームがプロトタイプを Github に投稿 コミュニティーのフィードバッグに基づき仕様を策定中 Github 内のプラグインのプロトタイプ ASP.NET Ajax Library 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> オブジェクトの値が出力 テンプレートの出現場所

jQuery テンプレート 情報の表示 ① ② ③ ④ テンプレートの id テンプレート コンテナーの id <script src=“Scripts/jquery-1.4.2.js” type=“text/javascript”> </script> <script src=“Scripts/jquery.tmpl.js” type=“text/javascript”> <script type=“text/javascript”> 　//データの定義 var addresses = [ {fastName:"太郎",lastName:"山田",zipCade:"141-0021"}, {fastName:”次郎”,lastName:“鈴木",zipCade:"141-0025"} ]; //テンプレートを使用したデータの表示 $(“#addressTemplate”).tmpl(addresses).appendto(“# addressContainer”); ② ③ テンプレートの id ④ テンプレート コンテナーの id

まとめ - jQuery (( + + New +

ASP.NET AJAX Controls Toolkit まとめ ASP.NET 4 ASP.NET AJAX ささ ASP.NET AJAX Controls Toolkit jQuery プラグイン jQuery UI ASP.NET AJAX Library 4.0 Microsoft Ajax CDN

関連セッション 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" を作ろう ～

リファレンス #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

リファレンス #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/

ご清聴ありがとうございました。 T6-306 アンケートにご協力ください。

© 2010 Microsoft Corporation. All rights reserved © 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.