画面設計書を作成する(Vol.2)

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

機能紹介

OBDZは設計書作成作業をシステム化し、設計工程の合理化・標準化を実現できるツールです。 本連載では、設計書ジェネレータ「SI Object Browser Designer(以下、OBDZ)」を使ってソフトウェアの設計書(仕様書、基本設計書、詳細設計書)を作る講座です。

前回は、現状の設計工程の問題点と、システム化により問題解決が可能であること、 そして、システム化ツールとして当製品の特長をご紹介しました。 第2回では、実際にOBDZを使って基本設計書、詳細設計書を作成する手順をご説明したいと思います。

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

OBデザイナーのデータ構成

OBDZでは、画面上で設計後、最後に基本設計書、詳細設計書をアウトプットします。 まずは作成される設計データの全体像を掴んでおきましょう。

course2img01.png図1.OBDZのデータ全体像

OBDZではクラウド上に設計データを作成しますが、大きくは「システム」という単位で管理されます。 システムとは、「販売管理システム」、「会計アプリケーション」などの、実際に設計するシステム・アプリケーションのことです。 そして、各システムの中には基本設計書、詳細設計書の元となる「設計データ」が格納されます。 設計データには大きく、画面、帳票、バッチ、ロジック、テーブル、クラスの6種類があり、それぞれ、専用の入力画面が用意されています。 詳しくは後述しますが「関連する設計データは自動で作成される」「プルダウン形式で入力できる」などの 専用ツールならではの仕組みが整っており、効率よく作成することが可能となっています。

最終的には、これらのデータを元に基本設計書、詳細設計書がアウトプットできます。 ドキュメントを直接出力するのではなく、最初に設計データをデータベースに格納することにより、 データの一括検索や、関連データの補完入力、自動バージョン管理が可能となっています。 これらの設計工程のシステム化する機能により、従来の設計工程にある効率面、品質面の問題を解消することが可能です。

システムの作成

データの全体像がつかめた所で、実際にOBデザイナーを操作して詳細設計書を作成してみましょう! 第2回では、「画面定義書」をアウトプットとして作成するまでの手順をご紹介します。 (その他、「帳票定義書」、「バッチ定義書」が出力できますが、これらの方法は次回以降でご説明します。)

OBデザイナーにログインすると、「システムエクスプローラ」という画面が表示されます。 システムエクスプローラは、OBデザイナーのメイン画面となり、この画面から、各設計データを検索、 新規作成、編集などの操作、設計書出力、バージョン管理などの画面呼び出しができます。 (今後、「システムエクスプローラ」という言葉が何回も登場しますので、メイン画面のことだと覚えておきましょう。)

course2img02.png

画面1. システムエクスプローラ

lights.pngサンプルデータも参考に
また、評価版では、サンプルデータとして「Eコマースシステム」、「基幹業務管理システム」が表示されています。 「売上入力」「商品一覧」など本格的なデータが閲覧可能ですので、参考にいただければと思います。

では、始めにシステムから作成していきます。上部のメインウィンドウの「管理」メニュー→「システム一覧」を選択し、 システム一覧を表示します。続けて、一覧画面上にある「新規作成」ボタンをクリックします。

course2img03.png

画面2.システム登録画面

システムの新規登録画面が表示されますので、システム名、顧客名などのシステム(プロジェクト)の基本情報および、 プロジェクトメンバーを追加します。ここで追加したプロジェクトメンバーが当システムのデータを参照することができます。 評価版では、ログインユーザー自身のユーザーの設定をしてください。 (ログインユーザー以外メンバーを追加すると、そのメンバーもデータが閲覧可能となってしまいますので気をつけましょう。)

プロジェクトメンバー追加時は、あわせてメンバーに与える権限を設定します。 「更新可能」の場合は、データの新規作成や、更新が可能となります。「閲覧のみ」とした場合は、参照のみ可能となります。 プログラマや顧客など、設計の閲覧のみさせたいユーザーにはこの権限を割り当てると良いでしょう。 評価版では、自身のユーザーを「更新可能」に設定してください。
その他にも下記の設定があります。これらの項目も必要に応じて設定してください。

プログラム言語、データベース設定

