Toolbox: Rich AJAX Data Controls, Analyzing HTTP Traffic, And More

[アーティクル]
12/08/2016

ツールボックス

機能豊富な AJAX Data Controls、HTTP トラフィックの分析、その他

Scott Mitchell

すべての価格は発表時のもので、変動する可能性があります。このコラムに記載されている見解は、執筆者の個人的な見解であり、必ずしもマイクロソフトの見解を反映するものではありません。

クライアント中心の Ajax 開発を対象とした機能豊富なデータ Web コントロール
注目のブログ
HTTP トラフィックの検査と分析
推薦図書

クライアント中心の Ajax 開発を対象とした機能豊富なデータ Web コントロール

ASP.NET AJAX フレームワークで AJAX 対応の Web アプリケーションを構築するモデルには、サーバー中心とクライアント中心の 2 つがあります。サーバー中心モデルでは、ページ開発者は依然として標準の ASP.NET Web コントロールを使用していますが、Web コントロールを UpdatePanel コントロール内に配置します。UpdatePanel 上のコントロールでポストバックが発生すると、UpdatePanel は通常のポストバックを JavaScript を使用した部分ページポストバックに置換し、サーバーの応答を待ってコントロールを UpdatePanel 内でシームレスに更新します。クライアント中心モデルでは、ページ開発者は JavaScript を作成して部分ページポストバックを起動し、応答が返ってきたらページを更新します。クライアント中心モデルのプログラミングでは、ページ開発者はクライアント側 ASP.NET AJAX ライブラリを使用して JavaScript および HTML を作成し、部分ページポストバックを起動し、応答を待ってページを更新する必要があります。

Ajax 開発に不慣れな ASP.NET 開発者は、一般にサーバー中心モデルの方を好みます。実装が簡単であり、ASP.NET 開発者にはなじみのある既存の Web コントロールを使用するからです。一方、クライアント中心モデルでは、ページの動作や、ブラウザと Web サーバーとの情報のやり取りをより詳細に制御できるので、固有の応答性の高いユーザーエクスペリエンスを実現できます。2 つのモデルのどちらを選択するかは難しい問題ですが、簡単に実装することを目的とする場合は ASP.NET の既存の Web コントロールを使用し、パフォーマンス向上を目的とする場合は使い慣れたコントロールを使用せず、JavaScript および HTML の作成を主体にします。

ところが、Ajax Data Controls プロジェクト Version 1.0 の登場によって 3 つ目の選択肢が出現しました。Ajax Data Controls は、Ajax 対応 Web アプリケーションでデータを表示するための ASP.NET コントロールのコレクションです。Ajax Data Controls は、サーバー中心型開発の簡潔性とクライアント中心型開発の高パフォーマンスを兼ね備えています。

Ajax データコントロールを Web ページに追加し、外観や動作を構成する方法は、他の Web コントロールとほとんど同じです。Visual Studio で、ツールボックスからページにコントロールをドラッグし、プロパティウィンドウで設定を構成します。ASP.NET に組み込まれているデータコントロールと異なる点は、Ajax Data Controls では、クライアント側スクリプトを使用してデータをサーバーから取得することで、より応答性の高いユーザーエクスペリエンスを提供すること、また、UpdatePanel 内で使用すると、標準のデータコントロールより使用する帯域幅が少なくなることです。

たとえば、Ajax データコントロールの GridView を使用して Northwind データベースからカテゴリを表示するには、GridView を ASP.NET ページに追加して起動します。次に、データベースにクエリを実行して表示データを返すスクリプトサービスを作成します。最後に、GridView をデータにバインドする簡単な JavaScript をページに作成します。

ページの宣言型のマークアップを図 1 に示し、ブラウザで表示した場合の結果ページを図 2 に示します。ページをブラウザで表示すると、クライアント側の pageLoad 関数が実行され、スクリプトサービスからデータが取得されます。サーバーからデータが返されたら、そのデータを、サーバー側の C# コードで ASP.NET の GridView コントロールにデータをバインドする場合と同様の JavaScript コードを使用して GridView にバインドします。

図 1 GridView を ASP.NET ページに追加する

<AjaxData:GridView ID="gvCategories" runat="server" CellPadding="4" CellSpacing="0">
    <HeaderStyle CssClass="HeaderStyle" />
    <AlternatingRowStyle CssClass="AlternatingRowStyle" />
</AjaxData:GridView>

<script type="text/javascript">
    function pageLoad(sender, e) {
        MyScriptService.GetAllCategory(onLoadSuccess);
    }

    function onLoadSuccess(result) {
        var myGrid = $find('gvCategories');

        myGrid.set_dataSource(result);
        myGrid.dataBind();
    }
</script>

図 2 データの表示

