HTML フォームのコラボレーティブなエクスペリエンスを可能にする

WebSphere Application Server の Feature Pack for Communications Enabled Applications を使用して、コラボレーティブな動的 HTML フォームを作成する

WebSphere® Application Server Feature Pack for CEA (Communications Enabled Applications) を使用すれば、一層コラボレーティブな Web エクスペリエンスをユーザーに提供することができます。そうしたエクスペリエンスの一例として、Web ページにクリック・ツー・コールの機能を直接組み込み、皆さんのサイトを顧客と一緒にブラウズしてナビゲートできるようにしてください。この記事では、Web サイトのユーザーが協力してフォームを完成させて情報を送信できる双方向の HTML フォームを作成する方法を説明します。ユーザーの満足度、そしてユーザーが送信するデータの正確さを劇的に向上させる方法を学んでください。

Dustin Amrhein, Technical Evangelist, IBM

Author photoDustin Amrhein は、WebSphere Application Server 開発チームのメンバーとして IBM に入社しました。この開発チームに在籍している間、主にWeb サービス・インフラストラクチャーと Web サービス・プログラミング・モデルに取り組んでいました。さらにJava ランタイムを対象とした RESTful なサービス・フレームワークの開発にも携わっていました。現在の任務は、技術エバンジェリストとしてIBM WebSphere ポートフォリオの新しい技術を広めることです。


developerWorks
        プロフェッショナル著者レベル

Andrew Ivory, Software Engineer, Master Inventor, IBM

Photo of Andy IvoryAndy Ivory は、Communications Enabled Applications Feature Pack のIBM 顧問ソフトウェア・エンジニア兼アーキテクトです。2002年12月に Pennsylvania State University でコンピューター・エンジニアリングの理学博士号を取得した後、2003年1月に IBM に入社しました。



2010年 7月 20日

はじめに

My developerWorks の Web Development グループに参加してください

My developerWorks の Web Development グループで、他の開発者と Web 開発について議論し、リソースを共有してください。

まだ My developerWorks のメンバーになっていなければ、今すぐ登録してください!

皆さんが顧客との対話に Web を使用しているとしたら、きっと、オンライン・ユーザーの満足度を向上させるための方法を探していることでしょう。Web サイトのユーザーの満足度を向上させる方法としてよく使われているのは、ページの応答性を強化する、直観的で表現豊かなインターフェースを作る、サイトをまとまりのあるレイアウトにするなどの方法です。応答性、インターフェース、サイトのレイアウトはユーザーの満足度にとって重要ですが、他にも考慮に値する事項はあります。例えば、コミュニケーションとコラボレーションです。よりコラボレーティブなエクスペリエンスを可能にすれば、Web サイトに対するユーザーの満足度を高めることができます。コラボレーション機能によって、ユーザーは例えば以下のことを行えるようになるからです。

  • 皆さんが保守する Web サイトを他のユーザーと共同でブラウズする
  • Web ページに組み込まれたボタンのクリックによって、お客様サービス担当者を電話で呼び出す
  • Web フォームを送信する前に、フォームの内容が正確かつ完全であることを確実にするために、お客様サービス担当者と一緒にフォームを操作する

この記事では、読者に WebSphere Application Server Feature Pack for CEA に含まれるウィジェットについての基本的な知識があることを前提とします。詳しくは、「Extending widgets in the WebSphere Application Server Feature Pack for CEA」を参照してください。

このようなコラボレーション機能は、WebSphere Application Server Feature Pack for Communications Enabled Applications を使うことによって提供することができます。このフィーチャー・パックには、クリック・ツー・コール、共同ブラウズ、双方向フォームの機能を組み込むための Dojo ウィジェットが含まれています。これらの機能の使用ケースには限りがないと言ってもよいほどです。

この記事で取り上げるシナリオでは、オンライン・フォームに入力してそのフォームを送信しようとしている顧客をお客様サービス担当者が支援できるようにするために、3 つのウィジェットを実装します。


シナリオ

あなたは、Acme Insurance Company という架空の保険会社の Web サイトの保守を担当しているとします。Acme 社では、お客様サービス担当者が新しい請求フォームを入力するのに困っている顧客と素早く効果的に連絡を取れるようにするために、WebSphere Application Server Feature Pack for CEA を利用しようと計画しています。

