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

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

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

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

プロジェクトを作ろう
Form.csの名前を変えよう
画面レイアウトを作ろう
イベントハンドラを作ろう
動かしてみよう
まとめ

プロジェクトを作ろう

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

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

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

さて、今回はパスワードを管理するものになるので、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	なし
カテゴリを選択するComboBox	uxCategory
IDの取得を行うButton	uxIdToClip
パスワードの取得を行うButton	uxPwdToClip
編集モードの切り替えButton	uxEditMode
ファイル保存のButton	uxSave
ID、パスワード等の一覧表示と一覧編集用DataGridView	uxIdPasswordGrid

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

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

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

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

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

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

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

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

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

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace PasswordManager
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
        }

        private void MainForm_Load(object sender, EventArgs e)
        {

        }

        private void UxCategory_SelectedIndexChanged(object sender, EventArgs e)
        {

        }

        private void UxIdToClip_Click(object sender, EventArgs e)
        {

        }

        private void UxPwdToClip_Click(object sender, EventArgs e)
        {

        }

        private void UxEditMode_Click(object sender, EventArgs e)
        {

        }

        private void UxSave_Click(object sender, EventArgs e)
        {

        }
    }
}

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

namespace PasswordManager

{

public partial class MainForm : Form

{

public MainForm()

{

InitializeComponent();

}

private void MainForm_Load(object sender, EventArgs e)

{

}

private void UxCategory_SelectedIndexChanged(object sender, EventArgs e)

{

}

private void UxIdToClip_Click(object sender, EventArgs e)

{

}

private void UxPwdToClip_Click(object sender, EventArgs e)

{

}

private void UxEditMode_Click(object sender, EventArgs e)

{

}

private void UxSave_Click(object sender, EventArgs e)

{

}

動かしてみよう

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

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

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

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

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

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

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

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

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

まとめ

如何でしたでしょうか。

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

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

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

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

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