ナッキー |
|
前回はTurbo Delphiをインストールして、開発環境を準備しました。でも起動したところで、いろいろな画面が表示されていて、一体どこから始めるのかさえ、さっぱりわかりませんよね。どこから初めて、どこまでやるとプログラムが完成するのか、という一連の流れと、表示される画面の使い方を少しずつ勉強していこうと思います。高橋先生よろしくお願いします。 |
|
|
|
高橋先生 |
|
はい、よろしくお願いします。 今回は、いよいよプログラムを作成します。ウィンドウのボタンをクリックすると、「Hello World!」と表示されるプログラムです。 |
|
|
|
図1 完成図
Turbo Delphiの起動
ナッキー：まずはDelphiを起動してっと。スタートメニューから選ぶのって面倒ですよね。先生デスクトップアイコンにはならないんですか？ |
高橋先生：できますよ。スタートメニューからTurbo Delphiまでたどっていって、アイコンを、マウスの右ボタンでデスクトップ上にドラッグします。ポップアップメニューで「ここにコピー(C)」を選択してください。
図2 ショートカット作成 |
ナッキー：これで次の起動はデスクトップから行えますね。 |
|
とにかく始めてみます
高橋先生から、「おまじないのように [ファイル(F)|新規作成(N)|VCLフォームアプリケーション-Delphi for Win32(V)] を選んでごらん」っていわれたけど、ちょっとごわごわ。
図3-1 プロジェクトの作成
図3-2 プロジェクトを作成したところ
出てきた、出てきた。この画面で開発するんですね。
高橋先生： じゃあ、最初に覚えておかなくてはいけない言葉を説明しておきましょう。 - プロジェクト：プログラムの単位。ひとつのプロジェクトがひとつの実行形式のファイルになります。実行形式のファイルとは、そのファイルが実行できるプログラムっていうこと。
- フォーム：フォームはプログラムを表示するときの、土台となる部分です。フォームの上に様々な部品を並べて画面を構成します。
- コンポーネント：コンポーネントは画面を構成する部品です。「素材」というよりは、車のギアや、エンジンといったようにある程度機能を持った要素です。
じゃあ、早速フォームにコンポーネントを配置して、画面を設計してみましょう。 |
|
フォームを設計してみる
では、早速。コンポーネントは、画面右下の「ツールパレット」から選択する。まず、部品をフォームに貼り付けて、画面を作ってから「Hello」って表示される機能をつくるのが順序なんだそうです。
ボタンと入力欄のある画面を作るので、まず、ツールパレットの中の[TButton]をクリックして、フォーム上の真ん中辺をクリック。フォーム上にボタンが現れました。
図4 TButton配置
でも、ボタンコンポーネントを配置した場所がイマイチでした。教えて！高橋先生！
高橋先生：コンポーネント移動、選択、サイズ変更、削除について説明しましょう。 - 移動はコンポーネントの中央あたりを任意の位置までドラッグします。マウスの端に表示される数値は、フォームの左からの位置と、上からの位置をピクセル単位で表します。
図5 移動 - コンポーネントの操作をする時には、先にどのコンポーネントの操作をするのかを選択する必要があります。マウスでクリックすると「サイズ変更ハンドル」という角や辺に青い丸印が表示され、選択状態になります。フォームの場合はコンポーネント以外の部分をクリックするとフォームが選択できます。
図6 選択 - サイズ変更は「サイズ変更ハンドル」をドラッグすると自由なサイズに変更できます。フォームの場合は右下の角をドラッグします。
図7 サイズ変更 - 削除はコンポーネントを選択してキーボードの[Delete]キーを押します。
- 移動していると、コンポーネントが揃ったところで、デザインガイドラインが表示されます。位置あわせの目安としてください。
図8 デザインガイドライン |
ナッキー：スタンプみたいにコンポーネントを配置して、移動やサイズ変更を行なって画面が完成するんですね。絵を描くより簡単かも。 |
|
次に文字入力用の欄を作成します。もう、位置合わせもばっちりですから、問題なし。ツールパレットの[TEdit]をクリックして、先ほど配置したボタンコンポーネントの上に1つ配置します。
図9 Tedit配置
高橋先生：配置したコンポーネントには「コンポーネント名＋連番」で自動的に名前が付けられます。画面の左上に「構造」という部分があります。ここには配置したコンポーネントの名前が一覧になります。ここで、必要なコンポーネント名を選択してもコンポーネントの選択が行なえます。
図10 構造ペイン じゃあ、とりあえずプログラムを実行してみようか。 |
|
プロジェクトの実行テスト
え？もう、プログラムが動いちゃうんですか？画面上部の「ツールバー」の中央あたりに緑の三角形のアイコンが付いたボタンが[実行]ボタン。クリックしちゃいますよ（なんだか楽しみ）。
図11 実行中
動いた！でも、ボタンをクリックしても何も起こりませんよ。へこむだけ。
高橋先生：Turbo Delphiに用意されているコンポーネントを使っているから、すでに組み込まれたへこんで出っ張る、という動きができるんですよ。でも、まだプログラムを書いていないでしょう？ボタンを押したらどうなるかは、自分で書かなきゃだめなんだよ。 じゃあ、実行テスト中のウィンドウの[閉じる]ボタンをクリックして、プログラムを終了させてください。 |
|
ボタンの文字を変えよう
高橋先生：ボタンを押したときの動作を書く前に、ボタンの外観をちょっと変えましょう。コンポーネントには、プロパティといって、その外観や性質を設定できる属性がいっぱいあるんだ。例えば、ボタンに表示される文字は、Captionプロパティで設定する。Captionに “はい” と設定すると、ボタンの表面には はい と表示されるんだ。 画面左下のオブジェクトインスペクタを見てごらん。 |
|
どれどれ。プロパティいっぱいありますね。表の左側がプロパティの名前で、右側がプロパティに設定された値なんだ。
最初に、Button1の文字を変えましょう。フォーム上のButton1コンポーネントをマウスでクリックして、オブジェクトインスペクタの「プロパティ」ページから、Captionを探します。えんじ色で「ローカライズ対象」って書いてあるところに発見。
図12 オブジェクトインスペクタ
では、プロパティ値に「English」と入力します。
図13 Captionプロパティ
もうひとつのボタンButton2も、同じような操作で、「Caption」プロパティを「French」にしました。
うん、簡単だ。この調子で、Editのプロパティも設定してみましょう。Editを選択して、「ローカライズ対象|Text」プロパティを探します。ここには、ボタンを押したときの文字を表示するから、最初は何も表示されてちゃいけないんだって。ということで、プロパティ値に入っている文字を削除しちゃいます。
次にフォームのCaptionも変更します。フォームも選択できるんだ、と感心している場合じゃないですが、選択すると、フォームには青丸の代わりにグレーの四角が表示されました。「オブジェクトインスペクタ」にも、ちゃんとフォームのプロパティが表示されています。ここで、「ローカライズ対象|Caption」プロパティに「Say Hello」と入力。フォームのタイトルバーに表示されている文字が「Say Hello」に変わりました！
最後は、フォームの色の変更に挑戦。高橋先生は、「色はいいでしょ」って言ってたけど、ちょっと挑戦してみたいんですよね。
また、フォームを選択して、「表示|Color」プロパティを選択。リストからあらかじめ用意されている色を選択することもできるらしいけど、他の色がいいな。
プロパティ値の欄をダブルクリックすると、お、出た！「色の設定」ダイアログボックスが表示されて、好きな色が選べます。
[色の作成(D)>>]ボタンをクリックすると、画面が広がって細かい色が選択できますよ。好みの色になったら[色の追加(A)]ボタンで追加して、最後は[OK]ボタンで設定終了です。
図14 色の設定
図15 プロパティ設定
ナッキー： 外観が整うとプログラムらしくなりますよね。でも、プロパティ値を探すのが難しいんですけど。 |
高橋先生：慣れていただくと、カテゴリ順で並んでいる方がわかりやすいのですが、指示したとおり設定するのには探しにくい事もあります。並び順を変更できますのでやり方を説明しましょう。 - 「オブジェクトインスペクタ|プロパティ」ページでマウスの右ボタンをクリックしてポップアップメニューを表示します
- 「表示形式(A)」のサブメニューから「名前順(N)」を選択すると、プロパティがアルファベット順に並びかえられます。
図16 名前順 |
ナッキー：アルファベット順になりました。「Caption」はCで始まるから上の方、「Text」はTで始まるから下の方になりますね。 |
高橋先生：カテゴリ順で表示されている場合を前提として説明を続けますが、みなさんは使いやすい方で続けてください。 |
|
作業内容を保存しよう
高橋先生：一段落したところで、作業を一度保存しておこうか。こまめに保存するようにしたほうがいいからね。 |
ナッキー：もし、何かがあってパソコンが動かなくなっちゃうと、今までやったことが台無しになっちゃいますしね。では、保存してみます。ツールバーの[すべて保存]ボタンをクリック。なんで「すべて」なんですか？ |
高橋先生：「すべて」というのは保存する対象が複数あるためです。保存される主なファイルは プロジェクトファイル：拡張子(bdsproj)プロジェクト全体を管理する フォームファイル：拡張子(dfm)コンポーネントやプロパティなど画面情報 コード（ユニット）ファイル：拡張子（pas）コード情報 などです。フォームファイルとコードファイルは合わせてユニットと呼ばれます。保存する時にこのユニットと、プロジェクトに名前をつけるように、それぞれ保存のダイアログボックスが表示されます。 2つの名前を付けますが、同じ名前にならないようにしてください。コード上でファイル名が使用されていて、重複する名前が使えないのです。 |
ナッキー：2つのダイアログボックスで、2つの名前を付けるんですね。2つ目のダイアログボックスを慌てて、消しちゃうところでした。もし、付ける名前や保存先を失敗したらどうしたらいいですか？ |
高橋先生：ユニットの場合は「ファイル(F)|名前を付けて保存(A)…」メニュー、プロジェクトの場合は「ファイル(F)|プロジェクトに名前を付けて保存(E)…」メニューを選択してもう一度ダイアログボックスを表示してください。 |
|
「Unit1に名前を付けて保存」と表示されます。これがユニットの保存ね。保存先は「マイドキュメント」の「Borland Studio Projects」、ファイル名は「Unit1.pas」がデフォルトです。「Unit」の後は連番になっているので、「Unit2」や「Unit3」などの場合もあるとのこと。そのまま[保存(S)]ボタンをクリックします。
図17 Unit1に名前を付けて保存
あれ、すぐに次のダイアログボックスが表示されました。こっちがプロジェクトの保存かぁ。保存先はユニットと同じ、ファイル名は「Project1.bdsproj」ですね。プロジェクトも連番になっているので「Project2」や「Project3」などの場合がありますが、そのまま[保存(S)]ボタンをクリックします。
図18 プロパティ設定後実行
ボタンを押したときの動作を設定しよう
ナッキー：次はいよいよボタンを押したときの動作を書くんですよね。 |
高橋先生：そのとおり。これでプログラムも完成になるよ。でも、ここでイベントハンドラについて勉強しておこう。 |
ナッキー：いべんとはんどら？ |
高橋先生：イベントとはパソコン上に起こるさまざまな事象です。クリックした、キーを押した、時間が経過したなどすべてイベントとなります。その情報はOSにためていて、プログラムはOSにイベントが届いてないか問い合わせることで、どんなイベントが起こったかを知ることができます。そのイベントを察知したことをきっかけに動く、一連のコード（命令文）の集まりをイベントハンドラといいます。
図19 イベントとイベントハンドラ ここでは「ボタンをクリックする」というイベントに「エディットに文字を表示する」という処理を結びつけるんですよ。 |
|
ここが、一番難しそうなんですよね。いかにもプログラミングって感じ。では早速設定してみます。プロパティの設定の時と同様に、はじめはコンポーネントの選択です。Captionに「English」と設定したボタンを選択。次に「オブジェクトインスペクタ」のページを切り替えます。「イベント」タブをクリックしてイベントページを表示します。表の中の左側は「イベント名」、右側には「イベントハンドラ名」が表示されました。
たくさんありますねぇ。まあ、今は「OnClick」だけに集中。右側の空欄をダブルクリックすれば、新しいイベントハンドラが作成できるらしい。クリック！
図20 イベントページ
げ！見たことないページが出てきた。
高橋先生：ははは、それはコードエディタだよ。フォームの画面が見えなくなってしまったけど、画面の下部の「デザイン」タブをクリックすればすぐに出てくるよ。
図21 「コード」タブと「デザイン」タブ あと、ショートカットキーも用意されていて、キーボードの[F12]キーでもフォームとコードを切り替えることができるんだよ。 |
ナッキー：なんだ、安心。あと、秘密にしてたんだけど、Button1のOnClickイベントをダブルクリックするところを、間違えて、Edit1のOnClickイベントをクリックしちゃったんだけど… |
高橋先生：あー、間違ったイベントハンドラを作成してしまったんですね。でもそのままにして、新たに必要なイベントハンドラを作成してください。 |
ナッキー：えー！そのままでいいんですか？ |
高橋先生：うっかり削除してしまうと、他にも削除すべきところが増えてしまいます。具体的には、コードの上の方のtypeで始まるブロックのイベントハンドラ名が定義されているところと、オブジェクトインスペクタのイベントハンドラ名です。何も触らずにそのまま実行テストすると不必要な部分が、自動的に削除されます。 |
ナッキー：削除すると、作業が増えちゃうんですね。気になるけど、そのままにしておきます。 |
|
とりあえず、ボタンの「OnClick」イベントをダブルクリック。コードエディタには、自動的に文字が入ってbeginとend;の間にカーソルがある状態です。自動的に記述されている部分は、うっかり消さないよう気をつけます。
ここに、コード（命令文）を記述するんですよね。ここではエディットのTextプロパティに「Hello World!」という文字列を表示させるコードを記述するっていうんだけど、どう書いたらいいんだか。ここもやっぱり、高橋先生！
高橋先生：コードの文法は面倒でもしっかり覚えてください。今回はコンポーネントのプロパティに値を代入するということを行ないます。まずはコード上でプロパティを表す文法です。 コンポーネント名.プロパティ名 間を「.(ピリオド)」で区切ります。次に設定値ですが、数値の場合はそのまま記述することができますが、文字列の場合は「’(シングルコーテーション)」で囲みます。 ’設定値’ 最後に値をセットするコードです。 A := B; 末尾は「;(セミコロン)」をつけてください。AにBを代入することができます。 |
ナッキー：この文法にしたがうと、エディットのTextプロパティは「Edit1.Text」、文字列は「’」で囲んで「’Hello World!’」、値のセットなので「Edit1.Text:=’Hello World!’;」と書けばいいんですね。 |
|
自動的に記述している部分も含めて表示しています。コードを確認して、記述します。見やすいように、記述するときには、先頭をちょっと字下げするといいらしい。インデントっていうんだって。
procedure TForm1.Button1Click(Sender: TObject);
begin
Edit1.Text := 'Hello World!';
end;
end.
じゃあ、コーディングに挑戦。私もこれでプログラマーだわ。あれ、入力していると、途中でポップアップメニューのようなものが表示されます。何ですかこれ？
高橋先生：Edit1の後ろに「.」を入力すると自動的に表示されますね。これは、コード補完という機能で、「Edit1.」に続きそうな文字の候補が現れています。スクロールして探すには多いので、少し限定してみましょう。コード補完はそのままにして「t」と続けます。そうしますと、「t」で始まる候補に絞られるのです。「e」も入力すると「te」で始まる候補になります。
図22 コード補完 スクロールして選択対象をダブルクリックするか、キーボードの上下矢印キーで選択対象を変更して[Enter]キーを押すと確定します。 コンポーネント名（例えばEdit1）を探したい場合は、キーボードの[Ctrl+スペース]キーを押すと強制表示します。この機能を使うと、入力ミスが防げます。是非活用してください。 |
|
もうひとつのボタンにもコードを記述します。「French」と表示しているボタンを選択して、「OnClick」のイベントハンドラを作成します。コードは、これだっていうけど…
procedure TForm1.Button2Click(Sender: TObject);
begin
Edit1.Text := ' Bonjour tout le monde !';
end;
end.
まあ、よく分からないけどコードを入力して完成。ツールバーの[実行]ボタンで実行テストしましょう。
図23 Say Hello
ナッキー：フォームが表示されず、コードエディタに戻ってしまい、動いていません（涙）。 |
高橋先生：画面下部の「メッセージ」の中に「Pascalエラー」と表示されていませんか？
図24コンパイルエラー |
ナッキー：あります。コード上には赤い帯がかかったようになっています。 |
高橋先生：赤い帯の付近に、記述間違いがあるようだね。よく見てごらん。 |
ナッキー：あ、間違ってました。すぐ直します。すみません。今度はちゃんと動きました。どうもありがとうございます。 |
高橋先生：ナッキーのリクエストがあったので、Button2を押すと「Bonjour」を表示するように、問題を変えてみたんだよ。ハッハッハ。 |
ナッキー：冗談で言ったのに…。でも、画面を作成するのは楽しかったです。他にはどんなコンポーネントがあるのかな？ |
高橋先生：では、次回はもう少し色々なコンポーネントを使ってみようね。 |
|