このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。
【6日でできるVisual Basic2022入門】③画面の設計：コントロールの配置とプロパティ値の設定
③画面の設計：コントロールの配置とプロパティ値の設定
本章では、ラーメンタイマーのUIを具体化します。上段に「ゆで時間(秒)」のLabel＋TextSetSeconds、中断にStart（ButtonStart）、下段に「残り時間(秒)」とTextRemainingを配置し、Timer1はコンポーネントトレイに追加。主な設定は TextAlign=Right、TextRemainingは ReadOnly、Timer1.Interval=1000。AcceptButton=ButtonStart とタブ順で操作性を高め、名称を統一し、スナップライン等で整然としたレイアウトに仕上げます。
３．画面の設計：コントロールの配置とプロパティ値の設定
3.1. レイアウト方針とワイヤーフレーム
入力は最上段、操作ボタンは中断の右寄せ、結果表示はげ下段の見やすい位置にまとめます。Timer は非表示コンポーネントのため下部コンポーネントトレイに置かれます。
3.2. 配置するコントロール一覧
ツールボックスからドラッグ＆ドロップして配置します。名称は以降のコードで参照するのでこの表のとおりにします。
| No | 種別 | (Name) | 主要プロパティ | 用途 |
|---|---|---|---|---|
| 1 | Form | FormRamenTimer | Text=ラーメンタイマー | 画面本体 |
| 2 | Label | 既定（自動） | Text=ゆで時間(秒) | 入力ラベル |
| 3 | TextBox | TextSetSeconds | TextAlign=Right | 秒数入力 |
| 4 | Button | ButtonStart | Text=Start | 計測開始 |
| 5 | Label | 既定（自動） | Text=残り時間(秒) | 表示ラベル |
| 6 | TextBox | TextRemaining | ReadOnly=True, TextAlign=Right | 残り秒表示 |
| 7 | Timer | Timer1 | Interval=1000 | 1 秒周期イベント |
ヒント
- 等間隔に並べるには、複数選択して右クリック→配置→左右に整列／等間隔に配置を使うと素早く整います。
- 後章で Enter キー開始を有効にするため、フォームの AcceptButton に ButtonStart を割り当てます。
Timerコントロールの配置
１．コンポーネントを展開します。
２．Timerコントロールをフォームに配置します。
このTimerコントロールに間隔を指定することで、指定した間隔でイベントを発生させることができます。
配置する位置はフォーム上のどこでもかまいません。
３．コンポーネントトレイに配置される。
フォーム上に配置したTimerコントロールは、仮面下のコンポーネントトレイと呼ばれる領域に配置されます。
このTimerコントロールは、他のコントロールと同様に「Delete」キーで削除することができます。
3.3. 配置手順（基本）
- デザイナでフォームをクリックし、サイズをおよそ 420×220 に調整する。
- Label（ゆで時間）、TextSetSeconds を一列に配置する。
- 1行空けて、ButtonStartを配置する。
- 1 行空けて Label（残り時間）、TextRemaining を一列に配置する。
- Timer をフォームにドロップ（コンポーネントトレイに表示されます）
- スナップラインで上下の余白をそろえ、テキストボックスの幅を同じにする。
3.4. プロパティ値の設定（詳細表）
プロパティウィンドウで以下を設定します。未記載は既定のままでかまいません。
| 対象 | プロパティ | 値 | ねらい |
|---|---|---|---|
| FormRamenTimer | Text | ラーメンタイマー | タイトル |
| 〃 | StartPosition | CenterScreen | 画面中央開始 |
| 〃 | FormBorderStyle | FixedSingle | レイアウト固定 |
| 〃 | MaximizeBox | False | 最大化無効 |
| 〃 | Font | Meiryo, 10pt 程度 | 日本語可読性 |
| Label（上） | Text | ゆで時間(秒) | 入力ラベル |
| TextSetSeconds | Name | TextSetSeconds | コードから参照 |
| 〃 | Text | 180（例） | 初期値（任意） |
| 〃 | TextAlign | Right | 数値右寄せ |
| 〃 | MaxLength | 4 | 入力桁の上限 |
| ButtonStart | Name | ButtonStart | コードから参照 |
| 〃 | Text | Start | ボタン表示 |
| Label（下） | Text | 残り時間(秒) | 表示ラベル |
| TextRemaining | Name | TextRemaining | コードから参照 |
| 〃 | ReadOnly | True | ユーザー編集不可 |
| 〃 | TabStop | False | タブ移動を除外 |
| 〃 | TextAlign | Right | 数値右寄せ |
| Timer1 | Name | Timer1 | コードから参照 |
| 〃 | Interval | 1000 | 1 秒間隔 |
補足
- TextSetSeconds の初期値は 180（3 分）など任意。未入力対策は後章の入力検証で行います。
- TextRemaining は ReadOnly=True にすると背景が灰色になることがあります。見た目を白にしたい場合は Enabled=True のまま ReadOnly=True を使い、BackColor を Window に合わせます。
3.5. タブオーダーとアクセシビリティ
ユーザーが Tab で自然に移動できるよう順番を設定します。メニュー「表示」→「タブ オーダー」で 1) TextSetSeconds → 2) ButtonStart の順になるようにクリックします。TextRemaining は TabStop=False にしておくと快適です。
3.6. キーボード操作の割り当て
Enter で開始できると便利です。フォームを選択し、プロパティで AcceptButton=ButtonStart を設定します。将来停止ボタンを追加する場合は CancelButton=ButtonStop に設定すると Esc で停止できます。
| フォームのプロパティ | 設定 | 効果 |
|---|---|---|
| AcceptButton | ButtonStart | Enter キーで開始 |
| CancelButton | なし（後で追加可） | Esc キーでキャンセル |
3.7. 配色とフォントの微調整（任意）
- フォームの Font を Meiryo 10–11pt 程度にすると日本語が読みやすくなります。
- TextRemaining の Font をやや大きめ（12–14pt）にするとカウントが視認しやすくなります。
- 読み取り専用欄が灰色になる場合は BackColor=Window を指定すると自然な白にできます。
3.8. Timer コンポーネントの設定ポイント
Timer1 の Interval は 1000 ミリ秒（1 秒）にします。Tick イベントは次章で実装しますが、ここでは配置と間隔設定のみ行います。開始／停止はコードから Timer1.Start()／Timer1.Stop() を呼びます。
3.9. Visual Basic 2022 の関連要素解説（この章で触れたもの）
| 要素 | 種別 | 概要・使いどころ |
|---|---|---|
TextBox.TextAlign | 列挙体（HorizontalAlignment） | Left/Center/Right のいずれか。数値欄は Right が一般的 |
TextBox.ReadOnly | プロパティ | True でユーザー編集不可だが有効状態は維持。表示専用欄に最適 |
Form.AcceptButton | プロパティ | 指定ボタンに Enter キーを結び付ける |
Timer.Interval | 整数（ミリ秒） | 周期イベント間隔。1000 で 1 秒 |
Timer コンポーネント | 非表示コントロール | 画面には描画されずコンポーネントトレイに置かれる。 |
| タブ オーダー | デザイナ機能 | 入力順を設定。アクセシビリティと操作性の要 |
3.10. 配置後のチェックリスト
- フォームタイトルが「ラーメンタイマー」になっている。
- TextSetSeconds と TextRemaining の幅・右寄せがそろっている。
- TextRemaining は ReadOnly=True でタブ移動対象外
- ButtonStart が右側にあり、Enter で押せる（AcceptButton 設定済み）
- Timer1 の Interval=1000 に設定されている。
ここまで整えば、次章「④コードの実装と実行：ラーメンタイマーアプリの完成」で 「ButtonStart.Click」 と 「Timer1.Tick」 のイベントハンドラーを実装し、通知メッセージ（例：「麺がゆで上がりました！お好みの固さでどうぞ。」）を表示できるようにします。