Borland Delphi 6 でビジュアルプログラミング

ビジュアルプログラミングとは フォーム等を使うプログラム フォーム等の配置はマウス操作で行う 振る舞い（ボタンを押したときの振る舞いなど）をプログラムで書く フォームの例）

フォーム TMemo コンポーネント （出力用） TButton コンポーネント （出力用） ３つの TLabel コンポーネント ３つの TEdit コンポーネント （入力用）

概要 例題１．ボタンを押すと，メッセージを表示するプログラム 例題２．ビジュアルプログラミングでの入力と出力 ビジュアルプログラミングの体験 入力用：　TMemo コンポーネント 出力用：　TEdit コンポーネント

例題１．ボタンを押すと， メッセージを表示するプログラム Borland Delphi 6 でのビジュアルプログラミングを体験する ここでは，「ボタンを押すと，ダイヤログボックス（メッセージ付き）を表示するプログラム」を作る ダイヤログボックスの表示のために ShowMessage を使う

実行(1/2) 「押してください」を クリックすると

実行(2/2) ダイヤログボックスが現れる

Borland Delphi 6 の 起動から終了まで の起動 フォーム の編集 プログラム コードの 編集と実行 プログラム コードの 保存 Borland Delphi 6 の終了 ビジュアルプログラミング では，「フォームの編集」を 行うことになる

Borland Delphi 6 の 起動から終了まで の起動 フォーム の編集 プログラム コードの 編集と実行 プログラム コードの 保存 Borland Delphi 6 の終了 １．アプリケーション 　　の新規作成 ２．コンポーネントの 　　配置 ３．大きさ，位置，キャ 　　プション等の調整 振る舞い（ボタンを押した ときなど）をプログラムで書く． その他

Borland Delphi 6 での フォームの編集の３手順 step 1 step 2 step 3 アプリケーション の新規作成 コンポーネント の配置 大きさ，位置， キャプション 等の調整

アプリケーションの新規作成 step 1 step 2 step 3 アプリケーション の新規作成 コンポーネント の配置 大きさ，位置， キャプション 等の調整

アプリケーションの新規作成(1/2) 「ファイル」 →「新規作成」 →「アプリケーション」を選ぶ

アプリケーションの新規作成(2/2) フォーム編集用のウインドウが現れる

アプリケーションの新規作成 今までは，コンソールアプリケーションの新規作成 ビジュアルプログラミング ① 「ファイル」→「新規作成」→「その他」を選ぶ ② 新規作成のためのウインドウが現れる ③ 新規作成では 「コンソールアプリケーション」を選ぶ 「OK」を選ぶ ④プログラムコード編集のためのウインドウが現れる ビジュアルプログラミング ① 「ファイル」→「新規作成」→「アプリケーション」を選ぶ ②フォーム編集用のウインドウが現れる

コンソールアプリケーション 入力は文字・数値 出力は文字・数値 コンソールアプリケーションのウインドウは色（背景は黒色），大きさなどの見栄えが変えられない フォームの機能は無い TButton, TMemo, TEdit, TLabel などは使えない

コンポーネントの配置 step 1 step 2 step 3 アプリケーション の新規作成 コンポーネント の配置 大きさ，位置， キャプション 等の調整

コンポーネントの配置(1/3) 「Standard」をクリック

コンポーネントの配置(2/3) 「TButton コンポーネントのアイコン」をクリック （左から８番目）

コンポーネントの配置(3/3) フォーム編集用ウインドウの好きな場所をクリックすると，コンポーネントが置かれる

コンポーネントの種類を間違ったとき コンポーネントを右クリック → 「編集」 → 「切り取り」 で，置いたコンポーネントを消すことができる

コンポーネントの配置 コンポーネントの種類を選ぶ コンポーネントを置く ① 「Standard」をクリック ② 適当なコンポーネントのアイコンをクリック 例） 「TButton コンポーネントのアイコン」（左から８番目） コンポーネントを置く ③ 「Form編集用ウインドウ」の好きな場所をクリックすると，コンポーネントが置かれる

