Ajax と XML: Ajax を使った表

Ajax を使って表、タブ、グライダーを作成する

Ajax (Asynchronous JavaScript™ + XML) の 1 つの強みは、サーバーからのデータをユーザーに対して動的に表示することです。この記事では、表、タブ、グライダー (横方向のスライド) を使用した、Ajax による動的なデータ表示の手法をいくつか説明します。

Jack D. Herrington, Senior Software Engineer, Leverage Software Inc.

Jack D. Herrington は、20 年以上の経験を持つシニア・ソフトウェア・エンジニアです。彼の著書には、『、『Code Generation in Action』、『Podcasting Hacks』、『PHP Hacks』の 3 冊があります。また、彼はこれまで 30 本以上の記事を書いています。連絡先は jherr@pobox.com です。



2008年 3月 11日

Ajax と Web 2.0 について考えるとき、大抵の人が思い浮かべるのはユーザー・エクスペリエンスの視覚的要素です。ページが更新されずに同じ場所で作業しているというこの感覚が、Ajax ならではの魅力となっています。これはまったくの誇大広告ではありません。従来の HTML アプリケーションでは、ページの更新によって表示が一瞬消えてリロードが行われるため、たとえ最速の接続であっても表示が変化するのは免れません。

よく使われる頭字語

  • DHTML: Dynamic HTML
  • HTML: Hypertext Markup Language
  • XSLT: Extensible Stylesheet Language Transformation

この記事では、そんな背景の変化がまったく伴わないユーザー・エクスペリエンスを設計する手法を、Ajax を使用する場合と使用しない場合を含め、いくつか紹介します。まずは Ajax ユーザー・エクスペリエンスの最も単純な例として、タブ付きウィンドウを取り上げます。

タブ付きウィンドウ

大量のデータを比較的小さな領域に配置するには、タブを使うのが最も手軽な方法です。そして、素晴らしい Prototype.js JavaScript ライブラリーのおかげで、Ajax によるタブ付きウィンドウは DHTML (Dynamic HTML) で驚くほど簡単に作成できます (リスト 1 を参照)。この Prototype ライブラリーの詳細を調べたり、自分で使うためにダウンロードしたりするには、「参考文献」を参照してください。

リスト 1. index.html
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<a href="javascript:void loadTab( 'tab1.html' )">Tab 1</a> |
<a href="javascript:void loadTab( 'tab2.html' )">Tab 2</a> |
<a href="javascript:void loadTab( 'tab3.html' )">Tab 3</a>
<div id="content" style="padding:5px;border:2px solid black;">
</div>
<script>
function loadTab( tab ) { 
  new Ajax.Updater( 'content', tab, { method: 'get' } );
}
loadTab( 'tab1.html' );
</script>
</body>
</html>

このファイルの先頭で組み込んだ Prototype.js ライブラリーが、すべての Ajax 処理を行います。その下にはさまざまなページへのリンクが記載されていますが、このリンクのそれぞれが loadTab を呼び出してページのコンテンツ・エリアを更新します。コンテンツ・エリアは、content という ID が設定された <div> です。loadTab 関数が呼び出すAjax.Updater が、指定された HTML ファイルで <div> のコンテンツを更新します。

リスト 2 に、最初のタブの HTML ファイルを記載します。他のファイルもすべて、このファイルと同様です。

リスト 2. tab1.html
Tab 1

ブラウザーでこのファイルまでナビゲートすると、図 1 のようなページが表示されます。

図 1. 最初のタブ・ページ
最初のタブ・ページ

2 番目のタブをクリックすると、図 2 のコンテンツが表示されます。

図 2. 2 番目のタブをクリックした後の表示
2 番目のタブをクリックした後の表示

タブ付きウィンドウの実演

タブ付きウィンドウのサンプルを実際の環境で確認するには、ここをクリックして Open link to view live demo of tabbed windows in new windowオンライン・デモを表示してください。

この機能は、コンテンツの中で隠し <div> タグを使用し、その表示/非表示を切り替えるという方法で実現します。Ajax 手法の利点は、必要なときにだけコンテンツが作成されてロードされることです。したがって、コンテンツを作成するための計算時間が短くなります。さらにユーザーがコンテンツを表示しなければ、この計算時間はまったく発生しないことになります。

この後に紹介する 3 つのサンプルでは、いずれも Ajax 手法 (または Ajax のように見える手法) を使って表を処理します。


Ajax を使った基本的な表

