2.3 ビジュアル設計ツールの使い方

ビジュアル設計ツールの使い方~ツール紹介編~

ユーザーインターフェース

ユーザーインターフェースとはユーザー(アプリケーションを使う人)とアプリケーションとの対話の手段で、アプリケーションの目に見える表示要素と言えます。更にかみ砕いて書くと、ユーザーインターフェースとは「ユーザー(使う人)」との「インターフェース(接点又は接続部分)」であり、固い言い方をすると、「アプリケーションと人とを繋ぐ接続コネクタ」であると定義できます。
Delphiに例えるなら、画面真ん中にある「フォーム(ウインドウ)」がそれであり、エディット、リスト、ボタン等、限られた、しかし多くの要素(コンポーネント)の中からユーザーの使用目的に合致すると思われる要素を適切なサイズで、適切な場所に、適切な操作方法で、設置/設定する必要があります。そしてこれらの要素にはユーザーからの入力に応答し、他の要素に操作した結果、得た情報やメッセージ(これを値、又は返り値と呼びます)を表示させる事が出来ます。
ここで重要なことは、ユーザーが想像し得る適切な要素に値を渡す必要があるという事です。
例えば、これらが思いの外、時間が掛かったり、ユーザーが操作法を想像しにくかったり、手間暇のかかる操作だったとしましょう。一つの操作をする度に、5回の確認やマウス、キー操作を要すると仮定します。例えば、時間がないときに大急ぎで操作していたとしたら、ユーザーは何を思うでしょうか?答えは幾つか考えられます。そんな設計をした人が誰なのか、不条理な思いをしながら操作するか、あるいは直ぐに放り投げて、興味を失ってしまうかのどちらかと思われます。
操作する際の階層の深さや手数は3回迄、要素の配置には熟慮を重ねた上で、ルールを作ってグループ分けをしっかり定義して配置すべきでしょう。
以上が、ユーザーインターフェースを設計する上での、基本的で重要な考え方になります。

ビジュアル設計ツール

Delphiでは、ユーザーインターフェースを実際に動かした時と同じ状態で設計、作成する事が出来ます。
フォーム:実行時にウインドウとなり、アプリケーションの画面となる部分で、先ほど説明したユーザーインターフェースを設計し、作っていく土台となるものです。

ツールパレット(コンポーネントパレット):コンポーネントがグループ分けされて、パレットに収まっています。「検索」から、欲しいコンポーネント名を検索すると、全てのコンポーネントから検索して一覧を表示してくれます。検索したら、ダブルクリックか、ドラックアンドドロップで、フォーム上に配置していきます。

構造(オブジェクトツリー)
真ん中の画面が「デザイン」(フォーム)なら、コンポーネントの配置を「コード」なら、ソースコードのそれぞれのツリー構造(オブジェクト同士の上下関係)を表示します。

「デザイン」(フォームの場合)

「コード」(コードエディタ)の場合

オブジェクトインスペクタ

オブジェクトインスペクタはDelphiでアプリケーションを開発する上で、決して欠く事の出来ない、非常に重要なツール、又はオブジェクトリポジトリです。
このオブジェクトインスペクタはフォーム(ウインドウ)やコンポーネント(要素)のプロパティ(設定)を変えたり、又は、それらのイベントハンドラを設定して作成し、開発する人(つまりあなた)に、コードを記述する場所をナビゲートしてくれます。もし、このツールが使えなくなったら、オブジェクト指向での開発は不可能ないし、酷く効率の悪いもの(全て、1から自分で書く必要に迫られます)になってしまうでしょう。非常に重要なツールですので、必ず使いこなせるように頑張りましょう!

オブジェクトインスペクタ:プロパティエディタタブ

オブジェクトインスペクタ:イベントタブ

ビジュアル設計ツールの使い方~実践編~

1. 先ず、プロジェクトマネージャで「Project1.exe」をアクティブプロジェクトに設定します。判らなくなったら、プロジェクトマネージャの説明まで戻りましょう。
2. 選択出来たら、「Project1.exe」のツリー構造を展開し、更に「Unit1.pas」のツリー構造を展開、「Unit1.dfm」をダブルクリックします。

3. 次に、真ん中の画面で下にある「コード/デザイン」を、「デザイン」が選択されていることを確認してください。されていなかったら、デザインをクリックして選択します。
4. ツールパレット(画面の右下側)から、「検索」から「Panel」と入力します。Panelコンポーネントが検索で引っかかるので、これを、配置します。
5. 「構造」(オブジェクトツリー)から、「Form1」をクリックし選択します

6. 4.の手順で、「Memo」をForm1に配置します。
7. 5.の手順で、「Panel1」をクリックして選択します。
8. 4.の手順で、「Button」を3つ、Panelに配置します。
9. 4.の手順で、「OpenDialog」、「SaveDialog」を、何処でもいいので配置します(これを非ビジュアルコンポーネントと呼びます。実行時は見えないのが特徴です)。
10. 5.の手順で、「Panel1」を選択します。
11. オブジェクトインスペクタのプロパティタブを選択し、検索から「Caption」と入力します。「Caption」プロパティが見つかるので、右隣りのテキスト編集領域から、「Panel1」という文字を削除します。この文字を「プロパティの値」と言い、ここを変えてあげることで、コンポーネントの設定を変える事が出来ます。