この記事では、WebSphere Application Server Feature Pack for CEA を利用したソリューションを作成する手順を説明します。手順に沿って、Acme 社のオンライン請求作成プロセスに、以下の機能を追加していきます。

  • 新規請求フォームでボタンをクリックすると、お客様サービス担当者を電話で呼び出す (クリック・ツー・コール) 機能
  • ボタンをクリックすると、顧客とお客様サービス担当者の両方が請求フォームを表示してデータを操作することが可能な、共同ブラウズ・セッションを開始する機能
  • 顧客が請求フォームにデータを入力し始めると、顧客とお客様サービス担当者が共同でブラウズしているフォームに自動的にコピーする機能
  • 双方向フォームで共同作業する際に表示および操作可能なデータを制御する機能

次のセクションでは、初期段階の請求作成フォームを検討し、そのフォームにクリック・ツー・コール機能を直接組み込む方法を説明します。


クリック・ツー・コール機能の追加

このシナリオでは、claimform.html という既存のフォームから作業を開始します。顧客はこのフォームを使用して、オンラインで新しい請求を送信します。

図 1. claimform.html ページ
名前、保険証券番号、事故の情報などの入力を求めるフォーム

現時点のフォームは極めて基本的なもので、顧客がログインし、必要な請求情報を入力した後、「Submit Claim (請求の送信)」をクリックしてフォームを送信することによって Acme 社に処理を依頼するという仕組みとなっています。

ここで、顧客の一人が請求フォームに入力している最中にわからないことが出てきた場合を考えてみてください。例えば、保険証券番号を忘れてしまったり、請求金額に含める正確な内容を知りたいといった場合です。今の時点では、顧客はオンラインでの作業を中止し、問い合わせ用の電話番号を調べてから、その番号に電話をかけなければなりません。この作業には時間がかかるばかりか、恐らく請求作成プロセスを初めからやり直さなければならなくなります。これでは顧客の不満につながり、最終的には顧客を失ってしまう恐れがあります。顧客が請求作成フォームでの作業を中断することなくお客様サービス担当者に電話をかけられるとしたら、手間が省け、時間の節約になります。

このシナリオにうってつけなのが、WebSphere Application Server Feature Pack for CEA の ClickToCall ウィジェットです。このウィジェットは claimform.html ページに直接組み込むことができるため、顧客はページを離れたり、請求作成プロセスを中断したりすることなく、お客様サービス担当者に電話をかけることができます。

必要な作業は、HTML コードに 2 つの小さな変更を加えることだけです。まず、WebSphere Application Server Feature Pack for CEA が ClickToCall ウィジェット用に提供している JavaScript ファイルと CSS ファイルをインポートするために必要な import 文を追加します (リスト 1 を参照)。

リスト 1. claimform.html ページの import 文
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
  djconfig="parseOnLoad: true, isDebug: false">
</script>
                
<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");

</script>

必要な CSS ファイルと JavaScript ファイルをインクルードした後、HTML コードでフォームの表に新しい行を追加して、ClickToCall ウィジェットを追加します (リスト 2 を参照)。

リスト 2. ClickToCall ウィジェットの HTML 宣言
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost">
      </div>
   </td>
</tr>

リスト 2 の例では、div 要素内で ClickToCall ウィジェットを宣言し、widgetNumber 属性で宛先 SIP (Pession Initiation Protocol) URI を CSR@localhost として宣言しています。リスト 1 とリスト 2 の HTML コード、そして JavaScript コードを追加すると、claimform.html ページは図 2 に示すように更新されます。

図 2. 更新後の claimform.html ページ
図 1 と同じフォームに「Call Me (電話)」ボタンが追加されています。

顧客がお客様サービス担当者と連絡をとるには、自分の電話番号を入力して「Call Me (電話)」ボタンをクリックします。すると、ClickToCall ウィジェットの widgetNumber 属性に含まれる SIP URI で指定された電話に通知が行き、顧客が入力した番号に電話がかかります。


共同ブラウズおよび双方向フォームの追加

次は、顧客が請求フォームの入力を開始したものの、保険証券番号が見つからないという場合を考えてください。この場合、顧客は新しい ClickToCall ウィジェットを使ってお客様サービス担当者に電話をすることができます。担当者は顧客の ID を確認した後、保険証券番号を調べて、その顧客に伝えます。ClickToCall ウィジェットが追加される前よりは手間がかかりませんが、それでもまだ、理想的ではありません。お客様サービス担当者は電話で長々とした保険証券番号を読み上げ、顧客は番号を聞いて、その情報をフォームのフィールドに入力しなければならないからです。この情報伝達の間に、番号を聞き間違えると、保険証券番号フィールドに誤ったデータが入力されてしまいます。

