目次


Ajax と XML

5 つのクールな Ajax ウィジェット

Ajax と XML を新しいグラフィック・ツールと共に使ってサイトに磨きをかける

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: Ajax と XML

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:Ajax と XML

このシリーズの続きに乞うご期待。

Web 2.0 革命で重要視されているのは、Web サイトのカスタマーと独特かつ斬新な方法で対話する方法です。そんな革新的手法の多くは、グラフィックス、そしてサーバーと通信して表示用のデータを取得するウィジェットの使うことによって行われています。この記事では、Ajax と XML でサーバーと通信する以下の 5 つのウィジェットを紹介します (オープン・ソースのものもあれば、ライセンス付きのものもあります)。

  • カルーセル: このウィジェットは回転式画像ビューアーで、カスタマーはこれを使用して、それぞれ小さなグラフィックで表現された項目のリストをスクロールできます。ユーザーが項目をクリックしたときの動作は、あなたの意のままです。世間に見られるカルーセルの例としては、Flikr サイト、そして Apple の iTunes インターフェースがあります。この記事で紹介するカルーセルは無料で入手できるもので、人気の高い jQuery JavaScript フレームワークをベースとしています。
  • SWF/Charts: Adobe Flash ベースのコントロールで、グラフ作成用のデータとスタイル設定オプションをサーバー上の XML から読み取り、読み取ったデータに基づいてグラフを表示します。このインターフェースは簡潔で、しかも XML データは非常に作成しやすいため、動的グラフ作成機能をわけなくページに追加できます。
  • SWF/Gauge: SWF/Charts の仲間でもあるこの Flash ウィジェットは、サーバー上の XML を使用して完全にカスタマイズ可能なゲージの表示を作成します。このゲージは、飛行機や車の計器のようにすることも、あるいはもっと今風のものにもできます。どれを選択するかはあなた次第です。
  • インプレース編集: 厳密に言うとウィジェットではありませんが、インプレース編集コントロールはユーザーに情報を直感的かつ対話式の手軽な方法で提供させるための方法です。インプレース編集は Scriptaculous フレームワークに付属の機能で、prototype.js ライブラリーの上に配置されます。
  • DHTML ウィンドウ: DHTML ウィンドウは、モードレスなフローティング・ウィンドウをページ・コンテンツの上に重ねて配置するメカニズムを提供します。このウィンドウはユーザーが移動、サイズ変更、消去できます。ウィンドウのコンテンツは、ページの JavaScript コードで指定することも、Ajax によってサーバーから読み取ることもできます。 このタイプのウィンドウは、アラート・メカニズムとして使用したり、あるいはページ全体をリロードするには及ばない小さなフォームを表示するのに理想的です。

それではまず、SWF/Charts ウィジェットの自慢から始めることにします。これは最も簡単にデプロイできるウィジェットの 1 つで、デプロイメントが簡単なわりには非常に大きな見返りがあります。

SWF/Charts ウィジェット

グラフが関係する場合はなおさらのこと、「百聞は一見にしかず」という諺には逆らい難いものです。とは言っても、Web でのグラフ作成はいつでも問題の種になっています。画像作成用のグラフィックス・プリミティブが組み込まれているものも一部ありますが、大抵の Web フレームワークにはすぐに使えるグラフ作成ツールがありません。この機能の欠如により、独自のグラフを作成しようにもお手上げ状態になってしまうのです。

XML でエンコードされたデータをグラフにするウィジェットがあったら、どんなに素敵なことかと思いませんか? 実は、SWF/Charts こそが、そんなウィジェットなのです。このウィジェットを使ってみるため、サイトから SWF ファイルと、このウィジェットが使用する追加の SWF ファイルをダウンロードしました。これらのファイルをサイトにインストールし、HTML ページで SWF ウィジェットのリンクを追加したのがリスト 1 です。

リスト 1. Chart_page.html
<html><body>

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" 
  width="400" height="250">
<param name="movie"
  value="charts.swf?xml_source=chart_data.xml&library_path=charts_library">

<embed
  src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" 
  width="400" height="250" 
  type="application/x-shockwave-flash" 
  pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

</body></html>

