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

 2017.05.09  株式会社システムインテグレータ

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

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

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

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

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

dummyflag

画面1.ダミーフラグを設定した場合

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

lights.png

ダミーフラグの初期値について
コントロールを新規配置した直後のダミーフラグプロパティの規定値は、テキストボックスやラベルなどの通常コントロールはOFF(コントロールタブにも表示)となり、四角形や、コメントなどの補足系コントロールON(コントロールタブには表示されない)となります。また、帳票の場合のみはラベルはONとなります。

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

dummyflag2

新規CTA

画面2.一覧画面での活用方法

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

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

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

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

multitab

画面3.複数画面レイアウトの定義例(タブの中が異なる)

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

[RELATED_POSTS]

③綺麗に配置する

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

grid

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

lights.png

グリッドの表示間隔について
グリッドの各点の表示間隔は既定では10ピクセルとなりますが、システムの詳細画面にある「デザイナのグリッド幅」で任意の表示間隔に変更できます。

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

新規CTA

RECENT POST「設計書の書き方講座」の最新記事


この記事が気に入ったらいいねしよう!
ブログ購読のお申込み

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

ITだけCAD使ってない不思議