それよりも遥かに優れたエクスペリエンスとなるのが、顧客とお客様サービス担当者が新しい請求作成フォームを一緒にブラウズして操作することです。そうすれば、お客様サービス担当者は HTML フォームで直接顧客を支援できるため、電話で情報を交換する必要がありません。わずかな数のウィジェットを追加するだけで、まさにこの機能を実現することができます。

最初のステップは、前のセクションで claimform.html ページに組み込んだ ClickToCall ウィジェットが、共同ブラウズ機能をサポートできるようにすることです。また、claimform.html ページにおける CSS の import 文を更新する必要もあります (リスト 3 を参照)。

リスト 3. 更新後の claimform.html ページの import 文
<style type="text/css">
    @import "ceadojo/dijit/themes/tundra/tundra.css";
    @import "ceadojo/dojo/resources/dojo.css";
    @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
	@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
	@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

ここで、既存の ClickToCall ウィジェット宣言に 3 つの新しい属性を追加します (リスト 4 を参照)。

リスト 4. 更新後の ClickToCall ウィジェット
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost" 
           enableCollaboration="true"  
           canControlCollaboration="true"           
           defaultCollaborationUri="collabform.html">
      </div>
   </td>
</tr>

true に設定された enableCollaboration 属性によって、共同ブラウズ機能が ClickToCall ウィジェットの一部として組み込まれます。true に設定された canControlCollaboration 属性が意味するのは、お客様サービス担当者が顧客に共同ブラウズ機能の制御を渡すことにした場合、顧客がこの機能を制御できるということです。そして最後の defaultCollaborationUri 属性の値が、共同ブラウズ・セッションでロードする初期ページを指定します。

collabform.html ページについて説明する前に、ClickToCall ウィジェットを共同ブラウズ機能と併せて使用する場合に知っておくべき重要な事項があります。顧客との共同ブラウズ・セッションを開始するには、お客様サービス担当者がアクセス可能なページに、着信呼び出しをリッスンして共同ブラウズ・セッションを開始するための手段がなければなりません。この機能を提供するのが、WebSphere Application Server Feature Pack for CEA の CallNotification ウィジェットです。

CallNotification ウィジェットを使用する別個のページ csrhome.html は、顧客からの呼び出しをリッスンし、請求作成フォームを顧客と共同ブラウズするための機能を提供します。前に使用したウィジェットでの方法と似ていますが、リスト 5 に、必要な CSS ファイルをインポートする方法を示します。

リスト 5. CallNotification ウィジェットの import 文
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false">
</script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/cea/widget/CallNotification/CallNotification.css";
      @import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
      @import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

import 文を追加した後、ページの表内で CallNotification ウィジェットを宣言します (リスト 6 を参照)。

リスト 6. CallNotification ウィジェットの宣言
<table cellspacing="25" cellpadding="25" class="formContent">
   <tr><th style="font-weight:bold;font-size:large">Acme Insurance Claim 
        Hotline
       </th>
   </tr>
   <tr>
      <td><div ceadojoType="cea.widget.CallNotification" 
               widgetNumber="sip:CSR@localhost"   
               enableCollaboration="true" 
               canControlCollaboration="true" 
               defaultCollaborationUri="collabform.html"></div>
      </td>
   </tr>
</table>

CallNotification ウィジェットの属性は、claimform.html ページに追加した ClickToCall ウィジェットの属性とまったく同じです。このウィジェットの場合、widgetNumber 属性の値は、ウィジェットが呼び出しをリッスンする番号を指定します。顧客が ClickToCall ウィジェットを使用したときに発生する sip:CSR@localhost 電話への着信呼び出しは、この CallNotification ウィジェットの通知という結果になります。この場合も同じく、必要なコラボレーション属性が定義され、defaultCollaborationUri は claimform.html ページの ClickToCall ウィジェットに設定された値と同じ値に設定されます。この新しい csrhome.html ページにより、図 3 に示すウィジェットが表示されます。

図 3. claimform.html ページに表示される CallNotification ウィジェット
電話、2 人の人物、切断のそれぞれを表すアイコンが示されたセクション

