ナッキーの「Turbo Delphiはじめて奮戦記」 - 第6回 計算機に挑戦!

By: Hitoshi Fujii

Abstract: 占いプログラムで関数を使ったりプロシージャを作ったりしました。プログラミングの手順に少しは慣れてきましたね。そこで今回は計算機に挑戦!

Hide image
nacky75

ナッキー

前回の占いプログラムはプログラミングまでの道のりを考えたり、プロシージャを作ったりしましたね。ちょっとは慣れてきたかしら。でも今回の計算機っていかにもプログラムって感じ。数学苦手だし、断然難しそう。

 

Hide image
takahashi75

高橋先生

計算機っていうとなんだか複雑で難しそうだよね。でも今まで習ったことにちょっとプラスするだけで、作れちゃうんだよ。画面作成もコードも量が少し多いけどがんばれると思うよ。

    TFlowPanelでレイアウト

まずはプログラムの流れを考えるんだったっけ。うーん、数字を2つ入力して、足し算か掛け算かも入力して、計算して、結果を表示でいいのかな。

高橋先生:主な役割だけ考えるとそれでいいよ。その部分だけ先に作ってみようか。見かけも計算機っぽく作れるといいね。まずはこんな感じで外観を作ろう。

Hide image
01画面完成

図01 画面完成

ナッキー:うわぁ。ボタンがいっぱい。前回やったTGridPanelコンポーネントを使うんですか?

高橋先生:今回はTGridPanel とTGridPanelに似たコンテナコンポーネントの一種「TFlowPanel」コンポーネントを使ってみよう。TFlowPanelは、コンポーネントを順番に並べてレイアウトしてくれるコンポーネントです。今回の「テンキー」と呼ばれる数字を入力するボタンに合うね。ほかのコンポーネントはTPanelとTGridPanelの上に並べることにする。入力結果を表示するTEditを並べる上の部分はTPanelで、TButtonを並べる右下の部分はTGridPanelで配置してみよう。

Hide image
02コンテナコンポーネントの

図02 コンテナコンポーネントの配置


プロジェクトを新規作成します。メニューバーの「ファイル(F)|新規作成(N)|VCLフォームアプリケーション-Delphi for Win32(V)」を選択。作成したフォームのプロパティも設定しています。画面左下部の「オブジェクトインスペクタ|プロパティ」ページの「ローカライズ対象」の「Caption」プロパティに、「計算機」と入力します。タイトルバーの文字が、「計算機」にかわります。名前も付けておいたほうがいいのね。「その他」の「Name」プロパティに「frmCalc」と入れておきましょう。

コンポーネントがいっぱいあって画面作るの大変そうだけど、コンポーネントもコピーすればいいんだって。まずは、コンテナコンポーネントから配置します。画面右下部のツールパレット「Standard」の「TPanel」コンポーネントを1つ、「Additional」の「TFlowPanel」コンポーネントを1つ配置します。外観はTPanelと変わらないですね。ほかに、「Additional」の「TGridPanel」コンポーネントを1つ置きます。3つのコンテナコンポーネントに、それぞれAlignプロパティを設定します。プロパティは「オブジェクトインスペクタ|プロパティ」ページ「レイアウト」の「Align」で設定できたわよね。ついでに、それぞれの「ローカライズ対象」の「Caption」プロパティを取り除きます。


Panel1

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

(空白)

レイアウト

Align

alTop


FlowPanel1

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

(空白)

レイアウト

Align

alLeft


GridPanel1

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

(空白)

レイアウト

Align

alClient


Hide image
03コンテナコンポーネントの

図03 コンテナコンポーネントのプロパティ設定

FlowPanel1にテンキー(数字キー)、Panel1に表示用のTEdit、GridPanel1にその他のボタンを配置します。配置しにくからフォームをちょっと大きくしておこうっと。Panel1に表示用のTEditとTLabelを配置します。ツールパレットから「Standard」の「TEdit」を3つ配置。それぞれのTEditの間に「Standard」の「TLabel」を2つ配置します。