開発するシステムのプログラム言語、データベースのデータ型の設定です。 これらの設定はロジック画面、テーブル画面等で選択する「データ型」コンボボックスのプルダウン表示に影響します。 既定ではC#やJava、Oracle、SQL Serverなど基本的な言語、データベースが用意されていますが、ない場合は「その他」で任意の設定も追加可能です。

書式表示設定

画面機能の「画面」タブにて表示する書式表示の設定を行います。書式表示とはデータの値形式、桁数、I/Oの種別に応じて表示文字を設定することで、 《数値のみ、6桁でゼロサプレスあり》なら「ZZZZZ6」、《全角文字、10桁でINPUTみなら「BBBBBBBBBB」》と表示されます。(詳しくは「■画面の作成」で説明します)

表示項目設定

画面機能の「画面」「コントロール」タブおよび「カスタムコントロール一覧画面にて表示する列項目の設定を行います。

イベント設定

画面機能の「イベント」タブにて選択するイベント種類の設定を行います。

例えば、スマートフォンアプリケーション向けのイベントの追加など、カスタマイズが可能です。

予備項目設定

システム固有の独自項目を追加することができます。システム、画面、コントロール単位にそれぞれ10個まで追加することができます。

メッセージ辞書

各画面で表示するメッセージのマスタとなる辞書を作成することができます。

設定後、作成ボタンを押すとシステムが作成され、システムエクスプローラの左側ツリーに作成したシステムが表示されます。

テーブルの作成

システム作成後、続けて設計データを作成していきます。 設計データの種類は「画面、帳票、バッチ、ロジック、テーブル、クラス」の6種類がありますが、 OBDZを使って設計する上では、テーブルから作成するのがベストです。

テーブルのデータを作成することで、後ほど「テーブル定義書」がアウトプットできますが、 それ以外にも、画面データの作成時、ラベル、テキストなどのコントロール項目等とテーブルのマッピング設定に使用することができます。 そのため、最初にテーブルデータを作成しておき、次に、画面データを作りながらマッピングを行っていくことが効率良い設計方法となります。

  テーブルを新規作成する場合は、システムエクスプローラの左ツリーに表示されているシステムの下にある 「テーブル」を右クリック>「新規作成」をクリックします。

course2img04.png

画面3.テーブル作成画面

テーブルの新規作成画面が表示されますので、テーブル名、列名、データ型、長さ、必須(NOT NULL)などの情報を入力していきます。 テーブル名および列名は「論理名」「物理名」が設定できます。論理名は設計書上のみの情報、物理名はデータベース上の物理項目となります。 論理名はわかりやすい日本語にしておき、物理名は実際のテーブル名、列名(通常はアルファベット)を設定します。

また、備考情報があれば「定義内容」列に記載します。 さらに、必要に応じて「コード定義」列も設定します。「コード定義」とは、データの値に対して意味付けする機能です。 例えば、「性別」という列であれば「1が男性、2が女性」と定義します。この定義情報は「定義内容」列に書く運用方法もありますが、 コード定義を利用すると、仕様変更時に変更箇所が1箇所で済むというメリットがありますので、ぜひ活用しましょう。

コード定義を新規作成するには、まずテーブル画面上にある「コード定義」のアイコンをクリックします。 コード定義一覧が表示されますので、新規作成をクリックします。コード定義の新規作成画面が表示されますので、 コード定義名と、「コード」列に値、「定義内容」に意味を記載し、作成ボタンで作成します。

course2img05.png

画面4.コード定義画面

アプリケーション設計に関するお役立ち資料

作成後、テーブル画面に戻り、コード定義列で作成したコード定義を設定します。 作成ボタンを押せばテーブルの作成は完了です。

また、データベース設計ツール「SI Object Browser ER」をご利用の場合は、以下の手順でER図のインポートが可能となっています。 システムエクスプローラより「テーブル」を右クリックし、>「テーブル取込」を選択します。 下図の画面が表示されますので、「開く」ボタンを押しER図ファイル(edmファイル)を選択します。 「取込」ボタンをクリックすると、ER図ファイルの情報を元にテーブルが自動作成されます。

course2img06.png

画面5.テーブル取込

このようにSI Object Browser ERがあれば非常に簡単にテーブルが作成できます。 SI Object Browser ERについても30日間のトライアル版があります。下記URLよりぜひご利用ください。
http://www.sint.co.jp/products/siob/er/dl/download.html