CallNotification ウィジェットに着信呼び出しをアクティブにリッスンさせるようにするには、まず、ClickToCall ウィジェットと CallNotification ウィジェットがそれぞれの defaultCollaborationUri 属性で参照する collabform.html ページを作成しなければなりません。

新しく作成する collabform.html ページには、元の claimform.html ページでの元のフォームをフィールドごとにコピーしたフォームを含めます。この新規ページでは、通常の HTML フォームではなく、TwoWayForm ウィジェットを使用します。そのための最初のステップも同じく、ページに必要な CSS ファイルと JavaScript ファイルをインポートすることです。

リスト 7. collabform.html ページの場合の import 文
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false"></script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/TwoWayForm/TwoWayForm.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

claimform.html ページの body セクションに含まれる HTML を、collabform.html ページの body セクションにコピーします。form 要素の後には、cea.widget.TwoWayForm という値を持つ ceadojoType 属性を指定します (リスト 8 を参照)。

リスト 8. TwoWayForm ウィジェットの宣言
<form id="claimReqForm" ceadojoType="cea.widget.TwoWayForm"  
      style="background-color:rgb(223,223,223)">

上記のちょっとした変更の他、コピーした HTML に必要な変更は、ClickToCall ウィジェットを削除することだけですが、この例ではその必要はありません。この特定のページは、共同ブラウズ・セッションのコンテキストでしか使用しないためです。collabform.html ページを表示することにしたとしても、図 1 とまったく同じ出力が表示されます。

請求リクエスト・フォームの初期呼び出しと共同ブラウズのフローをテストする準備はほぼ完了しています。あとは、アプリケーションのテストを行うために必要なテレフォニー・コンポーネントを構成するだけです。この例の場合、そのための手順は WebSphere Application Server Feature Pack for CEA のインフォメーション・センターで調べることができます。記事の例では、一方の電話番号を sip:CSR@localhost で登録し、もう一方の電話番号を sip:Customer@localhost で登録します。


共同ブラウズ機能のテスト

テレフォニー・インフラストラクチャーの準備ができたら、csrhome.html ページをロードし、「Start call notification (呼び出し通知の開始)」アイコンをクリックして CallNotification ウィジェットをアクティブにします。図 4 に示すようにステータスが変わり、CallNotification ウィジェットが有効になって、着信呼び出しを待機している状態になったことが示されます。

図 4. CallNotification ウィジェットの起動
ウィンドウの電話アイコンの下にあるボックスに「Available (有効)」と表示されています。

この例では、別のブラウザーを開きます (WebSphere Application Server Feature Pack for CEA は cookie を使用してセッション状態を保管するため、同じブラウザーの別のウィンドウではなく、別のブラウザーでなければなりません)。次のステップは、claimform.html ページを開くことです。仮に、顧客が名前を入力するところから請求作成プロセスを開始したものの、その後、助けが必要になったとします。そこで、顧客は自分の電話番号として sip:Customer@localhost を入力し、「Call Me (電話)」をクリックします。これにより、sip:CSR@localhost の電話への呼び出しが開始され、呼び出しに応答があった時点で、sip:Customer@localhost の電話が折り返し呼び出されます。電話がつながると、claimform.html ページの ClickToCall ウィジェットのステータスが更新されます (図 5 を参照)。

図 5. ClickToCall ウィジェットの接続ステータス
この画面には sip:Customer@localhost と接続している状態であること、そして切断用のアイコンと共同ブラウズ用のアイコンが示されています。

csrhome.html ページを開くと、CallNotifcation ウィジェットのステータスと同じように更新されているはずです (図 6 を参照)。

図 6. CallNotification ウィジェットの接続ステータス
この画面には sip:CSR@localhost と接続している状態であること、そして切断用のアイコンと共同ブラウズ用のアイコンが示されています。

共同ブラウズ・セッションを開始するには、ClickToCall ウィジェットと CallNotification ウィジェットの両方で共同ブラウズ用のアイコンをクリックします。すると、それぞれのブラウザーでモーダル・ウィンドウが開き、ウィンドウ枠内に collabform.html ページが表示されます。

図 7. 共同ブラウズ・セッション用のモーダル・ウィンドウ
この画面には、入力が必要な事故情報フィールドが示されています。

セッションの制御権は最初、CallNotification ウィジェットから共同ブラウズ・セッションを開始したお客様サービス担当者にあります。双方向フォームの機能をテストするには、お客様サービス担当者のウィンドウで「Policy number (保険証券番号)」フィールドに値を入力します。顧客の共同ブラウズ・セッションでも、同じフィールドに同じ値が表示されるはずです。

