[ThinkIT] 第3回：テーブルにスクロールバーを実装する (1/3)

TOP＞書籍連動＞ JPSpanプロキシクラス

JPSpanを使ってAJAXをしよう！

第３回：テーブルにスクロールバーを実装する
著者：Joshua Eichorn 2005/11/16

1 2 3 次のページ

JPSpanプロキシクラス

   前回紹介したサーバ側のクラスは、データベースのインターフェースとしてはとても簡単なものでした。しかし、接続のためのメソッドなどは、JavaScriptとして出力したくありません。そのためこのクラスを元に、JavaScriptに出力するためのラッパークラスを作成するのが便利です。これにより、クライアントと通信する前にデータの整合性を取ったり、複数のメソッドを1つにまとめたりと、色々なメリットが生じます。

   筆者は、これらのクラスを作成する際には、メソッド名に小文字を使っています。すると、JavaScriptには小文字でPHPメソッドが出力されるため、残りのクラスがcamelCase形式であってもわかりやすくなります。これにより、ソースコードがわかりやすくなり、JavaScriptのプロキシクラスで扱えるメソッドが一目瞭然でわかります。

   今回、JavaScriptに出力するために作成したプロキシクラスは、リスト7の通りです。


		1 <?php

		2 ⁄**

		3 * JpSpan で使うリモートインターフェース用のクラス

		4 *⁄

		5 class nail_remote {

		6      var $dataObject;

		7

		8      function data($start,$numRows) {

		9           return $this->dataObject->data($start,$numRows);

		10      }

		11

		12      function num_rows() {

		13           return $this->dataObject->numRows();

		14      }

		15 }

		16 ?>

リスト7：JavaScriptに出力するために作成したプロキシクラス

動的にテーブルを更新する

テーブルをスクロールさせる前に、基本的な機能を動作させる必要があります。まずはJavaScriptを使って、既存のテーブルに新しい行を追加する処理です。


		var table = document.getElementById('grow');

		var newRow = document.createElement('tr');

		table.appendChild(newRow);

		var count = table.getElementsByTagName('tr').

		length;

		newRow.innerHTML = '<td>'+count+'</td><td>'+count+'</td>';

これを実現するには、JavaScriptのDOMを利用します。まずは、getElementById() メソッドにより、追加対象のテーブルを取り出します。次に、createElement() メソッドで新しい行を作成します。そして、この新しい行をテーブルに追加することで、作成を終わらせます。

これで新しいテーブルに行を追加できたので、その値を設定することになります。この用途には、innerHTMLプロパティが最適です。構築したHTMLを設定するだけで、TRタグの内容を指定できます。今回の記述に慣れていない方は、JavaScriptのDOMに関して勉強するのもよいでしょう。DOMは簡単ながらも強力な技術で、AJAXを活用するためには知っておきたい知識です。

1 2 3 次のページ

書籍紹介
PHPプログラマーズマガジン

PHPプログラマーズマガジンは、PDF形式で読者の方にお届けするPHP言語（PHP:Hypertext Processor）専門誌です。カナダMTA出版のphp|architect誌を日本語に翻訳し、独自の記事を加えて月刊でお届けしています。

発行：アシアル株式会社　　価格：1,029円

ご購入はコチラ http://www.asial.co.jp/magazine/

著者プロフィール
Joshua Eichorn
Joshua Eichornは、PHPを使ったWebサイトを7年間制作してきました。彼は、非常に有名なPHPのドキュメーションツールであるphpDocumentorの制作者です。また彼は、アリゾナ州立大学のScience in Computer InformationSystems学部の学士号をとっています。
彼はUversa社のシニア設計者として、AJAXをUversa社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。

INDEX
第3回：テーブルにスクロールバーを実装する
	JPSpanプロキシクラス
	スクロールバーを追加する
	スクロールバーに接続する