12. 今度は、11.の手順で、「Align」と入力し、テキスト領域をクリック、パネルの図がドロップダウンして表示されるので、一番上の細長いパネルをクリックします。そして、値が「alTop」に変わったことを確認します。

13. 「Panel1」に配置した「Button」コンポーネントを左詰めで、バランスよく、Panel1上に並べます。
14. 11.の手順で、「Button」コンポーネントの表示されている名称を変えていきます。左端から、「新規」、「開く」、「保存」と入力していきます。
15. 5.の手順で、「Memo1」を選択し、「Align」を12.の手順で真ん中のパネルの設定をし「alClient」に変わったことを確認し、検索から「Lines」を探して、テキスト入力エリア(プロパティエディタと呼びます)の「(TString)」をダブルクリック、メモがあるポップアップダイアログが表示されるので、「Memo1」という文字を消して「OK」を押します。

16. 以下の様に、フォームが設定される筈です。

17. Button「新規」、「開く」、「保存」の「イベントハンドラ」を、設定していきます。
18. 新規Buttonをクリックするか、5.の手順で選択します。
19. オブジェクトインスペクタのイベントタブをクリックし、検索から「OnClick」を探し、右の空白をダブルクリックし、イベントハンドラを作成します。
20.
21. コードエディタと呼ばれるウインドウが出現し、以下の文言(コード)がある筈です。
ソース2

Beginとendの間に、以下の命令文を貼り付けます。
ソース3

22.今度は、20.21.の手順で、「開く」、「保存」に、以下の命令文を貼り付けていきます。
「開く」Buttonのイベントハンドラ
ソース4

「保存」Buttonのイベントハンドラ
ソース5

全体を見ると、以下の様な形になる筈です。
ソース6

23. 以上で、一つ目のアプリケーションのコーディングが完了しました。
今度は実行してみましょう。ツールバーから、以下のボタンを探します。

このボタンを探して押します。

もし、何か間違いがあれば、以下の画面が表示されます。
エラーの箇所はダイアログの「OK」を押した後、赤線が引かれて表示されます。(今は、そういうものだと思ってください)ここでは、エラーは出ない筈なので、イベントハンドラの記述をよく見比べてください。

成功すると、以下の画面が表示され、アプリケーションが動きます。

24. 今度は「Project2.exe」をアクティブプロジェクトにして、こちらも全く同じものを制作してみてください。
フォームの画面やコンポーネントの種類や数が若干変わりますが、作り方もイベントハンドラの記述も全く同じです。


25. 出来上がったら、名前を付けて保存しましょう。

今回作ったものは次回の章でも使いますのでご注意ください。
この先の章で、VCL、Fire Monkey双方で特徴がはっきりと分かれ、コードの書き方や、コンポーネントの設定が両者で大きく変わっていきます。
次はコンパイル、デバッグ、実行についてになります。

(保存の仕方)メニューから、「ファイル」→「すべてを保存」か、ツールバーから、

この二つのアイコンのうち、右のアイコンをクリックします。
ここで注意が必要なのは、
「C:\Users\(ユーザ名) \Documents\Embarcadero\Studio\Projects」
に保存してしまわない事。ここに保存してしまうと、後でいろいろと厄介なことになります。この「C:\Users\(ユーザ名) \Documents\Embarcadero\Studio\Projects」というフォルダは、Delphiがプロジェクトを新規作成する際に使用するデフォルトのフォルダになります。ここに保存してしまうと、後から新規作成した際にDelphiが既にProjectがあるのを察して、例えば、今回作った(二つのエディタ)ものだと、グループ名は「ProjectGroup1」ではなく「ProjectGroup2」(既に「ProjectGroup1」が保存されている為、1は使えない)、
プロジェクト名も「Project1,Project2」が保存されているので、「Project3」からになり、
ユニット名も、二つ保存されているので、「Unit3」からになります。
そして、フォルダ階層も結構深いので、ここに保存してしまうと、「あれ、あのファイル何処行った??」、「この前編集したプロジェクトは、この中のフォルダのどれだっけ??」という事になりかねません。

↓デフォルトの初期フォルダにプロジェクトを保存してしまった例

以上の事を気を付けたうえで、今回は「デスクトップ」に「エディター」というフォルダを作成してそこに保存します。まずユニットから保存することになります。今回は標準の名前でもいいでしょう。敢えて名前を付けるなら「unit1」が「vcl_edit」、「unit2」が「FireMonkey_Edit」が妥当でしょう。

次はプロジェクトの保存になります。これは実行ファイル名になるので、慎重に名前を付けましょう。今回だと、ユニット名と同じ名前で良いでしょう。但し、一つのプロジェクト(グループではなく)に複数のユニットがある場合はユニット名と名前を重ねてしまうと、命名管理に支障をきたす(何が何だか、名前の意味が分からなくなりかねない)ので、プロジェクト名にアプリの名前(日本語は避ける事)、ユニット名に、ユニット(フォーム)の機能名あるいは何をするユニット化を分り易く命名した方がいいでしょう。

タグ: , , , ,