30分で理解できる!SI Object Browser Designer チュートリアル

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

SI Object Browser Designer(以下、OBDZ)を初めて使う方向けのチュートリアルを作成しました。トライアル版のサンプルデータをもとに使い方をご説明しますが、トライアル版は30日間無料でご利用いただけますので、以下よりお申し込みの上、実際に触りながらお読みください。
SI Object Browser Designer トライアル版お申し込み

ログイン

トライアル版をお持ちの方はログイン画面(https://demo.si-obdz.com/login)にアクセスして、トライアル用のユーザーIDとパスワードでログインします。

dz-login-1

「システムエクスプローラ」という画面が表示されます。この画面は画面や帳票・バッチ設計書等の設計データを一覧表示する画面です。

販売管理システム

トライアル版では「(サンプル)販売管理システムXXX」(XXXにはアカウントコードと同じコードがついています)というシステム以下の4つのサンプルデータがあらかじめ作成されています。

画面 受注一覧・受注入力
帳票 受注伝票
バッチ 発注データ作成

ログイン直後の状態では、画面のサンプルとして「受注一覧」「受注入力」が表示されていますが左ペインのメニューで「帳票」「バッチ」を選ぶと他のサンプルデータも閲覧することができます。

画面設計を行う(修正する)

試しに「受注一覧」を変更してみましょう。右ペインにある「受注一覧」をクリックしてください。受注一覧画面が表示されます。

dz-samle-1

上部には「基本情報」から「補足説明」まで9つのタブが並んでいます。

dz-tab-1

会社により定義は異なると思いますが、一般的には「基本情報」タブから「コントロール」タブが基本設計、それ以降が詳細設計用のタブとなっています。左から順にすべてのタブを入力することで詳細設計書ができあがるものとなっています。各タブの内容を順にご説明します。

基本情報タブ(概要と変更履歴)

画面名やコード、概要などの基本情報を入力します。コードと名前は必須でシステム内で一意である必要があります。概要は必須入力ではありませんが、別の人が画面の内容を理解するのに書くようにした方がよいでしょう。

dz-tab1-1

また、下側には更新履歴欄が表示されていますが、こちらは「チェックイン」という操作時に入力した更新内容が自動的に表示されます。(チェックイン機能については後述します。)

基本タブ

基本タブに切り替えると受注一覧画面の画面レイアウトが作成されています。この画面のレイアウトを変更してみましょう。変更するには「チェックアウト」という操作を行います。OBDZは、「チェックイン/チェックアウト」という機能を持っています。これは複数ユーザーの同時更新を防止する仕組みです。「チェックアウト」すると変更を加えることが可能となり、「チェックイン」するまでは別の人は変更を加えることができないようになっています。受注一覧画面を開くと「チェックイン中」となっていますので、この部分をクリックして「チェックアウト中」に変更してください。これで修正を加えることができます。

dz-tutorial-1

チェックアウトは続けてコントロールの追加を行ってみましょう。
右側の「Tree」「Property」「Control」などのアイコンのうち「Control」を選ぶと、パレットの上に「ラベル」や「テキストボックス」などのコントロールが表示されます。

コントロール

まずは「ラベル」を選択し、左側のペインのタイトル欄の受注金額の上(研修予定日の左)までドラッグして配置してください。ラベル

続いて、今のラベルを選択した状態で右側の「Property」アイコンを選んでください。右側にプロパティが表示されますので、次のように設定してください。

名前 倉庫L
表示 倉庫
配置(横) 中央を示すアイコン

表示プロパティを素早く変更する

表示(キャプション)プロパティについては、レイアウト上のコントロールをダブルクリックすることで表示される以下のダイアログからでも変更できます。まとめてキャプションだけを変更したい場合はこちらのほうが便利です。

dz-caption-dialog-1

元に戻す

もし、間違えて操作してしまった場合は「Ctrl+Z」キーを押すか、レイアウトペイン上で右クリック→「元に戻す」より操作前の状態に戻すことができます。元に戻す

ラベルの配置後は、もう一度「Control」に戻し、今度は「テキストボックス」を明細1行目に配置し、以下のように「Property」に設定します。

名前 倉庫
I / O O(表示のみの意味)
桁数 8
表示 OOOOOOOO
※I/OをO、桁数を8にすると「書式」プロパティが
 「OOOOOOOO」となるので、それをコピー&ペーストすればOK

 

テキストボックス

レイアウトの整形

もし綺麗にレイアウトを揃えたい場合は、配置した「倉庫」コントロールと、その左右のテキストボックスをSHIFTキーを押しながら3つ選択し、右の「utility」アイコンをクリックしてください。右側に表示される各アイコンから、縦位置や横位置、幅や高さを揃えることができます。レイアウト

テキストボックスの追加後は、右上にある「更新」ボタンを押して、作業内容を保存しておきましょう。(もしくは「チェックイン」しましょう。チェックインしておくと履歴データとして保存されますので、後でこの状態まで戻せるようになります。)

画面レイアウトパターンを増やす

「画面が長いので分割して定義したい」「権限によって表示が変わるのでそれぞれのレイアウトを定義したい」等の理由で、1つの画面設計書に複数の画面レイアウトを定義したい場合があります。その場合は、上のタブ「基本」の右横にある+ボタンをクリックしてください。画面-2というタブが追加され、新たな画面レイアウトを定義できます。

画面

タブ名を変更したい場合や削除したい場合はタブ名の右にある鉛筆アイコンより可能です。

間違って画面を削除してしまったとき

右上の「削除」ボタンを押すと「受注一覧」自体を削除することができますが、もし間違って削除してしまった場合は、画面一覧の一番下に「ゴミ箱」ボタンより、復元(ロールバック)することができます。

コントロールタブ

保存後は、「コントロール」タブに切り替えてみましょう。「画面」タブに配置したコントロールが表形式で一覧表示されます。また、一番下の行を見ると、先ほど追加したテキストボックスが追加されていることがわかります。このようにコントロールタブは画面レイアウトのタブと連動しているので、Excelにあるようなタブ間(シート間)の修正漏れが防止できる利点があります。もちろん、コントロールタブ側で「表示」や「桁数」などのプロパティを変更することも可能です。例えば、全コントロールの桁数プロパティを一括で変更する場合はコントロールタブで行ったほうが効率よく行えます。

コントロール一覧

ラベルを表示したい場合

コントロールタブにはさきほど追加したラベル(倉庫L)は追加されていませんが、ラベルコントロールはコントロール一覧にデフォルトでは表示されないためとなっています。(帳票の場合はコントロールタブにラベルも表示されます。)もしラベル情報を表示したい場合は「ダミーコントロールを表示する」のチェックをONにするか、画面タブに戻り、「ダミーフラグ」というプロパティ値をOFFに変更することでコントロールタブやそれ以降のタブにも表示されるようになります。

データ元テーブル / データ元項目

コントロール一覧表を右にスクロールすると中ほどに「データ元テーブル/データ元項目」と「データ元テーブル(修正)/データ元項目(修正)」という4つの列があります。これはコントロールに表示される値(データソース)が、どのテーブルのどの項目なのかを示すものです。 先ほど追加した「倉庫」コントロールに次のように設定してください。

データ元テーブル(修正) 受注データ
データ元項目(修正 倉庫コード

※「データ元テーブル」「データ元項目」は変更なし

「データ元テーブル/データ元項目」は新規作成のときのデータソースです。通常は更新するマスタテーブルの値を登録しますが、今回は参照だけなのでブランクのままにしておきます。「データ元テーブル(修正)/データ元項目(修正)」は参照または修正のときのデータソースです。今回は受注データの倉庫コードを登録しておきます。

テーブル

ここまで設定したら右上の「更新」ボタンを押してデータを保存し、次の「イベント」タブに進みましょう。

イベントタブ

イベントタブでは、画面の操作により発生するイベントと処理内容を定義します。例えば、16行目をみると「コピーボタン」を「クリック時」の処理内容が登録されています。またテーブル更新を行う等の複雑な処理内容の場合は「ロジック」を定義し、「ロジック名」列のプルダウンで関連付けることもできます。他にも「受注検索」「商品検索」などのロジックが関連付けされていますが、コピー処理を行うロジックが作成されていないので、次の「ロジック一覧」タブに切り替えてロジック「受注コピー」というロジックを作ってみましょう。

dz-event2

ロジック一覧タブ

「ロジック一覧」タブでは定義済のロジック一覧が表示されます。今回のサンプルでも「社員名取得」や「受注検索」などの作成済ロジックが表示されています。今回は新規追加するので、右端の「+新規作成」ボタンを押します。ロジックの新規作成画面が表示されますので各タブごとに以下の通り入力してください。

「基本情報」タブ

下記の通り登録し、右上の「更新」ボタンを押してください。

名前 受注コピー
物理名 copy_order
プログラムタイプ プログラム
スコープ 個別
親機能 画面・受注一覧
概要 受注番号(引数)をもとに「受注データ」を検索し、得られた結果セットを初期値として「受注入力」画面を表示する

 

基本情報

「インターフェイス・アクション」タブ

ロジックの入出力インタフェースならびにアクションを定義します。表の左側が「インターフェイス」欄にはこのロジックに入出力される値を定義し、右側の「アクション」欄にはこのロジックが作用するオブジェクトを定義します。

「インターフェイス」欄の各列には下記の内容を登録して、右上の「更新」ボタンを押してください。

1行目

パラメータ名 受注番号
必須 ON
I / O I
データ型 string
桁数 10

2行目

パラメータ名 受注データオブジェクト
必須 OFF
I / O O
データ型 object
桁数 (空欄)

また、アクション欄の各列には下記の内容を登録してください。

1行目

機能種別 ロジック(共通)
機能名 受注検索(ロジック:共通)
項目名 受注番号F
操作 R

2行目

機能種別 ロジック(共通)
機能名 受注検索(ロジック:共通)
項目名 受注番号T
操作 R

「操作」列はCRUD情報を入れる欄でC(追加)、R(参照)、U(更新)、D(削除)という意味になります。操作列を入れておくと、後ほどCRUD図のレポート(Excel)が出せるようになったり、クロスリファレンスという仕様変更時の影響範囲検索機能が使えるようになりますので、「機能名」にテーブルを設定する場合は必ず「操作」列も設定するようにしましょう。完成後は以下のような画面になります。「更新」ボタンを押し、次のタブへ進みましょう。

アクション

「処理内容」タブ

処理内容タブでは、プログラマー向けに箇条書き処理内容を表示します。以下の通り入力後、「更新」ボタンを押し、次のタブへ進みましょう。

1行目 受注番号を引数として受け取る。
2行目 受注検索ロジックを呼び出す。呼び出し時に指定する引数(受注番号Fと受注番号T)の両方に、受注番号をセットする。
3行目 受注検索ロジックからの戻り値(受注データ)を受け取る。
4行目 受け取った受注データをobjectとして返す。

処理内容

「メッセージ」タブ

受注一覧で行うエラーチェックの内容やエラーメッセージの設計を行うタブです。今回は以下の1行だけ登録しましょう。

内容 検索結果が0件
区分 軽エラー
場所 戻り値
発生条件および処理 引数(受注番号)に相当する受注データがない
メッセージ MSG-020 検索結果が0件です

メッセージ

「メッセージ」列はプルダウン選択となっていますが、これはOBDZで別途登録した「メッセージ辞書」から選択する方式になっています。メッセージ辞書とはシステム全体でメッセージを一元管理されたディクショナリです。表の上側にある「メッセージ辞書」ボタンでメッセージ辞書で登録されたメッセージ一覧が確認できます。

dz-message-1

メッセージ辞書ではどんなメッセージが辞書化されていて、右端に使用数も確認できます。一番下に使ったばかりのメッセージ「MSG-020」がありますので、使用数のリンクをクリックしてみましょう。このメッセージがどこで使われているかがひと目でわかります。「受注コピー」をクリックするとさらにメッセージタブまでジャンプすることができます。

「補足説明」タブ

処理内容」タブでは箇条書きで処理内容を記載しましたが、箇条書きでは書ききれない場合のために、Excelに詳細内容を記載することができます。もし、Microsoft  365に契約している場合は、事前にマスタ設定することで「編集」ボタンよりExcel Onlineが起動できるようになります。以下はその編集画面の例です。

dz-excelonline-1

しかし、トライアル版ではこの連携ができませんので「アップロード」ボタンから、ローカルで作成したExcelをアップロードして登録することが可能です。もし補足説明にExcelをアップロードした場合、最後にできあがる設計書にそのままシート追加されて出てきます。今回は使用しなくて構いません。

補足説明タブの注意点

補足説明タブでは複数シートも登録できますので、足りない情報はいくつでも補うことができますが、Excelのフリーフォーマットとなるため、属人化防止の観点から積極的な使用は推奨していません。基本的には補足説明以外のタブに情報入力し、システムに固有の設計情報でその他のタブでは書ききれない情報のみ利用するような運用をいただければと思います。

最後に右上の「更新」ボタンを押してください。これでロジックが完成しましたので、ロジックの完了後はもう一度、受注一覧のイベントタブに戻ります。戻るにはブラウザの「戻る」ボタンを使うか、右上の「SI Object Browser Designer 」のロゴを押すとはじめの画面に戻りますので、受注一覧を開きイベントタブに戻ってください。イベントタブに戻った後は、「コピーボタン」のクリック時の行のロジック名列で「受注コピー」を設定し、「更新」ボタンを押してください。これで画面とロジックの関連付けも完了となります。モジュール

モデル一覧タブ

モデルとは、パラメータのグループに相当する機能です。さきほどの「受注コピー」ロジックの作成時は「インタフェース」タブでパラメータの設定を行ないましたが、もしこのパラメータ欄に「商品コード」と「商品名」というセットを頻繁に使うといった場合はこの機能でパラメータのグループ化しておくと便利です。モデル一覧タブを開くと「社員名」モデルが既に作成されていますが、これとは別に新規にモデルを作成してみましょう。右端の「+新規作成」ボタンを押すと、モデルの新規画面が表示されますので各タブで以下の通り入力してください。

「基本情報」タブ

下記の内容を登録します。登録後は右上の「更新」ボタンを押してください。

名前 商品
物理名 product
プログラムタイプ プログラム
スコープ 個別
親機能 画面・受注一覧
概要 商品関連のモデルクラス

 

dz-model2

「インターフェイス」タブ

ロジックのインタフェース欄と同じです。入出力される値を定義しましょう。下記の内容を登録して、右上の「更新」ボタンを押してください。

1行目

パラメータ名 商品コード
必須 ON
I / O I
string string
モデル (空欄)
桁数 16

2行目

パラメータ名 商品名
必須 OFF
I / O O
string object
モデル (空欄)
桁数 (空欄)

 

model_2

「モデル一覧」タブ

モデルの中にさらにモデルを作成することもできますが、今回は使いません。

最後に「更新」ボタンを押します。これでモデルが完成しましたので続けて「商品名取得」ロジックにこのモデルを関連付けましょう。「受注一覧」の「ロジック一覧」タブに戻り、「商品名取得」ロジックをクリックします。

model_3

インターフェイス欄の1行目の「モデル」列をダブルクリックします。モデルの選択画面が表示されますので、先ほど作成した「商品」モデルを選択してOKボタンを押します。これでモデルの関連付けされ、モデル側で設定したインタフェースが自動でインタフェース欄に追加されます。

model_4

「モジュール関連図」タブ

「モジュール関連図」とは、画面遷移図やI/O関連図などのようなフロー図です。「モジュール関連図」タブを開くと、先ほど作成したイベントやロジックをもとにしてモジュール関連図が自動作成されているのが確認できます。「受注一覧.基本」画面の「コピーボタン.クリック時」に「受注コピー」ロジックが呼び出され、「受注コピー」ロジックはさらに「受注検索」ロジックを呼び出していて、「受注検索」ロジックは「顧客マスタ、部門マスタ、社員マスタ、商品マスタ」の4つのテーブルを参照(選択のみ)しているのがわかるようになっています。OBDZの場合は自動でこの図が作成されるので誤りがないか確認しましょう。もし誤りがあった場合は、ロジックやテーブルのアイコンをダブルクリックすると該当の設計画面にジャンプできますのですぐに修正もできます。dz-module2

「補足説明」タブ

さきほどのロジック画面にも補足説明タブがありましたが、画面単位にも同タブがあり、画面単位に補足説明シートを追加することもできます。使い方はさきほどのロジックの補足説明タブと同様です。

以上でひととおり画面の設計が完了しましたので「チェックイン」を行いましょう。「チェックアウト」ボタンを押してメニューから「チェックイン」に変更します。以下のダイアログが表示されますのでコメント欄に変更内容を記載します。入力したコメントは自動で基本情報タブの更新履歴に反映されます。また、バージョンも変更する場合は、あわせて変更の上、「OK」ボタンをクリックします。dz-checkin

これでチェックイン完了後です。再度変更したい場合はチェックアウト操作を行ってください。

設計書を出力する

設計データの変更後は、設計書を出力しましょう。画面の右上にあるボタンの、右から3番目の「レポート出力」のアイコンをクリックします。

dz-report-1

以下の設計書出力画面が表示されます。dz-report2-1

まず「出力種別」のプルダウンで出力する設計書の種類を選択します。OBDZでは基本・詳細設計書以外にもCRUD図やテーブル定義書など様々なドキュメントを出力できます。今回は詳細設計書を出力したいと思いますので、「設計書」を選択します。

「出力設計書」の欄でシートの種類を限定できます。「すべての種類」を選択して詳細設計書(内部設計書)として出力できますが、画面レイアウトだけを作成した段階であれば、「表紙」「画面/帳票定義書」だけを選択して基本設計書(外部設計書)として出力するといった出し分けができます。

下ペインでは作成した画面や帳票の一覧が表示されていますので、対象の画面を選択します。 「出力」ボタンを押すと、以下のオプションダイアログが出てきます。dz-report3-1

ここで、サイズやまとめて出すかなどの細かな設定をすることができます。選択した設計書の種類により、タイトルを基本設計書(外部設計書)として出力したい場合、詳細設計書(内部設計書)として出力したい場合がありますが、 「設計書タイトル」でそのタイトルを設定ができます。タイトルは出力するファイル名、表紙のタイトルに反映されます。 その他、画面の出力方法を行い、出力ボタンを押します。 しばらくすると設計書がダウンロードされますので、内容を確認しましょう。dz-report4-1

各設計書のヘッダーや表紙などについては、システム登録画面の情報を元に、その他は、 OBDZの各タブの画面イメージ通りに出力されます。思った通りの内容で出力されていない場合は、各タブの設計内容や出力オプションを修正の上、再度出力してください。

ペーパーレス運用について
OBDZはクラウドサービスですので、Excelの設計書を生成せずに、OBDZ画面を見ながらプログラミングや、顧客へのレビュー運用も可能です。納品のタイミングにアウトプットが必要な際のみ設計書出力機能を使う方法が一番効率が良いものとなっています。

以上でOBDZの基本的な設計方法をご紹介しました。今回は画面設計の例でご紹介しましたが、画面や帳票のバッチの設計書もほぼ同様のインタフェースとなっています。

また、プロパティやイベント、設計書のフォーマットついてはカスタマイズが可能です。カスタマイズ方法については以下の記事にまとめていますので、あわせてご覧いただければと思います。
SI Object Browser Designerのマスタ設定をカスタマイズして生産性を高める

 

CTA

RELATED POST関連記事


RECENT POST「OBDZをトコトン活用する」の最新記事


OBDZをトコトン活用する

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

OBDZをトコトン活用する

OBDZで作成できる設計書の種類は?

OBDZをトコトン活用する

SI Object Browser Designerのマスタ設定をカスタマイズして生産性を高める

OBDZをトコトン活用する

設計フェーズでモデル設計を行おう(新機能:モデル設計)

30分で理解できる!SI Object Browser Designer チュートリアル