第１章　ビジュアルプログラミング

入門

 

【学習内容とねらい】

　Windows上のアプリケーションソフトウェアでは、プログラムの操作画面上にボタンやメニューが用意されておりユーザはそれらをマウスによって適宜選択することで、必要な処理を実現できるようになっています。それでは、このようなプログラムを作成するにはどうしたらいいでしょうか？プログラム作成時に開発者がボタンや入力欄等の設計（形状、大きさ、色等のデザイン）を一から行うのはとても大変です。

 

これから学習するC++Builderでは、プログラム開発上必要となるボタンや入力欄そしてメニューなど（C++Builderではこれらを「コンポーネント」と呼びます）を予め用意しておき、開発者はそれらをプログラム基盤（フォームと呼びます）の適当な位置に貼り付ける事でプログラム操作画面を設計する事が可能になっています。この様なプログラム開発形態の事を「ビジュアルプログラミング」と呼びます。

 

今や、ビジュアルプログラミング環境は、Windows上のソフトウェア開発形態の主流になりました。プログラミング・同演習では、C++Builderを用いたビジュアルプログラミングの基礎を学習します。まず、本章ではビジュアルプログラミングを行うに当たっての基本動作を学習します。具体的に言うと、代表的なコンポーネントをフォームに貼り付ける操作の練習です。とりあえず、この章の学習だけで、“形だけ”は立派なプログラムを作る事ができる様になります。ここで、大事なことは、各々のコンポーネントには大きさや色等の、特性（プロパティを呼びます）があるという事です。これらプロパティの指定の仕方も重要な学習内容です。本章では、「コンポーネント」、「フォーム」そして「プロパティ」がキーワードになります。

 

また、C++Builderプログラムの実行・保存など、今後の学習で毎回必要になる基本操作の習得も本章の目的です。特に保存操作があやふやだと課題チェックの時に支障をきたしてしまうのでしっかりとマスターしておいて下さい。

 

＜第１章の構成＞

 

１−１　ボタンのプロパティ

１−２　いろいろなコンポーネント

１−３　プロパティに対する操作

１−４　プログラムの保存・実行

１−５　プロパティに対する操作のまとめ

１−６　コンポーネントの Name プロパティ

１−７　章末課題

1-1 ボタンのプロパティ

まず、C++Builder を起動しましょう。［スタート］メニューから［プログラム］→［Borland C++Builder 5］を選択し、現れたメニューから［C++Builder 5］を選択します。

 

すると、下の様に Delphi ウィンドウ (操作画面) が現れます。

※　フォームの裏にコードエディタが隠れています。

各部分の意味あるいは用途については、これから順次学習して行きます。

まず、「フォーム」はプログラムに必要な「ボタン」や「入力欄」等の“部品”を配置する基盤の様なものです。ここにこれから色々な“部品”を配置して行きます。

それでは、さっそく以下の要領でフォームに「ボタン」を貼り付けましょう。

(1) Delphi ウィンドウ中の上の部分を「コンポーネントパレット」といいます。コンポーネントパレットの中の、「ボタン」の絵 (アイコン) をクリックします。

(2) そして、フォームの上でクリックすると、下の様にボタンが貼りつけられます。

ボタン中央をクリックしてドラッグすると、ボタンの位置を変えることができます。	ボタンの四隅をクリックしてドラッグすると、ボタンの大きさを変えることができます。

 

【基礎課題 1-1-1】

フォームの左側にある下の部分を「オブジェクトインスペクタ」といいます。

(1) ボタンの大きさを変えると、オブジェクトインスペクタの「Height」と「Width」の値が変化します。「Height」と「Width」はそれぞれ何を表しているかを説明して下さい。

(2) ボタンの位置を変えると、オブジェクトインスペクタの「Left」と「Top」の値が変化します。「Left」と「Top」はそれぞれ何を表しているかを説明して下さい。