Charts.swf は、ライブラリー・ディレクトリーの場所、そして XML データの URL の 2 つをパラメーターとして使用します。XML データ・フォーマットは嘘のように簡単です。リスト 2 に、単純な一例を示します。

リスト 2. Chart_data.xml
<chart>
  <chart_type>bar</chart_type>
  <chart_data>
    <row>
      <null/>
      <string>2005</string>
      <string>2006</string>
    </row>
    <row>
      <string>Projected</string>
      <number>500</number>
      <number>700</number>
    </row>
    <row>

      <string>Actual</string>
      <number>600</number>
      <number>900</number>
    </row>
  </chart_data>
</chart>

このファイルは主としてグラフのデータですが、オプションの視覚的情報もいくつか含まれています。上記の例では、グラフのタイプを棒グラフに指定しています。私が SWF ファイルをダウンロードしてきたサイトには、設定可能なオプションや使用できるグラフのタイプが他にも豊富に揃っています。

Firefox ブラウザーでこのファイルをブラウズすると、図 1 のグラフが表示されます。

図 1. 実行中の Charts ウィジェット
図 1. 実行中の Charts ウィジェット

ご覧のように、デフォルトのカラー・スキームとグラフの外観は実におしゃれです。さらに、このグラフでは軸値も適切に丸められています。ほとんど手間要らずで、素晴らしい全体的効果が実現されています。

当然のことながら、graph_data.xml ファイルは動的 Web ページに置き換えられます。返されるデータが正しいフォーマットである限り、グラフ・コントロールはまったく気にしません。これは、この記事の例すべてに当てはまります。実際、Web ブラウザーでどの例を実行するにしても、Web サーバー (Apache Tomcat または IBM® WebSphere® Application Server) も Web プログラミング言語 (PHP、Microsoft® ASP.NET、Java™ 2 Enterprise Edition [Java EE] など) も使わずに、ローカル・ファイルで実行できます。

SWF/Gauge ウィジェット

データをゲージとして表示するのも、魅力的なデータの表示方法です。個人的には、ゲージのアイデアにはあまり乗り気ではありません。ちょっとした情報を表示するだけなのに、大きなスペースを占めるからです。ただし、ゲージはエグゼクティブ・ダッシュボードの重要な特徴なので、簡単に作成する機能があれば重宝します。

その一方、単純な棒グラフでも上手く機能しない Web だとしたら、円グラフも得意でないのは確かです。そこで、XML/Graph を作成した会社にもう一度アクセスしてみました。そこで知ったのは、この会社にはゲージに対応したソリューションもあるということです。それが、XML/Gauge です。

まず、リスト 3 に示すように、SWF/Gauge ウィジェットを組み込む HTML ページから取り掛かります。

リスト 3. Gauge_page.html
<html><body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/.../swflash.cab#version=6,0,0,0"
  width="110" height="55">
<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">
<embed src="gauge.swf?xml_source=gauge_data.xml"
  width="110" height="55" type="application/x-shockwave-flash"
  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed></object>

</body></html>

gauge.swf ムービーが使用する引数は唯一、データの場所だけです。この例では、リスト 4 に記載されている gauge_data.xml がその場所となります。

リスト 4. Gauge_data.xml
<gauge>

<circle fill_color="888888" start="275" fill_alpha="100"
  line_color="555555" line_thickness="3" line_alpha="90"
  radius="50" x="55" end="445" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="90"
  line_thickness="4" line_alpha="20" radius="45" x="55"
  end="440" y="55"/>
<circle fill_color="666666" start="317" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="322" y="55"/>
<circle fill_color="666666" start="337" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="342" y="55"/>
<circle fill_color="666666" start="357" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="362" y="55"/>
<circle fill_color="666666" start="377" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="382" y="55"/>
<circle fill_color="666666" start="397" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="402" y="55"/>
<circle fill_color="666666" start="417" fill_alpha="100"
  line_color="333333" line_alpha="0" radius="44" x="55"
  end="422" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="100"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="FF4400" start="280" fill_alpha="100"
  radius="44" x="55" end="310" y="55"/>
<circle fill_color="44FF00" start="50" fill_alpha="100"
  radius="44" x="55" end="80" y="55"/>
<circle fill_color="99bbff" start="280" fill_alpha="80"
  radius="40" x="55" end="440" y="55"/>