Ajax を使って表を作成するこの最初のサンプルでは、Ajax によるサーバーへの XML リクエストを使用します。この手法には、二重の価値があります。まず 1 つは、ページを更新することなくオンデマンドでデータをロードできるため、快適なユーザー・エクスペリエンスになるという点です。そしてもう 1 つの価値は、この手法に必要な XML データ・ソースは Ajax コードに役立つだけでなく、XML 形式でデータを使用することを期待する他のクライアントにも有益であるという点です。

リスト 3 に、XML から作成される表のサンプル・コードを記載します。

リスト 3. index.html
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<table id="books">
</table>
<script>
new Ajax.Request( 'books.xml', { 
  method: 'get',
  onSuccess: function( transport ) {
    var bookTags = transport.responseXML.getElementsByTagName( 'book' );

    for( var b = 0; b < bookTags.length; b++ ) {
      var author = bookTags[b].getElementsByTagName('author')[0].firstChild.nodeValue;
      var title = bookTags[b].getElementsByTagName('title')[0].firstChild.nodeValue;
      var publisher = 
          bookTags[b].getElementsByTagName('publisher')[0].firstChild.nodeValue;

      var elTR = $('books').insertRow( -1 );
      var elTD1 = elTR.insertCell( -1 );
      elTD1.innerHTML = author;
      var elTD2 = elTR.insertCell( -1 );
      elTD2.innerHTML = title;
      var elTD3 = elTR.insertCell( -1 );
      elTD3.innerHTML = publisher;
    }
  }
} );
</script>
</body>
</html>

Ajax を使った基本的な表の実演

基本的な表のサンプルを実際の環境で確認するには、ここをクリックして Open link to view live demo of basic tables in new windowオンライン・デモを表示してください。.

Ajax.Request 呼び出しの onSuccess ハンドラーは、まず始めに各 book 要素を取得して XML データを分割します。次に、ネストされたタグから authortitlepublisher の値を取得し、最後に book ごとに insertRow および insertCell を実行して表にデータを追加します。

リスト 4 に、このサンプルの XML コードを記載します。

リスト 4. books.xml
<books>
  <book>
    <author>Jack Herrington</author>
    <title>Code Generation In Action</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>Podcasting Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
  <book>
    <author>Jack Herrington</author>
    <title>PHP Hacks</title>
    <publisher>O'Reilly</publisher>
  </book>
</books>

この結果、DHTML ファイルは図 3 のように表示されます。

図 3. XML から作成される表のページ
XML から作成される表のページ

このサンプルは結果セットが小さい場合には有効ですが、結果セットが大きい場合にはどんな手法が適しているでしょうか。


Ajax を使った複数ページからなる表

ここでは前のセクションで説明した手法とは多少異なる Ajax 手法を使って、複数ページからなる表を作成します。上記で説明した XML 手法は簡単に拡張することができるため、必ずしもここで説明する手法を使う必要があるわけではありませんが、この記事では、記載するサンプルに対してさまざまな手法を紹介し、読者がそれぞれのアプリケーションのニーズに合った手法を選べるようにしようと思います。

今回使用するのは PHP データ・ソースです。この PHP データ・ソースが、複数ページからなる表の各ページの HTML コード・ブロックを提供します。リスト 5 に、最初の HTML コードを記載します。

リスト 5. index.html
<html>
   <head>
   <script src="prototype.js"></script>
   </head>
   <body>
   <div>
   <a href="javascript:void updateTable(0);">1</a> |
   <a href="javascript:void updateTable(1);">2</a> |
   <a href="javascript:void updateTable(2);">3</a> |
   <a href="javascript:void updateTable(3);">4</a> |
   <a href="javascript:void updateTable(4);">5</a> |
   <a href="javascript:void updateTable(5);">6</a>
   </div>
   <div id="states">
   </div>
   <script>
   function updateTable( start ) {
      new Ajax.Updater( 'states', 'stats.php?start='+(start*10)+'&count=10', 
      { method: 'get' } );
   }
   updateTable( 0 );
   </script>
   </body>
</html>

大部分のページは、表の各ページへのリンク先に含まれています。そして、states という ID の <div> タグが stats.php ページから表のコンテンツを受け取ります。

複数ページからなるサンプルを実行するには大きなデータ・セットが必要です。そこで、米国の人口統計に目を向け、getdata という PHP 関数を作成しました。この関数は、各州の過去数年の人口の配列を返す関数です。リスト 6 に、この関数の抜粋を記載します。