大きさ，位置，キャプション等の調整 step 1 step 2 step 3 アプリケーション の新規作成 コンポーネント の配置

大きさの調整 コンポーネントの周りの黒い点を，マウスの左ボタンでドラッグすると，大きさが変わる

位置の調整 コンポーネントそのものを，マウスの左ボタンでドラッグすると，位置が変わる

キャプションの調整 Caption の欄に新しいキャプションを設定できる

大きさ，位置，キャプションの調整 大きさの調整 位置の調整 キャプションの調整 コンポーネントの周りの黒い点を，マウスの左ボタンでドラッグすると，大きさが変わる 位置の調整 コンポーネントそのものを，マウスの左ボタンでドラッグすると，位置が変わる キャプションの調整 Caption の欄に新しいキャプションを設定できる

練習１．例題１のここまでの手順を行え ① Borland Delphi 6 の起動 ② アプリケーションの新規作成 ③ コンポーネントの配置 「スタート」→「プログラム」→「Borland Delphi 6」→「Delphi 6」 ②　アプリケーションの新規作成 「ファイル」→「新規作成」→「アプリケーション」 ⇒　フォーム編集用のウインドウが現れる ③ コンポーネントの配置 コンポーネントの種類を選ぶ 「Standard」をクリックし，「TButton コンポーネントのアイコン」（左から８番目）をクリック コンポーネントを置く 「Form編集用ウインドウ」の好きな場所をクリック ④ 大きさ，位置，キャプション等の調整 見やすいように，納得のいくまで調整してください ☆余裕がある人は練習２に進んでください

Borland Delphi 6 での プログラムコードの編集と実行の手順 step 1 step 2 step 3 step 4 実行 コンポーネント の選択 プログラム コードの編集 構文チェック とコンパイル

コンポーネントの選択 step 1 step 2 step 3 step 4 実行 プログラム コードの編集 構文チェック とコンパイル

コンポーネントの選択 (1/2) 先ほど置いた TButton コンポーネントをダブルクリック

コンポーネントの選択 (2/2) プログラムコード編集用のウインドウが現れる

コンポーネントの選択 ①　先ほど置いた TButton コンポーネントをダブルクリック →　プログラムコード編集用のウインドウが現れる

プログラムコードの編集 step 1 step 2 step 3 step 4 実行 プログラム コードの編集 構文チェック とコンパイル コンポーネント の選択 プログラム コードの編集 構文チェック とコンパイル

プログラムコードの編集 すでにある begin と end の間にプログラムを書く

プログラムコードの編集 ここでは，試しに，次のように書く あとで実行すると分かるが，ShowMessage は procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('ボタンが押されましたが，何も行いません'); end; end. あとで実行すると分かるが，ShowMessage は 「ダイヤログボックス」を表示する機能をもつ

「フォーム」 「ボタンを押したとき」 という意味 という意味 procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('ボタンが押されましたが，何も行いません'); end; end. 「 procedure TForm1.Button1Click(Sender: TObject); 」の 行には意味がある．書き換えないこと

プログラムコードの編集 ①　プログラムコード編集用のウインドウ内で，すでにある begin と end の間にプログラムを書く

構文チェックとコンパイル step 1 step 2 step 3 step 4 実行 プログラム コードの編集 構文チェック とコンパイル コンポーネント の選択 プログラム コードの編集 構文チェック とコンパイル

構文チェックとコンパイル コンソールアプリケーションのときと同じ手順 ① 「プロジェクト」→「○○を構文チェック」を選ぶ ② 構文チェック結果が現れる エラーが出たら，プログラムコードを修正する ③ 「プロジェクト」→「○○をコンパイル」を選ぶ ④コンパイル結果が現れる 　 エラーが出たら，プログラムコードを修正する