画面の作成

テーブル作成後は、続けて画面データを作成していきましょう。 システムエクスプローラに戻り、左ツリーのシステムの下にある「画面」を右クリック>「新規作成」を選択します。

画面の新規作成画面が表示されますので、ヘッダーにある、「画面コード」と「画面名」、「概要」を入力します。 「コード」は同一システム上で一意なコードにする必要があります。画面コードは後で変更することはできませんので、 独自のIDを振る、ソースファイル名にする等の「画面コード体系」を決めた上で設定してください。

また、当画面では、「画面」、「コントロール」「イベント」など、複数のタブが並んでいますが、 これが後ほど出力する画面レイアウト定義書やコントロール定義書、イベント定義書などの各基本設計書、詳細設計書に対応する 入力画面となっています。左のタブから順に設定していけば完成するようになっています。

1.画面タブ

course2img07.png

画面6.画面タブ

画面のレイアウトを作成する画面です。Visual StudioやEclipseなどのプログラミングIDE環境と 同様の入力インタフェースとなっています。

最初は空のフォームが1つだけ表示されています。 左側のツールパレットからテキストボックス、ラベルなどのコントロールが並んでいますので、配置したいコントロール種類をクリック後、 マウスで右側のフォーム上にドラッグ&ドロップすることでコントロールが追加できます。 コントロール配置後は、右側のプロパティ欄で表示系(サイズやフォントなど)と、入力形式(必須、桁数など)のプロパティを設定できます。

これらのプロパティに応じて書式文字が表示されます。書式文字とは、画面レイアウト上で視覚的にデータの入力形式を表示させる機能です。 値の入力形式は、通常はコントロール定義書などを閲覧しなければわからない情報ですが、書式表示機能により、画面レイアウトで視覚的に確認することができるようになります。 例えば、《数値のみ、6桁でゼロサプレスあり》なら「ZZZZZ6」、《全角文字、10桁でINPUTみなら「BBBBBBBBBB」》と表示されます。 この書式表示は、「全角/半角」「値形式」「桁数」、「I/O」などの関連プロパティ欄を変更することで自動更新されます。 表示される文字の設定はシステム画面の「書式表示設定」で変更することができます。 書式表示を使わない場合は「表示」プロパティを手動で設定してください。手動で書き換えた後は、書式表示は反映されなくなります。

また、「データ元テーブル」および「データ元項目」のプロパティにはさきほど作成したテーブルおよびテーブルの列がプルダウンで選択できます。 コントロールがデータベース連携してデータ表示する場合は、対応テーブルを設定することができます。 新規用、修正用で異なる場合はそれぞれのプロパティで別々に設定することもできます。

配置後は、IDEと同様、複数コントロールをまとめて選択、リサイズや移動、位置揃え、 コピー&ペースト、アンドゥ(やり直し)&リドゥ(元に戻す)操作が可能です。これらの操作で効率よく画面レイアウトを作成しましょう。

2.コントロールタブ

画面レイアウトで配置した各コントロールを表形式で表示したものになります。

course2img08.png

画面7.コントロールタブ

従来のWordやExcelで基本設計書、詳細設計書を作る場合は、画面レイアウト定義書とコントロール定義書は別々に作成するため、 入力ミス、データ不整合などのリスクがありますが、OBDZでは、画面タブで作成したコントロール情報を元に自動生成されます。 OBDZでは、このように関連データは自動で作成されるため、効率・品質面が向上します。

必要に応じて、以下の設定を調整します。
・プロパティ値の修正
…各列の値は、画面タブで設定したプロパティが表形式で表示されています。設定に誤りがある場合、コントロールタブから修正することも可能です。 必須列をまとめて直すなど、同じプロパティをまとめて修正する場合はこちらのほうがはやく修正できます。また、Excelからのコピー&ペーストも可能です。

・順番
…既定では画面タブの左上に配置したものから並んでいます。このタブの情報は、最終的にコントロール定義書として出力されますが、 表示順序もそのまま出力されます。表示順序を変えたい場合は、行を選択後、上下ボタンで変更できます。