リスト 6. data.php
<?php
function getdata()
{
   $population = array();
   $population []= 
       array( 'Alabama',4447100,4527166,4596330,4663111,4728915,4800092,4874243 );
   $population []= array( 'Alaska',626932,661110,694109,732544,774421,820881,867674 );
...
   $population []= array( 'Wyoming',493782,507268,519886,528005,530948,529031,522979 );
   return $population;
}
?>

今度はデータのさまざまな部分を取得するための stats.php ページを作成します。このページは、開始および終了インデックスを指定すると、データの該当する部分だけを設定した HTML の表を返します。このファイルはリスト 7 のとおりです。

リスト 7. stats.php
<table>
<?php
require 'data.php';
   $data = getdata();
   $start = 0;
$count = count( $data );
   if ( array_key_exists( 'start', $_GET ) ) $start = $_GET['start'];
if ( array_key_exists( 'count', $_GET ) ) $count = $_GET['count'];
   $index = 0;
foreach( $data as $state ) {
if ( $index >= $start && $index < $start + $count ) {
?>
<tr>
<?php
foreach( $state as $item ) {
?>
<td><?php echo($item); ?></td>
<?php
}
?>
</tr>
<?php
}
$index += 1;
}
?>
</table>

ブラウザーでこのページを表示すると (図 4 を参照)、最初のページが自動的にロードされます。

図 4. 複数ページからなる表の表示
複数ページからなる表の表示

表の各セクションへのリンクをクリックすると、表が動的に stats.php からロードされます。例えば、図 5 はデータの 2 番目のページへのリンクをクリックした場合の表示です。

図 5. 表の 2 番目のページの表示
表の 2 番目のページの表示

Ajax を使った複数ページからなる表の実演

複数ページからなる表のサンプルを実際の環境で確認するには、ここをクリックしてOpen link to view live demo of paged tables in new windowオンライン・デモを表示してください。

この手法は、タブの場合に使った手法と似ています。このように、HTML を Ajax によって渡すと XML と同じように効果的になる場合がよくあります。さらに、XML を構文解析して再び HTML に変換しなおす必要がないため、ブラウザーではこの手法のほうが多少簡単になります。

次に紹介する 3 番目の表作成の手法は、Ajax を使わずに動的に表を作成する最も簡単な方法です。


複数の隠しページからなる表

リスト 8 のページを見ると、バックエンドに Ajax を使わずに複数ページからなる表を作成する単純な手法がわかります。

リスト 8. index.php
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<div>
<?php
require( 'data.php' );

$data = getdata();
$states = count( $data ) / 10;

for( $s = 0; $s < $states; $s++ ) {
?>
<?php echo( ( ( $s == 0 ) ? '' : '| ' ) ); ?>
<a href="javascript:void updateTable(<?php echo( $s ) ?>);">
      <?php echo( $s + 1 ) ?>
</a>
<?php
}
?>
</div>

<?php
$index = 0;
foreach( $data as $state ) {
?>
<?php
if ( $index % 10 == 0 ) {
?>
<?php if ( $index > 0 ) { ?></table></div><?php } ?>
<div id="states<?php echo( $index / 10 ) ?>" style="display:none;">
<table>
<?php 
}
?>
<tr>
<?php
foreach( $state as $item ) {
?>
<td><?php echo($item); ?></td>
<?php
}
?>
</tr>
<?php
$index += 1;
}
?>
</table>
</div>

<script>
function updateTable( id )
{
  var elStateDivs = [];
<?php
for( $s = 0; $s < $states; $s++ ) {
?>
  elStateDivs.push( $( 'states<?php echo( $s ) ?>' ) );
<?php
}
?>
  for( var i = 0; i < elStateDivs.length; i++ ) {
    if ( i == id ) elStateDivs[i].show();
    else elStateDivs[i].hide();
  }
}

updateTable( 0 );
</script>

</body>
</html>

今度は PHP コードを使って、表を構成するページごとに <div> タグを作成しています。最初のタグはデフォルトで表示され、残りは表示されません。updateTable 関数が、どのページが選択されたかに応じて、表の各部分を表示または非表示にします。

複数の隠しページからなる表の実演

複数の隠しページからなる表のサンプルを実際の環境で確認するには、ここをクリックしてOpen link to view live demo of hidden paged tables in new windowオンライン・デモを表示してください。

注目すべき点は、この場合も Prototype.js ライブラリーを組み込んでいることです。その理由は Ajax をサポートするためではなく、$() メソッドと show および hide メソッドを使用して各 <div> 要素を制御しやすくするためで、このライブラリーがこれらのメソッドをすべて実装しているからです。