Hide image
04TEdit配置

図04 TEdit配置

次はテンキー用のボタンです。TButtonを配置したらいいのよね。

高橋先生: ちょっと待ってね。新しいコンポーネントを紹介します。TSpeedButtonといってツールパレットなどボタンがたくさん並ぶときに使われるボタンです。ボタンの上にアイコンも追加できるけど今回はCaptionプロパティだけ設定するよ。

では、ツールパレット「Additional」の「TSpeedButton」をFlowPanel1の上に配置します。テンキーボタンっぽく、正方形に近い形にサイズ変更します。作成できたら、ボタンを選択したまま、キーボードの[Ctrl+C]キー、[Ctrl+V]キーを続けて押します。最初のボタンの隣にコピーしたボタンが配置できたら、そのまま[Ctrl+V]キーを続けて押し、同じボタンを10個作ります。FlowPanel1の幅をボタンが3個並ぶように調整しておきましょう。1つはみ出ちゃいますが、「0」のボタンです。ボタン3つ分の幅に広げて全体をまとめたらテンキーらしくなりますね。

Hide image
05TSpeedButton配置

図05 TSpeedButton配置

次に、足し算や割り算などの四則演算を入力するボタンを、4つ作ります。こっちは普通のTButtonでいいんだって。フォーム右側にあるGridPanel1の上に、「Standard」の「TButton」コンポーネントを4つ配置します。サイズを、テンキーのボタンと同じくらいに変更します。ほかに規定のサイズのボタンをつけるので、ツールパレットから「Standard」の「TButton」コンポーネントを、さらに4つ配置します。場所がないように見えますが、GridPanel1の上をクリックすれば配置できます。これで、大きいボタンが4つ、小さいボタンが4つ配置されました。

Hide image
06配置完了

図06 配置完了

次にプロパティを設定します。コンポーネントにもNameプロパティをつけて、説明上区別しやすいようにします。

Panel1に配置したTEditから設定しましょう。「その他」の「Name」プロパティは左から「edtInput1、edtInput2、edtKekka」にします。3つあるTEditの「ローカライズ対象」の「Text」プロパティの内容は、必要ないので削除しておきます。

入力中のエディットは白、その他は違う色にしたら目立っていいわね。「表示」の「Color」プロパティも設定します。edtInput1は「clWhite」、edtInput2とedtKekkaは「clYellow」にします。

好きな色に設定してもいいですが、名前がついていたほうがコードで記述しやすいのでプルダウンボタンで「cl」から始まる色名を選ぶようにしましょう。


edtInput1

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Text

(空白)

表示

Color

clWhite


edtInput2

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Text

(空白)

表示

Color

clYellow


edtKekka

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Text

(空白)

表示

Color

clYellow


TLabelのNameプロパティは左から「lblEnzan、lblEqual」としておきます。次にTLabelのサイズを調整します。まずは、lblEnzanの「Caption」プロパティを削除しましょう。あれ?lblEnzanの幅がなくなっちゃった。

高橋先生:lblEnzanのプロパティをみてみよう。「レイアウト」の「AutoSize」プロパティに注目。設定値は「True」だね。TLabelの幅を、自動的に文字列の幅に合わせるプロパティなんだ。TLabelで独自の幅にしたい場合は先にAutoSizeプロパティをFalseにする必要があるよ。

ナッキー:へぇ。最初の設定でどんな風になるのか覚えていかないといけないんだ。

高橋先生: いっぺんに覚えるのは難しいから、間違ったときに思い出してくれればいいよ。


では、lblEnzanを選択して、「レイアウト」の「AutoSize」プロパティを「False」にします。幅調整はサイズ変更ハンドルでできるけれど、ドラッグしにくいときにはオブジェクトインスペクタでプロパティを設定すればいいんだって。「レイアウト」の「Width」プロパティに「20」くらいを代入します。


lblEnzan

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

(空白)

レイアウト

