【A4】Delphiテクニカルセッション「RAD Studio 2007によるWebアプリケーション実装の基本テクニック」
株式会社ドリームハイブ
代表取締役
山本 悟

1

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

このセッションは・・・• テクニカルセッションです• このセッションではDB操作に必須となるCRUDを実際に実装します• ASP.NET AJAXを少し紹介します• あなたがASP.NETによってDBを扱うならば、最適解では無いかもしれませんが、参考になると思います

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2

アジェンダ• Webサイトの構成• CRUDに使うコンポーネント• 管理サイト作成のデモ:表示• 管理サイト作成のデモ:編集• 一般サイト作成のデモ• ASP.NET AJAXとは• ASP.NET AJAXのデモ
株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

構成の確認

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4

Webサイトの構成• 管理側と公開側• 管理側とは、インターネットを利用する一般ユーザがアクセスできない、データの保守・管理を行う側を指す• 公開側とは、インターネットを利用する一般ユーザがアクセス可能な側を指す• CRUDとは• Create, Read, Update, Deleteの略• 管理側はCRUD、公開側はRが多い• 本日作るサイト• シナリオ：企業の更新情報を公開・管理するシステムの作成• DB構成•BlackfishSQL•

DbxDataSource

株式会社ドリームハイブ http://www.dreamhive.co.jp/
5

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

(資料) - Webサイトの構成
Webアプリケーションの設定

管理ユーザ

Rのみ

インターネットWeb.config
Web.config

CRUD

admin_page.aspx
admin_page.aspx

管理側ページinfo_list.
info_list. aspx
aspx

一般側ページ

info_detail.
info_detail. aspx
aspx

一般ユーザ

DLL
DLL
Blackfish SQL

一般側

管理側

Webサーバ株式会社ドリームハイブ http://www.dreamhive.co.jp/

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