図 6 に、このページを示します。

図 6. 複数ページからなるように見せかけている表の表示
複数ページからなるように見せかけている表の表示

最後に紹介する Ajax を使用したサンプルでは、グライダー・コントロールを表示します。グライダーとは、表示しているページの変更に合わせてダイナミックな左右の動きを与える新しい表示形式のことです。


グライダー

グライダーの効果を実現するには、さらに 2 つのライブラリーが必要になります。まず 1 つは、Prototype.js をベースに作成された Scriptaculous です。このライブラリーが、グライダーが使用する効果を提供します。もう 1 つのライブラリーは、Glider ライブラリーです。

リスト 9 に、グライダーの一例を示します。

リスト 9. index.html
<html><head>
<link rel="stylesheet" href="stylesheets/glider.css" type="text/css">
<script src="javascripts/prototype.js"></script>
<script src="javascripts/effects.js"></script>
<script src="javascripts/glider.js"></script>
</head><body>
<div id="glider"><div class="controls">
<a href="#tab1">Tab 1</a> | 
<a href="#tab2">Tab 2</a> |
<a href="#tab3">Tab 3</a> |
<a href="#tab4">Tab 4</a></div>
<div class="scroller"><div class="content">
<div class="section" id="tab1">Tab 1</div>
<div class="section" id="tab2">Tab 2</div>
<div class="section" id="tab3">Tab 3</div>
<div class="section" id="tab4">Tab 4</div>
</div></div></div>
<script>
new Glider( 'glider', { duration:0.5 } );
</script>
</body></html>

グライダーの効果の実演

グライダーのサンプルを実際の環境で確認するには、ここをクリックしてOpen link to view live demo of glider in new windowオンライン・デモを表示してください。

ファイルの先頭で、各種のスクリプト・ライブラリーが組み込まれています。これに続くのが glider という ID の <div> です。この <div> の最初に含まれるのは controls という <div> で、この <div> の中に各タブを取得するためのアンカー・タグがあります。次に scroller という別の <div> タグがあり、ここに各タブのコンテンツが含まれます。一番下にあるスクリプトが、glider という <div> 要素の ID を設定した Glider オブジェクトを作成します。

このページは、ブラウザーでは図 7 のように表示されます。

図 7. グライダーを使用したタブのサンプル
グライダーを使用したタブのサンプル

別のタブをクリックすると、コンテンツは文字通り、そのタブまで滑るようにして移動します。


まとめ

Ajax、PHP、そして Prototype.js ライブラリーを使って作成できるインターフェース要素にはさまざまなタイプがあります。そのうち、この記事で取り上げたのはほんの少しだけに過ぎませんが、読者の皆さんがここで紹介した手法を独自の Web アプリケーションで生かせるよう願っています。これらの手法は間違いなく簡単で、さらに Prototype.js ライブラリーを使えば Ajax はまるで難しいものではなくなります。developerWorks Ajax フォーラムで、あなたの成功談をぜひお聞かせください。フォーラムでは皆さんの参加を心待ちにしています。

参考文献

学ぶために

  • PHP ホーム・ページ: PHP プログラマーのための貴重な情報源にアクセスしてください。
  • Prototype ライブラリー: 動的 Web アプリケーションの開発を簡易化するために設計されたこの JavaScript フレームワークについて調べてください。
  • Scriptaculous JavaScript ライブラリー: この Prototype ベースのフレームワークで、Web サイトを成功させるための表示支援機能と効果を見つけてください。
  • Prototype.js 資料ページ: Prototype JavaScript ライブラリーについての詳細を調べてください。ここには、Prototype の公式ブログをはじめとする豊富な資料へのリンクが記載されています。
  • jQuery: Prototype.js と同様の機能を提供するもう 1 つの JavaScript ライブラリーです。
  • Yahoo! UI Library: Yahoo! の Ajax 対応ツールキットです。
  • Glider コントロール: タブ形式の対話に、巧妙で目新しい工夫を加えてください。
  • XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbook については、developerWorks XML ゾーンを参照してください。
  • developerWorks technical events and webcasts: これらのセッションで最新情報を入手してください。
  • テクノロジー・ブックストア: この記事で取り上げた技術やその他の技術に関する本を探してください。

製品や技術を入手するために

  • IBM 試用版ソフトウェア: developerWorks から直接ダウンロードできる試用版ソフトウェアで、次の開発プロジェクトを構築してください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Web development
ArticleID=301311
ArticleTitle=Ajax と XML: Ajax を使った表
publish-date=03112008