# レイアウト設計

トレーニング > 中級編 > 1.プロジェクトの作成 > # レイアウト設計 |

レイアウトを設計する

実際に監視画面を実行するPCの解像度を想定して監視画面を作成することで、より綺麗で効果的な監視システムを構築できます。ここでは、レイアウト設計において検討が必要なポイントについて解説します。

実行時の画面サイズの検討

固定・可変の検討

実際に監視画面として表示された際のサイズをいくつにするべきかを検討する上で、まずは以下の2パターンでの検討が必要です。

固定サイズとして表示 | 単一のPCで動作させる監視画面や、固定解像度のディスプレイで表示する場合などの場合、固定サイズとして設計します。 固定サイズの場合、追加で別PCで監視画面を表示したい場合も同じの解像度で表示します。
| 固定サイズとした場合、実行後に画面のサイズが変わることを考慮せず全ての画面フォームを固定サイズで構築できます。
可変サイズとして表示 | 解像度の異なるディスプレイで一つの監視システムを表示する場合などは、可変サイズとします。また、監視画面表示中に画面サイズを変更したい場合なども可変サイズとして設計します。
| 可変サイズを選択した場合は、実行環境や実行後に画面のサイズを変更することを考慮して構築します。検討箇所は増えますが、様々な環境での表示に柔軟に対応できます。

解像度の検討

「固定サイズ」で最大表示を行う場合は、実行環境で表示するディスプレイの解像度を採用します。「可変サイズ」の場合は、「想定する最大解像度」「想定する最小解像度」を検討します。

実行形式の検討

実行する際に「フルスクリーン」表示するかしないかを検討します。フルスクリーンでは、画面部分をディスプレイ一杯に表示し、監視画面を専用に表示させることができます。また、フルスクリーン時には、「Windows OSのタスクバー」「実行画面のタイトルバー」「実行画面のメニュー」「実行画面のステータスバー」は表示されません。

監視画面とは別に表示するエリアを検討

フルスクリーン表示をしない場合、監視画面表示エリアとは別に、以下の部分を表示するか否かで監視画面の表示エリアのサイズが異なってきます。画面サイズを検討する初期段階で以下のエリアの有無を検討します。

Windows OSの タスクバー | WindowsOSのタスクバーを常時表示するかどうかを検討します。監視画面とは別のアプリケーションを使用するニーズがある場合などは、タスクバーを表示するのも有効です。また、タスクバーの表示位置（画面下部か横部か）についても検討が必要です。
実行画面の タイトルバー | 下図のタイトルバー部分です。タイトルバー部分には、最小化ボタン/最大化ボタン/終了ボタンも含まれます（各ボタンとも設定で非表示化が可能）。これらのボタンやタイトル表示を行いたい場合は、タイトルバーを有効とします。
実行画面の メニュー | 下図のメニュー部分です。メニューとして、画面切り替え等の独自メニューも作成できます。
実行画面の ステータスバー | 下図のステータスバー部分です。「Caps lock」「Num lock」「Scroll lock」キーの状態を表示します。

画面サイズ関連のプロパティ

実行時の画面サイズの検討した結果で、実行したい画面形態に応じて以下のルートプロパティを変更します。

設定プロパティ
固定サイズ |
プロパティ名 | 設定値
StartupSize | ブラウザが起動したときのブラウザのサイズ。
CUSTOMSIZE | ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がフォームのサイズとなる。
CUSTOMSIZE2 | ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がアプリケーションのサイズとなる。
StartupSizeWidth | 画面の幅を設定。
StartupSizeHeight | 画面の高さを設定。
AllowResize | FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。FALSEを設定。
StartupCenter | ブラウザの実行時の表示位置を、デスクトップ中央にする。TRUEを設定。
ShowMaxButton | ブラウザ実行中の、タイトルバー右の最大ボタンの表示・非表示。FALSEを設定。
ShowMinButton | ブラウザ実行中の、タイトルバー右の最小ボタンの表示・非表示。FALSEを設定。
ShowTitleBar | ブラウザ実行中の、タイトルバーの表示・非表示。
ShowMenu | ブラウザ実行中の、メニューの表示・非表示。
ShowStatusBar | ブラウザ実行中の、ステータスバーの表示・非表示。
可変サイズ |
プロパティ名 | 設定値
StartupSize | ブラウザが起動したときのブラウザのサイズ。
FULLSCREEN | フルスクリーン表示。フォームがデスクトップ一杯に表示されます。
MAXIMUM | 最大表示。
CUSTOMSIZE | ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がフォームのサイズとなる。
CUSTOMSIZE2 | ユーザでサイズを指定する。StartupSizeWidth/StartupSizeHeightの値がアプリケーションのサイズとなる。
StartupSizeWidth | 画面の幅を設定。StartupSizeがCUSTOMSIZE/CUSTOMSIZE2の場合のみ。
StartupSizeHeight | 画面の高さを設定。StartupSizeがCUSTOMSIZE/CUSTOMSIZE2の場合のみ。
AllowResize | FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。TRUEを設定。
StartupCenter | ブラウザの実行時の表示位置を、デスクトップ中央にする。TRUEを設定。
WindowsMinWidth | ブラウザのサイズを小さくした時の最小の制限サイズ（幅）。想定最小解像度幅を設定。
WindowsMinHeight | ブラウザのサイズを小さくした時の最小の制限サイズ（高さ）。想定最小解像度高さを設定。
ShowTitleBar | ブラウザ実行中の、タイトルバーの表示・非表示。
ShowMenu | ブラウザ実行中の、メニューの表示・非表示。
ShowStatusBar | ブラウザ実行中の、ステータスバーの表示・非表示。
フルスクリーンとして実行 |
プロパティ名 | 設定値
StartupSize | ブラウザが起動したときのブラウザのサイズ。
FULLSCREEN | フルスクリーン表示。フォームがデスクトップ一杯に表示されます。
AllowResize | FALSE時、ブラウザ起動後のウインドウサイズを変更できないようにする。
WindowsMinWidth | ブラウザのサイズを小さくした時の最小の制限サイズ（幅）。想定最小解像度幅を設定。
WindowsMinHeight | ブラウザのサイズを小さくした時の最小の制限サイズ（高さ）。想定最小解像度高さを設定。

