30分で理解できる!OBDZチュートリアル Part1 ~画面設計をマスターする~

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

タイトルに30分とあることでしり込みしたくなりましたか? わかります、私もそこを端折ってすぐに触ってみたくなります。でも、最初にこのチュートリアルをやることによって、はるかに大きな時間節約になるんですよ。急がば回れとも言いますので、辛抱して30分お付き合いください。
では、Let's Study & Enjoy!

1.ログイン

https://demo.si-obdz.com/login
にアクセスして、トライアル用のユーザーIDとパスワードでログインします。

2.システムエクスプローラ

左上のプルダウンに開発終了(クローズ)していない現役のシステムが一覧表示されます。この中から「(サンプル)販売管理システムXXX」を選んでください。(XXXにはアカウントコードと同じコードがついています。)

販売管理システム

このシステム設計書には下記4つの機能があらかじめ作成されています。
画面:【受注一覧】と【受注入力】
帳票:【受注伝票】
バッチ:【発注データ作成】

3.画面

左上の【画面】アイコンをクリックすると、右ペイン(側)に2つの機能【受注一覧】と【受注入力】が表示されますますので【受注一覧】をクリックしてください。

(1)チェックイン/チェックアウト

OBDZは、自分自身でチェックイン/チェックアウト機能を持っています。これは変更管理の代表的な機能で、リポジトリ(共通データ)からチェックアウトすると初めて変更を加えることが可能となり、誰かがチェックアウトしている最中は別の人はチェックアウト(つまり変更)できない排他制御ができる仕組みです。

チェックイン/チェックアウト

右上の表示が最初は「チェックイン中」となっていますので、クリックして「チェックアウト中」にしてください。ホテルはチェックインしてからチェックアウトですが、変更管理はチェックアウトしてからチェックインなんですよね。はい、これで【受注一覧】機能に対して修正を加えることができます。

(2)8つのタブ

上部を見ると【基本情報】から【補足説明】まで8つのタブが並んでいます。基本的にこれが設計書のページになりますので左から順番に見ていきましょう。

設計書

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

基本情報タブには、機能設計書のコードと名前に続いて概要欄があります。設計書の概要は、読み手がパッと内容を理解するのに書くようにした方がいいですよね。ここに記載された内容が設計書の表紙に印字されます。

基本情報

下側に履歴欄もありますが、ここで入力するわけではありません。チェックインする際に機能バージョンやコメントを入れるダイアログが表示され、そこで書いた内容が変更履歴として表示されます(記入漏れ防止策です)。今は、できたてのほやほやなので機能バージョン1.0.0の1行だけですが、内容を変更してチェックインすると行が増えていきます。
「設計書出力」機能によりExcelに出力するとデフォルトのフォーマットではこんな感じになります。

変更履歴

(4)基本タブ

基本タブに切り替えると画面レイアウトが作成されていますね。手始めにこの画面をいじってみましょう。

a.コントロールのドラッグ配置
右側の「Tree」「Property」「Control」などのアイコンのうち「Control」を選ぶと、パレットの上に「ラベル」や「テキストボックス」などのコントロールが表示されます。

コントロール

ラベル「倉庫」の配置

まずは「ラベル」をタイトル欄の受注金額の上(営業担当者の右)にドラッグ配置してください。続いて、今のラベルを選択した状態で右側の「Property」アイコンを選んでください。右側にプロパティが表示されますので、次のように設定してください。
名前:倉庫L
表示:倉庫
配置(横):中央を示すアイコン

ラベル

元に戻す

操作をミスったときは画面のどこかを触って右クリックすると、直前の操作であれば「元に戻す」ことができます。

元に戻す

テキストボックス「倉庫」の配置

もう一度「Control」に戻して、今度は「テキストボックス」を明細1行目に配置してください。はい、次はこいつのプロパティ設定ですね。このテキストボックスを選択した状態で「Property」を選択し、今度は次のように設定してください。
名前:倉庫
I/O:O(表示のみの意味)
桁数:8
表示:OOOOOOOO (I/OをO、桁数を8にすると書式がOOOOOOOOとなるので、それをコピペ)
線種:なし

テキストボックス

レイアウトの整形

次は几帳面な方だけの作業です。今、配置した「倉庫」コントロールと、その左右のテキストボックスをSHIFTキーを押しながら3つ選択し、右の「utility」アイコンをクリックしてください。上から3段目に縦を揃えるアイコンが3つあるので、上か下をクリックして3つのアイコンの高さを揃えてください。

レイアウト

更新ボタンで確定

ここで右上の【更新】ボタンを押して、作業内容を確定させましょう。いつか自動保存機能を追加したいと思っているのですが、もっか手動です。これを怠ると変更が反映されずに泣くことになるかも知れません。私もなんども経験あります(T_T)。

画面を増やす

画面が長いので分割して定義したいとか複数画面で1機能となるとかの理由により、複数の画面レイアウトを定義したい場合があります。そんな場合は、上のタブ「基本」の右横にあるプラスボタンをクリックしてください。画面-2というタブが追加され、新たな画面レイアウトを定義できます。

画面

あ、今はいらない? であれば画面-2タブの右の鉛筆アイコンをクリックし、「削除」ボタンで削除してください。

ゴミ箱からのロールバック(やらなくてもいいです)