・表示列
…名前、表示、種類などの列が表示されていますが、表示したい列を変更したい場合や、列の順序を変更したい場合は、システム画面の「表示列設定」で カスタマイズができます。「予備項目設定」で追加したコントロール予備項目を含めることもできます。

lights.pngコントロールタブに特定のコントロールを表示させたくない場合は
ラベルや、デザイン用の画像など、「画面レイアウト上にのみ表示したいが、コントロール一覧には表示したくないコントロール」もあります。 コントロールタブに表示させたくない場合は「画面」タブで、対象コントロールを選択し、右側のプロパティ欄で、「ダミーフラグ」というプロパティをONにします。 ダミーフラグがONの場合は、コントロールタブ(およびそれ以降のタブ)に表示されなくなります。

ダミーフラグは、既定ではテキストボックスなどのコントロール系はOFF、描画系コントロール(四角形、コメントなど)はONとなっています。

3.イベントタブ

ボタンクリックなど、画面で発生するイベントと、対応するアクションを記述します。

course2img09.png

画面8.イベントタブ 

「コントロール」列は画面タブで作成したコントロールがプルダウン表示されます。 対象のコントロールを選択後、続けて「イベント」列にイベントの種類(クリック時等)、内容列に処理の概要を記載します。

データベースに更新処理をするなどのアクションをする場合は、「ロジック」列で対象ロジックを関連付けることができますが、 この時点では、ロジックは作成していないため、割り当てることができません。「ロジック」列以外を設定の上、次のロジックタブに進みましょう。

4.ロジックタブ

ロジックとはプログラムの関数(メソッド)、ストアドプロシージャに該当するものです。 ロジックタブにてロジックの作成や、一覧表示を行うことができます。 最初はロジックは作成されていませんので、ロジックタブ内で右クリック>「新規作成」でロジックを作成します。

course2img10.png

画面9.ロジック

ロジック名やタイプなどの情報を入力します。 「タイプ」は共通か個別かを選択できます。「個別」の場合はこの画面だけが使用するロジック(プライベートメソッド)となり、 「共通」にした場合、他の画面からも関連づけできるロジック(パブリックメソッド)となります。

上部ペインの表にはパラメータ情報およびアクションを設定します。 「インタフェース」欄では、引数名およびI/O、桁数などの設定、 「アクション」欄には、ロジック内で操作されるテーブル/列と、操作内容(選択、更新等)を設定します。

「エラー定義」にはエラーとなる条件やエラー時の処理内容を記載します。それ以外の情報は「補足説明」に必要に応じて記載します。 OBDZでは、基本設計書、詳細設計書を作るためのツールですので、アルゴリズムレベルなどの詳細な情報を入力する必要はありませんが、 必要に応じて、補足説明で処理の流れを書いても良いでしょう。

ロジック作成後は、イベントタブに戻り、作成したロジックを割り当てます。 「後でイベントタブに戻って再設定するなら、先にロジックから作ったほうが効率が良いのでは?」と思われるかもしれませんが、 実際の設計では、ロジックから考えることは難しいと思います。先にイベントを設計し、必要となるロジックを把握した後、 ロジックを作成していく手順が運用しやすいと思います。

5.クラス

クラスとは複数のデータ(パラメータ)の集まりです。JavaのBeanなどの設計をしたい場合に利用できます。   当タブにて右クリック>「新規作成」でクラスを作成します。クラス画面のインタフェースはロジック画面とほぼ同様です。クラスタイプ(「共通」または「個別」)やプログラムタイプ、   各種パラメータの入力欄を指定します。作成後は、ロジック画面のパラメータ欄で割り当てることができます。 

6.補足説明

システムによっては、「基幹システムとの連携仕様書」や「ファイル定義書」など、特有の設計情報があります。 情報は「補足説明」タブで登録することができます。

course2img11.png

画面10.補足説明タブ

補足説明タブはExcelの入力インタフェースとなっていますので、図形や表の作成、 Excelからのコピー&ペースト操作が可能です。また、Excelシートの追加も可能です。 補足説明の設計書出力時は、このExcel内容がそのまま出力されます。

7.メッセージ

画面で表示されるエラーメッセージ等の情報を入力します。

course2img12.png

画面11.メッセージタブ

