占いのWebページを作るのよね。どんな風に作ればいいんだろう？教えて、高橋先生！

では、Turbo Delphiを起動して、ツールバーの[新規作成]ボタンをクリックします。オブジェクトリポジトリが開いたら左欄の「項目カテゴリ(A):」で「Webドキュメント」を選択して、右欄の「HTMLページ」を選択して[OK]ボタンをクリックします。「Untitled1.htm」という仮のファイル名で新規作成できました。

Hide image

図01 新規作成

画面中央に「作業中のページはフローレイアウトモードで、オブジェクトはワープロ内でのように上から下に並べられます。～」と書かれています。入力すると、この文字は見えなくなります。文字だけなら、ワープロソフトを使うように入力すればいいんですって。この中央部分をクリックし、入力用のカーソルを表示してから、ためしに「あなたの血液型をクリックしてください」と、入力してみます。

Hide image

図02 文字の入力

文字が小さいので少し大きくしてみましょう。入力した文字全体を選択して、「3」と表記されているサイズ変更コンボボックスで「6」に変更します。

Hide image

図03フォントサイズ変更

サイズを変更すると長くなるので、途中で改行を入れます。「血液型を」と「クリック」の間で[Enter]キーを押して改行します。

Hide image

図04 改行

それから中央に配置します。文字全体を選択して、ツールバーの[中央に揃える]ボタンをクリックします。

Hide image

図05 中央配置

こんな感じで作成できるなら簡単ね。次は血液型を表示すればいいわ。

表を挿入します。文の末尾にカーソルを置いて、改行を入れておきます。次にツールバーの右上にある[TABLEタグの挿入]ボタンをクリックして、「TABLEタグの挿入」ダイアログボックスを表示します。2×2の表を挿入するので「行(R):」と「列(C):」に「2」を入力します。次に表のサイズを設定します。「テーブル属性」の「幅(W):」に「250」、「高さ(H):」に「100」を入力します。さらに、表に入力した文字をセルのちょうど中央に配置したいので、「文字配置(L):」に「center」、「セル属性」の画面右下部で「テキスト位置揃え(T):」に「middle」を設定します。表の枠線をはっきり見えるように太くします。テーブル属性の右中央で「境界サイズ(Z):」に「3」を入力します。確認して、[OK]ボタンをクリックします。

Hide image

図06 TABLEタグの挿入

TABLEタグの挿入

Hide image

図07 TABLEタグの挿入ダイアログボックス

表が挿入されました。それぞれのセルに「A型」「B型」「O型」「AB型」と入力します。入力ができたら、セルの境界線をマウスで調整します。だいたい同じ大きさになればOKですって。うまく、マウスで移動できない場合は、セルにカーソルを置いてから、オブジェクトインスペクタ「プロパティ」ページの「width」プロパティに「120」と入力します。

Hide image

図08 幅調整

セルに色を付けます。「A型」のセルにカーソルを置いて、プロパティページの「bgcolor」プロパティで[ダイアログ](…) ボタンをクリックします。「色のセレクタ」ダイアログボックスが表示されますので、お好きな色を選択します。同じようにして、「B型」「O型」「AB型」のセルにも背景色を設定します。

ほかに、フォントを変更したり文字の色を変えたりしても、いいんですって。見た目はこれでOKね。

血液型をクリックしたら占い結果を表示するように、リンクを設定します。リンク先は、これから作成する「ResultPage.exe」というCGIです。保存先はInetpubのUranaiフォルダなので、インターネット上では「http://localhost/Uranai/ResultPage.exe」というアドレスになります。ただし今回のように、Webページの.htmファイルとCGIが同じサーバーに配置されている場合には、先頭の http://localhost/Uranai/ の部分は省略可能なんですって。それから、どの血液型を選択したか、CGIに知らせるために「?Blood=A」のように「?Blood=血液型」で付け加えます。

リンクの設定には、設定する文字列を選択してツールバーの[リンクの作成]ボタンをクリックします。「ハイパーリンク」ダイアログボックスが表示されたら、「種類(T):」が「http:」となっていることを確認して、「URL(U):」に

ResultPage.exe?Blood=A

と入力します。できたら[OK]ボタンをクリックします。同じようにして、「B型」「O型」「AB型」を設定します。

Hide image

図09 リンクの作成

やっと完成しましたね。名前をつけて保存します。ツールバーの［保存］ボタンをクリックして、「Uranai.htm」というファイル名で保存します。

Hide image

図10 Uranaiページ完成

では、同じようにしてもう1つ作ります。ツールバーの[新規作成]ボタンをクリックします。オブジェクトリポジトリが開いたら、左欄の「項目カテゴリ(A):」で「Webドキュメント」を選択して、右欄の「HTMLページ」を選択して[OK]ボタンをクリックします。