(3) オブジェクトインスペクタの「Height」、「Width」、「Left」、「Top」それぞれの部分をクリックして、数値の部分に適当な数値を半角文字（直接入力）で入力して下さい。何が起こるかを説明して下さい。

 

 

(4) オブジェクトインスペクタの「Caption」の右には「Button1」と書かれていると思います。「Button1」を消して、何か文字を入力して下さい。何が起こるかを説明して下さい。

 

 

(5) オブジェクトインスペクタの「Font」の右の「(TFont)」の部分をダブルクリックして、ボタンに表示されている文字のフォントと大きさを変えてみましょう。

 

「Height」、「Width」、「Left」、「Top」、「Caption」、「Font」などは、いずれもボタンの“性質”の一部を表現しています。これら“性質”のことを総称して「プロパティ」といいます。

1-2 いろいろなコンポーネント

C++Builder では、フォーム上にいろいろな部品を貼りつけてプログラミングを行います。

下のような部品は、これまで Windows を使っているなかで何度も見たことがあると思います。

上のような部品のことを、Delphi では「コンポーネント」と呼びます。

コンポーネント	コンポーネントの名前	はたらき
	ボタン	押すことができる
	ラベル	文字を表示することができる
	エディット	文字を入力することができる
	スピンエディット	三角形のボタンを押すか、あるいは直接、整数値を入力することができる
	チェックボックス	白い四角形をクリックして、チェックをつけたり外したりできる

これら「コンポーネント」は、すでに見たように「コンポーネントパレット」に“詰まって”います。プログラム開発者はそれらを選択してフォームに貼り付けるだけで、これらコンポーネントを使用する事ができます。これがビジュアルプログラミングの神髄なのです。

それでは上の5つのコンポーネントをフォームに貼って行きましょう (すでに1-1で「ボタン」コンポーネントは貼られているはずです)。

エディットコンポーネントの貼り方

(1) 「エディット」コンポーネントのアイコンをクリックします。

(2) そして、フォームの上でクリックすると、「エディット」コンポーネントが貼りつけられます。

 

ラベルコンポーネントの貼り方

(1) 「ラベル」コンポーネントのアイコンをクリックします。

(2) そして、フォームの上でクリックすると、「ラベル」コンポーネントが貼りつけられます。

 

【基礎課題 1-2-1】

(1) コンポーネントパレットから「チェックボックス」コンポーネントのアイコンを見つけて、フォームの適当な位置に「チェックボックス」を貼って下さい。

※ コンポーネントパレットには、「Standard」「Additional」「Win32」などのタブがあります。それぞれのタブをクリックすると、異なったアイコンが出てきます。

★Standard タブ

 

★Win32 タブ

 

★Dialogs タブ

 

 

 

(2) どこかのタブの中に、「スピンエディット」のアイコンがあります。探し出して、「スピンエディット」をフォームの適当な位置に貼って下さい。アイコンの上にカーソルを置いたままにすると、ヒントが出ます。そのヒントとアイコンの絵柄を参考にするとよいでしょう。

1-3 プロパティに対する操作

1-2までに学習した5つのコンポーネントを下のように配置して下さい。

どのコンポーネントも、「ボタン」と同じように、マウスを使って大きさと位置を変えることができます。また、オブジェクトインスペクタの「Height」、「Width」、「Left」、「Top」の値を変更することによって、大きさと位置を変えることもできます。

【練習問題】

オブジェクトインスペクタを使って、「エディット」の「Width」プロパティを 200、「Height」プロパティを 50 に変えてみましょう。

	(1) オブジェクトインスペクタの上の方にある下向きの三角形のボタンをクリックする。
	(2) メニューから、操作したいもの(この場合は「Edit1」)を選択する。
	(3) 「Width」と「Height」の値を変える。

【練習問題】

(1) スピンエディットの「Width」プロパティを50、「Height」プロパティを 100 にして下さい。

(2) ラベルの「Width」プロパティを 50、「Height」プロパティを 20、「Left」プロパティを 20、「Top」プロパティを 150にして下さい。

