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.

Presentation on theme: "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."— Presentation transcript:

1 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.

2 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.

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

4 アジェンダ 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.

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

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

7 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

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

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

10 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

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

12 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 によるバグフィックスは提供

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

14 ASP.NET AJAX

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

16 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

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

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

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

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

21 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 等、詳細はこちら

22 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 ツール

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

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

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

26 jQuery

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

28 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>

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

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

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

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

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

34 jQuery テンプレート誕生の経緯 Microsoft が jQuery 開発者フォーラムに提案
Microsoft の jQuery チームがプロトタイプを Github に投稿 コミュニティーのフィードバッグに基づき仕様を策定中 Github 内のプラグインのプロトタイプ ASP.NET Ajax Library jQuery Plugins jQuery Core 提案、 仕様、 プロトタイプ コアチーム

35 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> オブジェクトの値が出力 テンプレートの出現場所

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

37 まとめ - jQuery (( + + New +

38 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

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

40 リファレンス #1 ASP.NET デベロッパー センター The Official Microsoft ASP.NET Site jQuery: The Write Less, Do More, JavaScript Library CodePlex – ASP.NET Microsoft Web Platform

41 リファレンス #2 Microsoft Ajax Minifier jQuery Code Snippets for Visual Studio 2010 .NET Framework 4 技術資料一覧 monoe’s blog THE TRUTH IS OUT THERE hhttp://blogs.msdn.com/b/chack/

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

43 © 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.