図 8. 双方向フォームのデータ転送
事故情報フィールドが表示された画面の一部。強調表示されたフィールドに保険証券番号が入力されています。

これで正しい保険証券番号が入力されたので、顧客は請求データの入力を再開することができます。図 8 に示すように、顧客が入力したデータはお客様サービス担当者のウィンドウでは強調表示されます。このように、ユーザーの間で制御を受け渡すことなく、2 人のユーザーがフォームのデータを同時に協力して入力することができます。


双方向フォームでの機密保持

オンライン・フォームに社会保障番号 (訳注: 社会保障番号は、米国社会保障局が米国の住民に対して発行している、個人を特定できる番号) やクレジット・カードの番号、そして自宅の住所などの個人情報を入力することはよくあります。双方向フォームでは、対話の一方のユーザーだけが内々に知るデータを含めるように作成する場合も考えらます。サンプルの請求作成フォームで、お客様サービス担当者が事故の相手側の名前を見られるのでは、プライバシーを保つ上で賢いこととは言えません。顧客だけが事故の相手側の名前を入力し、表示できるようにするには、TwoWayForm ウィジェットの要素に特殊な 2 つの属性を使用します。

HTML エディターで collabform.html ページを開き、「Name of other party (相手側の名前)」というラベルが付いた入力フィールドを見つけてください。元の宣言は、リスト 9 に記載するようになっています。

リスト 9. 相手側名前入力フィールドの元の宣言
<input type="text" ceadojoType="dijit.form.TextBox" id="otherName"   
           name="otherName"></input>

顧客だけがこの入力要素の値を編集できるようにして、お客様サービス担当者のウィンドウでは値をマスクするには、ceaCollabWriteAccess 属性と ceaCollabFilter 属性を使用します。

リスト 10. 書き込みおよび読み取り機能の制御
<input type="text" ceaCollabWriteAccess="reader" 
       ceaCollabFilter="default" ceadojoType="dijit.form.TextBox" 
       id="otherName" name="otherName"></input>

ceaCollabWriteAccess 属性を reader に設定すると、セッションの読み取り側だけが、入力要素の値を編集できるようになります。この例で読み取り側に該当するのは、顧客です。セッションを開始したお客様サービス担当者は書き込み側となります。ceaCollabFilter 属性のデフォルト値によって、書き込み側 (この場合は、お客様サービス担当者) のウィンドウでは入力値がマスクされます。したがって、ウィンドウの表示は図 9 のようになります。

図 9. お客様サービス担当者のウィンドウ内でマスクされた値
この事故フォームでは、強調表示された「Name of other party (相手側の名前)」フィールドにアスタリスクが表示されています。

ceaCollabFilter 属性のデフォルト値では、デフォルトのマスク関数が使用されます。デフォルトのマスク関数は図 9 に示すように、入力要素の内容を * 文字のストリングに置き換えます。必要に応じて、独自のカスタム・マスク関数を指定することもできます。それには、ceaCollabFilter 属性の値として関数の名前を指定することになります。この関数はストリング (フィールドの元の値) を引数として受け入れ、マスクされた値を返します。


共同ブラウズ・フォームへのデータ転送

顧客が請求作成フォームにデータを入力し始めた後に、問題に突き当たったとします。その場合、顧客はクリック・ツー・コールおよび共同ブラウズ機能を使用して、お客様サービス担当者の助けを求めます。この仕組みは機能するようにはなっていますが、Web サイトのユーザーが claimform.html ページでそれまでに入力したフォーム・データは、共同ブラウズ・セッションの開始時に collabform.html ページのフォームに自動的に転送されることはありません。そのため、顧客は共同セッションで請求フォームに情報を再入力しなければならなくなります。明らかにこれはかなり面倒な作業です。幸い、いくつかのウィジェットの振る舞いを拡張して、元の請求作成フォームの情報が共同ブラウズ・セッションの双方向フォームにコピーされるようにすることで、ユーザーの手間を省くことができます。

Dojo ウィジェット全般の拡張方法、あるいは具体的な WebSphere Application Server Feature Pack for CEA ウィジェットの拡張方法についてよく知らない場合は、前述のチュートリアルを参照してください。このチュートリアルに、拡張 WebSphere Application Server Feature Pack for CEA ウィジェットを作成し、パッケージ化してアプリケーションで利用する方法が説明されています。

