Dreamweaver UltraDevと PayPal の組み合わせによる迅速なEコマース開発


筆者: Joel Martinezおよび Ray West (www.basic-ultradev.com)

この記事では、無料で使えるサーバー ビヘイビア ソフトを利用し、よくあるオンライン販売シナリオを3つ解くことによって、UltraDevを PayPal にインテグレーションする方法を考察します。このサーバー ビヘイビア ソフトは PayPal Extension Suite という名前で、Shore Computers のMike Ahern (http://www.shorecomp.com/ultradev/paypal/default.asp)が提供しています。このスイートは無料ですが、利用する場合は PayPal を使って寄付をしていただくことをお願いしております。

このサーバー ビヘイビアのスイートを利用しない場合でも、HTMl の知識があればPayPal ショッピングカートを使用することができます。テキストの切り取りと貼り付けができれば、このサーバー ビヘイビア ソフトの機能拡張がなくても、PayPal ショッピングカートは十分に活用できます。しかしこのスイートはUltraDevと緊密にインテグレーションされ、分かりやすいユーザー インターフェイスを提供します。次の3例を参照すると、一般的な3種類の取引で PayPal システムを活用する方法を理解できます。
  • 単一商品の購入(1つの商品をオークションタイプの設定で販売可能)。
  • シンプルなショッピングカート(複数の商品を設定し、1 回の PayPal 取引で購入可能)。
  • データベース方式のショッピングカート(在庫システムを設定し、データベースからページへの動的な情報送信と管理が可能)。

PayPal でEコマースサイトの構築


PayPal を利用したEコマースサイトの構築は、導入が最も簡単なソリューションといえるでしょう。開発にかかる時間が節約できるので、プロジェクトを予算内に収める魅力的な選択肢となり得ます。ただし、短所もあります。カートの動作はポップアップウィンドウで行っているため、カートに独自のロゴを入れる以外のカスタマイズを行う余地は非常に限られています。そうは言っても、ほとんどのサイトではユーザー インターフェイスを完全にカスタマイズする必要はないので、このシステムを使用することで多くの利点を得ることができます。PayPal が開発した使いやすいインターフェイスは、顧客の支持獲得に貢献できます。

これは拡張機能のスイートであるため、複数のサーバー ビヘイビアを搭載しており、それぞれの機能は若干異なります。ただし、各機能に共通する要素もあります。
  • PayPal Email - サーバーが動作するには、PayPal アカウントに使用しているメールアドレスの入力が必要となります。アカウントを利用してビジネス運営を行おうというユーザーには、ぜひビジネスアカウントをおすすめします。
  • 静的/動的フィールド - ほとんどすべてのサーバー ビヘイビアでは、フィールドを使ってUltraDevのデータ範囲ウィンドウから項目を選択できるか、静的な値を利用できるようになっています。ただ1つ注意が必要なのは、 静的な値を利用する場合、ダブルクォーテーションマークで囲まなくてはならない点です。(例えば、"5.00")
  • 金額 - 金額に関するフィールドはすべて「xx.xx」という形式でなければなりません。このフィールドにデータ範囲パレットから値を割り当てる場合、上記の形式であるかどうかを確認してください。UltraDevに搭載された機能を使って、この形式を値に割り当てることもできます。

図1: データ範囲パレットで金額形式を割り当て。
  • URL フィールド - 一部のサーバー ビヘイビアでは、ロゴ URL、または取引処理終了後にユーザーが移動する場所を指定するよう指示されます。これらはすべて絶対 URL でなければならず、「http://www.お客様のドメイン名.com」が含まれている必要があります。
サーバー ビヘイビア

以下のサーバー ビヘイビアはこのスイートで利用でき、PayPal機能のインターフェイスの役割を果たします。
  1. 一件の購入ビヘイビア
    画像やテキストに適用した場合、このサーバー ビヘイビアは PayPalチェックアウト画面へ直接リンクします。例えば、[今すぐ購入]などのリンクを作成できます。1つの製品やサービスだけを販売しているサイトに最適です。
  2. ショッピングカート利用状況から
    UltraCart IIなど別のショッピングカートソリューションを利用する場合でも、PayPal が提供するサービスを使用して商品の支払いを受け取ることができます。必要な情報(お客様の PayPal ID や URL 以外)は、注文番号と合計販売金額です。この情報は簡単に収集でき、シンプルなユーザー インターフェイスに受け渡されます。
  3. Add Item To Cart (カートに商品を追加)ビヘイビア
    これは恐らく、最もメリットのあるサーバー ビヘイビアといえます。Add Item To Cart (カートに商品を追加)ビヘイビアは、商品のデータベース表示画面に非常に簡単にインテグレーションできるため、顧客はさまざまなページで買い物をし、カートに商品を追加できます。生成したリンクをクリックすると、ポップアップウィンドウが現れ、そこに整然とカートの中身が表示されます。続いてユーザーはこの画面からチェックアウト画面に移動し、自分の PayPal アカウントにログインするか、支払い情報を入力できます。
  4. View Cart (カートの表示)ビヘイビア
    これをAdd Item To Cart (カートに商品を追加)と一緒に利用した場合、View Cart (カートの表示)サーバー ビヘイビアが生成したリンクをクリックすることで、カートの中身を表示するウィンドウがポップアップします。必要な情報は、お客様の PayPal メール IDだけです。
  5. Donation (寄付)ビヘイビア
    このサーバー ビヘイビアが生成するリンクによって、ユーザーは自分の PayPal アカウントからお客様に送金できる画面に移動します。シェアウェア販売者や非営利組織の場合、ウェブサイトを特定の購入とリンクさせることなくウェブサイトから支払いを受け取れるため、この方法が有利です。
  6. 購読ビヘイビア
    購読することでコンテンツにアクセスできるウェブサイトの場合、PayPal が提供するこのサービスが便利です。購読サービスに登録しているユーザーは、PayPal から毎月請求を受け取ります。支払い金額は直接お客様の PayPal アカウントに送金され、支払いごとにメールが届くので、ユーザーが継続して購読していることが分かります。このサーバー ビヘイビアが生成したリンクをクリックすると、ユーザーに請求情報の入力を依頼するポップアップウィンドウが表示されます。

PayPal スイートへの実際の適用


現在ウェブで利用されているEコマースの大部分は、2つのシナリオで対応できます。一件の購入はオークションモデルに近く、売り手が商品を1 個だけ販売し、売れれば商品はなくなります。ショッピングカートモデルでは複数の商品を販売し、各商品も複数個用意されている場合もあります。以下で、PayPal サービスによる単一商品の販売、PayPal ショッピングカートによるショッピングカートモデル、サードパーティのカートを PayPal に組み込んだショッピングカートモデル、という3つの例について説明します。

デモのサイト、http://www.codecube.net/teksales/を参照してください。。この記事で説明している例は、このデモサイトに掲載されています。


図2: teksales のデモサイト


「1 個購入します」 - 単一商品の販売


一件の購入サーバー ビヘイビアは、販売する商品が1点のときに利用します。この機能は長年にわたり、eBayユーザーによってオークションでの支払い回収に利用されています。サイトで複数の商品を販売する場合は、別のビヘイビアを使用すると便利です。しかし中古品やコレクターアイテムといった1 件で売り切れる商品であれば、一件の購入サーバー ビヘイビアが素早く簡単に使用できるオプションです。

例えば、あなたがドゥカティ社のMonster S4Fogartyというバイクを所有していたとします。ある日バイクに乗っていると、突然目の前に車線変更した車が割り込んできました。その瞬間、今までの人生が走馬灯のように頭の中を巡り、それ以来、バイクに乗るときは冷や汗をかくようになりました。そこで、あなたはバイクをウェブサイトで売ることにしました。Ultradevで手早くデザインを作成し、サイトに掲載することができます。


図3: ドゥカティ販売サイト...SB前

このストリートロケットの代金を払うために購入者がポストに殺到すると期待しますが、残念ながら、それは実現しません。その理由はいくつか考えられます。恐らく、多くの人にとって小切手で払うには値段が高すぎるのでしょう。

一件の購入用サーバー ビヘイビアの使用

一件の購入用サーバー ビヘイビアの使い方はとても簡単です。ページをデザインしたら、購入ボタンとなるオブジェクトをページ上で選択するだけです。オブジェクトとしては、「購入する」の画像や同様のメッセージを伝えるテキストなどが使用できます。通常どおり、オブジェクトを強調表示して、サーバー ビヘイビアを適用します。一件の購入用サーバー ビヘイビアは、「PayPal > PayPal での一件の購入」の下にあるサーバー ビヘイビアパレットにあります。



図4: PayPal での一件の購入

サーバー ビヘイビアのインターフェイスにあるフィールドに入力すれば、それで完了です。ビヘイビアが生成したリンクをユーザーがクリックすると、支払い回収情報が記載されたウィンドウがポップアップで表示され、ユーザーはチェックアウトのプロセスを実行します。お客様は PayPal から販売終了の確認通知を受け取るので、バイクを梱包して近所の配送会社に預ける準備を行えます。


「各商品を2つずつ購入します」 - シンプルなショッピングカート


一件の購入による売上は、オンラインオークションの人気もあり、今日のインターネットによる取引の大部分を占めています。しかし、ウェブサイトを継続的なビジネスにしたいと考える事業者は、他の問題に直面しています。これらの事業者はさまざまな商品を販売しており、顧客に複数の商品を繰り返し購入して欲しいと考えているのです。

では、かけだしのオートバイ営業マンであるあなたに話を戻します。Ducati を販売した後、あなたはオートバイ関連の商品に需要があることに気づき、それらの商品を扱うオンラインビジネスを立ち上げることにしました。PayPal の新しいオンライン決済ソリューションを利用して、業績は右肩上がりです。あなたは自分のウェブサイトでオートバイを転売して多大な利益を上げていますが、さらに商売を拡大するため、ヘルメットやゴーグルなどのバイク関連商品を販売することにしました。これは単純なコンセプトですが、同じソリューションを利用しつづけることはできません。毎週買い物に行くウォルマートで、オイルクリーナーの缶をミルクや卵と一緒にショッピングカートに入れたときに、考えが浮かびました。ショッピングカートも必要だということに気づいたのです。

簡単に言えば、オンラインのショッピングカートは、サイトを訪れた顧客が1 回の取引で複数の商品を買うことを可能にするものです。顧客がサイト内をナビゲートして買いたい商品を選ぶ場合、ショッピングカートがあれば、セッション変数、クッキーまたはデータベースを利用して、どの商品を選んだかが記憶されます。チェックアウトでは、支払情報を1 回入力するだけで、選択したすべての商品を注文できます。

PayPal ショッピングカートの使用

ショッピングカートサーバー ビヘイビアの使用方法は、一件の購入用サーバー ビヘイビアの場合とよく似ています。しかしこのビヘイビアはショッピングカートで使用されるため、大きく異なる点が2つあります。その1つは、手袋を2 組、レザーパンツのパッチキット3 個など、顧客が特定の商品について数量を選択できるオプションがあることです。もう1つは、購入ボタンを押しても単に商品がショッピングカートに追加されるだけなので、即座に支払情報を入力する必要はなく、買い物を続けることができることです。

このサーバー ビヘイビアを商品に適用するには、ページ上でオブジェクトまたはテキストを強調表示し、「サーバー ビヘイビアパレット」にある>[PayPal カートに商品を追加]から[Add to Cart Server Behavior]を選択します。サイト内の各商品に対してこれを繰り返します。



作成したリンクから新しいウィンドウがポップアップして PayPal ショッピングカートシステムに移動し、追加した商品が全部表示されます。同じ商品を2度クリックすると、合計数量が1 個加算されます。この場合、この方法が最適です。買物客は商品を買うときにできるだけ面倒を避けたいので、クリック回数を数回少なくするだけでも買物客の満足度が増し、購入量が増えるからです。

データベース方式のショッピングカートで PayPal を使用


上記の例は概要を理解するのに役立ちます。同様のケースが発生することはよくあり、PayPal のごく基本的な機能で実現できます。しかし、この拡張スイートは、データベース利用の在庫ソリューションと組み合わせたときにその真価を発揮します。データベースを使って商品管理をする場合、開発に少々時間がかかりますが、その後は、維持および管理の簡単さなどの利点を実感することができます。適切に構築できれば、サイトは基本的に自動で運用することができます。

テーブル構造

このタイプのサイトの構築に最も時間がかかるのは、データベースです。実際のところ、PayPal ショッピング システムへの組み込みにはさほど時間はかかりません。この説明では、従来の親/子、マスター/詳細のデータ構造を使用します。これはネット上にあるデータベースの99%で利用されているデータベース設計方法です。このプロジェクトのデータベースについてヘルプが必要な場合、ウェブで多数の役立つリソースを検索できます。

親テーブルの各行では、子テーブルに対して「ゼロ対多」行の関係が可能です。Eコマースサイトのコンテキストでは、カテゴリテーブルをマスター、製品テーブルを子として使用することを意味します。例として次のようなデータが挙げられます。

テレビのカテゴリ
- Sony 20"
- RCA 19"
- Magnavox 32"

ビデオのカテゴリ
- Panasonic 2ヘッド
- Samsung 4ヘッド

まず、以下のフィールドを持つカテゴリテーブルの定義から開始します。
  • catID - 自動採番
  • catName - テキスト
ご覧のとおり、マスターテーブルは子テーブルの多数の行を編成するだけなので、通常多くの情報は必要ありません。このテーブルにはほかに次のような情報も追加できます。
  • 追加説明文
  • カテゴリの写真
  • カテゴリが現在アクティブかどうか示すアクティブフィールド
このテーブルは、サイトで販売している商品のカテゴリ全体を一覧表示するページで使用できます。顧客はカテゴリを選択して、そのカテゴリで購入できる製品の詳細を見ることができます。

次に必要となるテーブルは製品テーブルです。これには製品の情報が格納されるため、Add to Cart (カートに追加)サーバー ビヘイビアで各商品に対応するフィールドを作っておく必要があります。
  • itemID - 自動採番
  • catID - 数字
  • itemName - テキスト
  • 金額 - 通貨
  • 配送料 - 通貨
  • 手数料 - 通貨
もしこれらのフィールドを使わない場合(配送料や手数料を取らない場合など)、ゼロを入力してください。

カテゴリテーブルと同様、簡潔にするために最小限のフィールドを使用します。ほかに使用できるフィールドとして、次のものがあります。
  • 追加日
  • アクティブ
  • ページ表示

図6: tekDB_relationship
2つのテーブル間の関係を示す図

データベース構造の設定が終了したら、テストデータをテーブルに入力します。このデータは、後で製品データと交換できます。まず、カテゴリをいくつか作成してください。



図7: tekDB_catTableContents

各カテゴリは子となる製品の単なる論理的な入れ物である点に注意してください。親となるカテゴリの「catID」を製品テーブルの「catID」(数字)フィールドに入力することによって、カテゴリテーブルと特定の製品との間に関係を構築します。さらに複雑なテーブル構造を作成して、製品を複数のカテゴリに分類することもできますが、今回はこれで十分です。


図8: tekDB_catTableContents


データを表示

作業対象となるデータを格納したデータベースが準備できたら、次はそのデータをページに追加します。このデモの場合、ユーザーが選択できる全カテゴリを表示するマスターページと、選択したカテゴリの全商品を表示する詳細ページという2ページだけが必要となります。

まず、ユーザー インターフェイスとなる HTML テーブルを作成します。テーブルは2 x 2のサイズで十分です。最初の行はシンプルな見出しで、下に続く列の内容を説明し、2 行目にレコードセットの出力が表示されます。テーブルからカテゴリ名と ID を選択するレコードセットを作成します。

カテゴリ名をデータソースパレットから1 列目の2 行目にドラッグします。2 列目に[表示]のリンクが入ります。

表示のリンクを作成するために、まずテキストを強調表示し、プロパティ検査機能(Property Inspector)を使用して製品を表示する予定のページに移動します。フォルダのアイコンをクリックすると、サイトにあるページが一覧で表示されます。製品のページを選択したら、次にダイアログボックスの下部にある[パラメータ]ボタンをクリックします。パラメータウィンドウで、catID という URL のパラメータを作成し(製品のレコードセットでフィルタに使用)、続いて稲妻の形をしたアイコンで catID フィールドを選択して、データベースから値を割り当てます。この状態でカテゴリの隣にある表示ボタンをクリックすると、対応する ID が URL 文字列の製品レコードセットに渡され、そのカテゴリに属する製品だけが詳細ページに表示されます。これが完了すれば、repeat region サーバー ビヘイビアを2 行目に追加できます。

これで、カテゴリページが機能するようになりました。次のステップで、詳細ページを作成します。このページへはカテゴリページから移動できるため、クエリの文字列には catID が含まれています。そのため、まずテーブルにある全フィールドを取得するレコードセットを作成し、次に、request("catID")を使用してクエリ文字列の値で catID をフィルタにかけます。


図9: tekDB_categoryRS

このテーブルのユーザー インターフェイスは、価格の列が追加されている点を除いて、全く同じレイアウトで構いません。商品名を最初の列に、価格を2 列目にドラッグし、3 列目には「カートに追加」と入力します。「カートに追加」のテキストを強調表示し、サーバー ビヘイビアのパレットで[Add to Cart Behavior]を選択します。ユーザー インターフェイスのほとんどのフィールドでは、テキストボックスの隣に小さな稲妻のアイコンが表示されます。これを使用すると、各フィールドに、データソース ウィンドウで作成したレコードセット経由でデータベースからフィールドの値を読み込むことができます。サーバー ビヘイビアで対応する商品について、データベースからフィールドを選択します。これが終了すると、repeat regionを2 行目に追加できます。実行時にデータベースからページ上へ製品の読み込みが完了すると、各「カートに追加」インスタンスに適当な情報が追加されます。購入する商品をクリックすると、入力した情報でショッピングカートが更新されます。商品のメンテナンスはデータベース上でできるので、HTML ページを編集する必要はありません。


図10: tekDB_Addtocart

これですべて完了です。顧客は商品カタログを見て買いたい商品を選び、チェックアウトできるようになりました。アプリケーション開発が素早くできるという利点は、PayPal スイート がEコマースで高い競争力を誇っている大きな理由の1つです。ほかのショッピングカート システムでは開発に長い時間がかかる上に、支払い回収の問題に対応していません。このデモでは、Dreamweaver UltraDevと PayPal 拡張スイートを利用して1 時間程度で作成しました。

この記事は、次の新刊書からの引用です。『UltraDev E-commerce Concepts: Next Steps by Ray West』(Tom Muck、Joel Martinez 著)「UltraDev and E-commerce」の詳細については、Basic UltraDev (www.basic-ultradev.com)にアクセスしてください。このサイトでは本書に関する情報、チュートリアル、拡張機能が掲載されており、ウェブ開発機能を大幅に高めることができます。

免責:次の各記事の内容はそれぞれの筆者が提供したものであり、PayPal, Inc.およびそのアフィリエイトまたは子会社によるものではありません。記事の内容に誤りがある場合がありますが、PayPal は記事の内容に関して保証も支持も行いません。質問、テクニカルサポート情報、保証やライセンスなどについては、必要に応じて記事の筆者にお問い合わせいただくようお願いします。記事の内容の信頼性については、ご自身の責任で判断してください。記事の内容を信頼した結果、エラー、被害、その他の損害(偶発的、例外的、間接的、または必然的な損害を含む)が発生した場合、PayPal はいっさい責任を負いません。PayPal は、この記事内容およびその利用について、一切の保証を否認いたします。