画面の分割を検討

監視画面の画面のエリア分割を検討します。ユーザーのニーズに応じて、常に画面上に表示させておきたいエリアや、画面切り替えのボタンを表示させたいエリア、そしてグラフィック画面や機能画面を表示させるメインエリアなどの分割とサイズを検討します。

例えば、画面上に画面遷移ボタンが並ぶ「画面遷移ボタンエリア」、アラームサマリを常時表示する「アラームサマリエリア」、グラフィック画面を表示いする「メインエリア」を考えた場合、以下の様な分割エリア割と画面全体におけるそのエリアのサイズを決定します。このエリア分けの中で、常に表示する部分にはコントロールをそのまま配置し、切り替わりがあるエリアについてはビューコントロールを配置して必要時にビューコントロールに表示するフォームを切り替える様にします。

フォームの拡大縮小を検討

可変サイズやフルスクリーン表示の際には、メインエリアのビューコントロールに表示するフォームの拡大縮小を検討する必要があります。フォームの拡大縮小を設定するフォームプロパティは「Stretch」プロパティになります。

Stretchプロパティは、以下の値を設定することができます。

STRETCH_FULL | サイズに合わせて引き伸ばし表示する。
STRETCH_KEEPRATE | サイズに合わせて引き伸ばし表示する（縦横比保持）。
RESIZE_FULL | サイズに合わせてフォームサイズを調整する。
RESIZE_KEEPRATE | サイズに合わせてフォームサイズを調整する（縦横比保持）。

上表の「RESIZE_FULL」及び「RESIZE_KEEPRATE」の場合は、フォーム上の各コントロールの「AutoResizeX」「AutoResizeY」の設定値に応じてコントロール位置とサイズが調整されます。

AutoResizeX | リサイズ時にどこのX軸を基準とするか。 LEFT - 左基準 RIGHT - 右基準 LEFTRIGHT - 左右基準 CENTER - 中心基準
AutoResizeY | リサイズ時にどこのY軸を基準とするか。 TOP - 上基準 BOTTOM - 下基準 TOPBOTTOM - 左右基準 CENTER - 中心基準

また、「STRETCH_KEEPRATE」及び「RESIZE_KEEPRATE」の場合縦横比を保持する為、余白が発生する場合があります。その場合はフォームの「ViewFillColor」プロパティにフォームの「FillColor」の値をそのまま設定します。そうすることで、余白部分も背景色と同じ色になり、余白が目立たなくなります。

これらの「Stretch」プロパティのサンプルは、以下からご利用頂けます。

レイアウト設定

本トレーニングでは、「可変サイズ」として以下のレイアウト設定でプロジェクトを設定してみます。

コントロール | プロパティ名 | 設定値
ルート | StartupSize | MAXIMUM
| AllowResize | TRUE
| WindowsMinWidth | 800
| WindowsMinHeight | 600
| ShowStatusBar | FALSE
Forms.frmMain | Stretch | RESIZE_FULL
btnScreen1 | AutoResizeX | LEFT
| AutoResizeY | TOP
btnScreen2 | AutoResizeX | LEFT
| AutoResizeY | TOP
viewMain | AutoResizeX | LEFTRIGHT
| AutoResizeY | TOPBOTTOM
Screens.Screen01 | Stretch | RESIZE_KEEPRATE
| ViewFillColor | @FormColor
Screens.Screen02 | Stretch | RESIZE_KEEPRATE
| ViewFillColor | @FormColor

また、画面の分割は以下のイメージでレイアウトします。