Web アプリケーションにおけるユーザー体験（User Experience）の向上の手段として、ASP.NET AJAX が利用されるようになってきました。Visual Studio Team System を使用すると、さらに ASP.NET AJAX の使用によって改善されたビジネス価値を測定することが可能になります。特に、ロードテスト（負荷テスト）および Web テストを使用することにより、パフォーマンスやスケーラビリティに大きな影響を与えるデータの転送量と実際の応答時間の違いを測定することが可能になります。
ビデオURL： http://asp.net/learn/vsts-videos/video-133.aspx (英語)
ビデオの長さ： 10 分 27 秒
公開日： 2007 年 3 月 23 日
日本語訳公開日： 2007 年 9 月 14 日
<ビデオ翻訳>
このビデオでは、AJAX (Asynchronous JavaScript+XML) と呼ばれる開発技術を検討していきます。AJAX は、非常にダイナミックでインタラクティブな Web アプリケーションを構築する際に、とても一般的になりました。ASP.NET AJAX Library を導入することによって、ASP.NET の開発者はこの技術を既存および新規の Web アプリケーションに、簡単に統合することができます。
このビデオでは AJAX とお使いの Web アプリケーションとの統合に関するビジネス価値を探っていきます。もちろん、ユーザーや顧客が楽しんで使えるアプリケーションを構築できることは、ビジネス価値のひとつです。このビデオでは、むしろパフォーマンスとスケーラビリティの観点から見た AJAX のビジネス価値に的を絞っています。
最初に、従来の ASP.NET のWeb アプリケーションの考察から始めましょう。まずは、E コマースサイトである ShoppingCart を考えてみます。このケースでは、洋服を売る E コマース サイトです。洋服ごとに、スタイルをひとつ作り、ページを更新してそのスタイルを着たモデルがどのように見えるかを表示します。
ひとつスタイルを選ぶとページ全体が更新されるのがわかります。これは従来の ASP.NET アプリケーションであり、サーバにポストバックしているため、サーバは更新した画像とともに、ページ全体をレンダリングして応答しているのです。同じページを実行することで、このアプローチを対比してみましょう。今度は ASP.NET AJAX を取り入れてみます。
<1:26 から 2:10 ごろまで、Visual Studio でのコード変更>
ShoppingCart のページのデザインを考える際に明らかなのは、新しいスタイルが選択されたときに、このページで更新する必要があるのはその画像のモデルのみであり、そのページの残りの部分はそのままにしておけるということです。ASP.NET AJAX を使用して、この画像のみを更新の対象とします。このような的を絞ったリフレッシュまたは部分的なリフレッシュは UpdatePanel を使って処理します。UpdatePanel は、ASP.NET AJAX Library の非常に基本的なコントロールです。UpdatePanel で ModelImage を囲んで、新しいスタイルが選択されたときに、この ModelImage を更新することを伝えます。その処理には AsyncPostBackTrigger 要素を用います。
さあ、AJAX を使った新しい ShoppingCart を試してみましょう。この ShoppingCart では、スタイルを選択したときに、AJAX の効果が明らかにわかります。ページ全体が更新されるのではなく、画像のみが更新されることを確認してください。より快適で、よりスムースなユーザー エクスペリエンスになりました。このビデオの要点は、パフォーマンスとスケーラビリティの観点から見たビジネス価値の探索であることを思い出してください。
ASP.NET AJAX と従来の ASP.NET アプリケーションを調査するために、Internet Explorer チームが作成したFiddler ツール (http://fiddler2.com/fiddler2/ (英語) からダウンロードいただけます) を使用します。少しこのツールを詳しく見てみましょう。ただし、最初にデスクトップの Web プロジェクトをローカルの IIS に配置する必要があります。Internet Explorer チームによって開発されたこの Fiddler ツール は、デスクトップの Web サーバではなく、製品版の IIS を使わないと動作しません。したがって、Web サイトをコピーして配置します。
Fiddler ツール は Internet Explorer クライアントと IIS Web サーバ間で、非常にきめ細かい方法で、HTTP トラフィックをキャプチャすることができます。ここで再度、両方の Shopping Carts を使ってみましょう。まず、従来の ASP.NET を実装したものです。異なるスタイルをブラウジングするというシナリオを繰り返し、これらの HTTP トランザクションを Fiddler がそれぞれ記録したことを確認できます。同じことをもう一度繰り返します。今回は AJAX を使用した実装で、同じシナリオを再度繰り返します。Fiddler を見ると、AJAX トランザクションを同様にキャプチャしたことがわかります。このビデオの中で各要求の長さをご確認頂けるでしょうか。従来の ASP.NET 実装の本文の長さを見ると、約 14 KB であるのがわかります。
shoppingcart_ajax の要求、つまり AJAX を使用したバージョンの ShoppingCart を見ると、本文の長さが 2 KB 以下であることがわかります。これほど大きな違いが出るのは、従来の ASP.NET を実装した ShoppingCart では、ページ全体を返送しているからです。AJAX を実装した ShoppingCart では、モデルの画像のみを返送していていますが、モデルの画像は 2 KB 以下にしかなりません。
ここで、データ送信サイズの違いがパフォーマンスやスケーラビリティにどのような影響を及ぼすか探ってみます。ご存知のように、送信するデータは多いより少ない方がよいのですが、Visual Studio Team Edition for Software Testers を使ってそれを検証します。Fiddler ツール の優れた点のひとつは、記録したセッションを取り出して、Visual Studio Team Edition for Software Testers が理解できるテストとして出力できることです。
<Fiddler ツールでキャプチャした HTTPリクエストのデータを、Visual Studio Team System の Webtest の形式で保存>
Visual Studio に戻りましょう。Fiddler で作成した Web テストをプロジェクトに加えます。要求をそれぞれ確認することができます。AJAX のアプローチと AJAX を使わないアプローチを対比したいので、「トランザクション」を使って Web テストを分類します。まず最初に、AJAX を実装してないアプローチに属する要求をすべて囲むトランザクションを作成します。それから AJAX を実装しているアプローチに属する要求をすべて分類するトランザクションを作成します。これらのトランザクションは、タイミング データを分類するのに役立ちます。
ここで、作成してあるロード テストに Web テストを追加しましょう。このロード テストを使って、AJAX の実装によって確認できると考えられるパフォーマンスの利点を、検証できるかどうか確かめます。ロード テストを起動し、実行しながら、パフォーマンス カウンタをいくつかグラフに追加して、リアルタイムでロード テストを監視します。
<7:36 から 9:15 ごろまで、Visual Studio でロードテストを実施>
ロード テストが終了したら、テーブル ビューに切り替えてトランザクション データを見てみましょう。トランザクション間のタイミング データを見ると、AJAX を使用するアプローチと使用しないアプローチの差は歴然としています。トランザクション時間を見てみると、AJAX アプローチの方が 11 分の 1 になっています。95 パーセンタイル値を見ると、AJAX を使用したアプローチは、使用しないアプローチよりも大幅によくなっています。
この大きな違いは AJAX つまり ASP.NET AJAX アプローチを使って、送信データをごく少量に抑えているということになります。したがって、サーバの処理作業は大幅に少なくなり、クライアントに対して約 2 KB のデータを送信すればよいことになります。一方で、ASP.NET AJAX を使用しない従来のASP.NET アプローチでは、ページ全体を送るので、14 KB 以上に相当するデータを返送しなければなりません。返送のために非常に多くの作業がサーバーで必要になります。UpdatePanel を組み込むちょっとした作業によってページを部分的にリフレッシュでき、お使いのアプリケーションのパフォーマンスとスケーラビリティの特性を変えることができるのです。
そして、Visual Studio Team Edition for Software Testers のロード テストおよび Web テスト機能を使って、それらの特性の改善を確認できます。
ビデオをご覧いただきまして、ありがとうございました。