AutoSize

False

次のlblEqualは「ローカライズ対象」の「Caption」プロパティに「=」を全角で入力します。半角でもいいけど小さすぎるから全角の方が見やすいみたい。計算結果が出るまではない方がいいのに。

高橋先生:非表示にすることができる「Visible」プロパティがあります。Trueだと表示、Falseだと非表示にできます。このプロパティをFalseにしておいて、結果を表示するときにTrueにすればいいね。


lblEqual

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

表示

Visible

False


次にFlowPanel1に乗せたテンキー部分の左上のコンポーネントから順にNameプロパティをつけ、Captionプロパティに数値を設定します。左上のTSpeedButtonコンポーネントを選択して、「オブジェクトインスペクタ|プロパティ」ページで「その他」の「Name」プロパティに「sbtn1」、「ローカライズ対象」の「Caption」プロパティに「1」と入力します。このようにして順に「sbtn2、sbtn3、sbtn4、sbtn5、sbtn6、sbtn7、sbtn8、sbtn9 、sbtn0」とNameプロパティをつけ、それにあわせてCaptionプロパティも変更します。

Hide image
07プロパティ設定

図07 プロパティ設定

うーん、ちょっと大変。でも、コンポーネントはまだあります。今度はGridPanel1に配置したボタンです。こちらも左上から順に、Nameプロパティを変更しましょう。大きいボタン4つが四則演算のボタンです。「btnTasu、btnHIku、btnKakeru、btnWaru、btnClear、btnCopy、btnExit、btnKeisan」とします。Captionプロパティは全角文字で「+、-、×、÷、クリア、コピー、閉じる、計算」です。


btnTasu

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption


btnHIku

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption


btnKakeru

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

×


btnWaru

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

÷


btnClear

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

クリア


btnCopy

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

コピー


btnExit

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

閉じる


btnKeisan

カテゴリ名

プロパティ名

設定値

ローカライズ対象

Caption

計算


Hide image
08TButtonプロパティ

図08 TButtonプロパティ

もうちょっとです。FlowPanel1のボタンとGridPanel1が、フォームの端にくっつきすぎているので離します。FlowPanel1は構造ペインを使うと選択しやすいんだって。FlowPanel1を選択してプロパティページから「レイアウト」の「Padding」プロパティで「+」をクリックします。表示される「Bottom」「Left」「Right」「Top」それぞれに、「5」を入力しましょう。TFlowPanelではコンポーネントの間には、隙間があかないのね。まわりだけに隙間ができました。同様にしてGridPanel1にも「Padding」プロパティでそれぞれ「3」にします。配置がおかしくなったらfrmCalcやFlowPanel1などの幅を調整してください。

Hide image
09Paddingプロパティ

図09 Paddingプロパティ

すべてのコンポーネントが表示されるようにfrmCalcとFlowPanel1、Panel1、GridPanel1のサイズを調整します。やっと画面が完成?

高橋先生: ボタン類をWindowsXPのボタンのようなデザインにするコンポーネントがあるんだけど知ってる?

ナッキー:えーせっかく作ったのに、初めから作り直しですか?最初に言ってくださいよー

高橋先生: そのコンポーネントをフォーム上に貼り付けるだけでXPスタイルに変更できるんだよ。

ナッキー:まさか、そんな魔法みたいなことができるんですか?

高橋先生: フォーム上に「TXPManifest」コンポーネントを配置すればいいんだ。


本当かな?ツールパレット「Win32」カテゴリの下のほうにある「TXPManifest」コンポーネントを配置します。実行時には表示されないからどこに配置してもいいんだって。フォームデザイナの画面でも見た目は変わりませんね。では、一度保存して実行してみましょう。ツールバーの[すべて保存]ボタンをクリックして保存します。ユニット名は「FormCalclator」、プロジェクト名は「Calclator」とします。保存できたらツールバーの[実行]ボタンをクリックしましょう。

Hide image
10画面完成

図10 画面完成

