連載
ASP.NET AJAXを理解する

第2回 ASP.NET AJAXを使いこなす

マイクロソフト　松崎 剛
2007/03/27
Page1 Page2 Page3 Page4

2. クライアントサイドにおけるカスタム処理の開発

　ここから先の内容は、ASP.NET以外の開発者も十分にその機能を活用することができる。

　以下では、まずAjaxの「エンジン」ともいうべきJavaScriptでの開発（Microsoft AJAX Libraryを使った開発）について説明し、これをASP.NETで扱いやすくするためにサーバ・コントロール化するという手順で説明していく。

●Microsoft AJAX LibraryのJavaScriptコンポーネント

　Microsoft AJAX Libraryでは、クライアントサイドのJavaScriptのコンポーネントは、Sys.Componentクラス、ここから継承されたSys.UI.ControlクラスとSys.UI.Behaviorクラスの3種類に大きく分けられる。

　UI（ユーザー・インターフェイス）を伴わないタイマーのようなコンポーネントは、Sys.Componentクラスを拡張して作成する。

　一方、HTMLコード上のUI要素と関連付けて、そこに特別な動作を実装したい場合には、Sys.UI.Behaviorクラスを拡張して作成する。このBehaviorクラスはあくまでも振る舞いだけを実装したものであると考えてほしい。使用する際は、HTMLコード上の要素（ボタン、テキストボックスなど）と関連付けて使用する。

　また、HTMLコード上のUI要素そのものを独自に拡張する場合には、Sys.UI.Controlクラスを使う。Sys.UI.Controlクラスも、Sys.UI.Behaviorクラスと同じように、JavaScriptコードでHTMLコード上のUI要素と関連付けを行う必要がある。UI要素そのものの表示／非表示の切り替えや、関連するCSSクラスの切り替えなど、表示方法そのものに関する制御は、Sys.UI.Controlクラスの方が行いやすい。

　Microsoft AJAX LibraryのJavaScriptコードは、サーバ側のクラスへの対応を意識した形でコンポーネント化されている。例えば、クラスの名称もサーバ側の.NETのクラス（System.Web.UIなど）を意識して「Sys.UI.Control」「Sys.UI.Behavior」といった名称になっているし、サーバ側のC#やVisual Basicなどで使われている継承や名前空間の概念もそのままJavaScriptコードで実現されている。JavaScriptでオブジェクト指向的な開発をされた経験のある方はご存じと思うが、JavaScriptには言語仕様として「継承」などの概念はない。このためMicrosoft AJAX Libraryの中でそのための仕組みが作り込まれているのだ。

●カスタム・コンポーネントの作成例

　では、実際にカスタムのSys.Componentクラスを作成してみよう。

　以下のコードは、一定時間経過したら「Hello」というアラート（JavaScriptのメッセージ・ボックス）を表示するという非常に単純なコンポーネント（Sample.MyWakeupクラス）をJavaScriptで実装したサンプルである。まったく実用性には欠けるが、サンプルとしては理解しやすいはずだ。-1

Type.registerNamespace("Sample"); -1

Sample.MyWakeup = function() {
  Sample.MyWakeup.initializeBase(this);
   this._timer = null;
}

Sample.MyWakeup.prototype = {
   initialize : function() {
     Sample.MyWakeup.callBaseMethod(this, 'initialize');
     this._timer = window.setInterval(
      Function.createDelegate(this, this._timerCallback),
      this._timespan);
   },

   get_timespan: function() {
     return this._timespan;
   },

   set_timespan: function(value) {
     this._timespan = value;
   },

   dispose: function() {
     Sample.MyWakeup.callBaseMethod(this, 'dispose');
   },

   _timerCallback: function() {
     alert('Hello !!');
   }
}

// Sys.TypeDescriptorメソッドとxml-script用に定義する
// Sample.MyWakeupクラスの全メンバ（プロパティ、メソッド）
Sample.MyWakeup.descriptor = {
   properties: [  {name: 'timespan', type: Number} ]
}
Sample.MyWakeup.registerClass('Sample.MyWakeup', Sys.Component); -2