<circle fill_color="333333" start="270" fill_alpha="100"
  line_alpha="0" radius="20" x="55" end="450" y="55"/>

<rotate start="280" shake_span="2" shadow_alpha="15"
  step="1" x="55" span="0" y="55" shake_frequency="20">
  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"
    height="40" x="53" width="4" y="13"/>
</rotate>

<circle fill_color="111111" start="270" fill_alpha="100"
  line_thickness="5" line_alpha="50" radius="15" x="55"
  end="450" y="55"/>

</gauge>

上記のリストでわかるように、SWF はこのウィジェットでは別の手段を取っています。つまり、ゲージ (またはグラフ) のデータを指定する代わりに、円、円弧、四角などのグラフィックス・プリミティブから実際にゲージを作成しています。

本音を言えば、あらかじめ用意された一連のゲージを使って、データを提供するだけで済むようにするほうが好みです。そうは言っても、上記の方法はうまく機能し、調整の余地がほとんど無限に与えられます (それでもやはり、いくつかの事前準備された例から取り掛かれたらありがたいのですが)。

ブラウザーでこのファイルまで進むと表示されるのが、図 2 のゲージです。

図 2. 実行中の Gauge ウィジェット
図 2. 実行中の Gauge ウィジェット

グラフィックス・プリミティブの仕様では、このウィジェットで得られるものはあまりないと思うかもしれませんが、そうでもありません。グラフィックス・プリミティブには、針をサウンドとともに振れるようにするための単純な動画の手法や、ユーザーがクリックしたときにブラウザーをナビゲートするホット・リンク・ゾーンを作成する機能も組み込まれています。さらに、このコントロールをゲージだけに使用するのではなく、このコントロールが持つ単純なグラフィックス・プリミティブ言語を使用すれば、型にはまらない発想であらゆるタイプの画像と単純な動画を作成することもできます。

インプレース編集

今やユーザーが期待するのは、デスクトップ・アプリケーションをインプレース編集することです。Web にこの機能があるのはまれなことですが、それももはや過去の話になります。Web 2.0 では、対話性は極めて重要なため、インプレース編集のような手法もごく当たり前のことになってきています。

インプレース編集を実装するには、独自に書き込むことも、いずれかの JavaScript フレームワークにこの力仕事を任せることもできます。なかでも人気の高いツールキットとして挙げられるのは、prototype.js ライブラリー上にビルドされる Scriptaculous フレームワークです。Scriptaculous ライブラリーによって、インプレース編集コントロールの作成が極めて容易になります。

インプレース編集用の単純な HTML テスト・ファイルをリスト 5 に示します。

リスト 5. Inplace.html
<html><head>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="controls.js"></script>
<script src="scriptaculous.js"></script>
</head><body>
<table width="100%">
<tr><th width="10%">Name</th>
<td width="90%"><p id="name">Candy bar</p></td>
</tr></table>
<script>
new Ajax.InPlaceEditor('name', 'submitted.html' );
</script>
</body>
</html>

まず、Inplace.html に必要なすべての JavaScript ソース・ファイルを組み込んでから、インプレース編集が可能なデータを含むパラグラフで単純なテーブルを組み立てています。ファイルの最後には、このパラグラフの InPlaceEditor オブジェクトを作成する小さなスクリプトが挿入されています。

InPlaceEditor コンストラクターは引数として、パラグラフの ID、そして編集後の実行依頼を処理するページの URL を使います。上記の例でこのページに該当するのは submitted.html ですが、実際には、ASP.NET、Java EE または PHP ページ、あるいはその他の動的 Web 技術を使用する場合もあります。

リスト 6 に、単純な submitted.html ファイルを示します。

リスト 6. Submitted.html
<p>Name changed!</p>

上記をテストするには、まずブラウザーで HTML ファイルを開きます。オリジナルのテキストが表示されるので、マウスをテキストの上に重ねます。すると、テキストは図 3 のように黄色に変わります。

図 3. インプレース編集の開始
図 3. インプレース編集の開始

この黄色の強調表示は、ユーザーにフィールドをクリックすると編集可能になることを視覚的に示すインジケーターです。このフィールドをクリックすると、図 4 のように Name フィールド、ok ボタン、cancel リンクが表示されます。