(3) ボタンの「Caption」プロパティを「メールを送信する」にして下さい。ボタンから文字がはみ出したと思います。文字がボタンの中に収まるように、ボタンを大きくして下さい。

(4) チェックボックスの「Caption」プロパティを「情報を保存する」にして下さい。

(5) ラベルの「Caption」プロパティを「宛先」にして下さい。また、「Font」プロパティを自由に変更して下さい。また、「Color」プロパティを自由に変更して、色を変えて下さい。

色を変える方法は、右の図の四角形で囲まれた部分を、

１．  ダブルクリックするか、

２．  クリックして、出てきた下向きの三角形を押してメニューを開きます。

(6) エディットの「Text」プロパティを「こんにちは」にして下さい。

(7) フォームの「Width」プロパティを 480、「Height」プロパティを 360、「Left」プロパティを 200、「Top」プロパティを 200にして下さい。また、フォームの「Caption」プロパティを「はじめてのプログラムを作成中!」にして下さい。

1-4 プログラムの保存・実行・終了

【基礎課題 1-4-1】

前節までに作ったプログラムを保存しましょう。

すでに皆はプログラミングの課題保存用フォルダ「ProgC++」を作成している筈です (まだ作成していない人は各自に割り当てられている学生保存用フォルダ内にフォルダ「ProgC++」を作成して下さい)。この「ProgC++」の中に、今作ったプログラムを保存します。

C++Builderでの保存方法は少々複雑です。保存に失敗すると大変です。ここでしっかり頭に入れておきましょう。

＜プログラムの保存＞

Delphiでは、二段階の保存が必要です。

★ 第一段階 ユニットファイルの保存

(1)   C++Builderの「ファイル」メニューから、「名前を付けて保存」を選択します。

 

(2)   すると、「Unit1に名前をつけて保存」というダイアログが現れます。ここで保存する場所を「ProgC++」に選びます (右側のをクリックしてファイルリストを表示させる事で「ProgC++」のある場所までたどって行けます)。

 

 

(3) 「ProgC++」の中に、本課題保存用のフォルダ「Kiso1-4-1」を作成します。^*)

＊     ) 右ボタンをクリックして「新規作成」→「フォルダ」を選択し、フォルダ名を「Kiso1-4-1」と入力すればフォルダ「Kiso1-4-1」が「ProgC++」内に作成できます。

(4) 保存する場所を「Kiso1-4-1」にします。

(5) ファイル名をつけます。今は【基礎課題1-4-1】なので「kiso1_4_1_f」としておきましょう。^*)

＊     ） ファイル名に使用可能な文字は英数字と下線記号「＿」のみです。ハイフン「-」を用いるとエラーになるので注意して下さい。またファイル名はどの様なものでも良いのですが、本講義(演習)では、フォームに関するユニットという意味が分かるように、「課題名_f」という約束で命名する事にします。

(6) ［保存］ボタンをクリックして、ユニットファイルの保存完了です。

★ 第二段階 プロジェクトファイルの保存

(1)   Delphiの「ファイル」メニューから、「プロジェクトに名前をつけて保存」を選択します。

 

 

(2)   「Project1に名前をつけて保存」というダイアログが現れます。保存する場所を選んでから、ファイル名をつけます。この基礎問題では、「Kiso1_4_1_p」としておきましょう。

 

 

 

 

 

(3) ［保存］ボタンをクリックしてプロジェクトファイルの保存完了です。

注意 本講義(演習)では、混乱を避けるために、一つのプログラムを作るたびに一つのフォルダを作って、そのフォルダの中にプログラムを保存していくことにします。ですから、課題毎に新しいフォルダKiso1-4-1、Kiso1-4-2、…をつくる作業は、毎回必要になります。保存操作は、ぜひ早めにマスターしてください。

なお、これ以降は特に断らなくても、基礎課題および応用課題はそれぞれ必ず保存する様にして下さい。

＜　コンポーネントの削除の仕方^＊)＞

次の２通りのいずれかの方法でコンポーネントを削除することができます。

