第7回 - 画面のデザイン

[ 目次へ | 第6回へ | 第8回へ ]

今回の目標
電卓の作成を始めます。
最初は画面のデザインから行います。

前回、電卓の仕様を考えました。

今回からいよいよ電卓を作成します。Visual Basicの場合、開発の最初は画面のデザインです。

イメージしやすいように、最初に画面のデザインの完成図を紹介します。こちらの図のようになります。普通に電卓を想像したときのデザインそのままだと思います。

この画面をデザインする過程は次のようになります。

  1. Visual Basicの起動とプロジェクトの作成 : VBの起動は当然必要な操作です。起動すると、このようなダイアログボックス(エディションによって多少異なります)が表示されますから、「標準EXE」を選択して[OK]します。
  2. すぐに画面のデザインを始めてもいいのですが、まずプロジェクトとフォーム(VBの開発環境に入ると最初に表示されているはず)のプロパティを編集します。
    プロジェクトのプロパティは、オブジェクト名だけがあります。「Calc」に変更してください。
    フォームのプロパティでは以下のものを編集してください。
    プロパティ 値
    オブジェクト名 frmMain
    BorderStyle 1 - 固定(実線)
    Caption 電卓

    オブジェクト名、Captionは他の適当な値でもかまいませんが、このあとの説明で混乱しないようにしてください。また、BackColorなどのプロパティを自分の好みで変更してもかまいません。なお、フォームの大きさはいつでも変更できるので、最初は少し大きめにしておくといいでしょう。すべてのコントロールを配置し終わった後で、見た目を考えてフォームの大きさを最終的に決定します。

  3. コントロール(画面を構成する部品)を配置していきます。電卓で使用するコントロールは、ラベルとコマンドボタンだけです。
    まず、ツールボックスでラベルをクリックします。続いてフォームの上にカーソルを移動し、適当な位置でマウスをドラッグします。その位置にラベルコントロールが配置されます。ラベルコントロールのプロパティは次のように変更します。
    プロパティ 値
    オブジェクト名 lblNumber
    Alignment 1 - 右揃え
    Backcolor &H00FFFFFF&
    BorderStyle 1 - 実線
    Caption 0

    続いて、コマンドボタンを配置します。コマンドボタンは全部で18個です。コマンドボタンは、「0」のボタンならば「cmd0」、「=」のボタンならば「cmdEqual」のようなオブジェクト名にします。それぞれのコマンドボタンのオブジェクト名とCaptionプロパティの値は次のようにします。なおコマンドボタンはオブジェクト配列にすることもできるのですが、今回は以下のようにしてみます。

    　

    オブジェクト名 Caption
    cmd0 0
    cmd1 1
    cmd2 2
    cmd3〜cmd8 3〜8
    cmd9 9
    cmdPeriod  .
    cmdEqual =
    cmdPlus +
    cmdMinus -
    cmdMultiple *
    cmdDivide /
    cmdClear C
    cmdClearEntry CE


  4. コントロールの配置はすべて終わりました。それぞれの位置やサイズを改めて調整してください。
  5. 画面のデザインは終了です。ここで一旦プロジェクトを保存しておきましょう。ファイル名はデフォルトのままでかまいません(もちろんファイル名を変更してもかまいませんが、当然のことながら無意味な名前はやめましょう)。

これで画面の設計は終わりです。次回から、コーディングを行います。これによって、電卓としての動作するようになります。

[ 目次へ | 第6回へ | 第8回へ ]

メール 瀬尾佳隆 (webmaster@seosoft.net)