Ajax Data Controls には GridView、DataList、Repeater、および Pager が含まれています。ごく少量の JavaScript を作成するだけで、HTML を書く必要がなく、なじみのある概念を使用してデータの表示、並べ替え、ページ移動、編集、削除を行い、同時にクライアント中心型開発の利点を活用できます。条件付き書式など各種の一般的なデータ表示シナリオも、GridView (イメージ、チェックボックス、ハイパーリンクなど) のさまざまな列型、入れ子にされたデータコントロール、Ajax Control Toolkit との統合機能を使用すれば簡単に実装できます。ドラッグアンドドロップや列の並べ替えなど、標準の ASP.NET データコントロールにはない豊富な機能も用意されています。

価格: 無料 (オープンソース)

codeplex.com/AjaxDataControls

注目のブログ

優れたブログ作成者は秘話を披露して自分が使用しているテクノロジを紹介し、そのテクノロジの長所、短所、予期される障害を教えてくれます。「Rick Strahl's Web Log (Rick Strahl の Web ログ)」は優れたブログの好例です。

Rick は、各種の Web ベースアプリケーションおよびユーティリティを販売する West Wind Technologies の創立者兼主要開発者として、ソフトウェアを作成し、問題に直面し、解決法を見つける現場で日々を過ごしています。彼のブログは仮想の井戸端会議をする場所としての役割を果たし、優れたヒントや秘訣、使用している新しいテクノロジ、直面した問題、考案した回避方法を共有する場を提供しています。

West Wind Technologies は Web 関連製品の開発を主としているため、Rick の投稿内容の大半は Web テクノロジ中心です。jQuery や JavaScript に関する投稿や、ASP.NET と AJAX、Silverlight、Web サービス、Visual Studio、IIS に関する考察など、内容が充実しています。Rick は、2 ～ 3 日おきに定期的に追加する投稿以外に、ASP.NET のコンパイルオプションおよび配置オプション、負荷分散とストレステスト Web アプリケーション、Subversion (無料ソースコード管理システム) のセットアップと実行などの幅広いトピックを扱った詳細なホワイトペーパーを発表しています。

Rick のブログは現場での体験から得た情報や知識の宝庫です。彼の豊富な体験が、あらゆるスキルレベルの Web 開発者にとって貴重なリソースとして役立っています。

west-wind.com/weblog

もう 1 つのお勧めブログは「My Secret Life as a Spaghetti Coder (スパゲッティコーダーの極秘生活)」です。このブログでは、Sam Larbi が論考を披露しています。Sam は C#、C++、Ruby、ASP.NET、ColdFusion などの言語やテクノロジを使用した Web アプリケーションおよびデスクトップアプリケーションの開発に携わっています。このブログも扱うトピックは多彩です。

ソフトウェアの開発方法、Web 開発に関する論考、テスト駆動型開発に関する実体験など、投稿のテーマはさまざまです。ゲームプログラミング、プログラマ向けのお勧めギフト、子供にプログラミングへの関心を持たせる方法など、楽しいトピックも満載です。

テクノロジ以外の面でも、チームワーク、会議、良好な顧客関係の維持、個人での開発などについて、ソフトウェア開発者としての見解を存分に語っています。上司や顧客に対して大きな失敗を犯した場合の対策についての優れた投稿もあります。その中では、失敗を受け入れ、責任をとったうえで、失敗を繰り返さないために今後どのような態度で臨み、現状を改めるために何をするかを弁明することが重要だとアドバイスしています。注文の多い顧客への対処方法に関する優れたヒントや、雇用者から貴重な従業員として評価されるために必要な知識や対人スキルについても語っています。

codeodor.com

HTTP トラフィックの検査と分析

Web サイトにアクセスすると、ブラウザは各リソースに HTTP 要求を送信し、HTTP 応答と要求したコンテンツをサーバーから受信します。各 HTTP 要求および応答を検査する機能は、Web サイト開発のさまざまな場面で役立ちます。たとえば、Web サイトの読み込みに時間がかかる場合は、まず、パフォーマンスの低いページについて、そのページに対する要求が発行されると、サーバーからクライアントに何が送信されるかを正確に調べることが良策です。膨大な CSS または JavaScript ファイルがやり取りされているか、ページのバックグラウンドイメージのサイズが異常に大きい可能性があります。HTTP トラフィックを検査すると、部分ポストバック時に送受信されるコンテンツを正確に確認できるため、Ajax アプリケーションのデバッグにも役立ちます。

HTTP トラフィックを検査するためのお勧めツールにマイクロソフトの Internet Explorer チームのプログラムマネージャである Eric Lawrence が作成した Fiddler Version 2.2 があります (図 3 を参照)。Fiddler はローカル HTTP プロキシとして機能し、ブラウザと外部インターネットとの間を中継します。Fiddler を有効にすると、ブラウザからのすべての HTTP 要求はまず Fiddler に送信され、ログに記録された後、宛先に送信されます。返された HTTP 応答は、まず Fiddler に到達し、ログに記録されてからブラウザに返されます。

図 3 Fiddler によるトラフィックの分析