�T．オブジェクトインスペクタのメニューから、削除したいものを選択し、

C++Builderの「編集」メニューから「削除」を選択する。または、直接［Delete］キーを押す。

 

 

�U． 削除したい (フォーム上の) コンポーネントをクリック (選択) し、

C++Builderの「編集」メニューから「削除」を選択する。または、直接［Delete］キーを押す。

 

【練習問題】

フォームの上にあるすべてのコンポーネントを削除して下さい。

＜ C++Builder の終了の仕方 ＞

ここでいったん、C++Builder を終了させてみましょう。

C++Builder を終了するには、次の2通りがあります。いずれかで終了させてください。

1. C++Builder の「ファイル」メニューから「終了」を選択する。
2. C++Builder ウィンドウ右上隅のをクリックする。

なお、今の場合、現在編集中のプログラムに対する保存の可否を問うダイアログが現れますが、ここでは［いいえ］をクリックして終了します。プログラムは先ほど保存してあるので大丈夫です。

終了後、再び、C++Builder を起動して次へ進んで下さい。

【基礎課題 1-4-2】

下の図のような、電子メールの送信画面を作って下さい。

ここに、メールの本文を書く欄は「エディット」コンポーネントでもよいのですが、新しいコンポーネント、「メモ」コンポーネントを使ってみましょう。

コンポーネントパレットの「Standard」タブにある、「メモ」コンポーネントを貼って下さい。

「メモ」コンポーネントには「Memo1」という文字が書かれていますが、そのままでもかまいません。^*)

＊     ） 実は「Memo1」という文字はオブジェクトインスペクタの“あるプロパティ”の中に入っています。このプロパティの値を消去することで、「Memo1」を消すことができます。気になる人は、消す方法を探してみて下さい。

上のフォームが完成したら、このプログラムを保存しましょう。【基礎課題1-4-2】なので、「Kiso1-4-2」フォルダの中に、ユニットファイル名「kiso1_4_2_f」、プロジェクトファイル名「Kiso1_4_2_p」として保存して下さい。

＜プログラムの実行＞

保存したプログラムを実行してみましょう。

実行方法は、三通りあります。どれかの方法で実行して下さい。

(1) C++Builderの「実行」メニューから「実行」を選ぶ。
(2) 「実行」を表すスピードボタンを押す。	実行(F9)
(3) 「F9」キーを押す。

 

実行したら、次の4点を確認して下さい（次ページ＜プログラム実行例＞参照）。

1. 「件名」「宛先」「メール本文」の欄に、入力ができること。
2. チェックボックス欄のチェックとその解除ができること。
3. 「このメールの重要度」の値を自由に変えられること。
4. 「送信する」「キャンセル」両方のボタンが押せること。

残念ですが、「送信する」ボタンを押しても、メールが送信されることはありません。その動作部分を、まだプログラミングしていないからです。

ボタンを押したら、自分のしたいことをしてくれるようなプログラムを作る。それが本講義 (演習) の目標なのです。これは次章以降で学習します。

 

＜プログラム実行例＞

 

＜プログラムの終了＞

プログラムの終了の主な方法は、2つあります。

(1)フォームの右上のボタンを押す。

(2)C++Builderの「実行」メニューから「プログラムの終了」を選ぶ。

プログラミングでは、すでに作ったプログラムに新たな機能をつけ加えて、プログラムを少しずつ良くして行く場合が多々あります。その練習をしてみましょう。

【基礎課題 1-4-3】

【基礎課題 1-4-2】のメール送信プログラムを少し修正します。まず、プログラムが開かれている状態で^*)、(【基礎課題1-4-3】のプログラムとして) プログラムを保存し直します。

＊) 【基礎課題 1-4-2】のプログラムが開かれていない状態の場合は、次ページの＜新たにプログラムを作成する際の手順＞の「II. 既存のプログラムを活用したい場合」を参照して【基礎課題 1-4-2】のプログラムを開いて下さい。

＜保存の仕方＞