if (typeof(Sys) !== 'undefined')
   Sys.Application.notifyScriptLoaded();
単純なコンポーネント（Sample.MyWakeupクラス）を実装するJavaScriptコード（MyWakeup.jsファイル）

　まず、（-1で）registerNamespaceメソッドを使って名前空間を登録し、（-2で）registerClassメソッドを使って継承元のクラスの情報を登録している。このコンポーネントはUIを持たないので、Sys.Componentクラスを継承して作成しているのが分かる。これらの名前空間や親クラスの情報は、Microsoft AJAX Libraryの内部で、まずは単純にJavaScriptの変数に格納される。

　そして、インスタンス作成時（new演算子の実行の際）に（の）initializeBaseメソッドが実行される。initializeBaseメソッドの中では、継承元のクラスをすべてをたどって、継承元のクラスのすべてのメンバがこのSample.MyWakeupクラスにコピーされる。こうして、あたかもJavaScriptコード上で「継承」したかのように、継承元のメンバをすべて引き継ぐようになっている。

　また、prototype*2の定義により、Sample.MyWakeupクラスに固有のメンバを定義している。initializeメソッドなど、継承元（親）で同じ名前で定義されているものはそのままメソッドが上書きされてしまうので、その処理の中で親クラスのinitializeメソッドを呼び出す必要がある。

　なお、ここで使われているinitializeBaseやregisterClass、callBaseMethodなどのASP.NET AJAX独自のメソッドは、Microsoft AJAX Libraryの中であらかじめFunctionクラス*3を使って定義されている。

*2 prototypeは、JavaScriptのインスタンス間で共有されるメソッドなどのメンバである。prototypeとしておけば、newのたびにメンバがコピーされることがない。
*3 JavaScriptでは、Functionクラスを使ってfunctionの操作を行うことができる。例えば、Functionクラスにprototype定義を行うと、生成（new）されたすべてのfunctionに対してprototypeで定義されたメンバを使用することができる。

　これでクラスの作成は完了した。

●カスタム・コンポーネントの利用例

　では、HTMLコード上で、このSample.MyWakeupクラスを使ってみよう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyWakeupテスト・ページ</title>
</head>
<body onload="doWork();">

<script src="MicrosoftAJAX.js" type="text/javascript"></script>
<script src="MyWakeup.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
function doWork() {
  var obj = new Sample.MyWakeup();
  obj.set_timespan(14000);
  obj.initialize();
}
// -->
</script>

</body>
</html>
単純なコンポーネント（Sample.MyWakeupクラス）を利用するHTMLコード（MyWakeup.htmlファイル）

　このサンプルを実行すると、14秒後に「Hello」と書かれたアラートが表示される。

　なお、このソース・コードでは、Microsoft AJAX Libraryをこれから覚える読者の方に分かりやすいように、<body>タグのonloadイベントでJavaScriptの関数を呼び出すというJavaScriptコードの実行手順としては一般的な方法を取っているが、Microsoft AJAX Libraryでは、Sys.Applicationクラスのadd_initメソッドを使ってロード時の処理をいくつも登録することができる。また、Microsoft AJAX Libraryの$create関数を使うと、オブジェクトの作成（new）とプロパティの設定、さらにはinitialize関数の呼び出しの処理まですべて行ってくれる。Microsoft AJAX Libraryの実際の開発では、こうした関数を使用して構築する。

　次に、上記のJavaScriptのコンポーネントをASP.NETのサーバ・コントロールとして作成してみよう。


　INDEX
　 ［連載］ASP.NET AJAXを理解する
　 第2回 ASP.NET AJAXを使いこなす
　   1．ASP.NET AJAXのサーバ・コントロール
  2． クライアントサイドにおけるカスタム処理の開発
　   3．JavaScriptコンポーネントのASP.NETサーバ・コントロール化
　   4．サーバサイドにおけるカスタム処理の開発
　
インデックス・ページヘ 　「ASP.NET AJAXを理解する」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT