Microsoft PowerPoint - visualprogram.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - visualprogram.ppt"

たつぞうことじ
5 years ago
Views:

1 ビジュアルプログラミングとは Borland Delphi 6 でビジュアルプログラミングフォーム等を使うプログラムフォーム等の配置はマウス操作で行う振る舞い ( ボタンを押したときの振る舞いなど ) をプログラムで書くフォームの例 ) フォーム概要 TMemo コンポーネント ( 出力用 ) TButton コンポーネント ( 出力用 ) 例題 1. ボタンを押すと, メッセージを表示するプログラムビジュアルプログラミングの体験例題 2. ビジュアルプログラミングでの入力と出力 3 つの TLabel コンポーネント 3 つの TEdit コンポーネント ( 入力用 ) 入力用 : TMemo コンポーネント出力用 : TEdit コンポーネント

2 例題 1. ボタンを押すと, メッセージを表示するプログラム実行 (1/2) Borland Delphi 6 でのビジュアルプログラミングを体験するここでは, ボタンを押すと, ダイヤログボックス ( メッセージ付き ) を表示するプログラムを作るダイヤログボックスの表示のために ShowMessage を使う押してくださいをクリックすると実行 (2/2) Borland Delphi 6 の起動から終了まで Borland Delphi 6 の起動フォームの編集プログラムコードの編集と実行プログラムコードの保存 Borland Delphi 6 の終了ダイヤログボックスが現れるビジュアルプログラミングでは, フォームの編集を行うことになる

3 Borland Delphi 6 の起動から終了まで Borland Delphi 6 でのフォームの編集の 3 手順 Borland Delphi 6 の起動フォームの編集 1. アプリケーションの新規作成 2. コンポーネントの配置 3. 大きさ, 位置, キャプション等の調整プログラムコードの編集と実行プログラムコードの保存振る舞い ( ボタンを押したときなど ) をプログラムで書く. その他 Borland Delphi 6 の終了 step 1 step 2 step 3 アプリケーションの新規作成コンポーネントの配置大きさ, 位置, キャプション等の調整アプリケーションの新規作成アプリケーションの新規作成 (1/2) step 1 step 2 step 3 アプリケーションの新規作成コンポーネントの配置大きさ, 位置, キャプション等の調整ファイル新規作成アプリケーションを選ぶ

4 アプリケーションの新規作成 (2/2) アプリケーションの新規作成今までは, コンソールアプリケーションの新規作成 1 ファイル新規作成その他を選ぶ 2 新規作成のためのウインドウが現れる 3 新規作成ではフォーム編集用のウインドウが現れるコンソールアプリケーションを選ぶ OK を選ぶ 4プログラムコード編集のためのウインドウが現れるビジュアルプログラミング 1 ファイル新規作成アプリケーションを選ぶ 2 フォーム編集用のウインドウが現れるコンソールアプリケーション入力は文字数値出力は文字数値コンポーネントの配置 step 1 step 2 step 3 コンソールアプリケーションのウインドウは色 ( 背景は黒色 ), 大きさなどの見栄えが変えられないアプリケーションの新規作成コンポーネントの配置大きさ, 位置, キャプション等の調整フォームの機能は無い TButton, TMemo, TEdit, TLabel などは使えない

(3/3) コンポーネントの種類を間違ったときフォーム編集用ウインドウの好きな場所をクリックすると,

5 コンポーネントの配置 (1/3) コンポーネントの配置 (2/3) Standard をクリック TButton コンポーネントのアイコンをクリック ( 左から 8 番目 ) コンポーネントの配置 (3/3) コンポーネントの種類を間違ったときフォーム編集用ウインドウの好きな場所をクリックすると, コンポーネントが置かれるコンポーネントを右クリック編集切り取りで, 置いたコンポーネントを消すことができる

コンポーネントの配置コンポーネントの種類を選ぶ 1 Standard をクリック 2 適当なコンポーネントのアイコンをクリック例 ) TButton コンポーネントのアイコン ( 左から8 番目 ) コンポーネントを置く 3 Form 編集用ウインドウの好きな場所をクリックすると, コンポーネントが置かれる大きさ, 位置,

6 コンポーネントの配置コンポーネントの種類を選ぶ 1 Standard をクリック 2 適当なコンポーネントのアイコンをクリック例 ) TButton コンポーネントのアイコン ( 左から8 番目 ) コンポーネントを置く 3 Form 編集用ウインドウの好きな場所をクリックすると, コンポーネントが置かれる大きさ, 位置, キャプション等の調整 step 1 step 2 step 3 アプリケーションの新規作成コンポーネントの配置大きさ, 位置, キャプション等の調整大きさの調整位置の調整コンポーネントの周りの黒い点を, マウスの左ボタンでドラッグすると, 大きさが変わるコンポーネントそのものを, マウスの左ボタンでドラッグすると, 位置が変わる

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

