モックアップ(HTML)を出力する

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

本連載は、設計書ジェネレータ「SI Object Browser Designer(以下、OBDZ)」を使ってソフトウェアの設計書(仕様書、基本設計書、詳細設計書)を作る講座です。今回は、「モックアップ(HTML)出力」についてご紹介します。

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

モックアップとは

モックアップとは、画面レイアウト情報をもとに、HTML形式で画面イメージを出力する機能です。
通常、設計がおわった段階では設計書をもとにレビューを行いますが、この段階では動くモノ(アプリケーション)はありません。ですので、「コントロールがない」「桁数が異なる」といった設計ミスは見つけることができても、「画面遷移の自然さ」や、「データ入力の効率」などの使い勝手の部分までチェックすることは非常に難しいと思います。モックアップはHTML形式でアプリケーションのプロトタイプを出力する機能ですので、設計段階でこのような使い勝手も含めてレビューが可能となります。なお、入力は既存の設計データ(画面レイアウト情報)を使用しますので、追加のデータ入力は必要ありません。

モックアップの出力

モックアップの作り方も非常に簡単です。レポート出力画面の出力設計書のプルダウンに「モックアップ」を選択の上、下側で対象の画面を選択することで出力できます。

mockup

画面1.レポート出力画面

新規CTA

実際に出力されたモックアップを見てみましょう。画面2の左はOBDZの画面、右は出力されたHTMLです。OBDZで設計した画面イメージ通りに出ていることがわかります。

mockup2

画面2.出力されたモックアップ

もちろん右側はHTMLですのでテキスト入力や、プルダウン、タブ切り替えなど動かすことが可能です。

[RELATED_POSTS]

画面遷移つきモックアップの出力

 mockup3

画面3.画面レイアウトタブ

また、画面遷移のデモンストレーションつきモックアップも可能です。OBDZの画面レイアウトタブのボタンやリンクなどの各コントロールには「遷移先機能名」というプロパティが追加されています。このプロパティにボタンやリンクを押した先の移動する画面を選択します。遷移先を設定した状態で再度モックアップを出力しましょう。

そうすると、HTML上のボタンを押したときに、遷移先で設定した画面へジャンプするようになります。
ただし、遷移先の画面を同時または事前にモックアップ出力していない場合、遷移先が見つからず「Not Found」エラーになりますのでご注意ください。

mockup4画面4.画面遷移つきモックアップの出力

lights.png今回のサンプル画面について
なお、今回のサンプル用に掲載している画面は「花の名前ダウト」というスマホアプリの設計データです。当アプリはゲーム感覚で効率よく花の名前を覚えるために弊社が開発したスマホアプリです。
完全無料(アプリ内課金もなし)ですので、よかったら遊んでみてください。
http://hananonamae.jp/

以上がモックアップ機能の紹介でした。モックアップのもうひとつの活用方法として、Webアプリケーションのソースとしても利用できます。OBDZはソースコードジェネレータではありませんが、Javaのjsp、.NETのaspxと同等の情報を持ち、スタイルシートも別で出力されますので、拡張子を変えることで引き続き製造を行うことが可能です。

新規CTA

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


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

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事

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