【T2】Delphi チュートリアルセッション「『Delphiはじめて奮戦記』で学ぶDelphiチュートリアル」

株式会社フルネス
コーチング事業部 マネージャー
田原 孝

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

1アジェンダ• 株式会社フルネスについて• Delphiプログラミングの基本• 演習：計算機のテンキーを作る• 演習：計算機の四則演算ボタンを作る• 練習問題• まとめ

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

2

1

株式会社フルネスについて• 事業内容• ハンズオン教育サービス• コーチングサービス• スキル診断サービス• システム開発サービス• 教育セミナーのコースは、オブジェクト指向、UML、Delphi/Java/.NETなど• 詳しくは、http://www.fullness.co.jp/をご覧ください。
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3

チュートリアルの目的と内容• 目的• Delphiのプログラミングを体験！

• 内容• 簡単な計算機(電卓)を作ってみる• 演習の順序• テンキーを作る• 休憩• 四則演算ボタンを作る• 練習問題 「計算結果が3の倍数なら赤になる」

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

42

演習がうまくいかないときは。。。
• 手をあげてください！
• アシスタントがフォローさせて頂きます

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

5

Delphiプログラミングの基本

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

63

プログラミングの基本は「コンポーネント」
コンポーネント
操

作

画面の作
成

③

①
画面

し出び呼②
ソースコードprocedure TfrmCalc.sbtn1Click(Sender: TObject);begin
if lblEnzan.Caption = '' thenedtInput1.Text := edtInput1.Text + '1'else
edtInput2.Text := edtInput2.Text + '1';end;

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

7

Delphiプログラミング手順
1. プロジェクトを作成
2. フォームに「コンポーネント」を配置
3. 「コンポーネント」のプロパティを設定
4. 「コンポーネント」のイベントハンドラにソースコードを記述
5. 実行して動作を確認
6. 完成！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

84

演習： 計算機のテンキーを作る

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

9

学習内容• コンポーネントで画面を作る方法• コンポーネントのプロパティ• コンポーネントのイベントとイベントハンドラ• オブジェクトインスペクタの使い方

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

105コンポーネントのプロパティとはコンポーネントプロパティ
イベントメソッド

色やサイズなど「表示や動作を決める属性」
例：背景色 Colorプロパティ
幅 Widthプロパティ
有効 Enabledプロパティ

11

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

オブジェクトインスペクタでプロパティの値を設定
値を設定する
コンポーネント名
プロパティ名本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

プロパティの値

126オブジェクトインスペクタの表示形式• [表示形式｜名前順]ポップアップメニューを選択

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

13[演習] プロジェクトの作成•[ファイル｜新規作成｜VCLフォームアプリケーション]メニューを選択

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

147

[演習]計算機フォームのプロパティを設定•オブジェクトインスペクタで以下のプロパティを設定してくだ
さい
プロパティ名CaptionHeightWidth

設定する値
計算機
38050015

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

フォームにコンポーネントを配置する方法
1. ツールパレットのコンポーネン
トをクリッククリック
2. フォーム上の配置したい場所をクリック
クリック

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

168

[演習] TPanelコンポーネントを配置•以下のコンポーネントを配置してください
カテゴリ
Standardコンポーネント
TPanel配置先フォーム• 以下のプロパティを設定してくださいコンポーネント名
Panel１

プロパティ名
Align

設定する値
alTop

Caption(空白)

EnabledFalse

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

17[演習] TEditコンポーネントを配置• 以下のコンポーネントを配置してください
カテゴリ
Standard

コンポーネント 個数
配置先
TEdit
3個 Panel１

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

189

[演習] TEditコンポーネントを配置(つづき)コンポーネント名
Edit１

Edit2

Edit3

プロパティ名Color
Name
TextColorName
Text
Color
Name
Text

設定する値
clWhiteedtInput１(空白)clYellowedtInput2(空白)clYellow
edtKekka(空白)19

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

[演習] TLabelコンポーネントを配置
カテゴリ
Standard

コンポーネント
TLabelコンポーネント名Label１

Label2個数
配置先2個 Panel１

プロパティ名AutoSize
Name
Width
CaptionName
Visible

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

設定する値
False
lblEnzan
20＝lblEqual
False
2010

[演習]位置あわせ
1. TEditコンポーネントとTLabelコンポーネントを選択

2. [垂直に中央に置く]ボタン押下

21

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

[演習] TLabelコンポーネントの設定
コンポーネント名Label１

プロパティ名Caption

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

設定する値
(空白)

2211

[演習] TFlowPanelコンポーネントを配置
カテゴリ
Additional

