ナッキー |
前回のプログラムはちゃんと動いて嬉しかったなぁ。 でも、前回使わなかったコンポーネントもたくさんありますよね。どんな風に使うのか、ちょっと聞いておきたいな。多分一度聞いただけじゃあ覚えきれないと思うけど。 |
|
|
高橋先生 |
何度か練習すればすぐ覚えられますよ。 前回より少し複雑な画面を作ります。今回は、アンケートフォームを作ってみましょう。項目をいくつか入力してウィンドウのボタンをクリックすると、入力結果をメッセージボックスで表示するプログラムです。 |
|
|
図01 完成図
Turbo Delphiの起動とプロジェクト新規作成
前回Turbo Delphiをデスクトップアイコンにしたから、起動はバッチリです。アイコンで起動しますね。次はプロジェクトを作るんでしたよね。えーっと、プロジェクト新規作成は…？どうやるんだったっけ？
高橋先生：メニューバーで「ファイル(F)|新規作成(N)|VCLフォームアプリケーション-Delphi for Win32(V)」 を選ぶんですよ。毎回出てきますから、覚えてくださいね。 |
|
図02 新規作成
メニューをクリックして、プロジェクトも新規作成できました。
コンポーネントの位置合わせ
次は「コンポーネントをフォームに貼り付ける」でしたね。画面をつくってからコーディングするっていうのは覚えていましたよ。でも新しく出てくるコンポーネントはよくわかりません。
|
|
図03 Standard |
図04Win32 |
|
|
高橋先生：新しいコンポーネントをいくつか紹介しましょう。コンポーネントの名称も増えるので、ここからは正式なコンポーネントの名前T××で呼んでいこう。 ・TLabel | 文字を表示します。他のコンポーネントのそばに配置してタイトルとして使います。
| | |
・TCheckBox | 先頭の四角をクリックするとレ点（チェック）が表示されます。再びクリックするとレ点がはずれます。レ点がついているかどうかはCheckedプロパティで分かります。チェックしていれば「True」チェックがなければ「False」です。
| | |
・TComboBox | プルダウンボタンで一覧を表示したり、隠したりします。一覧から好きな項目を選択できます。項目はItemsプロパティで設定します。Itemsプロパティの[…(ダイアログボタン)]をクリックすると「文字列リストの設定」ダイアログボックスが表示されます。1行に1項目を入力して[OK(O)]ボタンをクリックします。どの項目が選ばれているかはTextプロパティに入っています。
| | |
図05 文字列リストの設定 ・TRadioGroup | 選択項目の先頭に丸印がついています。クリックすると黒丸が付きます。別の項目をクリックすると、そちらに黒丸が移ります。TComboBoxと同様に、項目はItemsプロパティで設定します。Itemsプロパティの[…(ダイアログボタン)]をクリックすると「文字列リストの設定」ダイアログボックスが表示されます。1行に1項目を入力して[OK(O)]ボタンをクリックします。0からはじまって何番目の項目が選ばれているかがItemIndexプロパティで分かります。
| | |
・TDateTimePicker | このコンポーネントだけツールパレットの「Win32」カテゴリにあります。日付が入力できます。プルダウンのボタンをクリックするとカレンダーが表示されて入力を補助します。Dateプロパティに日付が入っています。
| | |
|
|
うーん。たくさんあるから大変だけど、画面にコンポーネントを並べるとしましょう。StandardカテゴリのTLabelが3つとTEdit、TComboBox、TRadioGroup、TCheckBox、TButton、Win32カテゴリのTDateTimePickerをそれぞれ1つずつフォームに置くんだって。
図06 コンポーネント配置
ナッキー：あ、よく確認しないで配置したら、ぐちゃぐちゃになっちゃった。コンポーネントの数が多いと配置が面倒だなぁ。高橋先生いい方法はありませんか？ |
高橋先生：ゆっくり配置すれば、うまく並べられると思うよ。フォームも狭いから少し大きくしたほうがいいな。ぐちゃぐちゃになっても大丈夫。キレイに整列させる方法があるんだ。 それには、複数選択を覚えよう。複数選択すると、位置合わせのほかにプロパティの設定も一度に行えるよ。 ・複数選択 | 1つ目のコンポーネントは通常どおり選択して、2つ目以降はキーボードの[Shift]キーを押しながら、続けて選択してください。
| | |
図07 複数選択 ・位置合わせ | 左寄せ、右寄せ、上に寄せる、下に寄せるの場合を説明します。揃えたいコンポーネントのうち、1つだけ正しい位置に配置します。正しい位置に配置したコンポーネントのも含めて、ほかのコンポーネントも選択してください。次にメニューバーの「編集(E)|位置合わせ(A)...」メニューを選択します。そうしますと「位置合わせ」ダイアログボックスを表示します。
| | |
図08 位置合わせダイアログボックス | 縦方向で揃えたければ左の「水平位置合わせ」欄から、横方向で揃えたければ右の「垂直位置合わせ」欄から選択します。最後に「位置合わせ」ダイアログボックス下部の[OK]ボタンをクリックします。
| | |
図09 左寄せ | 次に等間隔に配置する場合を説明します。等間隔にしたい一番左と一番右、もしくは一番上と一番下のコンポーネントを好きな位置に配置しておきます。次に等間隔におきたいコンポーネントすべてを選択してください。メニューバーの「編集(E)|位置合わせ(A)...」メニューを選択します。そうしますと「位置合わせ」ダイアログボックスを表示します。並べたいのが縦方向であれば左の「水平位置合わせ」欄から、横方向であれば右の「垂直位置合わせ」欄から「等間隔に配置」を選択します。最後に「位置合わせ」ダイアログボックス下部の[OK]ボタンをクリックします。
| | |
図10 等間隔に配置 |
|
ということで、
①フォームをちょっと広げる
②左列のTLabelと入力項目をTLabel、TEdit、TLabel、TComboBox、TLabel、TDateTimePickerの順に並べなおす
③②で並べなおしたコンポーネントを左に寄せて、均等に並べる
④残りのTButtonとTRadioGroup、TCheckBoxはひとまず空いたところに配置する
とすればいいわよね。
フォームは適当に幅と高さを広げます。フォームのサイズ変更ハンドルをドラッグ。
1つのTLabelだけ左上の正しい位置に配置します。TDateTimePickerも位置を決めて配置します。入力項目をTLabel、TEdit、TLabel、TComboBox、TLabel、TDateTimePickerの順に並べなおしておきます。
図11 並べなおし
次に左の項目の位置合わせをします。最初に左上のTLabelを選択しておきます。続いてTDateTimePickerまで、左側の項目をすべて選択します。選択した項目を左寄せと等間隔に配置します。メニューバーの「編集(E)|位置合わせ(A)...」メニューを選択します。左に揃えたいので「水平位置合わせ」欄から「左寄せ(L)」、「垂直位置合わせ」欄から「等間隔に配置(Q)」を選びます。[OK]ボタンをクリックします。
図12 入力項目位置合わせ
TButtonとTRadioGroup、TCheckBoxを適当な位置に配置します。
図13 その他の配置
ナッキー：面倒だから、入力項目を全部選択して「水平位置合わせ」欄も、「垂直位置合わせ」欄も「等間隔に配置(Q)」をやったら、全部変になっちゃいました。
図14 すべて等間隔 |
高橋先生：「位置合わせ」ダイアログボックスで「水平位置合わせ」欄と「垂直位置合わせ」欄の両方で設定するとうまく配置されない場合がある。メニューバーの「編集(E)|元に戻す(U)」で戻せないよ。慣れるまでは、面倒でも1つずつ設定した方がいいな。 |
ナッキー：設定と結果がわかるようになるまでは、1つずつやらなきゃダメかぁ。 |
|
プロパティの設定
コンポーネントがいっぱいあるので、先生に設定を表にしてもらいました。設定するときはコンポーネントを選択してから行うんだったなぁ。「オブジェクトインスペクタ|プロパティ」ページでプロパティ設定をします。配置でコンポーネントが混ざってしまって、Label1、Label2と順に並んでいないかもしれません。上から1、2、3と読み替えてください。()内は操作です。文字のとおり記述しないでください。
Label1
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Caption |
名前 |
|
|
|
Label2
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Caption |
住所 |
|
|
|
Label3
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Caption |
誕生日 |
|
|
|
Edit1
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Text |
(文字を削除してください) |
|
|
|
ComboBox1
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Items |
(自分の近郊県名を入力します) |
|
|
|
RadioGroup1
カテゴリ名 |
プロパティ名 |
設定値 |
ローカライズ対象 |
Items |
男性 女性 |
その他 |
ItemIndex |
0 (半角英数で入力) |
表示 |
Caption |
性別 |
|
|
|
CheckBox1
カテゴリ名 |
プロパティ名 |
設定値 |
表示 |
Caption |
ペットを飼っている(表示できるようにTCheckBoxの幅を調節してください) |
|
|
|
Button1
カテゴリ名 |
プロパティ名 |
設定値 |
表示 |
Caption |
プロフィール |
|
|
|
さすがに、たくさんありましたね。でもこれで外観は整いました。
図15 プロパティ設定
ボタンのイベントハンドラの作成
外観ができたら、動きをつけるんだったわ。ボタンをクリックすると、メッセージボックスに入力した内容をまとめて出すんだって。
はじめにButton1を選択してからだよね。「オブジェクトインスペクタ|イベント」ページで「入力」カテゴリのOnClickイベントの右欄をダブルクリック。お、できたできた。
図16 イベントハンドラ
メッセージボックスを出そう
次はメッセージボックスを出すコードを書くのね。メッセージボックスって出てくるのは良く見るんだけど、どうやって出すんだろう？教えて、高橋先生。
高橋先生：メッセージボックスを出すにはプロシージャを使えば簡単だよ。 |
ナッキー：プロシージャ？？新しい言葉が出てきたなぁ。 |
高橋先生：プロシージャは「手続き」と訳されます。決まった機能を実行してくれる、コードの集まりです。例えば「印刷する」や「保存する」、「削除する」などです。今回の「メッセージボックスを出す」というのもプロシージャがやってくれます。 |
ナッキー：へぇ。便利そうだけど、どうやって使うんですか？ |
高橋先生：コード上でプロシージャ名とパラメータを入力します。 プロシージャ名(パラメータ1, パラメータ2, ～); パラメータは「引数」と訳されます。プロシージャの中で使う値です。パラメータを持たないプロシージャもあります。その場合は プロシージャ名; だけ入力すればいいですよ。括弧は省略できます。 さて、メッセージボックスを出すプロシージャだけど、コードはこう書いてください。 ShowMessage(文字列); |
ナッキー：じゃあ、パラメータに表示したい文字を入力すればいいんですね。 |
|
表示したいのは名前と住所だったわね。名前はTEditにはいっていてTextプロパティを使うんだな。で、住所はTComboBoxもTextプロパティだったから、コードはこんな風になるのか。
ShowMessage(Edit1.Text);
ShowMessage(ComboBox1.Text);
これで完成。保存しとこう。ツールバーの[すべて保存]ボタンをクリック。今回はファイルに名前をつけてみようっと。保存先はデフォルト「マイドキュメント」の「Borland Studio Projects」で、ファイル名はUnitには「FormProfile」、Projectには「Profile」とつけて保存します。
保存できたら、実行テストしてみたいよね。画面上部のツールバーの中央あたりに緑の三角形のアイコンが付いたボタンが[実行]ボタンです。クリックして実行します。項目を入力してメッセージボックスを確認してみましょう。メッセージボックスは2つ表示されます。
図17 実行テスト
文字列の結合
高橋先生：おしいなぁ。名前も住所も一つのメッセージボックスで表示できないかな？ |
ナッキー：えー無理ですよ。別のプロパティなんだから。 |
高橋先生：2つの文字列をくっつけることができるんだ。間をつなぐのは「+」演算子だよ。 |
ナッキー：何気なく新しい言葉が出てきてるんですけど。 |
高橋先生：え？そうだったかな？あ、「演算子」だね。算数の計算記号と同じような感じのものです。 |
ナッキー：ふーん。文字も計算しちゃうんだ。 |
|
パラメータのことだけを考えると、この場合は
Edit1.Text + ComboBox1.Text
ということになるのかぁ。
高橋先生：これだと「名前住所」のようにくっついて表示されるから、読みにくくなります。TEditの内容もTComboBoxの内容の間に「：」か空白を入れると見やすくなるね。 |
ナッキー：じゃあ、間に「：」を入れて記述してみよう。Edit1.Text と：と ComboBox1.Textの連結になるんですね。 |
|
Edit1.Text + '：' + ComboBox1.Text
これをShowMessageのパラメータにセットします。
ShowMessage(Edit1.Text + '：' + ComboBox1.Text);
では、もう一度保存しておきます。ツールバー[すべて保存]ボタンをクリック。実行テストも、もう一度行います。ツールバーの[実行]ボタンをクリックしましょう。
図18 文字列結合
構文を使おう - if文
関係演算子
では、続けてほかの項目も連結しましょう。性別が入っているTRadioGroupでは「何番目が選ばれているか」が、ItemIndexプロパティに入っているってことだったわね。でも、何番目を性別に結びつけるには、どう表示すればいいの？教えて！高橋先生！
高橋先生：RadioGroup1では1つ目の項目が選ばれていれば、ItemIndexプロパティには数字で「0」と入ってきます。2つ目だったら「1」です。つまり1つ目だったら「男性」、2つ目だったら「女性」ってこと。 |
ナッキー：それはわかったけど、「1つ目だったら」ってどう書くんですか？ |
高橋先生：関係演算子を使います。左辺と右辺がどんな関係かを調べる演算子です。そのとおりなら「True(真)」違っていれば「False(偽)」を返します。演算子を紹介します。 ・A = B | AとBが等しいとき「True」 | ・A <> B | AがBと等しくないとき「True」 | ・A > B、A < B | AがBより大のとき、AがB未満のとき「True」 | ・A >= B、A <= B | AがB以上のとき、AがB以下のとき「True」 | | |
今回はItemIndexプロパティに「0」と入っているかどうかを調べるので条件式は
RadioGroup1.ItemIndex = 0 となります。「0」は数値なので「'(シングルコーテーション)」で囲みません。男性に黒丸がついていたら、このコードで「True」を表します。 |
ナッキー：代入文(A := B)と似ているけど「:(コロン)」が付いていないのね。気をつけようっと。 |
|
if文
条件文はわかったけど、「1つ目だったら」ってどうやって判別するんだろう？やっぱり教えて、高橋先生！
高橋先生：条件を満たすときと、満たさないときで処理を分岐させる構文があるよ。「if文」っていいます。条件文には「True」か「False」の結果を返すなら、どんなコードをいれてもいいよ。では、書き方を紹介しよう。 if 条件文 then
条件文を満たしたときの処理
else
条件を満たさなかったときの処理; 書き方の特徴は最後の文まで「;(セミコロン)」を書かないこと。「else...」と続く場合には「条件文を満たしたときの処理」の後ろでも「;」はつけてはダメ。その代わり「条件を満たさなかったときの処理」がなくて「else...」と続かず「条件文を満たしたときの処理」で終わる{ |