6(資料) テーブル構成■テーブル スキーマ
CREATE TABLE INFORMATION(ID INTEGER AUTOINCREMENT NOT NULL,INFO_TYPE SMALLINT DEFAULT 0 NOT NULL,RELEASE_DATE DATE,TITLE VARCHAR(128) NOT NULL,NOTE VARCHAR(1024),
VISIBLE BOOLEAN DEFAULT TRUE NOT NULL,CONSTRAINT information_pk PRIMARY KEY (ID));
CREATE TABLE INFO_CATEGORY(ID INTEGER NOT NULL,TITLE VARCHAR(128) NOT NULL,CONSTRAINT info_category_pk PRIMARY KEY (ID));■サンプルデータ
INSERT INTO information (info_type,release_date,title,note,visible) VALUES(0,{D '2008-2-1'},'タイトル
1','ノート1',TRUE);
INSERT INTO information (info_type,release_date,title,note,visible) VALUES(1,{D '2008-2-4'},'タイトル
2','ノート2',TRUE);
INSERT INTO information (info_type,release_date,title,note,visible) VALUES(0,{D '2008-2-7'},'タイトル
3','ノート3',TRUE);...
INSERT INTO info_category (id,title) VALUES(0,'最新情報');
INSERT INTO info_category (id,title) VALUES(1,'お知らせ');株式会社ドリームハイブ http://www.dreamhive.co.jp/
7

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

CRUDに使うコンポーネント• DBのデータ表示用のコントロール•

GridViewコントロール•

DetailsViewコントロール•

FormViewコントロール•

Repeaterコントロール

データ ソースから取得した複数のレコードの値を、表として表示するコントロール
データ ソースから取得した単一のレコードの値を、表として表示するコントロール
ユーザー定義のテンプレートを使用して、データ ソースから単一レコードの値を表示するコントロール
ユーザー定義のテンプレートを使用して、データ ソースから取得した複数のレコードの値を、繰り返し表示するコント
ロール• 入力の検証用のコントロール•～Validatorコントロール•ErrorMessageとText•Display•

ValidationSummaryコントロール•Page.IsValid

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

8

(資料) - DBとデータソースとコントロールの関係～DataSource
データバインディングが可能なコントロール

データベース•SELECT•INSERT•UPDATE•DELETE
等のデータアクセス用
Commandオブジェクトを含む

株式会社ドリームハイブ http://www.dreamhive.co.jp/
9

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

管理サイト作成のデモ:表示••

Web.Config•

データ エクスプローラから「Web.Configに追加」•Web.Config 内のConnectionStringにデータソースへの接続文字列を定義することで、複数のWebフォームから共通で利用することができる

一覧と詳細
•

ページング

•

項目の並べ替え、追加、削除•

LinkButtonコントロールなどのCommandNameプロパティで操作を指定
••
•
••
•
•
•
•

"Cancel""Delete""Edit""Insert""New""Page""Select""Sort""Update“※データ バインド コントロールは、特定のコマンド名を認識すると、そのコントロールの適切なイベントを自動的に発生させて処理します。
※ただし、すべてのデータ バインド コントロールが、すべてのコマンド名を認識するわけではありません。

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

10

(資料) – 管理ページSQL
GridView用DbxDataSourceのSELECT文
Select I.ID, I.INFO_TYPE, IC.TITLE As ICTITLE, I.RELEASE_DATE,I.TITLE, I.NOTE, I.VISIBLE
From INFORMATION I Inner Join INFO_CATEGORY IC On I.INFO_TYPE =IC.ID

FormView用DbxDataSourceのSELECT文
Select I.ID, I.INFO_TYPE, IC.TITLE As ICTITLE, I.RELEASE_DATE,I.TITLE, I.NOTE, I.VISIBLE
From INFORMATION I Inner Join INFO_CATEGORY IC On I.INFO_TYPE =IC.ID
Where (I.ID = ?)○パラメータ
ID=GridView1.SelectedValue

株式会社ドリームハイブ http://www.dreamhive.co.jp/
11

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

管理サイト作成のデモ:表示
•

項目の装飾
•

DataFormatString
日付のフォーマット：{0:yyyy/MM/dd}※数値がパラメータ番号を、「:」以降がフォーマット

•テンプレート機能•

Labelコントロールの追加とDataBindingの編集によるBoolean項目の表現•Public functionはEvalの装飾に利用できる•

多くのデータ表示コントロールはテンプレートによってカスタマイズが出来る<asp:Label id="Label1" runat="server" visible='<%# Eval("VISIBLE") %>'>表示する</asp:Label>■admin_page.pas
function Tadmin_page.ReturnToBr(s: &Object): string;
begin//結果がNULLの場合は空文字列を返す
if s is System.DBNull then begin
Result := '';NULLのハンドリング
Exit;
キャスト
end;
//改行を<BR />に変更する
Result := (s as String).Replace(#13#10, '<br />' + #13#10).ToString;
end;

利用

■admin_page.aspx<asp:Label id="NOTELabel" runat="server" text='<%# ReturnToBr(Eval("NOTE")) %>'></asp:Label>

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

12管理サイト作成のデモ:編集• 検証コントロールの追加••

一般的に必要とされる検証の9割をカバーするが、足りない分は、CustomValidatorで自作する必要がある
複数のコントロールを組み合わせて利用する例)必須(RequiredValidator)と入力値検証(RegularExpressionValidator)
例)日付のフォーマット：¥d{4}/¥d{1,2}/¥d{1,2}• 編集にマスタテーブルの情報を利用する•

DropDownListコントロールで情報を参照する■DropDownList用DbxDataSourceのSELECT文
Select INFO_CATEGORY.ID, INFO_CATEGORY.TITLE From INFO_CATEGORY■DropDownListのプロパティ(※テーブル定義参照)
値に利用するフィールド：DataValueField="ID"
表示に利用するフィールド：DataTextField="TITLE“
選択されるフィールド：SelectedValue='<%# Bind("INFO_TYPE") %>'• 削除の確認•

OnClientClickプロパティにJavaScriptを記述することで実装
例) DeleteButton.OnClientClick=“return confirm(‘削除しますか？')"株式会社ドリームハイブ http://www.dreamhive.co.jp/
13

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

一般サイト作成のデモ
•

一覧

•

カテゴリによるフィルタリングの追加•

カテゴリに「全て」を追加••

Repeaterによるデザイン例:リンク
DropDownListコントロールを利用•

DropDownList.AppendDataBoundItems•IsNull
Select I.ID, IC.TITLE, I.RELEASE_DATE, I.TITLE
From INFORMATION I Inner Join INFO_CATEGORY IC On IC.ID = I.INFO_TYPE
Where I.INFO_TYPE=IsNull(?, I.INFO_TYPE)) And I.VISIBLE※Blackfish SQLにはIFNULLがあるが、Where句で動作しない•CASE■Blackfish SQLでCASE文によるフィルタリング
Select I.ID, IC.TITLE, I.RELEASE_DATE, I.TITLE
From INFORMATION I Inner Join INFO_CATEGORY IC On IC.ID = I.INFO_TYPE
Where (I.INFO_TYPE=CASE ?
WHEN 0 THEN 0
WHEN 1 THEN 1
ELSE I.INFO_TYPEEND) And I.VISIBLE

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

14

ASP.NET AJAXとは• ASP.NETからAJAXを手軽に利用するためのライブラリ群• ASP.NET 2.0 AJAX Extensions 1.0:コアライブラリ• ASP.NET AJAX Futures:周辺ライブラリ• ASP.NET AJAX Control Toolkit:便利な部品群• http://asp.net/ajax/ からダウンロード• RAD Studio 2007への組み込みは、DLLをコピーし、参照設定するだけ
CodePlex上で開発されるコミュニティベースのサポートのみ※AJAXの部品はほとんどここにある

Microsoftの製品としてサポートが提供される範囲

株式会社ドリームハイブ http://www.dreamhive.co.jp/
15

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ASP.NET AJAXのデモ• ToolkitScriptManagerの追加• ロケールの設定
EnableScriptGlobalization=True
EnableScriptLocalization=True• Web.configの修正• AJAX利用のための設定を追加※「Ajax 対応 ASP.NET Web アプリケーション」でプロジェクトを作成した場合には、あらかじめ追加されている• CalendarExtenderの追加• ポップアップカレンダーを生成するエクステンダ
カレンダーを表示するトリガとなるコントロール：PopupButtonId
カレンダーの値を入れるコントロール：TargetControlId
カレンダーの入力フォーマット：SelectDate
株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

16

(資料) - ASP.NET AJAXのためのWeb.config設定※「Ajax 対応 ASP.NET Web アプリケーション」でプロジェクトを■4つのセクションをsystem.webセクションに追加する<<contsystem.web>
作成した場合には、あらかじめ追加されています<pages>rols><add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></controls></pages><compilation defaultLanguage="c#" debug="true"><assemblies><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/></assemblies></compilation><httpHandlers><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers><httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></httpModules></system.web>
株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

17

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

18

会社紹介
商号

株式会社ドリームハイブ設立

2001年12月4日

ミッション「モノ創りをし、皆で共有する」

在り方

システム ソリューション カンパニー

約束

お客様とともに夢を実現します

中小企業が抱えるIT関連の負荷を軽減し、仕事を楽にするサービスを提供する会社

株式会社ドリームハイブ http://www.dreamhive.co.jp/
19

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

スピーカープロフィール
山本 悟：：略歴：：
17歳からコンピュータ関係にはまり、プログラミング言語で一番最初に触ったのはTurbo C++でした。
大学卒業後、そのまま起業しましたが、今でも自分勝手に創るのが一番好きです。
現在の開発案件では、主に.NETとPHPを利用しています。
案件が少ないせいもあり、JAVAが苦手なのですが、加えてUNIXも苦手です。
Delphiとは1.0の頃から出会い、バイト先のゲーム会社のサポートプログラムを作成したりしていました。
現在も、ちょっとしたプログラムであればDelphiで作ることが多いですし、次のスライドでご紹介するDH-APPLIももちろんDelphi製です。
現在はPM系や言語系といったIT系のトレーニングを多くやっていますが、昔テレビ埼玉でパソコンの先生をしていたこともあります。

株式会社ドリームハイブ http://www.dreamhive.co.jp/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

20

公開アプリの紹介
アプリ• DH-APPLI• M – シンプルなメモツール• Change! –お手軽名前変更ツール• GrepReplace –複数行一括置換• PlacesBar – ダイアログを便利に！
• ColorPicker – 色情報取得ツール• その他• VALUE-DOMAIN 専用 DNS更新ツール
累計60,000件以上のダウンロード！

アプリが目指すもの

アプリの配布先•

自社Web
http://dhive.jp/dhappli/•Vector
http://www.vector.co.jp/vpack/browse/person/an037127.html•窓の杜
http://www.forest.impress.co.jp/lib/sys/file/filesearch/grprplc.html
株式会社ドリームハイブ http://www.dreamhive.co.jp/

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

21