コンポーネント
TFlowPanel

個数1個

コンポーネント名
プロパティ名FlowPanel１
Align
CaptionPadding Bottom
Left
Right
TopWidth

配置先
フォーム
設定する値
alLeft
(空白)
55
55250
23

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

[演習] TSpeedButtonコンポーネントを配置
カテゴリ
コンポーネント
Additional TSpeedButton
コンポーネント名
SpeedButton１

プロパティ名HeightWidth

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

個数
配置先
1個 FlowPanel１
設定する値
7575

2412

[演習] TSpeedButtonコンポーネントをコピー
1. SpeedButton1コンポーネントを右クリック
2. [編集｜コピー]メニューを選択

3. SpeedButton1コンポーネントを右クリック
4. [編集｜貼り付け]メニューを選択
5. 「3.」と「4.」を繰り返して、SpeedButtonを10個にする

25

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

[演習] TSpeedButtonコンポーネントを設定
コンポーネント名
SpeedButton１～9
SpeedButton１0

プロパティ名CaptionCaptionWidth

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

設定する値
１～90
225

26

13

[演習]ファイルに保存
1. [ファイル｜すべて保存]メニューを選択
2. 以下のとおり入力し、[保存]ボタン押下CalcForm

ファイル名

3. 以下のとおり入力し、[保存]ボタン押下
Calclator

ファイル名

27

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

設計モードと実行モード
プログラム実行設計モード実行モード
プログラム終了• プログラムの変更は、設計モードしか出来ない

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

28

14

[演習]プログラムを実行
1. [実行｜実行]メニューを選択•

プログラムが実行され、実行モードになる

2. 動作を確認したら、計算機ウィンドウの[X]ボタン押下•

プログラムが終了し、設計モードに戻る

29

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

イベントとイベントハンドラ
コンポーネント

ソースコードプロパティ
キー入力
マウス操作など

イベントメソッド

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

呼び出す

イベントハンドラ
procedure TForm3.SpeedButton1Click(Sender:TObject);
begin
edtInput1.Text := edtInput1.Text + '1';
end;

30

15

イベントハンドラの作り方①ダブルクリック
成②作

け連付③関コンポーネント

ソースコードイベント

イベントハンドラ

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

31

フォームとソースの切り替え• [コード]タブ• ソースコードを表示• [デザイン]タブ• フォームを表示

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

32

16

テンキーのOnClickイベントハンドラの概要
SpeedButton1コンポーネント①クリック

ソースコード②OnClickイベント OnClickイベントハンドラ

ロパプtx
Te
③
edtInput1コンポーネント

定設をティ

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

33[演習]テンキーのOnClickイベントハンドラを作成
1. オブジェクトインスペクタでSpeedButton1のOnClickイベントをダブルクリック

2. 以下のソースコードを入力
procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
edtInput１.Text := edtInput１.Text + '１';
end;
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

34

17

[演習]テンキーのOnClickイベントハンドラを作成
1. SpeedButton2～10のOnClickイベントハンドラを作成
2. SpeedButton1のOnClickイベントハンドラのbegin～
endのコードをコピー
3. SpeedButton2～10のOnClickイベントハンドラにペースト
4. 「‘1’」の部分を各ボタンの数字(2～9,0)に変更
procedure TForm3.SpeedButton2Click(Sender: TObject);
begin
edtInput1.Text := edtInput1.Text + '2';
end;
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

35[演習]プログラムを実行
1. [ファイル｜すべて保存]メニューを選択
2. [実行｜実行]メニューを選択
3. テンキーをクリック•

押したキーの値がedtInput1に表示される

4. 動作を確認したら、計算機ウィンドウの[X]ボタン押下•プログラムが終了し、設計モードに戻る

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

3618

ここまでのまとめ• プログラミングの基本は「コンポーネント」

作の作
成操

画面

コンポーネント
③

①
画面

びし出呼
②
ソースコード• プロパティとイベントはオブジェクトインスペクタで設定• イベントハンドラにソースコードを記述
37

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

休憩

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

3819

演習： 計算機の四則演算ボタンを作る

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

39

学習内容
• if文
• データ型

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

40

20

[演習] TGridPanelコンポーネントを配置
カテゴリAdditional

コンポーネント
TGridPanel

コンポーネント名
GridPanel１

個数
配置先1個 フォーム

プロパティ名Align
Caption

設定する値
alClient(空白)41

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

[演習] TButtonコンポーネントを配置
カテゴリ
Standard

コンポーネント
TButton

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

個数
配置先
5個 GridPanel1

4221

