プロジェクトの準備が終わったら、どんどん作りこんでいきましょう。 とはいえ、何を作るのか目標を決めることが大切です。
ということで、ここでは私がしばしばWindowsアプリケーション制作初心者に出す課題である、「電卓アプリ」を制作していくこととしましょう。
ITという言葉が「IT革命」として流行語大賞を受賞したのは2000年です。 これは1999年に携帯電話(ガラケー)のインターネット接続が開始されたことによって、人々は世界中の膨大な情報を手のひらの上で容易く入手できるようになったことが革命的であったためと言われています。 この当たり前となった ITという言葉は「情報技術」と言われていますが、情報の技術ってなに？と、ぼんやりとしたイメージしか持っていないという方も少なくはないと思います。
しかし、アプリ開発を始める方には、「ITとは情報を”記憶(記録)”する技術、情報を”処理“する技術、情報を”伝達“する技術」であると覚えておいていただきたいです。
そう考えると、電卓というものは人によって入力された数字を記憶し、+や-などの演算記号に基づいて計算処理を行い、結果を画面に表示することで人に情報として伝える機能を備えています。 つまり電卓は最もシンプルであるIT機器であると言えるため、アプリ制作の入門用課題として最適だと考えているためです。(あくまでも個人的な想いです)
ではまず、インターフェースとなるフォームウィンドウ(フォーム)のデザインを行いましょう。 もう既にイメージされている方も多いと思いますが、電卓といえば数字を表示する液晶ウィンドウ、数字や演算記号を入力するためのボタン類が配置されています。 フォームを電卓本体として、その中にボタンなどの部品を配置していきたいと思います。
とはいえ、まずは本体であるフォームが表示されるか確認をしてみましょう。
前回準備した MyProject_solution.sln を開くと以下のような画面になっていると思いますので、画面上部のメインメニューの下にある「MyProject」と書かれた再生ボタンのようなボタンをクリックします。
下図のようにフォームが無事に表示されればOKです。
では、本格的に電卓のディスプレイやボタンを配置してみましょう。
私の場合は、シンプルですが以下のようなデザインにしました。
と言っても、仕様を決めなければデザインできませんので、今回は最もシンプルな「四則演算だけの機能」を持つ電卓とすることにします。 四則演算だけなので楽勝だと思いたいところですが、多少は制御を考えてプログラミングしなければなりませんので、電卓の奥深さを知る良い機会になると思います。
計算や条件判断などの内部の仕様については後ほど触れるとして、まずはフォームへの部品(コントロール)の配置について簡単に説明をしていきます。
フォーム上には2種類の部品(コントロール)を配置します。 一種類は下図赤枠の Label(ラベル)で、入力した数字や計算結果を表示するためのアウトプット用のコントロールです。そしてもう一種類は緑枠の Button(ボタン) で、数字や演算記号などを入力するインプット用のコントロールです。 アプリケーションはインプットとアウトプットのコントロールで構成されています。
VS2019本体の左側に「ツールボックス」というリボンがあり、この中にはアプリケーションで利用できるコントール群が多数存在します。 「ツールボックス」をクリックすると下図のようにコントロールが表示されるので、Label を選択します。
Label を選択した状態でマウスポインターをフォーム上に移動するとマウスポインタ－のアイコンが変わりコントロールを配置できる状態となるので、配置したい場所の左上の角(下図緑〇)でマウスの左ボタンを押し込み、そのまま右下の角(下図赤〇)までポインタ－を移動してマウスの左ボタンを離してください。 そうするとマウスポインタ－が動いたサイズで Label が配置されます。
と言いたいところですが、Label は他のコントロールと少し仕様が異なり、配置時の初期サイズは Autosize となっているので、任意の大きさで表示するためにこれを解除します。下図のように、フォームに配置された Label1 を選択した状態で、VS2019右側にあるプロパティ内の Autosize を True から False へ変更します。
Autosize が False へ変更され、Label1 のサイズはマウスポインタ－を動かして指定したとおりのサイズで表示されるようになりました。
配置後にサイズを任意に調整したい場合は、コントロールの四隅と各辺の中央に表示されている合計8か所の小さな四角いボックスをつまんでドラッグすると任意のサイズへ変更できます。またすべてのサイズを同じ大きさに精緻に揃えたい場合は、Size プロパティに「縦サイズ, 横サイズ 」(82, 72 など)と入力します。なお、サイズは画面上で表示したいピクセル数(※)で指定します。 ※Full HD の全画面サイズは 1920 x 1080ピクセルです
コントロールを配置した直後は、Label1 のように自動的に「コントロール名 +連番」で名前が割り振られます。プログラムではこの名前を呼び出して様々な指示を書きます。そのままの名前で使用することも可能ですが、プログラミングするうえで分かりやすい名前にしておいたほうがよい場合は、下図のように(Name)プロパティで任意の名前に変更します。ちなみに、私の場合は「Val_Display」という名前にしてみました。
このような感じで、残りのボタン群のほうも任意に配置して、必要により(Name)プロパティを設定してみましょう。
ここで、私が作成した電卓アプリのソースコード一式を公開いたしますので、参考としてください。 不具合抽出と修正などの動作検証(デバッグ)が完全ではないので、おかしな動きがあった場合はお許しください。 今後修正次第、更新していきます。
サンプルソースコード：Sample_MyProject_solution.zip
フォームのデザインと表示については以上となりますので、これまでのポイントをまとめておきます。
- 今回は四則演算のみの電卓とし、入力できるものは数値、小数点、四則演算記号、イコール、クリア(C)のみとする。
- フォームに配置する部品は、一般的にコントロールと呼ばれる
- コントロールは、インプット用とアウトプット用に大別される
- コントロールのサイズはマウスで自在に変更でき、Sizeプロパティでの数値指定も可能
- コントロールはツールボックスから選択して配置でき、Label の Autosize プロパティは初期設定が True となっている
- コントロールの名前は(Name)プロパティで任意に変更可能。
いよいよ、次回は電卓機能のプログラミングに入ってみたいと思います。