図 4. テキストをクリックした後の編集
図 4. テキストをクリックした後の編集

テキストを変更して ok をクリックすると、データがサーバー (この例では、submitted.html ページ) に送られます。データが送られると、サーバーはオリジナルのテキストを置き換えた HTML ページを返します。この例で送り返されるのは Name changed! (図 5 を参照) ですが、実際にはデータの新しい値が戻されることになるはずです。

図 5. ok をクリックした後の新しいコンテンツ
図 5. ok をクリックした後の新しいコンテンツ

このような単純なインターフェースのアップグレードによって、アプリケーションの使いやすさは雲泥の差になります。ページのロードを待つことは (処理速度の遅いサーバーからの場合は特に)、すなわちインターフェースに垢抜けない古いスタイルという印象を与えることです。このインプレース編集のような単純なツールを使えば、実装の複雑さという点でほとんど苦労することなく、すっかり洗練されたアプリケーションを実現できます。

DHTML ウィンドウ

ブラウザーがモーダル・ウィンドウを Web ページに組み込みにくくしているのは、おそらくいいことなのでしょうが、小さいウィンドウが役立つこともたまにはあります。アラートを表示したり、小さなフォームを提示したりするには小型のウィンドウが重宝します。また、ページのコンテンツにかぶさる迷惑な広告を立ち上げるのにも最適な方法ですが、この方法はもちろん無視してください。

いずれにせよ、最初に言ったようにダイナミック HTML (DHTML) ページのウィンドウをビルドするのは易しいことではありません。だからこそ、人気の高い Protoype.js ライブラリーをベースにした、この極めて堅牢なウィンドウ・パッケージは嬉しい発見でした。これは使いやすいだけでなく、インターフェースはスキンの変更も可能で、すべてのブラウザーで効果を発揮します。リスト 7 に、window.html ページを示します。

リスト 7. Window.html
<html>
<head>
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="prototype.js"></script>
<script src="window.js"></script>
</head>
<body>
<script>
var win = new Window( 'myPopup', {
   title: "Terms and Conditions",
   top:70, left:100, width:300, height:200,
   resizable: true, url: "terms.html",
   showEffectOptions: { duration: 3 }
  } 
);
win.show();
</script>
</body>
</html>

上記では、まず prototype.js および window.js ソース・ファイルをヘッダーに組み込み、次に、好みのパラメーターでポップ・オブジェクトを作成しています。パラメーターには、サイズ、位置、タイトル、そしてウィジェットがコンテンツを取得するページの URL が含まれます。 Ajax を使ってページからコンテンツをロードしていますが、コンテンツを取得する方法はこれだけではありません。JavaScript コードを使って動的にコンテンツを設定することも、ページ上の既存の <div> タグにウィンドウをラップすることもできます。

この例では、リスト 8 の terms.html ファイルを参照しています。

リスト 8. Terms.html
<html><body bgcolor="white">
<h1>Terms and Conditions</h1>
<p>In order to use this site you must comply
with the following conditions...</p>
</body></html>

ブラウザーでこのページを立ち上げると、図 6 のウィンドウが表示されます。

図 6. 初期ウィンドウ
図 6. 初期ウィンドウ

2 つの Mac ウィンドウが重なり合っているだけではもちろんありません。これは実際の Firefox ブラウザーのウィンドウ内にある Mac を似せた偽の DHTML ウィンドウですが、いずれにしてもルック・アンド・フィールは同じです。

このウィンドウは、図 7 のように拡大したり、移動したりすることができます。

図 7. 移動してサイズ変更したウィンドウ
図 7. 移動してサイズ変更したウィンドウ

この記事のためだけでなく、個人的な作業のためにもいくつかの DHTML ウィンドウ・ライブラリーを調べてみました。その結果、自信を持って言いますが、私が一番いい印象を持ったのはこのウィンドウ・パッケージです。他のウィンドウ・パッケージにはレンダリングの問題があり、セグメントでレンダリングしたり、あるいはサイズ変更するときの動作が正常でなかったりしました。それに比べ、このウィンドウ・パッケージは本物のウィンドウそっくりで、ブラウザー内にそのままトラップされます。

カルーセル・ウィジェット