[演習] TButtonコンポーネントを配置(つづき)コンポーネント名
Button１
Button2
Button3
Button4
Button5

プロパティ名CaptionHeightCaptionHeightCaptionHeightCaptionHeightCaption

設定する値＋(全角の＋)
75－(全角の－)
75×(全角の×)75
÷
(全角の÷)
75＝(全角の＝)
43

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

四則演算ボタンの概要
Button1コンポーネント①クリック

ソースコード②OnClickイベント OnClickイベントハンドラ
e’ow＋hit‘
=clW
cn:
==o:
i:
trplorol oCaCCo④⑤③lllYe

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

4422

[演習] [＋]ボタンのOnClickイベントハンドラ
1. 「＋」Button1のOnClickイベントハンドラを作成
2. テキスト P.152の中段のソースコードを入力

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

45[演習] 「－」「×」「÷」ボタンのOnClickイベントハ
ンドラ
1. 「－」ボタンのOnClickイベントハンドラを作成
2. テキスト P.153のソースコードを入力•「＋」ボタンとほぼ同じコードなのでコピペしてください

3. 同じように「×」「÷」ボタンのOnClickイベントハンドラを作成
4. テキスト P.153のソースコードを入力•「＋」ボタンとほぼ同じコードなのでコピペしてください

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

46

23

[演習]プログラムを実行
1. [ファイル｜すべて保存]メニューを選択
2. [実行｜実行]メニューを選択
3. テンキーをクリック
4. 四則演算ボタンをクリック•演算子が表示される

5. 動作を確認したら、計算機ウィンドウの[X]ボタン押下•

プログラムが終了し、設計モードに戻る

47

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

テンキーの動作を修正• 四則演算ボタン押下前は、edtInput1に表示• ボタン押下後は、edtInput2に表示
四則演算ボタン

画面

押下前
押下後

• 四則演算ボタン押下の判定は「 lblEnzan.Captionプロパティ」で可能
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

4824

if文
if 条件式 then
条件式が成立したときに実行する文

「;」不要

else
条件式が不成立のときに実行する文 ;if lblEnzan.Caption = '' thenedtInput1.Text := edtInput1.Text + '1'

「;」不要

else
edtInput2.Text := edtInput2.Text + '1';

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

49[演習]テンキーのOnClickイベントハンドラを修正
1. SpeedButton1のOnClickイベントハンドラを表示
2. テキスト P.154のとおり変更
3. SpeedButton2～10も同様に変更•SpeedButton1とほぼ同じコードなのでコピペしてください

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

50

25

[演習]プログラムを実行
1. [ファイル｜すべて保存]メニューを選択
2. [実行｜実行]メニューを選択
3. テンキーをクリック
4. 四則演算ボタンをクリック
5. テンキーをクリック•

edtInput2に表示される

6. 動作を確認したら、計算機ウィンドウの[X]ボタン押下•

プログラムが終了し、設計モードに戻る

51

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

[＝]ボタンの概要
Button5コンポーネント①クリック

ソースコード②OnClickイベント OnClickイベントハンドラ

定示
得
得
判
取をを表をを取
算
果値
値
演
結力
力
則算
入
入
四計
③④⑤
⑥

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

5226

[演習] [＝]ボタンのOnClickイベントハンドラ
1. 「＝」ボタンのOnClickイベントハンドラを作成
2. テキスト P.163下段～P.164のソースコードを入力•行端の「;」の有無を確認しながら入力してください

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

53[演習]プログラムを実行
1. [ファイル｜すべて保存]メニューを選択
2. [実行｜実行]メニューを選択
3. テンキーをクリック
4. 四則演算ボタンをクリック
5. テンキーをクリック
6. [=]ボタンをクリック•

計算結果が表示される

7. 動作を確認したら、計算機ウィンドウの[X]ボタン押下•

プログラムが終了し、設計モードに戻る

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

5427

練習問題

55

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

[練習問題]• 計算結果が3の倍数なら、edtKekkaコンポーネン
トを赤色にする• ヒント• ３の倍数か判定する方法
if Frac(Ans / 3) = 0.0 then• 赤色

Frac関数は、小数部の値を返す
例： Frac(1.3) = 0.3

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

5628

まとめ

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

57

Delphiチュートリアルのまとめ• Delphiプログラミングの基本は「コンポーネント」• 「コンポーネント」で画面を作成• 「コンポーネント」のイベントにソースコードを記述• ソースコードで「コンポーネント」を操作• Delphiはコンポーネントを活用して、簡単にプログラムが作れる！

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

5829

ありがとうございました

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

5930