第一段階 ユニットファイルの保存

1.  C++Builder の「ファイル」メニューから「名前を付けて保存」を選択する。

2.  保存する場所として「ProgC++」を選択し、ここに新しいフォルダ「Kiso1-4-3」を作成する (p.12参照)。

3.  保存する場所を「Kiso1-4-3」に変更し、ファイル名を「Kiso1_4_3_f」としてから保存する。

第二段階 プロジェクトファイルの保存

1.  C++Builder の「ファイル」メニューから「プロジェクトに名前を付けて保存」を選択する。

2.  保存する場所が「Kiso1-4-3」になっている事を確認し、ファイル名を「Kiso1_4_3_p」としてから保存する。

注意 このように新たに名前を付けて保存することによって、「Kiso1_4_2」のプログラムを誤って上書き保存してしまう心配がなくなります。一般に、新たなプログラムを作り始めるときには、真っ先に保存をするように心がけましょう。これがミスを防ぐコツです。

これからが新しいプログラムの作成開始です。メール送信プログラム (フォームデザイン) を、次ページのように修正して下さい。

できたら、C++Builderの「ファイル」メニューから「上書き保存」^*)を選んで保存して下さい。

＊) すでに開いているファイルを編集し、現在のファイル名のままで保存する場合には、「上書き保存」を選択します。この場合、2段階で保存する必要はありません。「プロジェクトファイル」に含まれる全てのファイルが同時に保存 (更新) されるからです。

 

以下に、新たにプログラムを作成する際の手順をまとめておきましょう。

＜新たにプログラムを作成する際の手順＞

すでにC++Builderを起動し何らかの編集作業を行った場合は、C++Builder「ファイル」メニューから「すべて閉じる」を選択する。　　　　　

 

そして…

I. 新規に作成したい場合

C++Builder の「ファイル」メニューから「アプリケーションの新規作成」を選択する。

II. 既存のプログラムを活用したい場合

1.  C++Builder の「ファイル」メニューから「プロジェクトを開く」を選択する。

2.  利用したいプログラムのあるフォルダを探して、該当するプロジェクトファイルを選択する。

※ 「課題名_p」という形式で命名していれば、容易に見つけることができる筈です。

注意 すでにあるプログラムを利用するときも、新規に作り始めるときも、最初に (新しい名前で) 保存することをすすめます。最初に保存しておくと、プログラムを作り終えてから「上書き保存」するだけでよいのです。

1-5 プロパティに対する操作のまとめ

【基礎課題 1-5-1】

【基礎課題1-4-3】のプログラムの一部を修正して新しいプログラムを作ります。最初に、「Kiso1_5_1_f」と「Kiso1_5_1_p」の名前で保存して下さい。

(1) メール送信画面のプログラムを実行すると、「このメールの重要度」の値は0になっています。オブジェクトインスペクタの“あるプロパティ”の値を変えて、実行したときに「3」が出るようにして下さい。

(2) プログラムを実行後に「このメールの重要度」の値を変えることができますが、重要度が0とかマイナスの値では不自然です。オブジェクトインスペクタの“あるプロパティ”の値を変えて、実行後、0以下の値には変更できないようにして下さい。

(3) 同様に、重要度の値が大きすぎるのも意味がなくなります。重要度が6以上には変更できないようにして下さい。

(4) 実行したとき、「このアドレス帳をアドレス帳に登録する」のチェックボックス欄にはチェックがついていません。オブジェクトインスペクタの“あるプロパティ”の値を変えて、実行したとき最初からチェックがついているようにして下さい (ヒント:「チェック」を英語で書くと________________＿　　　です)。

 

全部できたら、C++Builder の「ファイル」メニューから「上書き保存」を選んで保存して下さい。

【練習問題】

(1) 「Button1」の「Enabled」プロパティの値は、「True」になっていると思います。この値を、「False」に変えてみましょう。変え方は、

1.  Enabledプロパティの Trueの部分をクリックする

2.  下向きの三角形を押して Falseを選ぶ