画面中央に「A型のあなたの(改行)ラッキーアイテムは」と入力します。全体を選択して文字サイズを変更します。ツールバーのサイズ変更コンボボックスで「6」を入力します。さらに中央に揃えるため、[中央に揃える]ボタンをクリックします。改行して新たな行に表を挿入します。今回はセルを1つにします。[TABLEタグの挿入]ボタンをクリックしたら、「行(R):」と「列(C):」に「1」を入力します。表のサイズを設定します。「幅(W):」に「220」、「高さ(H):」に「55」を入力します。さらに、表に入力した文字をセルのちょうど中央に配置したいので、「文字配置(L):」に「center」、「テキスト位置揃え(T):」に「middle」を設定します。表の枠線をはっきり見えるように太くします。「境界サイズ(Z):」に「3」を入力します。色もつけておきます。「Background Color:」の[ダイアログ](…)ボタンをクリックしてお好きな色を選んで、[OK]ボタンをクリックします。「TABLEタグの挿入」ダイアログボックスに戻ったら、すべての設定を確認して[OK]ボタンをクリックします。

TABLEタグの挿入

表の中に「オムライス」と入力して完成ですね。名前をつけて保存しておきます。ツールバーの［保存］ボタンをクリックして、「Result.htm」というファイル名で保存します。

Hide image

図11 Resultページ完成

何とかWebページが作成できました。次は占い結果を表示するCGIを作成します。CGIってどうやって作るんだったっけ？教えて、高橋先生！

間違えないようにしないとね。さっそく、作ってみます。まずツールバーの[新規作成]ボタンをクリックします。左欄の「項目カテゴリ(A):」で「WebBroker」を選択します。次に右欄に表示された「Webサーバーアプリケーション」を選択して、[OK]ボタンをクリックします。ダイアログボックスでは「CGI実行形式(C)」を選択してっと。

Hide image

図12 CGI実行形式を選択

画面が切り替わったわ。あれ、さっきの「Uranai.htm」や「Result.htm」は？

では、InterBaseから起動します。Windows OSのスタートメニューで「Borland InterBase 7.5 Developer [instance = gds_db]」の「InterBase サービスマネージャー [instance = gds_db]」を起動します。

起動したら「ステータス(T)」欄に、「InterBaseサーバーは停止中」と表示しているのを確認して、[起動(S)]ボタンをクリックします。

プロジェクトにユニットを追加します。ツールバーの[プロジェクトに追加]ボタンをクリックして「DBUnit.pas」を選択します。[開く(O)]ボタンをクリックしたらユニットが追加できます。そのときもしも「接続エラー」が表示されたら、InterBaseサーバーがうまく起動していません。確認して起動します。一度接続が切れた状態になるとSQLConnection1コンポーネントの接続が切れた状態になります。この場合は、「データベース」カテゴリの「Connection」を「True」に設定しておきます。

Webモジュールがあるユニットを表示します。デザインの画面であることを確認します。画面左下のオブジェクトインスペクタ、「プロパティ」ページの「その他」カテゴリで「Actions」プロパティの[ダイアログ](…)ボタンをクリックします。

Hide image

図13 Actionsプロパティ

そうすると「Actionの編集」ダイアログボックスが表示されます。ダイアログボックスの中のツールバーに[新規追加(Ins)]ボタンがあるので、クリックします。

Hide image

図14 新規追加ボタン

次にイベントを作成します。作成したアクション項目を選択して、オブジェクトインスペクタを「イベント」ページに切り替えます。イベントは「OnAction」だけです。ダブルクリックしてイベントハンドラを作成します。「Actionの編集」ダイアログボックスは[閉じる]ボタンをクリックして終了しておきます。

コードエディタに切り替わったら、さっきプロジェクトに追加した「DBUnit」のユニットを追加します。「ファイル(F)」メニューの「ユニットを使う(U)...Alt+F11」を選択します。「ユニットの使用」ダイアログボックスが表示されたら、「DBUnit」が選択されていることを確認して、[OK]ボタンをクリックします。

Hide image

図15 ユニットの使用

ユニットを追加したら、先ほど作成したイベントハンドラに戻ります。関数を呼ぶために、データモジュールを生成します。そのため「dm」関数を「TdmdLuckyItem」型で作ります。他に血液型を入れておくための「Blood_Type」変数をstring型で、関数のパラメータで使うために血液型を数値で表した「Blood_ID」変数をInteger型で、取得したラッキーアイテムを入れる「Blood_Item」変数をstring型で用意します。コード上に「WebModule2」と表記されていますが、末尾の数値は異なっていてもかまいません。太字部分を追加します。

procedure TWebModule2.WebModule2WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  dm : TdmdLuckyItem;
  Blood_Type : string;
  Blood_ID : Integer;
  Blood_Item : string;
begin

end;

Webページから送られてきた血液型をBlood_Type変数に代入して、数値に変換するコードを記述します。太字部分を追加します。

procedure TWebModule2.WebModule2WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  dm : TdmdLuckyItem;
  Blood_Type : string;
  Blood_ID : Integer;
  Blood_Item : string;
begin
  Blood_Type := Request.QueryFields.Values['Blood'];

  if Blood_Type = 'A' then
    Blood_ID := 1
  else if Blood_Type = 'B' then
    Blood_ID := 2
  else if Blood_Type = 'O' then
    Blood_ID := 3
  else if Blood_Type = 'AB' then
    Blood_ID := 4
  else
    Blood_ID := 0;
