ColdFusion 8のAjax機能に関する概要
作成日
30 July 2007
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- ColdFusion 8 (Download trial)
Adobe ColdFusion 8には、Ajaxアプリケーションの迅速な作成を可能にする使いやすいツールなど、多くの改良が加えられています。Ajax（Asynchronous JavaScript and XML）は、よりインタラクティブなWebアプリケーションを作成するために使用できる一連のテクノロジを組み合わせたものです。
この記事では、アプリケーションインタフェースレイアウトやデータバインディングに関連した、ColdFusion 8の新しいAjax機能を使用する方法について説明します。ColdFusion 8のAjax機能は、JSON、SPRYおよびプロキシにも対応していますが、これについては今後の記事でご紹介します。
Ajaxユーザインタフェースレイアウトタグの概要
AJAXアプリケーションは、次の基本的な要素で構成されます。
- アプリケーションの表示とフォーマット化のためのHTMLおよびCSS
- クライアント側の動作に関するスクリプトを作成するためのJavaScript
- 非同期通信を利用するには、
XMLHttpRequest関数を使用します。このAPIは、HTTPプロトコルを介してWebサーバからXML、JSONおよびテキストを転送するためにJavaScriptによって使用されます。 - XMLまたはJSONは、データを転送するためのフォーマットとして使用されます。
新しいAdobe ColdFusion Ajax機能は、次の３つのカテゴリに分類されます。
- アプリケーションインタフェースレイアウト
- データバインディング
- サーバ側コンポーネント（今後の記事で説明）
Ajaxテクノロジを使用してWebアプリケーションを構築した経験がすでにあるユーザは、これらの新しいタグを使用することによって、アプリケーションをさらに簡単かつ効率的に構築できるようになります。Ajaxを使用したことがないユーザは、よりリッチなアプリケーションを作成する手始めとして、これらの新機能を使用できます。
新しいタグの仕組みに触れる前に、新たに追加されたColdFusionタグ、およびAjax機能に対応するようになった既存のColdFusionタグについて簡単にご説明しましょう。
以下のタグを使用すると、Ajaxユーザインタフェースをすばやくレイアウトできます。
CFLAYOUT：次の４種類のレイアウトを設定できます。- 横
- 縦
- フリーフォーム
- タブ付き表示
CFLAYOUTAREA：様々な領域を定義するには、このタグをCFLAYOUTタグの内部で使用します。CFPOD：画面上にタイトルバー付きのポッドを作成します。タイトルバーにはラベルを指定できます。CFWINDOW：Flexを使ったことがあるユーザにとって、このAjaxコンポーネントは<mx:TitleWindow/>と似ています。ポップアップウィンドウとして機能し、スクリプトを使用して表示と非表示を切り替えることが可能です。CFWINDOWでは、サイズ変更を有効にすることもできます。CFMENU：使いやすいこのタグによって、横方向または縦方向のメニューを作成できます。CFMENUITEM：メニューにアイテムを追加するには、このタグをCFMENUタグの内部で使用します。CFTOOLTIP：このタグを使用すると、アプリケーションでツールヒントを簡単に作成し、ユーザにとっての操作性を高めることができます。HTMLフォーマットをツールヒントに適用して、外観を向上させることもできます。CFAJAXPROXY：クライアント側のJavaScriptコンポーネントとColdFusionコンポーネントとの間にJavaScriptプロキシを作成します。このプロキシは、CFC呼び出しから返された値をJSONフォーマットにシリアル化します。CFINPUT：以前からあったタグですが、オートサジェストと呼ばれる便利な新機能が追加されました。オプションのスタティックリストをプログラミングするか、CFCにオートサジェスト属性をバインドすることによって、データソースからデータ候補を取得できます。
さらに、ColdFusion/Ajaxアプリケーションウィザードも新しく追加されました。Eclipse用ColdFusion/Ajaxウィザードプラグインを使用すると、ColdFusion/FLEXウィザードと同様にリッチなデータ指向型アプリケーションをすばやく作成でき、ユーザによるコード記述は一切必要ありません。EclipseでRDSを設定し、Adobe ColdFusion 8サーバへの接続を確立したら、Adobe ColdFusion 8のAjax機能を搭載したCRUD（Create Read Update Delete）ベースアプリケーションを構築できます。
ユーザインタフェースを作成するための新しいAjaxコントロール
以下の節では、操作性向上を目的としたリッチなインタフェースをレイアウトするために使用される、Adobe ColdFusion 8の新しいAjaxコントロールについて説明します。
ページのレイアウト：CFLAYOUT
CFLAYOUTタグでは、境界線、タブ、HBox、VBoxの４種類のレイアウトを作成できます。このタグを使用すると、特定のブラウザに依存しない柔軟なレイアウトを作成するために必要な手間を削減できます。CFLAYOUTタグの内部では、任意の数のCFLAYOUTAREAタグを使用できます。CFLAYOUTAREAタグには、ページ上でレンダリングする他のCFMLを含めることができます。
Flexを使用した経験があれば、HBoxとVBoxが、子要素の方向を横または縦に設定する２種類のレイアウトコンテナであることがわかるでしょう。画面上で要素を位置指定するためのCSSプロパティに精通していない場合は、これらのプロパティの代用としてHBoxとVBoxを使用できます。図１に、簡単な横方向レイアウトを示します。
図１に示すレイアウトの作成には、次のコードが使用されました。
<cflayout type="hbox" style="border:1px solid red;height:200px;width:640px;">
<cflayoutarea name="lbox" title="left box"style="width:300;padding:10px;background-color:##F00;" >
HI! I'm in the left cflayout area
</cflayoutarea>
<cflayoutarea name="rbox" title="right box"style="width:300;padding:10px;background-color:##ccc;">
HEY! I am in the right cflayout area!
</cflayoutarea>
</cflayout>
図２に、簡単な縦方向レイアウトを示します。
図２のレイアウトでは、次のコードが使用されています。
<cflayoutarea title="CFLAYOUT type=vbox" style="background-color:333333;width:95%;height:95%">
<cflayout type="vbox" style="border:1px solid
red;height:200px;width:640px;">
<cflayoutarea name="tbox" title="top box" style="width:300;padding:10px;background-color:##F00;" >
HI! I'm the top cflayout area
</cflayoutarea>
<cflayoutarea name="bbox" title="bottom box" style="width:300;padding:10px;background-color:##ccc;">
HEY! I am in the bottom cflayout area!
</cflayoutarea>
</cflayout>
</cflayoutarea>
これより多少複雑なのが境界線レイアウトです（図３を参照）。このレイアウトはおそらく、折り畳み可能なナビゲーション領域、ヘッダー領域およびフッター 領域、コンテンツゾーンを備えた一般的なサイトレイアウトを作成するための最も簡単な方法です。このタイプのレイアウトは、ColdFusion管理者に よって使用されるレイアウトと同じです。
図３のレイアウトでは、次のコードが使用されています。
<cflayout type="border" style="border:1px solid red;height:200px;width:640px;">
<cflayoutarea position="top" style="height:80px;">
TOP
</cflayoutarea>
<cflayoutarea position="left" style="width:80px;">
LEFT
</cflayoutarea>
<cflayoutarea position="center" style="height:300px;width:400px">
CENTER
</cflayoutarea>
<cflayoutarea position="right" style="height:80px;">
RIGHT
</cflayoutarea>
<cflayoutarea position="bottom" style="height:30px;">
BOTTOM
</cflayoutarea>
</cflayout>
境界線タイプのレイアウトを使用すると、折り畳み可能パネルやクローズ可能パネルなども指定できます。例えば、CFLAYOUTAREAタグにcollapsible="true"属性を追加するだけで、ナビゲーションを折り畳み可能にすることができます。この機能が正しく動作するようになるには、タイトル属性も指定する必要があります（図４を参照）。同様に、closable="true"属性を指定すると、クローズ可能なパネルを簡単に実装できます。この機能の優れた点は、パネルが開いた状態から閉じた状態（またはその逆）に徐々に推移することです。その結果、従来の方法よりスムーズにパネルが開閉し、突発的な変化の少ない優れたインタラクションがアプリケーションとユーザの間に実現します。CFLAYOUTタグを使用すると、HTMLやCSSの調整に多大な時間を費やさなくても、あらゆるブラウザでパネルが正確な位置に配置されるようになるので、開発者にとって大きな時間の節約になります。
![前の例の左寄せレイアウトタグにcollapsible="true"属性とtitle="Navigation"属性を追加したもの](/content/dotcom/jp/devnet/coldfusion/articles/cfajax_overview/_jcr_content/articlecontentAdobe/image_2.adimg.mw.460.jpg/1280727151792.jpg "前の例の左寄せレイアウトタグにcollapsible="true"属性とtitle="Navigation"属性を追加したもの")
図４の追加機能に関しては、次のコードが使用されています。
<cflayoutarea position="left" style="width:80px;" collapsible="true" title="Navigation">
nav 1<br/>
nav 2<br/>
</cflayoutarea>
ナビゲーションラベルの付いたヘッダーをクリックすると、左寄せパネルの折り畳み（図５の状態）と展開を切り替えることができます。
ページのレイアウト：CFLAYOUT
タブ付きインタフェースを構築することは、多くのアプリケーションで必要になります（図６を参照）。ColdFusion 8のAjax機能を使用すると、このプロセスを簡略化し、開発時間を短縮できます。クロスブラウザのタブ付きUIの開発に時間を無駄に使う必要はありません。
図６に示すレイアウトのコードは次のとおりです。
<cflayout type="tab" tabheight="350">
<cflayoutarea title="Tab 1">tab 1 content</cflayoutarea>
<cflayoutarea title="Tab 2">tab 2 content</cflayoutarea>
<cflayoutarea title="Tab 3">tab 3 content</cflayoutarea>
</cflayout>
生成されたレイアウト要素は、レンダリング後のページでJavaScriptによって参照および制御できます。開発者は、自分で作成したコントロールを使用して、必要に応じてユーザインタフェースを駆動することができます。スタイルに関しては、CSSを使用してタブの外観を調整できます。この機能は、Yahoo!のユーザインタフェースコントロールに基づいています。そのため、スタイルの識別や調整に役立つ多数のオンラインガイドを参照することが可能です。
CFWINDOWの使用
このタグを使用すると、アプリケーションでポップアップウィンドウを作成および制御できます。Flexを使い慣れているユーザにとって、これはTitleWindowコンポーネントを使用することと似ています。このポップアップウィンドウには、次の特徴があります。
- タイトルを指定できるタイトルバー
- ウィンドウはアプリケーション内の任意の場所に配置可能
- モーダル（このウィンドウが画面で開いている間、ユーザは、ウィンドウを表示しているアプリケーションを操作できません）
- ドラッグ動作
- サイズ変更可能
- クローズ可能
- 作成したポップアップウィンドウはJavaScriptで制御可能
以下に、CFWINDOWタグの例を示します。
<cfwindow name="myWindow" title="ColdFusion Window Example"
draggable="true"
resizable="true"
initshow="true"
height="250"
width="250"
x=375
y=0>
ドラッグ動作とサイズ変更動作はtrueに設定されています。ウィンドウの幅と高さ、およびウィンドウをアプリケーションのどこに表示するかを指定するX座標とY座標がアプリケーションに表示されます。
属性initshow="true"は、ページが読み込まれたときに、ウィンドウが自動的に初期化され、画面に表示されることを意味します。これをfalseに設定した場合は、ColdFusion.Window.show JavaScript関数を呼び出すことによって、ウィンドウを後で開くことができます。ウィンドウのイベントハンドラを作成することもできます。次のコード例では、initApp関数を使用して、ウィンドウwin1のイベントハンドラを２つ作成します。この例の２つのハンドラでは、ブラウザにアラートを表示します。
次のフォームには２つのボタンがあり、呼び出すJavaScript関数はonClick属性によって指定されます。今回は、ColdFusion.Window.show(windowname)を使用して、アプリケーションのウィンドウを制御します。
<html>
<head>
<script>
function initApp(){
ColdFusion.Window.onShow("win1", openWindowHandler);
ColdFusion.Window.onHide("win1", closeWindowHandler);
}
function closeWindowHandler(){
alert("You closed me!");
}
function openWindowHandler(){
alert("You opened me!");
}
function showMyWindow(){
ColdFusion.Window.show("win1");
}
function hideMyWindow(){
ColdFusion.Window.hide("win1");
}
</script>
</head>
<body onload="initApp()">
<cfwindow name="win1"
title="ColdFusion Window"
draggable="true"
resizable="true"
initshow="false"
height="250"
width="250"
x=375
y=0/>
<form>
<input type="button" value="Show my window" onClick="showMyWindow()">
<input type="button" value="Hide my window" onClick="hideMyWindow()">
</form>
</body>
</html>
メニューの作成：CFMENU
これまで、サイトナビゲーションツールを開発する方法として、順番がばらばらなリストと必要以上に複雑なスタイルシートをHTMLで使用することは、決して珍しいことではありませんでした（図７を参照）。この状態に甘んじる必要はありません。アドビは、新しいCFMENUタグによって、サイトナビゲーションツールの開発プロセスも簡略化します。
どのようにしたらプロセスを簡略化できるでしょうか。
図９に示すメニューは、次のコードによって作成されます。
<cfmenu type="vertical" width="200">
<cfmenuitem display="File">
<cfmenuitem display="New"/>
<cfmenuitem display="Save"/>
<cfmenuitem display="Close"/>
<cfmenuitem display="Exit"/>
</cfmenuitem>
<cfmenuitem display="Edit"/>
<cfmenuitem display="Tools"/>
</cfmenu>
このコードには、複雑なCSSやJavaScriptが一切含まれておらず、管理と読み取りが簡単なサブメニューをレンダリングできる単純なメニューしか含まれていません。
ヒントの表示：CFTOOLTIP
場合によっては、ユーザにガイダンスを示すための説明をWebアプリケーションに配置することが必要となります（図８を参照）。JavaScriptライブラリを見つけてこれを手動で行なうこともできますが、CFTOOLTIPタグを使用すると、このプロセスを簡略化できます。ツールヒントに表示するテキストを指定して、このツールヒントを適用するコンテンツをCFTOOLTIPタグで囲みます。
<cftooltip tooltip="Stuff on the cat!">
<img src="stuffoncat.jpg" />
</cftooltip>
ページセクションの更新：CFDIV
Ajaxユーザインタフェースを使用する利点の１つに、ページのセクションを選択的に更新できることがあります。Adobe ColdFusion 8には、更新可能な領域を定義するためのCFDIVという新しいタグが用意されています。CFDIVタグは、「バインディング」の概念に基づいてこのタスクを実行します。Adobe FlexやSpryを使ってアプリケーションを開発した経験がある場合は、このアプローチにすでに慣れているはずです。
バインディングの方法は２とおりあります。最初の方法は、簡単なURLバインディングです。
<cfdiv id="div1" bind="url:myPage.cfm"></cfdiv>
この方法では、myPage.cfmのコンテンツがdivタグに自動的に読み込まれます。URLバインディングで便利なのは、テンプレートを参照することによって、必要な項目をすぐに生成できることです。このテンプレートには、別の種類のバインディング、つまりページ上のコントロールに対するバインディングが挿入されるので、テンプレートにデータを渡すことが当然必要となります。
<cfmenu name="nav" type="horizontal" bgcolor="##336699" fontcolor="##fff">
<cfmenuitem display="Page One"
href="javaScript:ColdFusion.navigate('pageOne.cfm','myDiv')" style="color:##fff;">
</cfmenuitem>
<cfmenuitem display="Page Two"
href="javaScript:ColdFusion.navigate('pageTwo.cfm','myDiv')" style="color:##fff;">
</cfmenuitem>
</cfmenu>
<cfdiv id="myDiv" bind="url:pageOne.cfm">
</cfdiv>
この例では、divタグによってまずpageOne.cfmが読み込まれます。CFMENUタグを使用して簡単なメニューを作成すると、href属性にJavaScriptが含まれるようになります。関数ColdFusion.navigateでは、２つの引数が指定されます。最初の引数は、読み込むページを指定し、２番目の引数は、このページをmyDivというIDでCFDIVタグに読み込むことを指定します。ユーザが「ページ２」というメニューアイテムをクリックすると、pageTwoを読み込むための要求が開始され、ページがCFDIV領域に読み込まれる間、読み込みの進捗状況を示す画像がユーザに対して表示されます。
CFDIVタグは、次の構文を使用してCFCにバインドすることもできます。
<cfdiv id="nickname" bind="cfc:states.getNickname({cbState})"></cfdiv>
ColdFusionアプリケーションにおけるデータ関連作業にCFCを頻繁に使用する場合は、この構文を使用した方が格段に便利です。
データ操作のための新しいAjaxコントロール
データバインディングについては、CFDIVに関する前の節ですでに触れました。データバインディングは、Ajax駆動型アプリケーションを開発する際に非常に便利な機能です。ColdFusionタグの多くは、ColdFusion 8のデータバインディングと連動する機能を継承しています。そのため、開発者の側には、更新された情報をレンダリングする際の作業がほとんど発生しません。
テーブル形式のデータ：CFGRID
CFGRIDは、めったに使用されないColdFusionタグの１つに数えられますが、Adobe ColdFusion 8では見直す価値が十分にあります。注目に値する機能としては、リモートデータセットのバインディング、列の並べ替えと順序変更、レコードセットのページ指定などが挙げられます。以前のバージョンのColdFusionでは、CFGRIDがJavaアプレットまたはFlashコントロールとして実装されていました。HTMLバージョンはJavaScriptを使用して更新され、任意の環境で実行できるようになっています。
CFGRIDコントロールを生成するコードは、以前と同様に簡単です。次の例では、新しいCFCバインディング機能を使用して、グリッドでレンダリングするデータを指定します。
<cfform>
<cfgrid name="authors" format="html" bind="cfc:authors.getAuthors({cfgridpage}, {cfgridpagesize}, {cfgridsortcolumn}, {cfgridsortdirection})">
<cfgridcolumn name="AU_FNAME" header="First Name" width="100"/>
<cfgridcolumn name="AU_LNAME" header="Last Name" width="100"/>
<cfgridcolumn name="ADDRESS" header="Address" width="300"/>
<cfgridcolumn name="CITY" header="City" width="100"/>
<cfgridcolumn name="STATE" header="State" width="100"/>
</cfgrid>
</cfform>
バックエンドCFC（authors）には、グリッドに挿入されるデータを構造として返す単一のメソッド（getAuthors）が含まれます。
このコードを実行すると、図11に示す出力が生成されます。
生成されたグリッドには、出力ページ間を移動するために必要なコントロールがすべて含まれています。列見出しをクリックすると、その列に基づいてデータが並べ替えられます。列見出しをドラッグすると、画面に列が表示される順序を変更できます（図12を参照）。
ここでは、CFGRIDコントロールのCFCバインディング機能についてしか説明しませんでしたが、URL（前述のCFDIVの例を参照）やJSONをバインド先に指定することもできます。データ集約型の出力ニーズを満たすには、この点をよく考察してください。
CFTREEでのデータバインディング
階層構造の情報を表示する必要がある場合、CFTREEタグは非常に便利です。これまでに示した例と同様に、bind属性を使用して、CFCからのダイナミックデータをツリーに挿入できます。
<cfform name="testform">
<cftree name="t1" format="html">
<cftreeitem bind="cfc:makeTree.getNodes({cftreeitemvalue},{cftreeitempath})">
</cftree>
</cfform>
CFRICHTEXTEDITORの使用
FCKeditorとこの簡単なタグを組み合わせて使用すると、リッチなテキストエディタをユーザに対して表示できます。エディタがユーザに対して表示される方法をカスタマイズすることもできます。
<cftextarea richtext=true name="text01" />
CFAUTOSUGGESTの使用
アプリケーションにオートサジェスト機能を簡単に組み込むことができます。CFINPUTタグを使用すると、データ候補の取得元であるダイナミックソースまたはスタティックソースを指定できます。また、autosuggestMinLength属性を設定すると、何文字入力したらデータ候補が表示されるようになるかを指定できます。
スタティックなデータ候補を表示するには、次の例に示すように、コンマ区切りリストを指定します。
<cfinput type="text" autosuggest="Alabama,Alaska,Arkansas,Arizona,Maryland,Minnesota,Missouri" name="city" delimiter=",">
ドロップダウンメニューが表示されている間、ユーザは上向き矢印と下向き矢印、およびEnterキーを使用して、ハイライト表示されたラベルを選択できます。
オートサジェスト値には、ColdFusionコンポーネントからのダイナミックデータを使用することもできます。
CFAJAXIMPORTの使用
Ajaxコントロールが含まれた別のColdFusionテンプレートをCFDIV領域に動的にプルすることもできます。これらのコントロールをサポートするJavaScriptライブラリがメインページに読み込まれていることを確認する必要があります。ColdFusionでページに読み込む必要があるライブラリを指定することによって、レイアウトに読み込んだ別のページでもこれらのライブラリを使用できるようにするには、CFAJAXIMPORTタグを使用します。オートサジェスト機能、日付フィールドおよびツリーコンポーネントを使用するページが他にある場合は、divタグをメインページに読み込みます。このタグは、Ajaxライブラリをページに含めるようにColdFusionサーバに指示するうえで、メインのアプリケーションページで必要となります。ライブラリをクラスに読み込む必要がある場合、この方法は、ActionScriptのimportステートメントに相当します。
<cfajaximport tags="CFINPUT-AUTOSUGGEST, CFINPUT-DATEFIELD, CFTREE"/>
おわかりのとおり、Adobe ColdFusion 8のAjaxタグは、リッチなユーザインタフェースを作成する開発者に対し、卓越した機能と生産性向上のメリットを提供します。作業の迅速化を可能にする効率的なタグをフルに活用して、アプリケーションのレイアウト、ページ更新を必要としない画面セクションの読み込み、充実したフォームコントロール、ColdFusionコンポーネントとの簡単な接続を実現できます。ColdFusion 8の新しいAjax機能の詳細については、ColdFusionデベロッパーセンターを定期的にチェックしてください。
