解説 実例で学ぶASP.NETプログラミング ―― ショッピング・サイト構築で学ぶASP.NET実践講座―― 第10回　ASP.NETで変わる「買い物かご」構築 小田原 貴樹（うりゅう） 2004/02/11
Page1 Page2 Page3 Page4 Page5

Back Issue

1 ASP.NETの観点からショッピング・サイトを定義する 2 トップ・ページ構築で理解するASP.NETの特長 3 「実プロ流」ASP.NETデータベース操作術 4 DB連携ページをASP.NETで構築する（前編） 5 DB連携ページをASP.NETで構築する（後編） 6 ASP.NETの真骨頂-DataGridコントロールで一覧ページを制する 7 一覧ページを作る―DataGridコントロールに対するコーディング― 8 ASP.NETで実現する「見栄えの良い」商品紹介ページ−前編 9 ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編

　毎度毎度大変お待たせしてしまって、申しわけない。どうも筆者にとって、秋から年末というのは鬼門に当たる期間のようで、この連載の執筆も完全にストップしてしまっていた。その間、自分を取り巻く環境に変化があったりといろいろあった。それはさておき、新年も明けたということで、心機一転して連載を再開するので、引き続きお付き合いいただければ幸いである。

■ショッピング・サイトにおける「買い物かご」の重要性

　さて、前回／前々回では個々の商品の詳細な情報を提供する商品紹介ページを作成した。商品紹介ページと第6回で作成した商品一覧ページとが連動していれば、ユーザーはサイト上で販売する商品の情報を参照することができるし、気に入った商品が見つかれば、より詳しい情報を参照できる。それではショッピング・サイトとして、ほかにどのような要素が必要だろうか？

　ショッピング・サイトというのは結局のところ、人間が実際に店に出向いて「買い物」をするときに取る一連の行動を、インターネットの世界で実現可能にしたシステムであるととらえられるだろう。その前提に立てば、実際の買い物と同じ流れで商品を購入できることが望ましい。従って、ショッピング・サイトでの買い物の一連の流れが、実際の買い物に近ければ近いほど、基本的にはより優れたショッピング・サイトということになる。

　それでは、実際の店で「買い物」をするときの一連の行動の流れを分析してみよう。買い物の流れを大まかに分類すると、以下のような流れが想定できる。

店に入る→商品を棚から探す→細かく見る→買い物かごに入れる→支払いをする

　この流れをサイト上のページに置き換えてみると、以下のようになる。

トップページ→商品一覧ページ→商品紹介ページ→買い物かごページ→決済ページ

　上記の流れから考えれば、次に作成しなければならない要素は「買い物かごページ」ということになるだろう。買い物かごページとは、簡単にいうと、買おうとしている商品の一覧を表示するページである。

　ほかの要素に比べると買い物かごページは、ショッピング・サイトに絶対に必要というわけではなく、実際に買い物かごページが存在しないサイトも多数ある。しかし、買い物かごページがないということは買いたい商品を買い物かごの中に保留した状態でほかの商品を見ることができないということを意味し、すなわち「1回の買い物で、1品の購入しかできない」ということになる。ユーザーから見ると非常に不親切なサイトになってしまうだろう。

　あった方が便利な機能ではありながら、買い物かごページが存在しないサイトが多数あるのは、ひとえに買い物かごページの機能実装の難しさが理由であろう。ほかの機能と比べて買い物かごページの機能を実装するのは格段に難易度が高い。どういった点が難しいのかについては、構築しながら説明していくが、ASP.NETを利用すれば買い物かごページの実装は極めて容易だ。ASPなどの既存のWebシステム系言語で買い物かごページを実装するのは手間もかかり、難易度も高かったが、ASP.NETには「買い物かご」の概念を形にするための仕組みが存在する。それではさっそく、構築に取り掛かろう。

　構築に必要な画像ファイルや、商品データと商品画像ファイル、この連載で今回までに構築したソース・ファイルなどがすべて入っているVisual Studio .NETのプロジェクト・ファイルは下記のリンクからダウンロードできる。また、実際の動きを確認したい場合には、V-STORE.NETのデモ・サイト「VS屋」を確認してほしい。

• 参考用ソース・ファイル群（pronet10(src).zip）

■買い物かごページを設計する

　実際の構築作業に入る前に、まずはいつもどおり完成画面を見ながら、構成要素の分解とページ設計を行おう。下図の「VS屋」買い物かごページを見てほしい。

今回作る買い物かごページ

完成した画面はこのようになる。実際の動きを確認したい場合には、V-STORE.NETのデモ・サイト「VS屋」で確認してほしい。

　買い物かごページを、構成要素ごとに大きく分けると以下のように分解できる。

• ページ上部：ページ・タイトルと案内文章部分

• ページ中央：「買い物かごの中身」を表示する表部分

• ページ下部：これ以後のページ遷移のためのナビゲーション・ボタン部分

　ページ上部とページ下部に関しては、単純な要素をいくつか配置するだけでよい。問題は、ページ中央の「買い物かごの中身」となる表をどうやって実現するかということになる。買い物かごの中身となるデータというのは概念上、以下の条件を満たさなければならない。

1. 表示されるデータは、そのユーザーがそのアクセス時に格納したものに限られる

2. 格納されるデータは、複数に及ぶ場合がある

3. ユーザーが途中で買い物をやめてしまう場合があり、格納されたデータがそれ以後不要になることがある

4. 格納されたデータは、ユーザーが任意に削除できなければいけない

　前述した買い物かごページの実装の難しさというのは、上記の条件を満たさなければならない点にある。ASPなどの既存のWebシステム系言語で買い物かごページを実装する場合には、上記の条件を満たすために、クエリ文字列とデータベースの一時的なテーブルを組み合わせて利用するなど、さまざまな手法を組み合わせなければならず、実装には手間がかかっていた。

　ASP.NETを利用すれば、上記の条件はセッション変数を利用するだけで実現できる。前回、商品紹介ページ作成の最後で、商品を買い物かごの中に格納するイベントを実装した。ASP.NETではセッション変数の中にオブジェクトを格納できるようになったため、「売上明細」テーブルのデータセットを構成情報として割り当て、買い物かご情報を格納するために利用している。

　セッション変数を利用すれば、先ほどの条件のうち1番と3番は考慮する必要がなくなる。セッション変数はユーザーごと／アクセスごとに異なるため、1番の条件は自動的に満たされる。また、セッション変数はサーバのメモリ上に一時的に作成され、ユーザーが途中でほかのサイトに移動したり、ブラウザを閉じたりしてしまった場合でも一定時間でクリアされるため、3番の条件を意識しなくても済む。

　さらにASP.NETでは、セッション変数の中にテーブルの構成情報ごと格納できるようになったことで、2番と4番の条件は満たすことができるようになった。セッション変数の中に格納されているデータセットやデータビューであっても、機能や利用方法は通常とまったく変わらないため、コーディングは極めて簡略化される。

　ここまでで買い物かごに表示するデータの中身に関する設計は完了したが、そのデータを表示するにはどのWebコントロールを利用するのが適切だろうか？ 次はその部分を検証してみよう。

INDEX
	実例で学ぶASP.NETプログラミング
	第10回　ASP.NETで変わる「買い物かご」構築
	1．ショッピング・サイトにおける「買い物かご」の重要性
	2．買い物かご画面のデザインを作成する
	3．Repeaterコントロールを配置する
	4．表内部の情報をデータ連結し、Repeaterコントロールを表示する
	5．「買い物かご」を実現するそのほかの機能を実装する

　

「解説 ：実例で学ぶASP.NETプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）