PDCA支援ツールを作ろう その３　画面を作る　その２

さて、昨日今日と着手時間が遅くなってきつつある白鳥です。
フリーランスは営業活動も仕事だから…（小声）

今は人様から仕事をもらって糊口を凌ぐ身。
いつかは人に仕事を出して飯を食わせたい。
願望はおいといて作業しましょ。
_妄想で進捗は進まないんだよぉ！_


# 画面の作りこみ

ってことで昨日作った画面を作りこんでいきましょう。
昨日時点ではとりあえず画面のレイアウトを決めたまでだったので
非常に見にくくなってます。これはイケない。

## コントロールの名前を命名規則に沿って整える

ので、まずはコントロールの名前をきれいに整頓していきましょう。
各コントロールのテキストも一緒にちゃちゃっと。

今回はVisualStudioのドキュメントアウトラインを利用して直していきます。
![ドキュメントアウトライン](https://qiita-image-store.s3.amazonaws.com/0/259679/06f107f3-a293-4c70-b3b8-c82e6fe710d8.jpeg)

ドキュメントアウトラインは表示中のフォーム[デザイン画面]の階層構造をツリー形式で見せてくれる粋な奴です。
確かデフォルトでは出てきてくれないシャイなところがあるので、このウィンドウを出したい場合は
_[VisualStudioのメニューバー(いわゆる上のやつ)]-[表示(V)]-[その他のウィンドウ(E)]-[ドキュメントアウトライン(T)]_
もしくは
_ショートカットキー　Ctrl + W ⇒ U　で呼び出してあげましょう。_

で、このウィンドウ、コントロールをツリー構造で表示してくれるだけでなく、
選択するとしっかりプロパティを切り替えてくれる便利な子です。
しかもこの表示順は画面の描画階層を示してたりするので、ドラッグ＆ドロップで表示優先度を変更できたりします。

いい子や！この子は！俺にはわかる！

---

で、これが新旧比較（ドキュメントアウトライン）

![ドキュメントアウトライン比較](https://qiita-image-store.s3.amazonaws.com/0/259679/8efdb50e-a3d0-d053-dfc6-0c4b4c8dc576.jpeg)

コントロールの命名規則については以下のルールを決めてます。

* キャメルケース（頭が小文字、単語の区切りがある場合、後続の単語の頭文字を大文字にする）
* 頭にコントロールの略号をつける
 
自分は色々言語使うようになった経験上、各言語の導入を目的として書籍を色々読んできましたが
おおよそ命名ルールについてしっかり記述のある書籍を見た記憶がありません。

初学者にこそいいたいのですが、命名規則は（最低でも）自分の中でキッチリ固めておいた方がいいです。

**来週の自分は他人だと思ってください。**
**先週の自分が適当につけた名前は大体忘れてます。**

まかり間違ってもiだのjだので一文字命名はしないように。
ちょっと長いかな？と思うくらいでかまいません。
テキストエディタでコード書いてるとかなり手間ですが、VisualStudioなんかだと予測変換（インテリセンス）機能があるので
手間にはならないです。
改修の発生しないコードは基本的に存在しないので、保守性と可読性は意識して作りましょう。


## リッチテキストの切り替え処理を状態マトリクスを使って実装する

とりあえず今回肝になりそうなリッチテキストの切り替え処理を作ってしまいましょう。
~~コントロールの名前だけ変えておしまいってのも盛り上がりに欠けるし~~

まずはリッチテキストとラジオボタンにIDを振ってやることにします。

```Main.cs
        /* Rich Text Id */
        private const int R_TEXT_PLAN = 0;
        private const int R_TEXT_DO = 1;
        private const int R_TEXT_CHECK = 2;
        private const int R_TEXT_ACT = 3;

        /* Radio Button Id */
        private const int R_BTN_PLAN = 0;
        private const int R_BTN_DO = 1;
        private const int R_BTN_CHECK = 2;
        private const int R_BTN_ACT = 3;
```

今回は全４枚のリッチテキストをラジオボタンの操作によって切り替える設計です。
これを表にするとこんな感じ

| Radio Button\ Rich Text | Plan | Do | Check | Act |
|:-:|:-:|:-:|:-:|:-:|
| Plan checked  | Visible  | Invisible  |  Invisible | Invisible |
| Do Checked  | Invisible    | Visible    |  Invisible   |  Invisible   |
| Check Checked  | Invisible    | Invisible    | Visible    | Invisible    |
| Act Checked  |  Invisible   | Invisible    | Invisible    | Visible    |

で、これを状態マトリクスとして定義してやりましょう。

```main.cs
        private readonly bool[,] STATUS_TABLE_R_TEXT_VISIBLE = new bool[,] {
            /* Plan     Do          Check       Act */
            { true,     false,      false,      false }, /* rbtnPlan    */
            { false,    true,       false,      false }, /* rbtnDo      */
            { false,    false,      true,       false }, /* rbtnCheck   */
            { false,    false,      false,      true  }, /* rbtnAct     */
        };
```

さて、作った状態マトリクスをリッチテキストに適用するため、共通の処理を作っておきます。
こんな感じ。

```main.cs
        private void SetVisibleRichText( int pRbtnId) {

            rtbPlan.Visible  = STATUS_TABLE_R_TEXT_VISIBLE[ R_TEXT_PLAN  , pRbtnId ];
            rtbDo.Visible    = STATUS_TABLE_R_TEXT_VISIBLE[ R_TEXT_DO    , pRbtnId ];
            rtbCheck.Visible = STATUS_TABLE_R_TEXT_VISIBLE[ R_TEXT_CHECK , pRbtnId ];
            rtbAct.Visible   = STATUS_TABLE_R_TEXT_VISIBLE[ R_TEXT_ACT   , pRbtnId ];

            return;
        } 
```

ここまで作ってしまえばもう終わったも同然です。
定義自体は若干手間であるものの、SetVisibleRichTextに押下されたボタンのIDを引数として設定して呼び出せば
リッチテキストの可視/不可視設定を切り替えることが出来るわけです。

なので４ボタン分のイベントハンドラをこんな風にポーンと作ってやります。

```Main.cs
        private void rbtnPlan_CheckedChanged(object sender, EventArgs e) {
            SetVisibleRichText(R_BTN_PLAN);
            return;
        }

        private void rbtnDo_CheckedChanged(object sender, EventArgs e) {
            SetVisibleRichText(R_BTN_DO);
            return;
        }

        private void rbtnCheck_CheckedChanged(object sender, EventArgs e) {
            SetVisibleRichText(R_BTN_CHECK);
            return;
        }
        private void rbtnAct_CheckedChanged(object sender, EventArgs e) {
            SetVisibleRichText(R_BTN_ACT);
            return;
        }
```

後はデバッグ用に表示中のリッチテキストにコントロール名が出るようにしてやって動作確認すれば各ボタンの押下状態と紐づいたのが確認できます。

![2018y06m07d_021658756.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/2d33ec74-9a2f-883b-5c0c-274f78c38512.jpeg)
![2018y06m07d_021700922.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/ca1555ba-3e87-c090-f0f9-fcdf391cd2d5.jpeg)
![2018y06m07d_021702657.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/84e015c8-20b2-a989-9dc7-488362b88e3c.jpeg)
![2018y06m07d_021704156.jpg](https://qiita-image-store.s3.amazonaws.com/0/259679/3557388a-e618-9853-a9ee-eb6c57e4fbbd.jpeg)


# もっと手早く実装したい！

もっとサクッと実装したい場合はこちら。

ボタンIDとテキストIDポイッってして
状態マトリクスもゴミ箱へGO!
SetVisibleRichText()の宣言から引数を丁寧丁寧丁寧に削ぎとってこんな風に変更

```Main.cs
        private void SetVisibleRichText() {

            rtbPlan.Visible = rbtnPlan.Checked;
            rtbDo.Visible = rbtnDo.Checked;
            rtbCheck.Visible = rbtnCheck.Checked;
            rtbAct.Visible = rbtnAct.Checked;

            return;
        } 
```

（これ、ラジオボタンのチェック状態をそのままリッチテキストのVisibleプロパティにぶっこんでます。）

EventHandlerからも引数を削除。で同じ動きします。

今回は4ボタンで1つの領域だけいじるからこっちでもよかったかもですね。
これが複数の領域を変化させる場合、可読性と保守性の観点から上のやり方もアリなんですが
ちょっと判断が難しいところです。
複雑な状態変化を弄る場合はマトリックス使うとデバッグが非常に楽になるのでオススメ。



### 最後に

自分で書いてて思ったんだけど
やっぱ最初に触った書き方に引っ張られますね…
これCで組んでる時によくやったやつだわ。

本日の稼動は04:44:59也。ルパンが悪い。