日曜日にBCB!



Do It Yourselfでひとつプログラムでも作ってみませんか。


第3話「楽しい画面作り」

核となるアルゴリズムが決まったら画面を設計しましょう。これがプログラムを作る中で一番楽しい作業です。なんたってBCBではインターラクティブに画面作成ができます。マウスとキーボードでちょちょいと操作するだけで画面ができてしまい、まるでプログラムが生まれていく様を見るようです。本当はプログラムの張りぼてができるだけですが。作成の手順としては卵の黄身の部分にあたるデータハンドリングを設計しなければいけないのですが、BCBのVCLを使うと画面や各コントロールにデータを関連付けできます。ですから、画面を作ってからデータの取り扱い方を決めてもいいのです。まあ画面とデータ取り扱いを同時に設計すると思ってください。

ここで、標準ルック&フィールを忘れては行けません。パソコンがこんなに普及した背景にはWindowsの優れた操作性があります。Windowsは良いところも悪いところもあるのですが、「いろいろなアプリケーションを同じような操作で短時間に覚えられる」のが大きな長所です(元を正せばMachintoshに、さらに祖先はXeroxのSTARに行きつくそうですが)。プログラム開発者にとっては「操作性が他のアプリケーションと同じ」というのを大切にしなければなりません。でないといわゆる「癖の強い」プログラムとなってしまいます。ネット上のプログラムを使ってみると以外と癖の強いプログラムが多いことに驚きます。これはプログラムの開発者が「自分に便利」なルック&フィールにしたり、「自分の開発の都合に良い」ルック&フィールにしてしまっているためです。特に自分の開発に都合の良いルック&フィールだと、「こいつ使う人間を舐めてるな」と思ってしまうのは私だけでしょうか。別段ネット上のプログラムだけではなく、市販のソフトでもたまに見かけますが。

Windows Windowsは「プログラムはこんな操作感にしましょう」という標準ルック&フィールを決めています。メニュー、ボタン、チェックボックス、リスト、エディット、ダイアログ、リストビュー、ツールバー、ステータスバー、etc、使用用途により決まったコントロールを使います。これぐらいは大抵のプログラムは守っているのですが(守らないと作れない)、いざこれらを組み合わせてプログラムを作るとなると問題は別です。ネット上で評判のプログラムは大抵標準ルック&フィールを守っています。そのプログラムを初めて使う人が、一からマニュアルを読まないと操作できないようでは直ぐに嫌われてしまいます。ここではネット上で公開するプログラムを作るのではありませんが、できるだけ標準ルック&フィールに沿ったプログラムを作るように心がけましょう。


個人的な意見になってしまいますが、私が嫌いなプログラムのルック&フィールをご紹介しましょう。

某ファイル比較ソフトでアプリケーションの画面サイズを変更できないどころか、移動も最小化もできないのがありました。さすがにこれには驚きました。あまりの驚きのため何故かHDにはそのまま入っています。


画面設計

ではやっと寿分割の画面設計です。まず標準的なコントロールとしてメニュー、ステータスバーをつけます。分割ファイルを呼び出すダイアログもつけます。ツールバーも当然欲しいところですが、話を簡単にするため後回しにします。画面に表示する情報としては、 これは必要ですね。VCLにはリストビュークラスというものがあります。これはエクスプローラーの右半分のフォルダやファイル一覧を表示するためのクラスです。ここにはファイル名以外にも情報が書けますので(エクスプローラのファイルサイズや日付のようなもの)、ここに分割サイズを書きましょう。

BCBを起動して新規プロジェクトを作成します。デフォルトで出てくるForm1という名前のウィンドに対する属性設定からはじめましょう。

ウィンド設計

オブジェクトインスペクタからName(ウィンドの名前)をMainWNDとしましょう。'WND'は私が昔Visual BASICをやっていた名残です。'Window'でなく'WND'とするとプログラムを構成する大切なオブジェクトであることがわかりやすくなります。プログラムソースから自分の作ったメインウィンドを文字列検索するのに便利です。このような細かいテクニックも便利です。ウィンドのタイトルCaptionは「寿分割」としましょう。メイン画面は当然リサイズ可能とします(BorderStylebsSizeableに設定、デフォルト)。リサイズによってその中のコントロールのサイズも同期させます。

メニュー設計

メニュー設計

メニュー項目も標準ルック&フィールに合わせましょう。メニューデザイナーでメニューを設計します。メニューデザイナーでCaption(表示文字列)、Name(コントロール名)を設定します。ショートカット、ヒントも必要に応じて割当てます。今回は省略します。

Caption Name 内容
「ファイル(F)」 FileMNU ファイル・寿分割全般に関するメニュー。
  「新規作成(N)」 NewMNU 分割ファイルをクリアする。分割ファイルを新規作成するわけではない。
  「開く(L)...」 LoadMNU 分割元ファイルを開く。
  「-」 SEP11 メニューを見やすくするセパレータ。
  「閉じる」 CloseMNU 寿分割を終了する。
「分割(D)」 DivideMNU 分割操作に関するメニュー。
  「1.44M(H)」 Size1440MNU 分割サイズを2HDフロッピーディスクの容量の1.44Mバイト、または2DDフロッピーディスクの容量の720Mバイトとする排他チェック
  「720K(D)」 Size0770MNU
  「-」 SEP21 メニューを見やすくするセパレータ。
  「分割先(P)...」 PathMNU 分割先を変更。
  「-」 SEP22 メニューを見やすくするセパレータ。
  「分割実行(D)」 GoDivideMNU 分割を実行。
「表示(V)」 ViewMNU 表示に関するメニュー。
  「ステータスバー(B)」 StatusBarMNU ステータスバーの表示を切り替える。チェックメニュー
「ヘルプ(H)」 HelpMNU ヘルプに関するメニュー。
  「バージョン情報(A)...」 AboutMNU 寿分割のバージョン情報を表示する。
排他チェックとはどちらかのメニューが選択される機能です。「1.44M(H)」と「720K(D)」のどちらかのメニューが選択されるように、両メニューをRadioItemに、また同じGroupIndexに設定します。また、デフォルトで「1.44M(H)」が選択されるようにCheckedtrueに設定します。
コントロール Size1440MNU Size0720MNU
Checked true false
GroupIndex 1 1
RadioItem true true
「ステータスバー」メニューはステータスバーが表示されているときにチェックがオンになり、非表示のときにオフになります。
コントロール StatusBarMNU
Checked true
メニューはウィンドの上に配置され、それ以外の配置はできません。

ステータスバー設計

ステータスバーには現在の状況を簡単に表示します。ステータスバーに文字列が表示できるように、SimplePanelに設定します。
高さはを表示文字列がうまく入るように変更します。ここではHeight19に設定します。ステータスバーは画面下にデフォルトで配置されますのでデフォルトのままとします。

リストビュー設計

リストビュー設計

リストビューは画面からメニューとステータスバーを除いた部分にフィットさせます。またデフォルトではエクスプローラーの詳細表示形式に設定します。大きなアイコン表示・小さなアイコン表示・リスト表示の切り替えも行えますが、まずは詳細表示のみとします。リストビューは以下の設定とします。 次にリストビューのカラム設定を行います。ビューカラムデザイナーを起動し、2カラム作成し、各カラムのCaption(表示文字列)、Width(幅)を設定します。
Caption Width
名前 200
サイズ 100

ファイルオープンダイアログ設計

ファイルオープンダイアログのコントロールは少し特殊なコントロールで「非ビジュアルコンポーネント」と呼ばれます。画面設計時にはオープンダイアログアイコンで表示されていますが、実行時には表示されません。このコントロールにそれぞれ属性を与え、実行する(呼び出す)とお馴染みのファイルを開くダイアログが開きます。既存ファイルを開くように設定をします。

これでメイン画面の設計は終わりです。


ちょっとプログラムを動かしたくありませんか? 早く動かしたいでしょ。張りぼてでも動くのを見たいですよね。では一つだけコードを書きましょう。画面から「ファイル」「閉じる」メニューを選択します。プログラムエディタに切り替わりますので、1行追加します。

//---------------------------------------------------------------------------
void __fastcall TMainWND::CloseMNUClick(TObject *Sender)
{
    Close();    // この1行を追加
}
//---------------------------------------------------------------------------
これはMainWNDを閉じる処理です。MainWNDはこのプログラムのメインフォームとなっているので、MainWNDを閉じるとプログラムが終了します。

実行の前にプロジェクトを保存しておきましょう。BCBのメニューから「ファイル」「全て保存(V)」メニューを選んで任意のフォルダに保存しておきます。さて実行してみましょう。BCBのメニューから「実行(R)」「実行(R)」を選択します。ツールバーやF9でも構いません。
動きましたか? 画面をリサイズするとリストビューも連動します。「ファイル」「閉じる」メニューを選択するとプログラムが終了します。BCBですからちゃんとWindowsの32ビットネイティブコードができています。プロジェクトを保存したところに実行形式があるはずです。これを実行してみましょう。先ほどと同じように動きましたね。

第3話ビルド実行結果


こちらから今回作成したBCBのプロジェクト一式をダウンロードできます。ダウンロード(3,857バイト) BCBのバージョン3、4、5でビルドできます。参考にしてください。


次回はプログラムのデータの流れを設計します。これで寿分割の全ての設計が終わります。また画面を構成するイメージ(グラフィック)もかっこよく作成します。ご期待ください。

今回のプログラミング行数: 1行
今回までのプログラミング行数: 1行


目次に戻る目次に戻る トップに戻るトップに戻る