請求書作成の共同ブラウズ・セッションの開始時にフォーム・データをコピーするために必要な機能を提供するには、以下の手順に従います。

  1. 新規モジュールを作成する

    アプリケーションで拡張成果物を保持するための新規フォルダー構造を作成します。

  2. ClickToCall ウィジェットのテンプレートを変更する

    ClickToCall ウィジェットのテンプレートを変更して、要素のコピー元とするフォームの名前を指定する属性を組み込みます。

  3. ClickToCall ウィジェットの JavaScript を変更する

    ウィジェットの JavaScript を変更して、新しいパッケージ名を反映するとともに、新規 CollaborationDialog ウィジェットを参照します。

    claimform.html ページ上のフォームの要素とその値のすべてを収集し、これらの要素を CollaborationDialog ウィジェットが使用できるようにするための関数を提供します。

  4. CollaborationDialog ウィジェットの JavaScript を変更する

    顧客およびお客様サービス担当者両方の共同ブラウズ・セッションで、collabform.html ページ上の請求作成フォームの要素の値を設定するための関数を追加します。要素の値は、拡張 ClickToCall ウィジェットによってコピーされ、CollaborationDialog ウィジェットに渡される要素から取得します。

  5. claimform.html ページを更新する

    新しく拡張したウィジェットを使用するように、claimform.html ページを更新します。

新規モジュールを作成する

まず、claimform.html ページ上のフォームからすべての要素とその値を収集するように ClickToCall ウィジェットを拡張する必要があります。そのためには、アプリケーション内に新しいフォルダー構造を作成し、そこに変更対象の以下の 3 つの JavaScript ファイルをコピーしてください。

  • ceadojo/cea/widget/CollaborationDialog.js
  • ceadojo/cea/widget/ClickToCall.js
  • ceadojo/cea/widget/ClickToCall/ClickToCall.html

新しいフォルダー構造のルート・フォルダーは acme です。サブディレクトリーのレイアウトは、WebSphere Application Server Feature Pack for CEA が提供する cea モジュールのレイアウトを模倣します (図 10 を参照)。

図 10. 拡張フォルダー構造
ceadojo のディレクトリー構造を示す画面

ClickToCall ウィジェットのテンプレートを変更する

再利用性および柔軟性を最大限にするため、ClickToCall ウィジェットの HTML 宣言には、ソース・フォーム (要素のコピー元となるフォーム) の名前を宣言します。sourceForm 属性を ClickToCall ウィジェットのテンプレートに追加して、その値を ClickToCall ウィジェットが使用できるようにします。ceadojo/acme/widget/ClickToCall/ClickToCall.html ファイルには、dojoAttachPointcollaborationDialog に設定された要素があります。この要素に含まれる enableCollaborationcanControlCollaboration などの属性の定義は、ClickToCall ウィジェットと CollaborationDialog ウィジェットの両方で使用することができます。この要素に、リスト 11 に示す新しい sourceForm 属性を追加します。

リスト 11. ClickToCall ウィジェットのテンプレートの更新
<div
    dojoAttachPoint="collaborationDialog" 
dojoType="acme.widget.CollaborationDialog" sourceForm="${sourceForm}"
canControlCollaboration="${canControlCollaboration}"
defaultCollaborationUri="${defaultCollaborationUri}"
highlightElementList="${highlightElementList}"
isHighlightableCallback="${isHighlightableCallback}"
isClickableCallback="${isClickableCallback}"
sendPageUrlRewriteCallback="${sendPageUrlRewriteCallback}">
</div>

上記のコードでは新規 sourceFrom 属性を定義しているだけでなく、acme.widget.CollaborationDialog ウィジェットを参照するように dojoType を変更している点にも注目してください。この dojoType の値が、テンプレートの変更が完了した時点で拡張 CollaborationDialog ウィジェットの名前になるので、この時点で、拡張 ClickToCall ウィジェットが新しい関数を確実に使用するように更新します。ClickToCall ウィジェットのテンプレートに必要な変更は、以上の 2 つだけです。次のステップでは、ウィジェットの JavaScript を変更します。

ClickToCall ウィジェットのJavaScript を変更する

ceadojo/acme/widget/ClickToCall.js のソースでは、宣言文と require 文を変更します。宣言文については cea.widget.ClickToCall の代わりに acme.widget.ClickToCall を宣言するように更新し、CollaborationDialog の require 文については、acme.widget.CollaborationDialog を参照するように更新します (リスト 12 を参照)。

