本連載は、設計書ジェネレータ「SI Object Browser Designer（以下、OBDZ）」を使ってソフトウェアの設計書（仕様書、基本設計書、詳細設計書）を作る講座です。第13回は、2015年10月にリリースした最新バージョン（V3.4）の新機能「モックアップ（HTML）出力」についてご紹介します。
操作方法を覚えるには、実際に製品を触りながら行うのが一番ですので、OBDZをお持ちでない方はぜひ評価版をインストールの上、お読みください。以下のURLよりお申込みいただくと、製品のダウンロードURLおよびログインに必要なアカウントを取得いただけます。
https://www.sint.co.jp/products/obdz/trial/trial.html
モックアップとは
モックアップとは、画面レイアウト情報をもとに、HTML形式で画面イメージを出力する機能です。
通常、設計がおわった段階では設計書をもとにレビューを行いますが、この段階では動くモノ（アプリケーション）はありません。ですので、「コントロールがない」「桁数が異なる」といった設計ミスは見つけることができても、「画面遷移の自然さ」や、「データ入力の効率」などの使い勝手の部分までチェックすることは非常に難しいと思います。モックアップはHTML形式でアプリケーションのプロトタイプを出力する機能ですので、設計段階でこのような使い勝手も含めてレビューが可能となります。なお、入力は既存の設計データ（画面レイアウト情報）を使用しますので、追加のデータ入力は必要ありません。
モックアップの出力
モックアップの作り方も非常に簡単です。最新バージョンですとレポート出力画面の「その他」タブに「モックアップ」が追加されています。こちらを選択の上、右側で対象の画面を選択することで出力できます。
画面１．レポート出力画面（モックアップが追加されている）
画面２．出力オプション画面
「出力」ボタンを押した後の出力オプション画面では、以下のモックアップ用オプションが増えています。（既定はいずれもONになっています。）
設定後、「出力」ボタンを押すとモックアップが出力されます。
① モックアップ生成後、自動でブラウザを起動する
チェックを入れるとHTML生成後、ブラウザを自動起動の上出力した画面を表示することができます。
② 見出し・コメントもモックアップに含める
レイアウト上に作成された「見出し」「コメント」コントロールもHTMLに含まれて出力されます。
これらのコントロールがモックアップ上不要であればOFFにします。
実際に出力されたモックアップを見てみましょう。画面３の左は左はOBDZの画面、右は出力されたHTMLは画面３の右の通りです。OBDZで設計した画面イメージ通りに出ていることがわかります。
画面３．出力されたモックアップ
もちろん右側はHTMLですのでテキスト入力や、プルダウン、タブ切り替えなど動かすことが可能です。
画面遷移つきモックアップの出力
画面４．画面レイアウトタブ
また、画面遷移のデモンストレーションつきモックアップも可能です。OBDZの画面レイアウトタブのボタンやリンクなどの各コントロールには「遷移先」というプロパティが追加されています。このプロパティにボタンやリンクを押した先の移動する画面を選択します。遷移先を設定した状態で再度モックアップを出力しましょう。
そうすると、HTML上のボタンを押したときに、遷移先で設定した画面へジャンプするようになります。
ただし、遷移先の画面を同時または事前にモックアップ出力していない場合、遷移先が見つからず「Not Found」エラーになりますのでご注意ください。
画面５．画面遷移つきモックアップの出力
 今回のサンプル画面についてなお、今回のサンプル用に掲載している画面は「花の名前ダウト」というスマホアプリの設計データです。 当アプリはゲーム感覚で効率よく花の名前を覚えるために弊社が開発したスマホアプリです。 完全無料（アプリ内課金もなし）ですので、よかったら遊んでみてください。 http://hananonamae.jp/ |
いかがでしたか。モックアップのもうひとつの活用方法として、Webアプリケーションのソースとしても利用できます。OBDZはソースコードジェネレータではありませんが、Javaのjsp、.NETのaspxと同等の情報を持ち、スタイルシートも別で出力されますので、拡張子を変えることで引き続き製造を行うことが可能です。次回は最新バージョン（V3.4）のもうひとつの新機能「インポート・エクスポート機能」についてご紹介します。
株式会社システムインテグレータ Object Browser事業本部 後迫