end;

これで、関数に使うパラメータが用意できました。データモジュールを生成して関数を呼び出します。太字部分を追加します。

procedure TWebModule2.WebModule2WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  dm : TdmdLuckyItem;
  Blood_Type : string;
  Blood_ID : Integer;
  Blood_Item : string;
begin
  Blood_Type := Request.QueryFields.Values['Blood'];

  if Blood_Type = 'A' then
    Blood_ID := 1
  else if Blood_Type = 'B' then
    Blood_ID := 2
  else if Blood_Type = 'O' then
    Blood_ID := 3
  else if Blood_Type = 'AB' then
    Blood_ID := 4
  else
    Blood_ID := 0;

  dm := TdmdLuckyItem.Create(nil);
  Blood_Item := dm.GetLuckyItem(Blood_ID);
  dm.Free;
end;

これで、ラッキーアイテムを取得できたわ。そうそう、DBUnitの自動生成をコメントにするんだったわね。プロジェクトソースを開きます。プロジェクトマネージャで「Project5」を右ボタンクリックします。末尾の数字は異なっていてもかまいません。メニューから「ソース表示(V)」をクリックします。表示できたら「TdmdLuckyItem」を生成している部分をコメントにします。

begin
  Application.Initialize;
  Application.CreateForm(TWebModule2, WebModule2);
  //  Application.CreateForm(TdmdLuckyItem, dmdLuckyItem);
  Application.Run;
end.

あとはWebページに表示するだけね。あ、でもどうやって表示するの？教えて、高橋先生！

Response.ContentType := 'text/html';

プロジェクトに「Result.htm」を追加します。ツールバーの[プロジェクトに追加 (Shift+F11)]をクリックして「プロジェクトに追加」ダイアログボックスを表示します。「ファイルの種類(T):」を「すべてのファイル*.*」に変更してファイルを探します。「Result.htm」ファイルを選択して、[開く(O)]ボタンをクリックします。プロジェクトマネージャで「Result.htm」をダブルクリックして開きます。デザインの画面が表示されますので、「コード」タブをクリックして、コードエディタに切り替えます。全体を選択してコピーしておきます。

もう一度、Webモジュールのコードエディタに戻ります。文書の種類を指定する「Response.ContentType := 'text/html;」を記述して、「Response.Content」にコピーしたHTMLタグを代入します。「A型」と表記しているところを「Blood_Type」、「オムライス」を「Blood_Item」に置き換えて、前後を「'」と「+」でつなげます。文が長くなるので、「ヘッダー」と「ボディ」、それから、ヘッダーの<HTML>を閉じるフッターといわれる部分に分けておきましょう。strHeader変数とstrBody変数、strFooter変数を用意して、それぞれに代入します。変数宣言３つと、タグの代入を記述します。太字部分を追加します。

procedure TWebModule2.WebModule2WebActionItem1Action(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  dm : TdmdLuckyItem;
  Blood_Type : string;
  Blood_ID : Integer;
  Blood_Item : string;
  strHeader : string;
  strBody : string;
  strFooter : string;
begin
  Blood_Type := Request.QueryFields.Values['Blood'];

(中略)

  Response.ContentType := 'text/html';
  strHeader := '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 '
    + 'Transitional//EN"><html><head><title></title></head>';
  strBody := '<body><p align="center"><font size="6">' + Blood_Type
    + '型のあなたの<br>ラッキーアイテムは</font></p>'
    + '<p align="center"></p>'
    + '<table cellspacing="1" cellpadding="1" width="220" border="3" align="center" height="55" bgcolor="#ffff99">'
    + '<tr><td bgcolor="#ffff99">'
    + '<p align="center">' + Blood_Item + '</p></td></tr>'
    + '</table></body>';
  strFooter := '</html>';
  Response.Content := strHeader + strBody + strFooter;

end;

これで完成です。保存して再構築してみます。ツールバーの［すべて保存］ボタンをクリックして保存します。ユニットは「ResultUnit」、プロジェクトは「ResultPage」とつけます。保存できたら、「プロジェクト(P)」メニューの「ResultPageを再構築(B)」をクリックします。エラーが出なければOKです。

できたら、テストしてみたいですよね。でもテストの仕方がよくわかりません。教えて、高橋先生！

では、エクスプローラで「Uranai.htm」と「ResultPage.exe」を「Inetpub」の「Uranai」フォルダにコピーします。次に、IISマネージャを起動します。デスクトップに作成したIISマネージャのアイコンやスタートメニューから起動したら、画面左側の一覧を[+]ボタンをクリックして、展開します。「規定のWebサイト(停止)」まで表示できたら、ツールバーで、黒い三角のアイコンが付いた[項目を開始します]ボタンをクリックします。

Hide image

図16 サービスの開始

開始できたらブラウザを起動します。「アドレス(D)」欄に「http://localhost/Uranai/Uranai.htm」と入力して[Enter]キーを押します。うまく表示できましたか？

Hide image

図17 Uranai.htm表示

できたら、次は血液型|