ユーザー・インターフェース (UI) の作業をかなりの量こなした人なら誰でも、画面面積の活用が極めて重要だと断言するはずです。特定のスペースにできる限り多くのデータを押し込めつつも、込み合った印象を与えないことが肝心になります。そんなわけで、Apple iTunes のカルーセル・コントロールを初めて目にしたときには、かなりの感銘を受けました。

カルーセル・コントロールは一定の区画スペースに複数の画像を表示します。画像ブロックの左側と右側にはそれぞれ左矢印と右矢印があり、矢印をクリックすると画像が左右にシフトして新しい画像のセットと置き換わります。iTunes では、この画像はアルバム・カバーで、ジャンルごとにカルーセル・コントロールがあります。

スペースの節約はかなりのものです。3 つのスペースに 30 枚のアルバム・カバーを配置することが可能で、しかも各アルバム・カバーはほどほどのサイズで表示されます。また、コントロールは直観的で、スクロール・バーを単純化したようなものです。

カルーセルの欠点は、実装するのが簡単ではないことです。それは特に、左右に動く画像の動画がその魅力の一部であることが原因となっています。そこで嬉しい発見となったのが、jQuery JavaScript フレームワークでビルドされたオープン・ソースのカルーセル、JCarousel です。

リスト 9 に示すように、Web ページに単純なカルーセル・ウィジェットを実装してみました。

リスト 9. Carousel.html
<html>
<head>
<script type="text/javascript" src="js/jquery-1.0.3.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<style type="text/css">
#mycarousel { display: none; }
.jcarousel-scope {  position: relative; width: 255px;
  -moz-border-radius: 10px; background: #D4D0C8;
  border: 1px solid #808080; padding: 20px 45px; }
.jcarousel-list li { width: 81px; height: 81px;
  margin-right: 7px; }
.jcarousel-list li img { border: 1px solid #808080; }
.jcarousel-list li a { display:block;  outline: none;
  border: 2px solid #D4D0C8; -moz-outline:none; }
.jcarousel-list li a:hover { border: 2px solid #808080; }
.jcarousel-next {  position: absolute; top: 45px;
  right: 5px; cursor: pointer; }
.jcarousel-next-disabled { cursor: default; }
.jcarousel-prev { position: absolute; top: 45px;
  left: 5px; cursor: pointer; }
.jcarousel-prev-disabled { cursor: default; }
.loading { position: absolute; top: 0px;
  right: 0px; display: none; }
</style>
<script type="text/javascript">
function loadItemHandler( carousel, start, last, available ) {
  if (available) { carousel.loaded(); return; }
  var cr = carousel;
  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start, last, data); });
};

function appendItemCallback( carousel, start, last, data ) {
  var items = data.match( /(\<img .*?\>)/g );

  for (i = start; i <= last; i++) {
    if ( items[ i - 1 ] == undefined ) break;
    var item = carousel.add( i, getItemHTML( items[i-1]) );
    item.each(function() {
      jQuery("a.thickbox", this).click(function() {
        var t = this.title || this.name || null;
        var g = this.rel || false;
        TB_show(t,this.href,g);
        this.blur();
        return false;
      });
    });
  }
  carousel.loaded();
};

function getItemHTML( item ) {
  var found = item.match( /href=\"(.*?)\"/ );
  var url   = jQuery.trim(found[1]);
  var title = jQuery.trim(found[1]);
  var url_m = url.replace(/_s.jpg/g, '_m.jpg');
  return '<a href="' + url_m +
	'" title="' + title +
	'" class="thickbox"><img src="' + url +
	'" width="' + 75 + '" height="' + 75 +
	'" alt="' + title + '" /></a>';
};

var nextOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };

var nextOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };

var nextDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };

function nextButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")
      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")
      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);
  }
}

var prevOver = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };

var prevOut = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };

var prevDown = function() {
  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };

function prevButtonStateHandler(carousel, button, enabling) {
  if (enabling) {
    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")
      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);
  } else {
    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")
      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);
  }
}

