データベースの型とUIコントロールの設計指針
フィールド種別
代表的なデータベースの型としては以下の型があります。 それぞれの型を編集する際にどのUIコントロールを使用するかという観点でフィールドを分類します。 そのフィールド種別の一覧表は以下になります。
フィールド一覧
フィールド種別 データベースの型 データの編集方法 データの表示方法
テキスト
ノーマルテキスト 文字型 単一行テキストボックス+文字数検証 テキスト
複数行テキスト 文字型 複数行テキストボックス+文字数検証 テキスト
E-Mail、URLなど 文字型 単一行テキストボックス+検証処理 テキスト
HTMLテキスト 文字型 WYSIWYGコントロール+XSS検証 HTMLの埋め込み
数字・Bool・バイナリ
Bool型 Bool型 チェックボックス Yes・No
画像など
数値 数字型 単一行テキストボックス+検証処理 カンマ区切りテキスト
金額 金額の型 単一行テキストボックス+検証処理 カンマ区切りテキスト
画像型 バイナリ型 ファイル選択コントロール 画像
ファイル バイナリ型 ファイル選択コントロール ハイパーリンク
クリックでファイル取得
日付・時刻
日付 DateTime型 日付選択コントロール テキスト
時間 Time型 時間選択コントロール テキスト
リスト
Enum 文字型
数値型
ラジオボタン
ドロップダウンリスト
テキスト
親テーブル 外部キー ラジオボタン
ドロップダウンリスト
参照ダイアログボックス
テキスト
家計簿アプリケーション
家計簿の管理をするアプリケーションを設計・作成してみます。 必要な列としてアカウントCD、商品名、購入日時、商品種別、個数、金額、写真、詳細の列を持つとしましょう。 テーブルの作成スクリプトは以下のようになります。
CREATE TABLE Accounts 
([AccountCD] uniqueidentifier NOT NULL 
,[ItemName] nvarchar(100) NOT NULL
,[PurchaseTime] datetime NOT NULL
,[ItemType] nvarchar(20) NOT NULL
,[ItemCount] int NOT NULL
,[ItemPrice] decimal NOT NULL
,[PhotoImage] varbinary(max) 
,[Detail] nvarchar(max) NOT NULL
)
GO 
ALTER TABLE [Accounts] 
ADD CONSTRAINT [PK_Accounts] 
PRIMARY KEY NONCLUSTERED 
([AccountCD])
GO 
スキーマ図は以下のようになります。
それぞれの列とフィールド種別の対応は以下のようになります。主キーのAccountCDは自動採番するので画面には表示されません。
ItemName ノーマルテキスト
PurchaseTime 日付
ItemType Enum型
ItemCount 数値
ItemPrice 金額
PhotoImage 画像型
Detail 複数行テキスト
フィールド種別を元に購入した情報の追加画面を作成すると以下のようになります。
登録後は一覧のページに移動して登録内容を確認できるとよいでしょう。 フィールド種別と一覧の表示方法の対応は以下のようになります。
ItemName テキスト
PurchaseTime テキスト
ItemType テキスト
ItemCount カンマ区切りテキスト
ItemPrice カンマ区切りテキスト
PhotoImage 画像
Detail 複数行テキスト
一覧ページは以下のようになります。
このようにDBの型とデータの編集・表示には関連があります。
逆に言えばDBの型が決まると自動的にUIのデザインも決まってくることがわかります。
要望収集システム
ユーザーからの要望を収集するシステムを考えます。列としてメールアドレス、要望種別、対応済み、添付ファイル、HTMLの列を持つテーブルを定義します。
--UserRequestCategory テーブルの作成
CREATE TABLE UserRequestCategory 
([CategoryCD] uniqueidentifier NOT NULL 
,[CategoryName] nvarchar(40) NOT NULL
)
GO 
ALTER TABLE [UserRequestCategory] 
ADD CONSTRAINT [PK_UserRequestCategory] 
PRIMARY KEY NONCLUSTERED ([CategoryCD])
GO 


--UserRequests テーブルの作成
CREATE TABLE UserRequests 
([RequestCD] uniqueidentifier NOT NULL 
,[MailAddress] nvarchar(400) NOT NULL
,[CategoryCD] uniqueidentifier NOT NULL 
,[IsResponse] bit NOT NULL 
,[FileData] varbinary(max) 
,[HtmlText] nvarchar(max) NOT NULL 
)
GO 
ALTER TABLE [UserRequests] 
ADD CONSTRAINT [PK_UserRequests] 
PRIMARY KEY NONCLUSTERED ([RequestCD])
GO 

--外部キーの作成
Alter Table [UserRequests]
Add Constraint UserRequests_CategoryCD_UserRequestCategory
Foreign Key (CategoryCD) References UserRequestCategory (CategoryCD)
On Update Cascade
On Delete Cascade

GO
テーブルの設計図は以下のようになります。
それぞれの列とフィールド種別との対応は以下のようになります。RequestCDは自動採番なので画面には現れません。
MailAddress E-Mail
CategoryCD 親テーブル
IsResponse Bool型
FileData ファイル
HtmlText HTMLテキスト
フィールド種別を元に要望の追加画面を作成すると以下のようになります。
フィールド種別と一覧の表示方法の対応は以下のようになります。
MailAddress テキスト
CategoryCD テキスト
IsResponse 画像
FileData リンク
HtmlText HTMLテキスト
一覧の画面は以下のようになります。
Create at 2012/1/23 LastUpdate 2012/2/01