ここまでの作業中に間違えて右上の「削除」ボタンを押して【受注一覧】機能全体を削除してしまった方いますか。実は私も経験ありますが焦りますよね(^^;)。 でも、大丈夫です。左ペインの【画面】をクリックして表示される画面一覧の一番下に「ゴミ箱」ボタンがあるので、ここから復活(ロールバック)することができます。ロールバック直後はチェックイン状態に戻りますので、もう一度チェックアウトしてくださいね。

(5)コントロールタブ

位置の移動

さて、ここらで上部の8つのタブのうち「コントロール」タブに切り替えてみましょう。「画面」タブに配置したコントロールが一覧表示されていますね。一番下を見ると、先ほど追加したテキストボックス「倉庫」がありますのでカーソルでこれを選択して、表の上の「 ^ 」ボタンを使って受注金額の上あたりに移動させ右上の「更新」ボタンで確定してください(くれぐれも「-」ボタンは押さないでくださいね。削除されてしまいますので)。

コントロール一覧

ダミーフラグ

あれ、そういえば、さっき追加したラベル「倉庫L」がないですね。はい、コントロール一覧にラベルを表示してもしょうがないので、ラベルはデフォルトでダミーフラグがONになっているのです。
ダミーフラグがONの場合、画面タブでは表示されますがコントロールタブでは非表示となります。例えば、画面を複数作成した場合、複数の画面に共通するコントロールがコントロール一覧に何個も表示されるとやっかいですね。そんな場合は、1つだけダミーフラグをOFFとして残りはみんなONにするって塩梅です。

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

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

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

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

テーブル

はい、ここまで設定したら右上の「更新」ボタンを押して確定してください。次はイベントにいきましょう。

(6)イベントタブ

受注一覧画面で発生するイベントを定義します。下から2つ目に「コピーボタン」を「クリック時」の処理内容が登録されていますね。ロジック名のプルダウンを開くと「受注検索」と「受注削除」という2つのロジックが用意されているのを確認できます。まだ、コピー処理を行うロジックが作成されていないので、そのままプルダウンを閉じてください。ロジック一覧タブに切り替えてロジック「受注コピー」を新規に作ってみましょう。

イベント

(7)ロジック一覧タブ

「受注検索」と「受注作成」が既に作成されていますね。右端の「+新規作成」ボタンを押して「受注コピー」を追加します。

「基本情報」タブ

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

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

基本情報

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

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

a.インターフェース

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

(№1)パラメータ名:受注番号,必須:ON,I/O:I,データ型:string,桁数:10
(№2)パラメータ名:受注データオブジェクト,必須:OFF,I/O:O,データ型:object,桁数:(空欄)

b.アクション

下記の内容を登録してください。
(№1)機能種別:ロジック(共通),機能名:受注検索,項目名:受注番号F ,操作R
(№2)機能種別:ロジック(共通),機能名:受注検索,項目名:受注番号T ,操作R

アクション

「処理内容」タブ

プログラマーがプログラミングできるように下記のように処理内容を記述し、右上の「更新」ボタンを押します。箇条書きで表しきれないような複雑な処理の場合は、右端の補足説明タブで記述します。

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

処理内容

「メッセージ」タブ

a.メッセージの登録

画面やロジックで発生させるメッセージを辞書化すると、個々のメッセージがどこ(画面やロジック)で使われているかを一元管理できます。下記の内容で1件登録してみましょう。

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

メッセージ

b.メッセージ辞書

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

「補足説明」タブ

a.補足説明欄

OBDZでは、処理内容タブの箇条書きでは書ききれないケースに対応するために、Excelに詳細内容を記載することができます。補足説明欄に並んでいる3つのボタンの一番右「編集」ボタンをクリックすればExcel Onlineが起動して直接入力できるのですが、残念ながらトライアル環境は不特定ユーザーが利用するためOffice365連携ができず、「編集」ボタンで直接編集はできません。かわりに、「アップロード」ボタンから、ローカルで作成したExcelをアップロードして登録することが可能です。もし補足説明にExcelをアップロードした場合は、最後にできあがる設計書にシート追加されて出てきます。

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

以上の手順でロジック「受注コピー」ができましたので、もう一度イベントタブに戻って、「コピーボタン」のクリック時の処理行のロジック名に「受注コピー」を設定して「更新」ボタンを押してください。

モジュール

モジュール関連図タブを開いてみると、先ほど作成したイベントやロジックをもとにしてモジュール関連図が自動作成されているのが確認できます。「受注一覧.基本」画面の「コピーボタン.クリック時」に「受注コピー」ロジックが呼び出され、「受注コピー」ロジックはさらに「受注検索」ロジックを呼び出していて、「受注検索」ロジックは「受注データ、顧客マスタ、社員マスタ、部門マスタ」の4つのテーブルを参照(選択のみ)しているのが一目でわかるようになっています。

モジュール関連図

(9)「補足説明」タブ

さきほどのはロジック「受注コピー」の補足説明でしたが、ここは画面「受注一覧」の補足説明です。仕組みはロジックと全く同じです。

おつかれさま

はい、だいたい30分経ったでしょうか。ここまでの操作で画面設計のおおよその手順が理解できましたね。いよいよ、使い始めちゃいますか。と気分が乗りかかったところで申し上げにくいのですが、実は、この後にもう30分いただくと、さらに便利な使い方がわかっちゃうんです。

え、30分と言ったのにだまし討ち? すみません、そんな気はなかったのです(あったかも…)。でも、あと少し頑張れば、何十倍もの時間節約になって絶対おすすめなんです。ということで続いてチュートリアルPart2もやってみましょう。

新規CTA

新規CTA
新規CTA

RELATED POST関連記事


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


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

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

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