「区分」はエラーや警告などの種類、「場所」は画面やログなどのエラーの表示箇所、 「コード」「メッセージ」列については、メッセージコード及びメッセージを記載します。 これらの項目については、システム画面の「メッセージ辞書」ボタンでマスタ設定ができます。 あらかじめメッセージ辞書に登録しておくことで、各画面のメッセージタブではプルダウン形式で選択でき、 複数の画面間のメッセージの記述方法を統一することができます。

しかし、新規にシステムを構築するような案件では、最初にきちっとメッセージのマスタを作ることは難しいと思います。  そのような場合は、メッセージタブで都度、手動入力することも可能です。手動入力されたメッセージは、メッセージ辞書に自動登録されますので、 後でメッセージ辞書画面から各画面のメッセージを確認し、修正していく運用もできます。

メッセージ辞書画面は以下のような画面になっています。

course2img13.png

画面12.メッセージ辞書画面

右端の「使用数」にはメッセージを使用している画面数を表示することができます。この列をクリックすると、 使用している対象画面の一覧が表示されます。さらに、一覧画面から対象画面にジャンプすることもできますので、 メッセージの揺らぎを見つけるだけでなく、修正まで容易にできるようになっています。

8.モジュール関連図

モジュール関連図とは、コントロールおよびイベント、呼び出されるロジックと影響するテーブルを図示した画面になります。

course2img14.png

画面13.モジュール関連図

画面の全体像をすばやく確認することができますので、 「イベントとの関連に誤りがないか」や「ロジックの誤り(例えば、データの閲覧ロジックのみで更新ロジックがない)」など、 全体の設計内容に誤りがないか確認しましょう。もし誤りがある場合は、これまでのタブに戻り適宜修正してください。

以上で画面、ロジックの作成は完了です。

設計書出力

 画面の設計データが作成できましたら、最後に基本設計書、詳細設計書を出力しましょう。
「ファイル」メニュー>「レポート出力」を選択します。

course2img15.png

画面14.設計書出力(基本設計書、詳細設計書いずれも可能)

レポート出力画面が表示されます。左側のペインでは出力する設計書の種類を選択します。選択できるドキュメントの種類は以下のとおりです。

course2img16.png

表.OBDZで出力できる設計書一覧

マウスドラッグかCtrlキーを押しながらクリックし複数選択、Ctrl+Aキーで全項目選択が可能です。 すべての種類を選択して詳細設計書(内部設計書)として出力することや、 表紙や、画面レイアウトだけを選択し、基本設計書(外部設計書)として出力することもできます。 また、独自の設計書を追加することもできますが、これらは次回ご説明します。 


右ペインでは作成した画面データが表示されていますので、対象の画面を選択します。 ドキュメントの種類と対象の画面を選択後、出力ボタンを押すと、以下のオプションダイアログが出てきます。

course2img17.png

画面15.設計書出力オプション

ここで、出力先などの設定をすることができます。 

選択した設計書の種類により、タイトルを基本設計書(外部設計書)して出力したい場合、詳細設計書(内部設計書)として出力したい場合がありますが、 「設計書タイトル」でそのタイトルを設定ができます。タイトルは出力するファイル名、表紙のタイトルに反映されます。 その他、画面の出力方法や、出力言語の設定を行い、出力ボタンを押します。 指定したパス上にExcelの設計書が作成されますので、内容を確認しましょう。

course2img18.png

画面16.出力された設計書

各設計書のヘッダーや表紙などについては、システム登録画面の情報を元に、その他は、 入力データの画面インタフェースの内容通りに出力されます。思った通りの内容で出力できていない場合は、 設計データの内容や、出力オプションを修正の上、再度出力しましょう。 レポートのフォーマットについてはカスタマイズすることもできますが、こちらの方法については次回でご説明します。 

以上で画面設計書作成までの基本的な流れをご説明しました。 各画面の細かな設定項目については、下記のオンラインマニュアルをご覧ください。 (製品の「ヘルプ」メニュー>「SI Object Browser Designerヘルプ」からも表示できます。)
http://www.sint.co.jp/products/siob/online1dz/index.html

慣れてくればすばやく、品質の良い設計書が作成できるようになりますので、
ぜひ使いこなせるようにしましょう!

株式会社システムインテグレータ 製品企画室 後迫

SI Object Browser Designer カタログ

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


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

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

OBデザイナーで
生産性向上!