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