Fiddler によってログに記録された HTTP トラフィックは、2 つのウィンドウで構成されるユーザーインターフェイスで表示できます。左側のウィンドウにはログに記録された各 HTTP 要求と応答のペアが表示されます。左側のウィンドウで 1 つまたは複数の HTTP 要求/応答のペアを選択すると、右側のウィンドウに詳細が読み込まれます。

右側のウィンドウでは、複数のタブにさまざまな情報が表示されます。[Statistics] (統計) タブには、送受信されたデータの合計バイト数、選択した要求/応答のペアを各種設定で送信した場合にかかる予想送信時間、各種要求とそのサイズを相対的に比較した円グラフが表示されます。[Timeline] (タイムライン) タブには、選択した各要求/応答のペアのタイムラインがグラフィカルに表示されます。このタイムラインは、同時に実行されている要求と各要求の実行にかかる時間を示します。この 2 つのタブは Web サイトのパフォーマンス分析に特に役立ちます。

その他のタブはクライアント側およびサーバー側のロジックのデバッグに有効です。[Inspectors] (検査) タブには、要求および応答で送信されたコンテンツの書式設定されたビューと未加工のビューが表示されます。[AutoResponder] (オートレスポンダー) タブでは、事前定義された応答を指定することにより、サーバーからの擬似応答を生成できます。この手法は Ajax アプリケーションのクライアント側ロジックをデバッグする場合に有効です。[Request Builder] (要求ビルダ) もご覧ください。このタブでは、手動で HTTP 要求を作成し、指定した Web サーバーに送信できます。

価格: 無償

fiddlertool.com

推薦図書

JavaScript は 1990 年代半ばに Netscape Navigator Web ブラウザ用のクライアント側スクリプト言語として開発されました。この言語は、長年にわたって、フォームフィールドの入力検証と多少の機能を持つだけの言語と見なされていました。ところが、現在、JavaScript は重要な高機能言語として認識されています。多くの場合、JavaScript は高コストな Web サーバーへのアクセスを伴わずにクライアント側の Web ページのスタイルやコンテンツを動的に変更することを目的に使用されます。この高機能言語により、Ajax 対応 Web ページで行われるような複雑なデータのやり取りも実現できます。

Web 開発における JavaScript の重要性が高まった結果、いくつかのフレームワークが作成されました。中でも特に一般的なものは、John Resig によって開発された無料のオープンソースのブラウザ間 JavaScript フレームワークである jQuery です (Visual Studio 2010 では jQuery ライブラリが付属し、ASP.NET 開発者が jQuery を手軽に利用できるようになります)。

簡単に言うと、jQuery を使用すれば、Web ページからの要素の取得および処理が容易になります。たとえば、データをグリッド表示する多くの Web ページでは、スタイルの異なる行が交互に表示されています。これを JavaScript で実現するには、テーブルの各行に交互に CSS クラスを適用します。次のような jQuery ステートメントで、この処理をきわめて簡潔に記述できます。

   $("table tr:nth-child(even)").
      addClass("cssClassName");

Bear Bibeault および Yehuda Katz 共著の『jQuery in Action』(Manning、2008 年) は、jQuery の詳細を理解し、簡潔で柔軟性の高い構文を習得するために役立つ優れた資料です。『jQuery in Action』は、既に JavaScript を習得し、言語の基本を理解している読者を対象にしています。この本では、jQuery の開発に至った動機と jQuery の基礎を簡単に説明した後、jQuery を使用した一般的なタスクの実行方法を説明しています (jQuery を使用した高度な JavaScript の概念については付録で説明しています)。

次に、jQuery のさまざまな機能の説明に入ります。ここでは、Web ページから要素を選択する方法、要素のスタイルおよびコンテンツの変更方法、DOM の要素を追加または削除する方法が示されます。この中で、jQuery でイベント処理を簡素化する方法、jQuery のユーティリティ関数、jQuery を使用して Web サーバーと通信する方法について解説しています。簡潔なわかりやすい英語で書かれ、紹介されているコード例とスクリーンショットの量も適度で、役立つ情報が満載の読みやすい参考書です。

jQuery に人気がある理由の 1 つは、プラグインでフレームワークを簡単に拡張できる点です。数行の JavaScript でフレームワークに固有の機能を追加できます。何よりも、開発者は自作のプラグインを公式の jQuery サイトで共有できます。このサイトには、現在、数百のダウンロード可能なプラグインがあります。『jQuery in Action』には、固有のプラグインの作成方法を説明する章や、特に評判が高く、役に立つ 4 つのプラグインを紹介する章があります。

価格: 39.99 ドル

manning.com

ご意見やご質問は、Scott (toolsmm@microsoft.com) までお送りください。

Scott Mitchell は、多数の著書を出版し、4GuysFromRolla.com の創設者でもあります。また、1998 年からは Microsoft MVP としてマイクロソフトの Web テクノロジに携わっています。現在は、フリーのコンサルタント、トレーナー、およびライターとして活躍しています。Scott の連絡先は、Mitchell@4guysfromrolla.com です。また、ScottOnWriting.NET にブログを公開しています。

次の方法で共有

その他のリソース