です。「True」の部分をダブルクリックしてもできます。

「False」に変えてから実行すると、「True」のときと比べて何が変わるでしょう。

(2) 「Button2」の「Visible」プロパティの値は、「True」になっていると思います。この値を、「False」に変えてみましょう。変え方は、「Enabled」のときと同じです。「False」に変えてから実行すると、「True」のときと比べて何が変わるでしょう。

(3) 「Edit1」の「Enabled」プロパティの値を「False」に変えてから実行すると、「True」のときと比べて何が変わるでしょう。

(4) 「Edit2」の「Visible」プロパティの値を「False」に変えてから実行すると、「True」のときと比べて何が変わるでしょう。

(5) 上のことから、「Enabled」プロパティのはたらきは、

(6) 「Visible」プロパティのはたらきは、

1-6 コンポーネントのNameプロパティ

すべてのコンポーネントには、「Name」プロパティがあります。Name プロパティの値は、そのコンポーネントの名前を表します。

コンポーネントをフォームに貼ると、「Edit1」「Edit2」「Label1」「Label2」など、コンポーネントの種類と数字を組み合わせた名前が自動的につけられます。

しかし、名前ですから、自分で自由につけることもできます。そのコンポーネントがどのような役割を果たすのかを考えて、できるだけわかりやすい名前をつけるようにしましょう。

注意 「Name」プロパティの値は何でもよいのですが、以下では、説明の都合上「Name」を指定する場合があります。

【基礎課題 1-6-1】

下のようなフォームを作って下さい。

オブジェクトインスペクタの上の方にあるをクリックすると、フォームと、フォーム上にあるコンポーネントが表示されます。ボタンが1つ、エディットが2つあることを確認して下さい。

コンポーネント	Nameプロパティ
「コピー」ボタン	ButtonCopy
上のエディット	EditFrom
下のエディット	EditTo

ここで、ボタンと、2つのエディットの Name プロパティを、次のように変えて下さい。

 

 

 

もう一度、オブジェクトインスペクタの上の方にあるをクリックして、何が変わったかを確かめて下さい。

1-7 章末課題

以下の各課題は、必ずきちんと保存して下さい。

【基礎課題 1-7-1】

下のようなフォームのプログラムを作って下さい。

【基礎課題 1-7-2】

(1) 下のようなフォームのプログラムをつくって下さい。	(2) 実行したときに、「いいえ」ボタンが押せないようにしておきましょう。
	ただし、もし断られたとしても、当方は一切の責任を負いません。

 

【基礎課題 1-7-3】

下のようなフォームのプログラムを作って下さい。

できたら実行して、あなたもストレス度チェックをしてみて下さい。

チェックされた項目の数と、メッセージの対応は、次のようになるそうです。

チェック数	メッセージ
9〜10	かなりストレスがたまっています。医師による診察を。
6〜8	少しストレスがたまっています。気分転換を。
3〜5	ストレスの兆候がありますが、心配は不要。
0〜2	正常です。

第４章までの学習を終えれば、「診断」ボタンを押すとチェック数を数えてメッセージを表示するようなプログラムを作れるようになります。

【基礎課題 1-7-4】

(1) 下のようなフォームのプログラムをつくって下さい。	(2) もぐらが9匹います。プログラムを実行したときに、9匹のうち何匹かだけ(適当に決めて良い)が穴から出てくるようにして下さい。

今は、穴から出ているもぐらは出たままであり、穴の中のもぐらは絶対に出てくることはありません。第６章でもぐらが穴から出入りする、もぐらたたきゲームを作ります。

【基礎課題 1-7-5】

下の表の左にはコンポーネント名、上にはプロパティ名が並んでいます。オブジェクトインスペクタを見て、コンポーネントにそのプロパティがあれば○、なければ×をつけて下さい。

	Width	Height	Left	Top	Enabled	Visible	Caption	Checked	Value	Text	Name
ボタン
ラベル
チェックボックス
スピンエディット
エディット