実行 step 1 step 2 step 3 step 4 実行 プログラム コードの編集 構文チェック とコンパイル コンポーネント の選択 プログラム コードの編集 構文チェック とコンパイル

実行 「実行」 →「実行」を選ぶ

実行 「押してください」を クリックしてみる 実行画面が現れる

実行 ダイヤログボックスが現れる 「OK」を押すと消える

実行 ① 「実行」→「実行」を選ぶ 実行画面が現れる ② 実行画面で， 「押してください」をクリックしてみる ダイヤログボックスが現れる ←プログラムの「 ShowMessage('ボタンが押されましたが，何も行いません'); 」で作られたもの ③ダイヤログボックスのOKを押してみる ダイヤログボックスが消える

実行の終了 実行を終了するときは 「×」をクリックする

練習２．例題１の実行まで至りなさい ① コンポーネントの選択 先ほど置いた TButton コンポーネントをダブルクリック ①　コンポーネントの選択 先ほど置いた TButton コンポーネントをダブルクリック ⇒　プログラムコード編集用のウインドウが現れる ②　プログラムコードの編集 ③　コンパイル 「プロジェクト」→「○○をコンパイル」 ④　実行 「実行」→「実行」．「押してください」をクリックしてみる．ダイヤログボックスが現れるので「ＯＫ」をクリック procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage('ボタンが押されましたが，何も行いません'); end; end.

例題２．ビジュアルプログラミングでの入力と出力 ３つの数値 x, y, z を読み込んで（入力），x + y + z を表示（出力）するプログラムを作る 入力用：　Memo コンポーネント 出力用：　Edit コンポーネント

実行画面

例題２で使うコンポーネントの種類 TEdit TMemo TButton TLabel データの読み込み（入力） データの書き出し（出力） ボタン ShowMessage を使って，ダイアログボックスを出せる TLabel 説明書き

例題２のフォーム TMemo コンポーネント （出力用） TButton コンポーネント （出力用） ３つの TLabel コンポーネント ３つの TEdit コンポーネント （入力用）

例題２でのフォームの編集手順 コンポーネントの配置 キャプションの調整 TButton コンポーネント： １個 TMemo コンポーネント： １個 TEdit コンポーネント： ３個 TLabel コンポーネント： ３個 キャプションの調整 「Label1」 のキャプション： 「x」 「Label2」 のキャプション： 「y」 「Label3」 のキャプション： 「z」 「Button1」 のキャプション： 「計算実行」

TLabel TEdit TMemo TButton コンポーネント配置に関係する機能

TButton コンポーネントを置く （同時に位置と大きさを調整する）

TMemo コンポーネントを置く （同時に位置と大きさを調整する）

TEdit コンポーネントを３個置く （同時に位置と大きさを調整する）

TLabel コンポーネントを３個置く （同時に位置と大きさを調整する）

「Label1」のキャプションを「ｘ」に設定

「Label2」のキャプションを「y」に設定

「Label3」のキャプションを「z」に設定

「Button1」をクリックする．そして， 「計算実行」に設定

フォームの編集が終わったところ

☆余裕がある人は練習４に進んでください 練習３．例題２のここまでの手順を行え ① アプリケーションの新規作成 ② コンポーネントの配置 ①　アプリケーションの新規作成 「ファイル」→「新規作成」→「アプリケーション」 ⇒　フォーム編集用のウインドウが現れる ② コンポーネントの配置 TButton コンポーネント： １個 TMemo コンポーネント： １個 TEdit コンポーネント： ３個 TLabel コンポーネント： ３個 ③ 大きさ，位置，キャプション等の調整 「Label1」 のキャプション： 「x」 「Label2」 のキャプション： 「y」 「Label3」 のキャプション： 「z」 「Button1」 のキャプション： 「計算実行」 ☆余裕がある人は練習４に進んでください