リスト 12. 更新後の ClickToCall ウィジェットの宣言文
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],

この例の dojo.declare 文では、基本ウィジェットの値を cea.widget.ClickToCall に変更しています。ウィジェットの拡張はこの基本ウィジェットから行うため、他の require 文の大多数は削除することができます。

ClickToCall JavaScript ソースの変数にもいくつかの変更が必要です。最終目標は、新規ウィジェットが前のステップで作成した変更後のテンプレートを指すようにすることなので、sourceForm 属性のための変数を追加します。

リスト 13. ClickToCall ウィジェットの変数の変更
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
{
   templateString : null,
   templatePath: dojo.moduleUrl("acme.widget",               
                                "ClickToCall/ClickToCall.html"),
   sourceForm: "",

新しいテンプレートを指すには、templateString の値を null に設定し、変更した HTML テンプレート・ファイルを参照する templatePath 変数を宣言します。このコードではまた、新規テンプレートに定義した sourceForm 属性の値を保持する sourceForm 変数も作成しています。

ClickToCall ウィジェットのソースに対する最後の変更は、指定されたフォームから要素を収集し、これらの要素を CollaborationDialog ウィジェットのインスタンスで使用できるようにすることです。それには、sourceForm 属性によって指定されたフォームから要素を取得して、これらの要素を CollaborationDialog ウィジェットのインスタンスに設定する getSourceFormElements という新しい関数を追加します。この関数を追加した後、ClickToCall ウィジェットの既存の cobrowse 関数を変更して、この新しい関数を呼び出すようにします。リスト 14 に、新たに拡張された ClickToCall ウィジェットのソース全体を記載します。

リスト 14. 変更後の ClickToCall ウィジェットのソース
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
	{
		templateString : null,
		templatePath: dojo.moduleUrl("acme.widget", 
                "ClickToCall/ClickToCall.html"),
		sourceForm: "",
		getSourceFormElements : function() {
	         var sourceFormObj = dojo.byId(this.sourceForm);
		   this.collaborationDialog.sourceFormElements = 
               sourceFormObj.elements;
	      },
		cobrowse : function() {
	         this.getSourceFormElements();
		   this.collaborationDialog.openCollaborationDialog();
		}
       }
);

残りの関数宣言については、基本 cea.widget.ClickToCall ウィジェットから単純に継承できるため削除します。

CollaborationDialog ウィジェットのJavaScript を変更する

ClickToCall ウィジェットの変更作業が完了したら、今度は CollaborationDialog ウィジェットの JavaScript に必要な変更を加えます。上記の拡張 ClickToCall ウィジェットの場合と同じく、まずはソースの宣言文と変数のセクションを変更する作業から取り掛かります。宣言しているウィジェットの名前を acme.widget.CollaborationDialog に変更し、基本ウィジェットのリストを変更して cea.widget.CollaborationDialog だけが含まれるようにしてください。

次に、sourceFormElements 変数と sourceForm 変数を宣言します。sourceFormElements は、拡張 ClickToCall ウィジェットが参照する変数です。sourceForm 変数については後で使用します。CallNotification ウィジェットと同じく、HTML を使用して ClickToCall ウィジェットを宣言すると、sourceForm 変数の初期値が sourceForm 属性の値から取得されます。

