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