| ドキュメントのダウンロード | サイト マップ | 用語集 | |
|
|||
| BEA ホーム | 製品 | デベロッパ・センタ | support | askBEA |
|
|
|
|||||||
 |
|
e-docs >
WebLogic Portal >
コマースおよび キャンペーン ツアー > 新規ユーザによる商品の購入 |
|
コマースおよび
|
新規ユーザによる商品の購入
ツアーのこのセクションでは、家の修繕計画に必要なハンマーを購入したいと仮定しましょう。 品揃えがよく値段の安い新しい e コマース Web サイトのことを聞きつけ、そのサイトにアクセスすることに決めます。 この章では、この Web サイト内を以下の順に進んで行きます。
注意: 新規ユーザ ロードマップを別のブラウザ ウィンドウに開いておくとよいでしょう。ツアー中にマップの内容を参照したほうがよい場合が多いからです。
新規ユーザ ロードマップ
ツアーのこのセクションを開始する前に、JSP テンプレート の処理フローを以下のロードマップ（図 3-1、図 3-2、および図 3-3）で確認しておいてください。 これらのロードマップに示されている矢印は、Web サイトでのナビゲーション上の選択肢を表しています。 そのうち、濃い矢印は、ツアーのこのセクションで説明する経路を示しています。
図3-1 商品の検索と選択のための JSP
図3-2 ショッピング カートと新規ユーザ登録のための JSP
ステップ 1: 商品の検索
この Web サイトのホーム ページに初めてアクセスすると、プロダクト カタログのブラウズか検索のどちらかを行えることがわかります。 今回探しているのがハンマーであることがはっきりしており、また、この新しい Web サイトの全体像がよくわかっていないので、[クイック検索] ボックスを使うことにします（図 3-4 を参照）。
図3-4 main.jsp での検索
ツアーを続行するには ホーム ページで、[クイック検索] ボックスに「hammer」と入力します。 そのあと、[Find] をクリックします。
ステップ 2: 商品の選択
[Find] をクリックすると、WebLogic Portal の検索エンジンが、プロダクト カタログにクエリを発行して、キーワードが「hammer」に一致する商品を検索し、その結果をsearchresults.jsp に表示します（図 3-5 を参照）。
searchresults.jspの特徴
図3-5 searchresults.jspでの検索結果
searchresults.jsp の以下の特徴に注目してください。
ツアーを続行するには
ハンマーを選んで [Add to cart] をクリックします。
ステップ 3: ショッピング カート内容の表示
[Add to cart] をクリックすると、WebLogic Portal は、サイトに現在アクセスしている間に選択した商品をすべて shoppingcart.jsp に列挙します（図 3-6 参照）。
shoppingcart.jsp の特徴
図3-6 ショッピング カート
shoppingcart.jsp の以下の特徴に注目してください。
テクニカル ノート ― Pipeline コンポーネント、Pipeline セッション、および Webflow
このツアーではこれまで、HTML 要素と JSP タグに焦点を合わせてきました。WebLogic Portal はこれらを使って、Web ブラウザに表示可能なフォーマットで情報を提示するのです。
こうしたプレゼンテーション層の裏では、Pipeline コンポーネント、Pipeline セッション、および Webflow がユーザとの間でデータを交換し、ビジネス ロジックを適用してデータを処理し、個々のショッピング セッションにおける状態を維持管理し、そして、コンテキスト固有のルール セットに基づいてユーザを誘導し、Web サイト内を進ませるのです。 これらの各メカニズムを以下に説明します。
たとえば、 リスト 3-1 に示す JSP タグ は shoppingcart.jsp から抜粋したもので、現在の Pipeline セッションからショッピング カートの中身を取得しています。
コード リスト 3-1 ショッピング カートの中身を取得するための JSP タグ
<webflow:getProperty id="shoppingCart" property="<%=PipelineSessionConstants.SHOPPING_CART%>" type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart" scope="session" namespace="sampleapp_main" />
<webflow:getProperty id="savedShoppingCart" property="<%=PipelineSessionConstants.SAVED_SHOPPING_CART%>" type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart" scope="session" namespace="sampleapp_main" />
ツアーを続行するには
[Check out] をクリックします。
ステップ 4: 新規ユーザ プロファイルの作成
ショッピング カートのページで [Check out]をクリックすると、Weblogic Portal は login.jspを開いて、ログインするようユーザに促します。 新規ユーザであるので、まずユーザ プロファイルを作成しなければなりません（図 3-7 を参照）。
login.jsp の特徴
図3-7 新規ユーザのログイン
ツアーを続行するには
[Create] をクリックして、新規ユーザ プロファイルを作成するためのテンプレートを調べます。
[ログイン] ページで [Create] をクリックすると、WebLogic Portal は newuser.jsp を開いて、ユーザ プロファイル用の情報を入力するようユーザに促します（図 3-8 および 図 3-10 を参照）。
newuser.jsp の特徴（1/3）
図3-8 住所に関する情報の入力
newuser.jspの前半部分の以下の特徴に注目してください。
[都道府県] リストと [国] リストは複数の JSP テンプレートで使われるので、別個のインクルード ファイルに定義されています。
テクニカル ノート ― 入力プロセッサ
入力プロセッサは、フォームの発行を処理する Java クラスです。 入力プロセッサの中には、顧客データの妥当性確認を行うものがありますが、入力プロセッサの主な役割は、顧客データを Pipeline セッションに格納したあと、Pipeline コンポーネントで利用できるようにすることです。 ユーザ入力を入力プロセッサに送るかどうかと、入力プロセッサが出力をどこに送るかは、Webflow によって決定されます。
たとえば、リスト 3-2 に示すのは newuser.jsp から抜粋したもので、ユーザが [Save] ボタンをクリックするとブラウザがデータを Webflow に送ると指定しています。
コード リスト 3-2 データを入力プロセッサに送るフォーム
<!-- 顧客データを入力するためのフォームを開始する。
このフォームは、起点 "newuser.jsp" で発生する "button(save)" イベントを Webflow Advisor に送る。 -->
<form method="post" action="<webflow:createWebflowURL event="button.save" httpsInd="calculate" namespace="sampleapp_user" />">
<input type=hidden name=origin value="newuser.jsp">
<input type=hidden name=event value="button.save">
<input type=hidden name=httpsInd value="calculate">
<input type=hidden name=namespace value="sampleapp_user">
newuser.jsp によるデモグラフィック（2/3）
newuser.jsp は顧客に関するデモグラフィック情報を収集します （図 3-9 参照）。 このデモグラフィック情報を使用して顧客を階層に分類でき、これをシナリオとコンテンツ セレクタ が使用します。
シナリオはイベント、システム状態、および顧客階層を識別し、特定のアクションを実行します。 コンテンツ セレクタ はパーソナライズされた情報を任意の顧客または顧客の階層に表示します。
図3-9 デモグラフィック情報の入力
newuser.jsp のその他の特徴（3/3） 図3-10 ユーザ名とパスワードの入力
newuser.jspの後半部分の以下の特徴に注目してください。
[クレジットカードの種類] リストと [有効期限] リストに表示される値は、newcctemplate.inc テンプレートでしか使われないので、そのテンプレートに定義されています。 また、[都道府県] リストと [国] リストに表示される値は、複数の JSP テンプレートで使われるので、別個の JSP ファイルに定義されています。
ツアーを続行するには
必須フィールドに情報を入力し、[Save] をクリックします。ツアーに自動的にログインするはずです。
ステップ 5: ログイン成功の表示
newusercreation.jsp の特徴
図3-11 newusercreation.jsp
newusercreation.jsp の以下の特徴に注目してください。
コード リスト 3-3 [Check out] ボタンの表示
<!-- ショッピング カートを取得すれば、チェックアウトが選択可能かどうかがわかる -->
<webflow:getProperty id="shoppingCart" property="<%=PipelineSessionConstants.SHOPPING_CART%>" type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart" scope="session" namespace="sampleapp_main" />
<p class="head1">
おめでとうございます。
</p>
<p>
ようこそ <%= request.getRemoteUser() %>, ご登録が完了し、ログインしました。
</p>
<p>
以下のアクションから一つお選びください:
</p>
<a href="<webflow:createWebflowURL event="link.shoppingcart" namespace="sampleapp_order" />"><img src="<webflow:createResourceURL resource="/commerce/images/btn_viewcart_g.gif" />" border="0" vspace="2" hspace="3"></a>
<% if (shoppingCart != null && shoppingCart.isEmpty() == false) { %><a href="<webflow:createWebflowURL event="button.checkout" httpsInd="calculate" namespace="sampleapp_order" />"><img src="<webflow:createResourceURL resource="/commerce/images/btn_checkout_no.gif" />" border="0" vspace="2" hspace="3"></a>
<% } %>
<a href="<webflow:createWebflowURL event="link.home" namespace="sampleapp_main" />"><img src="<webflow:createResourceURL resource="/commerce/images/btn_continushop.gif" />" border="0" vspace="2" hspace="3"></a>
ツアーを続行するには
[Check out] をクリックします。
ステップ 6: 出荷オプションの選択
[Check out]をクリックすると、WebLogic Portal は、shipping.jspに出荷オプションを表示することで、チェックアウト プロセスを開始します（図 3-12 を参照）。
shipping.jsp の特徴
図3-12 出荷オプションの選択
ツアーを続行するには
[Continue] をクリックすると、WebLogic Portal は、selectaddress.jspに届け先住所を表示します（図 3-13 を参照）。
selectaddress.jsp の特徴
図3-13 届け先住所の選択
selectaddress.jsp の以下の特徴に注目してください。
コード リスト 3-4 selectaddress.jsp における Java スクリプトレット
<um:getProperty propertySet="CustomerProperties" propertyName="shippingAddressMap" id="shippingAddressMap" />
<%
if(shippingAddressMap == null) shippingAddressMap = new HashMap();
%>
<p><font color="red"><webflow:getException/></font></p>
<!-- Iterate through all addresses -->
<%
Iterator iterator =((Map)shippingAddressMap).keySet().iterator();
while(iterator.hasNext())
{String addressKey = (String)iterator.next();
Address shippingAddress = (Address)((Map)shippingAddressMap).get(addressKey);
%>
<table width="90%" border="0" cellpadding="6" cellspacing="0">
<tr>
<td align="left" valign="top" width="40%" nowrap>
<p><%= shippingAddress.getStreet1() %><br>
<% if( shippingAddress.getStreet2().length() != 0) {%> <%= shippingAddress.getStreet2() %><br>
<% } %>
<%= shippingAddress.getCity() %><br>
<%= shippingAddress.getState() %> <%= shippingAddress.getPostalCode() %><br>
<%= shippingAddress.getCountry() %>
</td>
<td align="left" valign="top" width="5%" >
<%
String extraParams = HttpRequestConstants.ADDRESS_KEY + "=" + addressKey;
%>
ツアーを続行するには
[Use] をクリックします。
ステップ 7: 支払いに関する情報の入力
[Use]をクリックすると、WebLogic Portal は payment.jsp を表示し、この中に、ユーザ プロファイルに記載されているクレジット カードがすべて列挙されます（図 3-14 を参照）。
payment.jsp の特徴
図3-14 クレジット カードの追加を選択する場合
ツアーを続行するには
[Add card] をクリックします。
paymentnewcc.jspの特徴
[Add card]をクリックすると、WebLogic Portal は paymentnewcc.jsp を開いて、支払に関する情報を入力するようユーザに促します（図 3-15 を参照）。
図3-15 クレジット カード情報の入力
paymentnewcc.jspの以下の特徴に注目してください。
これら3 つの JSP ファイルのすべてが、インクルード ファイル <BEA_HOME>/weblogic700/samples/portal/wlcsDomain/beaApps/wlcsApp/wlcs/commerce/includes/
newcctemplate.inc を使用して、クレジット カード入力フィールドを定義します。 テンプレート インクルード ファイルの詳細については、この節の次のトピックテクニカル ノート ― テンプレート内にインクルードされるテンプレートを参照してください。
テクニカル ノート ― テンプレート内にインクルードされるテンプレート
WebLogic Portal の JSP テンプレートでは、入力フィールドなどの情報を複数のファイルに重複して定義するのではなく、再利用される JSP タグと HTML 要素を一群のインクルード ファイルに割り当て、今度はこれらのファイルが Web サイトの開発に使える JSP テンプレートになります。 たとえば、paymentnewcc.jsp（先ほどの節で説明したもの）、profilenewcc.jsp、および newuser.jsp は、newcctemplate.jsp を子ページとしてインクルードし一貫性のあるクレジット カード情報入力フィールドを提供する親 JSP ページです。 newcctemplate.jsp は、作成対象の他の JSP ファイルにインクルードすることができます。
Webflow では、これら 3 つの親 JSP ページを使って、ユーザのコンテキストを決定し、ユーザが新しいクレジット カード情報を入力したあとどのページを表示すべきかを決定します。 たとえば、図 3-16 は、ユーザが paymentnewcc.jsp、profilenewcc.jsp、newuser.jsp に必要な情報を入力すると、Webflow がそれぞれ payment.jsp、viewprofile.jsp、login.jsp を表示することを示しています。
図3-16 テンプレート インクルード ファイル
ステップ 8: クレジット カードの選択
payment.jspで [Save] をクリックすると、 WebLogic Portal は新たに追加されたクレジット カード情報をpayment.jsp に表示します（図 3-17 を参照）。
payment.jsp のその他の特徴
図3-17 クレジット カードの選択
ツアーを続行するには
[Use] をクリックします。
ステップ 9: 商品の購入
payment.jsp で [Use] をクリックすると、WebLogic Portal は checkout.jsp を表示し、ユーザはこのページで税金に関する情報をレビューして購入を完了します。
checkout.jsp の特徴
図3-18 商品の購入
ツアーを続行するには
[Complete purchase] をクリックします。
ステップ 10: 注文確認のレビュー
[Complete purchase] をクリックすると、WebLogic Portal は購入処理を完了し、confirmorder.jsp に確認番号を表示します（図 3-19 参照）。
confirmorder.jsp の特徴
図3-19 注文確認のレビュー
confirmorder.jsp の以下の特徴に注目してください。
ツアーを続行するには
新規ユーザ向けのツアーはこれで終わりです。 JSP テンプレートのツアーを続けるには、ナビゲーション バーの [ホーム] をクリックして、次のセクションである登録ユーザによる商品の購入に進みます。
|
|
|
|
||
 |
|
|
 |
 |
 |
|
||