リスト 15. 拡張 CollaborationDialog ウィジェットの宣言文
dojo.provide("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.CollaborationDialog",           
[cea.widget.CollaborationDialog ],
{
sourceFormElements : null,
sourceForm : “”,

続いて setTargetFormElements という新しいメソッドを追加します。このメソッドに、claimform.html ページの元のフォームの値を collabform.html ページの双方向フォームにコピーするためのロジックを含めます。

リスト 16. ターゲット・フォームへの値の転送
setTargetFormElements : function() {
   dojo.withDoc(this.collaborationDialogContentPane.domNode.contentWindow.document, 
      function() {
         if(this.sourceFormElements != null) {
            var matchedCount = 0;
	        for(ct=0; ct < this.sourceFormElements.length; ct++) {
		var sourceElement = this.sourceFormElements[ct];
		var currElement = dojo.byId(sourceElement.id);
		if(currElement != null) {
		    if(currElement.options && sourceElement.options) {
			for(optCt=0; optCt < sourceElement.options.length; optCt++) {
			    if(sourceElement.options[optCt].selected) {
			        currElement.options[optCt].selected = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._changedByUser = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._handleOnChange(currElement.value);
				matchedCount++;
				break;
			    }
			}
		     }
		     else if(sourceElement.value != ""){
		        console.log(sourceElement);
			currElement.value = sourceElement.value;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_changedByUser = true;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_handleOnChange(currElement.value);
										
		     }
		 }
	  }
	}
    }, this);
},

setTargetFormElements は共同ブラウズ・セッションのウィンドウに含まれる DOM と対話するために、dojo.withDoc 関数を利用します。その結果、この例での関数は、collabform.html ページ上の要素と対話できるようになるというわけです。setTargetFormElements 関数は sourceFormElements 配列に含まれるすべての要素をループ処理し、それぞれの要素について、現行の文書 (collabform.html ページ) で ID が一致する要素を探します。該当する値が見つかると、コードは TwoWayForm ウィジェット・インスタンスのウィジェット・ハンドラーを使用して変更イベントをトリガーします。

あとは、顧客の共同ブラウズ・セッションでフォームが表示される前に、この新しい関数が確実に呼び出されるようにするだけです。そのためには、既存の openCollaborationDialog 関数にこの新しい関数の呼び出しを挿入します (リスト 17 を参照)。

リスト 17. 更新後の openCollaborationDialog メソッド
openCollaborationDialog : function() {
this.setTargetFormElements();
   this.inherited(arguments);
}

他のメソッドが削除されている理由は、拡張ウィジェットは cea.widget.CollaborationDialog 基本ウィジェットのメソッドを継承するためです。

claimform.html ページを更新して、新規 ClickToCall ウィジェットを組み込み、それと関連して新規 CollaborationDialog ウィジェットを組み込みます。新規ウィジェットを組み込むには、dojo の require 文と CSS の import 文を更新するだけで済みます (リスト 18 を参照)。

リスト 18. 更新後の claimform.html ページの import 文
 <style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojo/resources/dojo.css";
@import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
ceadojo.registerModulePath("acme","../acme");
ceadojo.require("dijit.form.TextBox");
ceadojo.require("dijit.form.SimpleTextarea");
ceadojo.require("dijit.form.ComboBox");
ceadojo.require("acme.widget.ClickToCall");
</script>

以上の変更をパッケージ化してアプリケーションを再デプロイすれば、新しい関数の検証を行うことができます。まずは claimform.html ページで、請求者の名前、事故の日時、事故証明の番号、その他いくつかの情報を入力してください (図 11 を参照)。

図 11. 顧客の請求作成フォーム
フィールドに事故情報が入力された状態の画面

この時点で、お客様サービス担当者の助けが必要になったため、「Call Me (電話)」ボタンをクリックしたとします。電話がつながった後、お客様サービス担当者は問題を解決するには共同ブラウズ・セッションに移行するのが最善だと判断しました。共同ブラウズ・ウィンドウが開くと、claimform.html ページに入力した情報が自動的に、共同ブラウズ・セッションの collabform.html ページに転送されているはずです。

図 12. データが入力された共同ブラウズ・セッションの請求フォーム
フィールドに事故情報が入力された状態の画面

リスト 16 のコードは手動で onChange イベントを起動するため、初期フォームの情報は変更されることなく、顧客とお客様サービス担当者両方の共同ブラウズ・ウィンドウに転送されます。


まとめ

WebSphere Application Server Feature Pack for CEA の Dojo ウィジェットによって、オンライン・アプリケーションのコミュニケーション機能とコラボレーション機能を大幅に拡張することができます。これらのウィジェットは、クリック・ツー・コール、共同ブラウズ、そして双方向フォーム操作を可能にするために、既存のアプリケーションにも、新規アプリケーションにもそのまま組み込むことができます。関数をそのまま使ったのでは必要を満たせないとしたら、Dojo の基本に従ってアプリケーションに必要なカスタマイズ関数を提供することもできます。コミュニケーションとコラボレーションを拡張することが皆さんの Web アプリケーションにとって利益になると思うのなら、ぜひ WebSphere Application Server Feature Pack for CEA を調べてください。


ダウンロード

内容ファイル名サイズ
Sample code for this articlesamplecode.zip24 KB

参考文献

学ぶために

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

議論するために

コメント

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=Web development, WebSphere
ArticleID=513003
ArticleTitle=HTML フォームのコラボレーティブなエクスペリエンスを可能にする
publish-date=07202010