パスワード管理ツールを自作しよう!(第3回・画面レイアウト作成編)

プログラミング入門
この記事は約6分で読めます。

さて、いよい今回からVisual Studio2019 を使って、画面レイアウトを作成していきたいと思います。

この記事を読む前に、Visual Studio2019をまだインストールされていない方は、こちら の記事を参考にインストールをお願いします。

また、インストール後のVisual Studio2019の起動方法は こちら の記事を、画面レイアウトの作成方法は こちら の記事をご覧ください。

プロジェクトを作ろう

さて、プログラムを作る際は、プロジェクト名というものを決める必要があります。

プロジェクト名はプログラムの実行ファイル名にもなりますので、分かりやすい名前を付けます。

プロジェクト名の変更は出来なくは無いですが、結構厄介なのと、少しでも失敗するとビルドすらできなくなるので、ここは注意して下さい。

さて、今回はパスワードを管理するものになるので、PasswordManager と言うプロジェクト名にします。

実際の手順は、こちら の記事をご参照ください。

プロジェクトを入力し、プロジェクトが出来上がったら、いよいよレイアウトの作成に移ります。

Form.csの名前を変えよう

プロジェクトが出来上がった状態では、Formのファイル名が Form1.cs になっています。

別にこのままでも支障はないのですが、Form1という意味のないファイル名だと気持ちが悪いので、適切な名前に変えたいと思います。

名前を変える理由は、プログラムが分かりやすくなるからです。

フォームが1個だけなら、あまり関係は無いのですが、複数のフォームを使うようなプログラムだと、フォーム毎に役割を持たせることになります。

この時、それぞれのフォームに適切な名前を付けることで、ソリューションエクスプローラーから識別しやすくなります。

従って、ファイル名はフォームの役割が分かるような、それっぽいものを付ければよいのですが、フォームクラスだと判断できるように名前の一部に Formを付けた方が、より分かりやすくなります。

例えば、 PasswordManagerForm とかですね。

ただ、プログラム毎に名前を変えるのも面倒なので、MainFormという名前を私はよく使います。

名前の変更方法は、Visual Studio の右側にあるソリューションエクスプローラーから「Form1.cs」を右クリックし、表示されるメニューから「名前の変更」を選び、MainForm  又は 好きな名前に変更して下さい。

画面レイアウトを作ろう

Visual Studioのレイアウトエディターが起動したら、下記の通り Combobox、Label、Button、DataGridVIew のコントロールを張り付けて下さい。

コントロールが張り終わったら、今度は名前を付けていきます。

この時、そのコントロールがどういう役割なのかが判断できるような名前を付けます。

なお、Labelについては”カテゴリ”という固定文字を表示するだけで、特にプログラムで何かするわけではないので、名前は付けません。

また、MainForm以外は先頭に”ux”という文字を付加していますが、これは接頭語と呼ばれるものです。

画面操作が伴うプログラミングにおいては、コントロールに対して多くのプログラムコードを記述します。

その際、他の変数と区別した方がプログラムが書きやすく、あとで読み返した時も見やすいので、先頭に”ux”という接頭語を付けています。

ちなみに、”ux”とは”user experience=ユーザー体験” の略です。

コントロールの役割コントロールに付ける名前
プロジェクトが出来上がった際、最初に自動で作成されるWindow MainForm
”カテゴリ”の文言を表示するLabelなし
カテゴリを選択するComboBoxuxCategory
IDの取得を行うButtonuxIdToClip
パスワードの取得を行うButtonuxPwdToClip
編集モードの切り替えButtonuxEditMode
ファイル保存のButtonuxSave
ID、パスワード等の一覧表示と一覧編集用DataGridViewuxIdPasswordGrid

この接頭語ですが、人によっては Button や ComboBox など、個々のコントロールも識別する目的で、btnIdToCLipや、cmbCategory という風にする人もいます。

私も以前はこの方法だったのですが、この記事を読んでから “ux”を接頭語にするようになりました。

イベントハンドラを作ろう

では、最後にイベントハンドラを作ります。

作ると言っても特にプログラムコードを書く必要はありません。

下記の図を参考にMainForm、ComboBoxコントロールと4つのButtonコントロールについて、①~⑥の順にダブルクリックしてください。

ダブルクリックするたび、コードエディターに自動的に切り替わりますが、気にせずレイアウトエディタを選んで、次のコントロールをダブルクリックして下さい。

順番を間違えてクリックしても問題はありませんが、次回以降の説明と合わせるため、コードエディター上での編集により順番を入れ替えて頂く方が良いかと思います。

ここまでの操作で、下記のプログラムコードが自動的に作られたはずです。

動かしてみよう

レイアウトとイベントハンドラが出来上がったら、実際にプログラムを動かしてみましょう。

動かし方は簡単で、画面上のやや左側にある「開始」ボタンをクリックするだけです。

この、プログラムを動かす行為を「実行する」と言います。

プログラムを実行すると、以下の様が画面が表示されると思います。

イベントハンドラを作成する作業において、一度作成したイベントハンドラをコードエディタから削除した場合、Visual Studio内で不整合が発生し、エラーになることがあります。

この場合、Visual Studio の最下段に以下の様なエラーメッセージが表示されると思います。

このエラーが表示されたら、エラー行をダブルクリックして下さい。

Visual Stuidoが自動生成したソースコードが表示され、不整合が起きている部分が波線のアンダーラインで表示されます。

この行を削除することで、エラーは解決されるはずです。

まとめ

如何でしたでしょうか。

今回はレイアウトエディタを使って

  • 必要なコントロールを画面(Window)に配置
  • コントロールに名前を付ける
  • コントロール(ComboBox,Button)をダブルクリックし、イベントハンドラを自動作成する

というところまで行いました。

コントロールの名前は大文字小文字含め、一字一句間違わないようご注意ください。

でないと、次回掲載するソースコードを張り付けても、プログラムが正しく動きませんので。

タイトルとURLをコピーしました