jQuery(document).ready(function() {
  jQuery().ajaxStart(function() { jQuery(".loading").show(); });
  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });
  jQuery("#mycarousel").jcarousel({
    itemVisible: 3, itemScroll: 2, wrap: true,
    loadItemHandler: loadItemHandler,
    nextButtonStateHandler: nextButtonStateHandler,
    prevButtonStateHandler: prevButtonStateHandler
  });
});
</script></head><body><div id="mycarousel">
<div class="loading">
<img src="img/loading.gif" width="16" height="16" border="0" />Loading...</div>
<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-prev" />
<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-next" />
<ul></ul>
</div></body></html>

ご覧のように、今までの例に比べてコードはかなり長くなっています。ですが、コードの大部分はグラフィックスを設定し、サーバーから返される Ajax データを解釈するためのものです。実際、この記事用のコードの大部分はダウンロードに付属の例に基づいているため、コントロールの使い方を学んだり、資料を読んだりする必要はありませんでした。

リスト 10 に、このカルーセル用のデータを示します。

リスト 10. Data.xml
<images>
<img href="pics/image1.jpg" />
<img href="pics/image2.jpg" />
<img href="pics/image3.jpg" />
<img href="pics/image4.jpg" />
</images>

この例では、単純な XML フォーマットのファイルを使っていて、<images> タグに含まれる一連の <img> タグが各画像の URL を保持しています。ただし、このコントロールはネイティブの Ajax ウィジェットではないので、どのフォーマットを使用しても構いません。ここでは XML を解釈するコードを書き込んで、カルーセル内の各スライド要素を作成しています。その結果できあがったのが、図 8 です。

図 8. ページ上での画像カルーセル
図 8. ページ上での画像カルーセル

画像をクリックすると、その画像を表示するページ (または指定された URL) に進むことができます。また、左右の矢印をクリックしてカルーセルをスクロールし、別の画像を表示することもできます。その効果は実に見事なものです。

まとめ

この記事で紹介したのは、市販のものと無料のものを含め、Web で入手可能なウィジェットとツールのうちのほんの一部です。記事の調査中に調べたツールの多くは Ajax を使用していなかったため、この記事の話題には当てはまりませんでしたが、それぞれが注目に値します。とりわけ感動したのは、ダウンロードで入手できる高品質のオープン・ソース WYSIWYG エディターの数々です。ボールド体やイタリック体、あるいはリンクや画像を使ったコンテンツをサイトに記載するためには、テキスト・ボックスで HTML を使わなければならないことにカスタマーが不満を持つことは珍しくありません。これらのエディターは HTML を一切隠してくれるため、ユーザーはワード・プロセッサーのような感覚で編集できます。

WYSIWYG エディターの他、進行状況表示バー、タブ付きダイアログ・ボックス、アコーディオン・コントロール、クロック、日付選択機能、RSS リーダーや OPML (Outline Processor Markup Language) リーダー、さらには対話式端末ウィンドウなどのソリューションもあります。独自の DHTML または Flash コントロールを作成する前に、インターネットで何が利用できるか (無料の場合も珍しくありません) を調べることは絶対に必要です。ここで紹介したようなウィジェットを使用すれば、苦労しなくてもサイトに豊富な対話性を追加できます。


ダウンロード可能なリソース


関連トピック

  • developerWorks XML ゾーン: developerWorks XML ゾーンで XML のすべてについて学んでください。
  • jQuery および prototype.js: 人気の JavaScript フレームワークを調べてください。
  • IBM XML 認証: XML や関連技術の IBM 認定開発者になる方法について調べてください。
  • XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM レッドブックについては、developerWorks XML ゾーンを参照してください。
  • Ajaxian: この優れた情報源で、Ajax、そして Ajax を使用するフロント・エンドのウィジェットについての最新開発情報を入手してください。
  • JCarousel: jQuery フレームワークでビルドされたカルーセル・ウィジェットを試してみてください。
  • SWF/Gauge および SWF/Charts: maani.us が開発した SWF/Gauge と SWF/Charts を入手してください。Flash XML Slideshow ウィジェットもあります。
  • DHTML ウィンドウ: 私が見つけた最高の DHTML ウィンドウ・パッケージを体験してください。
  • Scriptaculous: script.aculo.us サイトで Scriptaculous をダウンロードして、Scriptaculous の詳細を学んでください。Prototype ライブラリーも必要になります。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Open source, Web development
ArticleID=249232
ArticleTitle=Ajax と XML: 5 つのクールな Ajax ウィジェット
publish-date=01162007