画面/帳票レイアウト設計を使いこなす

本連載は、設計書ジェネレータ「SI Object Browser Designer（以下、OBDZ）」を使ってソフトウェアの設計書（仕様書、基本設計書、詳細設計書）を作る講座です。
今回は、画面/帳票のレイアウト設計に役立つテクニックをご紹介します。

操作方法を覚えるには、実際に製品を触りながら行うのが一番ですので、OBDZをお持ちでない方はぜひ評価版をインストールの上、お読みください。以下のURLよりお申込みいただくと、製品のダウンロードURLおよびログインに必要なアカウントを取得いただけます。
https://www.sint.co.jp/products/obdz/trial/trial.html

画面/帳票レイアウトのテクニック

①コントロール設計等で不要なコントロールを非表示にする

通常、画面レイアウトタブで配置したコントロールは「コントロール」タブや「イベント」タブでも表示されますが、デザイン画像などの見栄えだけのコントロールは「ダミーフラグ」プロパティを利用して非表示にすることができます。ダミーフラグをONにすると画面レイアウト上だけで登場する疑似コントロール扱いとなり、コントロールタブ以降では非表示になります。

画面１．ダミーフラグを設定した場合

ダミーフラグは各コントロールのプロパティとなりますが、複数のコントロールをまとめて選択後、一括でダミーフラグを変更することも可能です。

ダミーフラグは上記例のように見栄えだけのデザインで利用する他、一覧画面でも活用できます。一覧画面では明細が複数行表示されるのが普通ですが、これを画面レイアウトタブに表現すると、コントロールタブではすべての行分のコントロールが表示されることになります。このような場合も、２行目以降の明細をダミーフラグONにすることで重複をなくすことができます。

画面２．一覧画面での活用方法

②複数の画面レイアウトタブを定義する

ひとつの画面や帳票の設計をする場合も、

　・新規モード・更新モードによって画面のレイアウトが異なる場合
　・ユーザーの権限（管理者権限、一般権限等）によって画面のレイアウトが異なる場合
　・タブコントロールがある場合に各タブを開いた上で画面レイアウトを複数表示したい場合

など、複数のレイアウトパターンを設計したい場合があります。OBDZではタブ名の右にある＋ボタンをクリックすることでレイアウトの複数定義が可能です。画面３の例ではレイアウト内にあるタブコントロールの「基本」を選択した場合と、「詳細」を選択した場合の２種類のレイアウトを定義しています。

画面３．複数画面レイアウトの定義例（タブの中が異なる）

レイアウトタブを複製した場合、タブ名は「画面２」「画面３」となりますが、タブ名の右にある編集アイコンをクリックすることでタブ名の変更や削除もできます。ただし、この機能を利用した場合、各レイアウトタブの全てのコントロールが「コントロール」タブ以降のタブで表示されてしまいます。（画面３の例では、タブの外にあるヘッダー項目やボタンがコントロールタブで重複表示されてしまいます。）このような場合は、①でご紹介した「ダミーフラグ」を利用し、重複しないように設定しましょう。

③綺麗に配置する

レイアウト設計の際は、縦や横に並んでいる複数コントロールの座標位置やサイズを揃え、綺麗にしたいと思います。位置揃え機能でも整えることもできますが、画面、帳票タブ右端の「utility」タブ内にある「グリッド表示」を設定することでもっと簡単にできます。この設定を「グリッド」か「ドット」にした場合、グリッドの各点が10ピクセルごとに表示されるようになります。また、この状態でコントロールを新規配置した場合やドラッグで移動した場合は、この各点にくっついたかたちで配置されるようになります（10ピクセル単位で位置やサイズ情報が変更されます）。そのため、目分量で複数コントロールの位置やサイズを綺麗に揃えることができます。

画面４．グリッド吸着で作成した帳票の例

いかがでしたか。今回はあまり知られていないテクニックを中心にご紹介しました。使いこなせば、従来のWordやExcelよりもスピーディに、品質の良いレイアウト設計が行えますので、ぜひご活用ください。