7 キャプションの調整 Caption の欄に新しいキャプションを設定できる大きさ, 位置, キャプションの調整大きさの調整コンポーネントの周りの黒い点を, マウスの左ボタンでドラッグすると, 大きさが変わる位置の調整コンポーネントそのものを, マウスの左ボタンでドラッグすると, 位置が変わるキャプションの調整 Caption の欄に新しいキャプションを設定できる練習 1. 例題 1のここまでの手順を行え 1 Borland Delphi 6 の起動スタートプログラム Borland Delphi 6 Delphi 6 2 アプリケーションの新規作成ファイル新規作成アプリケーションフォーム編集用のウインドウが現れる 3 コンポーネントの配置コンポーネントの種類を選ぶ Standard をクリックし, TButton コンポーネントのアイコン ( 左から 8 番目 ) をクリックコンポーネントを置く Form 編集用ウインドウの好きな場所をクリック 4 大きさ, 位置, キャプション等の調整見やすいように, 納得のいくまで調整してください余裕がある人は練習 2 に進んでください Borland Delphi 6 でのプログラムコードの編集と実行の手順 step 1 step 2 step 3 step 4 コンポーネントの選択プログラムコードの編集構文チェックとコンパイル実行

8 コンポーネントの選択コンポーネントの選択 (1/2) step 1 step 2 step 3 step 4 コンポーネントの選択プログラムコードの編集構文チェックとコンパイル実行先ほど置いた TButton コンポーネントをダブルクリックコンポーネントの選択 (2/2) コンポーネントの選択プログラムコード編集用のウインドウが現れる 1 先ほど置いた TButton コンポーネントをダブルクリックプログラムコード編集用のウインドウが現れる

プログラムコードの編集プログラムコードの編集 step 1 step 2 step 3 step 4 コンポーネントの選択プログラムコードの編集構文チェックとコンパイル実行すでにある begin と end の間にプログラムを書くプログラムコードの編集ここでは, 試しに, 次のように書くフォームという意味ボタンを押したときという意味 procedure TForm1.

9 プログラムコードの編集プログラムコードの編集 step 1 step 2 step 3 step 4 コンポーネントの選択プログラムコードの編集構文チェックとコンパイル実行すでにある begin と end の間にプログラムを書くプログラムコードの編集ここでは, 試しに, 次のように書くフォームという意味ボタンを押したときという意味 procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. あとで実行すると分かるが,ShowMessage はダイヤログボックスを表示する機能をもつ procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. procedure TForm1.Button1Click(Sender: TObject); の行には意味がある. 書き換えないこと

10 プログラムコードの編集 1 プログラムコード編集用のウインドウ内で, すでにある begin と end の間にプログラムを書くコンポーネントの選択構文チェックとコンパイル step 1 step 2 step 3 step 4 プログラムコードの編集構文チェックとコンパイル実行構文チェックとコンパイル実行コンソールアプリケーションのときと同じ手順 1 プロジェクトを構文チェックを選ぶ step 1 step 2 step 3 step 4 2 構文チェック結果が現れるエラーが出たら, プログラムコードを修正するコンポーネントの選択プログラムコードの編集構文チェックとコンパイル実行 3 プロジェクトをコンパイルを選ぶ 4 コンパイル結果が現れるエラーが出たら, プログラムコードを修正する

11 実行実行押してくださいをクリックしてみる実行実行を選ぶ実行画面が現れる実行 OK を押すと消えるダイヤログボックスが現れる実行 1 実行実行を選ぶ実行画面が現れる 2 実行画面で, 押してくださいをクリックしてみるダイヤログボックスが現れるプログラムの ShowMessage(' ボタンが押されましたが, 何も行いません '); で作られたもの 3 ダイヤログボックスの OK を押してみるダイヤログボックスが消える

実行の終了実行を終了するときはをクリックする練習 2. 例題 1の実行まで至りなさい 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリックプログラムコード編集用のウインドウが現れる 2 プログラムコードの編集 procedure TForm1.

12 実行の終了実行を終了するときはをクリックする練習 2. 例題 1の実行まで至りなさい 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリックプログラムコード編集用のウインドウが現れる 2 プログラムコードの編集 procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. 3 コンパイルプロジェクトをコンパイル 4 実行実行実行. 押してくださいをクリックしてみる. ダイヤログボックスが現れるので OK をクリック例題 2. ビジュアルプログラミングでの入力と出力 3 つの数値 x, y, z を読み込んで ( 入力 ),x + y + z を表示 ( 出力 ) するプログラムを作る入力用 : Memo コンポーネント出力用 : Edit コンポーネント実行画面

例題 2 で使うコンポーネントの種類例題 2 のフォーム TEdit データの読み込み ( 入力 ) TMemo データの書き出し ( 出力 ) TButton ボタン ShowMessage を使って, ダイアログボックスを出せる TLabel 説明書き 3 つの TLabel コンポーネント 3 つの TEdit コンポーネント ( 入力用 ) TMemo コンポーネント ( 出力用 )

