解説 実例で学ぶASP.NETプログラミング 第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編 小田原 貴樹（うりゅう） 2003/09/04
Page1 Page2 Page3 Page4 Page5 Page6

　商品によっては「ロック／冷／熱燗」の3つが飲み頃だというものもある。例えば、表形式にして該当する温度の横には丸印を付けるという程度であれば簡単なのだが、「VS屋」では適温をバーで示すようにしているため、かなり複雑になってしまっている。直感的に分かりやすくしたはずなのだが、作り手から見ると手間が増えた結果に終わっているかもしれない（笑）。

　それはさておき、今度もデザインから作成していこう。次の手順を参考にしてほしい。

「適温」表示のデザイン：手順1

適温の内容を格納するテーブルを作成する。テーブルのプロパティ設定は画面を参照してほしい。

「適温」表示のデザイン：手順2

枠の上部に項目名を入れる。上部TDタグの背景色は「#a60008」に、文字色は「White」、文字の配置は中央寄せにする。さらに、枠の下部にGridLayoutPanelコントロールを貼り付ける。「Width」を「264px」、「Height」を「39px」に設定する。

「適温」表示のデザイン：手順3

枠内下部のGridLayoutPanelコントロールに必要なイメージを配置する。Pixフォルダから、まず「img13.gif」を貼り付ける。その上に、長いバー画像の「ONDO.GIF」を4つ、短いバー画像の「ONDOHAN.GIF」を5つ貼り付ける。その上で、4つの長いバー画像は「ロック」から「熱燗」までを一直線に並ぶように配置し、短いバー画像はそれぞれの温度名の上に被さるようにカーソル・キーを使って調整する。

　画像の重ね合わせが存在するので、いよいよ細かく複雑なデザインになってしまった。「これがどう動くんだ？」という至極当然な疑問を持たれた方は「VS屋」で動作を確認していただきたい。

　「適温」の度合いを示すために配置したバー画像には、それぞれ個別のIDを割り振る。4つの長いバー画像には「TB1」から「TB4」を、短いバー画像には「TH1」から「TH5」といった具合だ。このバーの表示／非表示を切り替えることで、適温の情報を視覚的に表現する。では、それを実現するためのコーディングを行おう。

1: Dim TB As New Collection  2: TB.Add(TB1)  3: TB.Add(TB2)  4: TB.Add(TB3)  5: TB.Add(TB4)  6: TB.Add(TH1)  7: TB.Add(TH2)  8: TB.Add(TH3)  9: TB.Add(TH4) 10: TB.Add(TH5) 11: 12: For I = 1 To TB.Count 13:   TB(I).VISIBLE = False 14: Next 15: 16: If PR.ロック = -1 Then 17:   If PR.冷 = -1 Then 18:     TB(1).VISIBLE = True 19:   Else 20:     TB(5).VISIBLE = True 21:   End If 22: End If 23: 24: If PR.冷 = -1 Then 25:   If PR.常温 = -1 Then 26:     TB(2).VISIBLE = True 27:   ElseIf PR.ロック = 0 Then 28:     TB(6).VISIBLE = True 29:   End If 30: End If 31: 32: If PR.常温 = -1 Then 33:   If PR.ぬる燗 = -1 Then 34:     TB(3).VISIBLE = True 35:   ElseIf PR.冷 = 0 Then 36:     TB(7).VISIBLE = True 37:   End If 38: End If 39: 40: If PR.ぬる燗 = -1 Then 41:   If PR.熱燗 = -1 Then 42:     TB(4).VISIBLE = True 43:   ElseIf PR.常温 = 0 Then 44:     TB(8).VISIBLE = True 45:   End If 46: End If 47: 48: If PR.熱燗 = -1 Then 49:   If PR.ぬる燗 = 0 Then 50:     TB(9).VISIBLE = True 51:   End If 52: End If

バーの表示／非表示を切り替えるコード

　正直にいって、自分でも冗長なコードだと思う（笑）。もっとうまいコーディングができる方は、よりシンプルにまとめてほしい。そんなコードだが解説していこう。

　1行目〜10行目で、バー画像のオブジェクトを新しく生成したコレクション「TB」の中に格納している。ということは、TB(1)〜TB(4)には長いバー画像が格納されており、TB(5)〜TB(9)には短いバー画像が、それぞれ左側から順番に格納されているということになる。

　12行目〜14行目は、コレクションの中に格納したバー画像のオブジェクトを、ループ文を使ってすべて非表示にしている。この辺りまでは先の甘辛の制御を行ったときと同様だ。

　残りの16行目〜52行目がバー画像の表示の制御を行っている部分となる。細かくは解説しないが、筆者が考えたアルゴリズム（？）を説明すると、「連続する2つの温度がどちらも正であれば長いバーを表示し、片方だけが正であれば短いバーを表示する」ということになる。それを左側から順番に適合させていくと、こういったコードになるはずだ。前述のとおり、もっとよいアルゴリズムがあると思うので、ぜひ発見してほしい。

　以上で、「甘辛」と「適温」2つの情報を視覚的に表現している要素部分は完成した。ここで覚えておいてほしいノウハウを再度繰り返せば、「ASP.NETでコントロール郡を制御する際には、コレクション・オブジェクトを利用すると効率がよい」ということだ。データベースから取得した情報を基に各コントロールを制御したい場合などには、このことを覚えておけばたいがいのパターンに対応できるはずだ。

INDEX
	実例で学ぶASP.NETプログラミング
	第9回　ASP.NETで実現する「見栄えの良い」商品紹介ページ−後編
	1．個別商品の情報提供部をデザインする
	2．情報を視覚的に表現している部分の作成（1）
	3．情報を視覚的に表現している部分の作成（2）
	4．商品コメントを表示する「特徴」部分の作成
	5．買い物かごに格納するボタン部の作成
	6．ユーザーがサイズ／価格を選択した際のイベント処理を実装する

　

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

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