わぁ、本当にボタンの形がXPスタイルになりました。

    テンキーの作成

ナッキー:やっぱり複雑な画面はコンポーネントの数が多いから大変だったなぁ。画面は完成したから次はコーディングね。どこからはじめたらいいんだろう?

高橋先生: 画面作成、がんばったね。コーディングの手始めに、edtInput1に数字を表示することにしよう。sbtn1をクリックしたらedtInput1に「1」、sbtn2をクリックしたらedtInput1に「2」と表示するように作ってみて。


なんだか先生の指示が、前ほど具体的じゃないんですけど。自分で考えろってことね。うーん。sbtn1のOnClickイベントハンドラを作るのが先ね。sbtn1を選択して、「オブジェクトインスペクタ|イベント」ページで「入力」の「OnClick」をダブルクリックします。「1」って表示できればいいのね。じゃあコードはこうなるのかな。太字の部分を記述してね。

procedure TfrmCalc.sbtn1Click(Sender: TObject);
begin
  edtInput1.Text := '1';
end;

これで良さそうね。コピーして、sbtn2やsbtn3もつくろう。

高橋先生: もうちょっとだね。ためしに保存して実行してみてごらん。

ナッキー:えー、どこかおかしいかな?


ツールバーの[すべて保存]ボタンで保存して、[実行]ボタンをクリックしてみます。「1」ボタンを押してみると、edtInput1に「1」と表示されます。

Hide image
11イベント作成

図11 イベント作成

ナッキー:ちゃんと出ますよね。じゃあ、「2」ボタンを押してみよう。「2」って表示されます。

高橋先生: でもこれじゃあ、一桁の計算しかできないんじゃない?「1」ボタンの次に「2」ボタンを押したら「12」と表示されるように作らないと複数桁の計算はできないな。文字列の連結をすれば解決できるよ。

ナッキー:あっ。数字だから思いつかなかったけど、これって文字列だったんだ。edtInput1.Textに「+」で連結できるんだったわね。


btn1OnClickイベントハンドラのコードを書き換えます。次に、ツールバーの[フォーム/ユニット切り替え]ボタンなどでフォームデザイナに戻ってbtn1と同様、btn2からbtn0のOnClickイベントハンドラの枠を作成します。コードはあとで記述するので、じゃんじゃん枠を作っちゃいますね。全部の枠ができたら、コードエディタに戻ってbtn1のコードをコピーして「1→2」のように数値の部分は書き換えます。太字の部分を追加しましょう。

procedure TfrmCalc.btn0Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '0';
end;

procedure TfrmCalc.btn1Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '1';
end;

procedure TfrmCalc.btn2Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '2';
end;

procedure TfrmCalc.btn3Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '3';
end;

procedure TfrmCalc.btn4Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '4';
end;

procedure TfrmCalc.btn5Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '5';
end;

procedure TfrmCalc.btn6Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '6';
end;

procedure TfrmCalc.btn7Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '7';
end;

procedure TfrmCalc.btn8Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '8';
end;

procedure TfrmCalc.btn9Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '9';
end;

できたらツールバーの[すべて保存]ボタンで保存して、実行しておきましょう。今度はedtInput1に複数の桁が表示されます。

Hide image
12テンキー作成

図12 テンキー作成

ナッキー:わー動いた!うれしい。

高橋先生:でも、まだほんの少しの機能しか作っていないよ。まだまだやることがいっぱいかるから、気合を入れていこうか。

ナッキー:今日、これから子供のお遊戯会があるんですけどぉ。

高橋先生:だめだめ。ちょっと休憩してからやるよ。

ナッキー:そんなこといったって。ビデオの用意があるんでお先に失礼しまーす。

高橋先生:え?ちょっと待ってよ。あれ、ホントに帰っちゃったの?もうひとつの入力ボックスに数字を入力したり、計算したり、今度は厳しくやるぞー!


ナッキーの「Turbo Delphiはじめて奮戦記」

Prev | Next | Index





Server Response from: ETNASC02