オブジェクトツリー オブジェクトツリーのウインドウには，すべてのコンポーネントの「名前」が表示されている

「名前」と「キャプション」は違う キャプション： 名前： あくまでも「表示」のため． 見栄えに関係する．日本語可 キャプション：　 あくまでも「表示」のため． 見栄えに関係する．日本語可 例）　x, y, z, 計算実行 名前： すべてのコンポーネントに付けられた名前 プログラム中では，「名前」を使う 例） Button1, Edit1, Edit2, Edit3,

種類 名前 キャプション TButton Button1 計算実行 TEdit Edit1 キャプション無し Edit2 Edit3 TLabel Label1 x Label2 y Label3 z TMemo Memo1

オブジェクトインスペクタ コンポーネントの種類と 名前は，ここに表示される 最後に選んだ（置いたり，クリックしたりした）コンポーネントの情報が表示される 各項目の編集もできる コンポーネントの種類と 名前は，ここに表示される

コンポーネントの選択と プログラムコードの編集 ① コンポーネントの選択 先ほど置いた TButton コンポーネントをダブルクリック →　プログラムコード編集用のウインドウが現れる ② プログラムコードの編集 次ページのプログラムコードを書く

現れたプログラム編集用ウインドウ この行の意味は： procedure TForm1.Button1Click(Sender: TObject); コンポーネントの 名前「Button1」 クリック

使用する変数を begin の前に書く Butto1 をクリックしたときに 実行したいプログラムを begin と end; の間に書く

プログラムコードの編集

入力を行っている部分 出力を行っている部分 procedure TForm1.Button1Click(Sender: TObject); var x: real; var y: real; var z: real; begin Memo1.Lines.Add( 'ボタンが押されました' ); x := StrToFloat(Edit1.Text); y := StrToFloat(Edit2.Text); z := StrToFloat(Edit3.Text); Memo1.Lines.Add( 'x=' + FloatToStr(x) ); Memo1.Lines.Add( 'y=' + FloatToStr(y) ); Memo1.Lines.Add( 'z=' + FloatToStr(z) ); Memo1.Lines.Add( 'x+y+z=' + FloatToStr(x+y+z) ); end; 入力を行っている部分 出力を行っている部分

TEdit コンポーネントでの入力 TEdit コンポーネントに入ってる値の読み込み 整数の変数 := StrToInt(Edit1.Text); 浮動小数の変数 := StrToFloat(Edit1.Text); → 「Edit1」の部分は，コンポーネントの「名前」を書く (例）　「Edit2」, 「Edit3」のように変わる

TMemo コンポーネントでの出力 出力 Memo1.Lines.Add( 'メッセージ' ); Memo1.Lines.Add( IntToStr( 整数の変数 ) ); Memo1.Lines.Add( IntToFloat( 浮動小数の変数 ) );

練習４．例題２の実行まで至りなさい ① コンポーネントの選択 先ほど置いた TButton コンポーネントをダブルクリック ①　コンポーネントの選択 先ほど置いた TButton コンポーネントをダブルクリック ⇒　プログラムコード編集用のウインドウが現れる ②　プログラムコードの編集 ③　コンパイル 「プロジェクト」→「○○をコンパイル」 ④　実行 「実行」→「実行」．「押してください」をクリックしてみる．ダイヤログボックスが現れるので「ＯＫ」をクリック procedure TForm1.Button1Click(Sender: TObject); var x: real; var y: real; var z: real; begin Memo1.Lines.Add( 'ボタンが押されました' ); x := StrToFloat(Edit1.Text); y := StrToFloat(Edit2.Text); z := StrToFloat(Edit3.Text); Memo1.Lines.Add( 'x=' + FloatToStr(x) ); Memo1.Lines.Add( 'y=' + FloatToStr(y) ); Memo1.Lines.Add( 'z=' + FloatToStr(z) ); Memo1.Lines.Add( 'x+y+z=' + FloatToStr(x+y+z) ); end;