13 例題 2 で使うコンポーネントの種類例題 2 のフォーム TEdit データの読み込み ( 入力 ) TMemo データの書き出し ( 出力 ) TButton ボタン ShowMessage を使って, ダイアログボックスを出せる TLabel 説明書き 3 つの TLabel コンポーネント 3 つの TEdit コンポーネント ( 入力用 ) TMemo コンポーネント ( 出力用 ) TButton コンポーネント ( 出力用 ) 例題 2 でのフォームの編集手順 1. コンポーネントの配置 TButton コンポーネント : 1 個 TMemo コンポーネント : 1 個 TEdit コンポーネント : 3 個 TLabel コンポーネント : 3 個 2. キャプションの調整 Label1 のキャプション : x Label2 のキャプション : y Label3 のキャプション : z Button1 のキャプション : 計算実行 TLabel TEdit TMemo TButton コンポーネント配置に関係する機能

14 TButton コンポーネントを置く ( 同時に位置と大きさを調整する ) TMemo コンポーネントを置く ( 同時に位置と大きさを調整する ) TEdit コンポーネントを 3 個置く ( 同時に位置と大きさを調整する ) TLabel コンポーネントを 3 個置く ( 同時に位置と大きさを調整する )

15 Label1 をクリックする. そして, Label1 のキャプションを x に設定 Label2 をクリックする. そして, Label2 のキャプションを y に設定 Label3 をクリックする. そして, Label3 のキャプションを z に設定 Button1 をクリックする. そして, Button1 のキャプションを計算実行に設定

練習 3. 例題 2のここまでの手順を行えフォームの編集が終わったところ 1 アプリケーションの新規作成ファイル新規作成アプリケーションフォーム編集用のウインドウが現れる 2 コンポーネントの配置 TButton コンポーネント : 1 個 TMemo コンポーネント : 1 個 TEdit コンポーネント : 3 個 TLabel コンポーネント : 3 個 3 大きさ, 位置,

16 練習 3. 例題 2のここまでの手順を行えフォームの編集が終わったところ 1 アプリケーションの新規作成ファイル新規作成アプリケーションフォーム編集用のウインドウが現れる 2 コンポーネントの配置 TButton コンポーネント : 1 個 TMemo コンポーネント : 1 個 TEdit コンポーネント : 3 個 TLabel コンポーネント : 3 個 3 大きさ, 位置, キャプション等の調整 Label1 のキャプション : x Label2 のキャプション : y Label3 のキャプション : z Button1 のキャプション : 計算実行余裕がある人は練習 4 に進んでくださいオブジェクトツリーオブジェクトツリーのウインドウには, すべてのコンポーネントの名前が表示されている名前とキャプションは違うキャプション : あくまでも表示のため. 見栄えに関係する. 日本語可例 ) x, y, z, 計算実行名前 : すべてのコンポーネントに付けられた名前プログラム中では, 名前を使う例 ) Button1, Edit1, Edit2, Edit3,

種類 TButton TEdit 名前 Button1 Edit1 Edit2 キャプション計算実行キャプション無しオブジェクトインスペクタ最後に選んだ ( 置いたり, クリックしたりした ) コンポーネントの情報が表示される各項目の編集もできる Edit3 TLabel Label1 x TMemo Label2 Label3 Memo1 y z キャプション無し

17 種類 TButton TEdit 名前 Button1 Edit1 Edit2 キャプション計算実行キャプション無しオブジェクトインスペクタ最後に選んだ ( 置いたり, クリックしたりした ) コンポーネントの情報が表示される各項目の編集もできる Edit3 TLabel Label1 x TMemo Label2 Label3 Memo1 y z キャプション無しコンポーネントの種類と名前は, ここに表示されるコンポーネントの選択とプログラムコードの編集 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリックプログラムコード編集用のウインドウが現れる 2 プログラムコードの編集現れたプログラム編集用ウインドウこの行の意味は : procedure TForm1.Button1Click(Sender: TObject); コンポーネントの名前 Button1 クリック次ページのプログラムコードを書く

18 使用する変数を 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 のように変わる

19 TMemo コンポーネントでの出力出力 Memo1.Lines.Add( ' メッセージ ' ); Memo1.Lines.Add( IntToStr( 整数の変数 ) ); Memo1.Lines.Add( IntToFloat( 浮動小数の変数 ) ); 練習 4. 例題 2の実行まで至りなさい 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリックプログラムコード編集用のウインドウが現れる 2 プログラムコードの編集 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; 3 コンパイルプロジェクトをコンパイル 4 実行実行実行. 押してくださいをクリックしてみる. ダイヤログボックスが現れるので OK をクリック

CodeGear Developer Camp

CodeGear Developer Camp T2 Delphi チュートリアルセッション Delphiはじめて奮戦記で学ぶ Delphiチュートリアル株式会社フルネスコーチング事業部マネージャー田原孝 1 アジェンダ株式会社フルネスについて Delphiプログラミングの基本演習 : 計算機のテンキーを作る演習 : 計算機の四則演算ボタンを作る練習問題まとめ 2 株式会社フルネスについて事業内容ハンズオン教育サービスコーチングサービス