前回の記事・WEBデザイン（View）の拡張サンプル では、デザインとロジックを分ける例を見てみました。
実際に作業効率を考える場合、これでは半分を埋めたにすぎません。
デザインとロジックを分ける理由は、主に以下のものになると思います。
①保守性を上げる （コンパイルなしにデザインを変更できる）
②デザイナーとプログラマーが同時に開発作業ができる
前回の記事では①は満たしているけど、②は満たすとは限りません。
その理由と解決方法を以下で見てみます。
【デバッグツールについての補足】
デバッグツールは、
デザインファイルとデータファイルから出力ファイルを作成するツールです。
DesignStyleを使用するとデザイン(view)とロジックを分離できます。
しかし、DesignStyle::output() に代入するデータ(DesignData)は、
ロジック内で作成することになります。
つまり、ロジック部分が作成されコンパイルされないうちはデザインファイルの記述に間違いが無いかを確かめられず、デザイナーはプログラマが開発を終えるのを待たないといけません。
デバッグツールは、そんな問題を解決します。
debugtool.exe [引数1] [引数2] [引数3]
[引数1] ...データファイルパス。デフォルトdata.txt
[引数2] ...スタイルファイルパス。デフォルトstyle.txt
[引数3] ...結果出力ファイルパス。デフォルトout.txt
※このファイルと同じディレクトリにexeファイルをコピーすればお試しできます。
（デフォルト値が働くので引数なしでとりあえず動作するはずです。）
【ツールの仕様】
データファイルからデザインデータ(DesignData)を作成します。
次にスタイルファイルを読み込み、作成したデータでoutput()を呼びます。
結果は、結果出力ファイルに出力します。
【データファイルの仕様】
使用できるタグとその意味。
サンプルdata.txtを参照してください。
・data データ(DesignDataSub<string>)を表します。
属性：name・・・データ名を指定します。
属性：value・・・データを指定します。
・vec 配列（DesignDataVector）を表します。配列の要素は、配下にeleタグをおいて指定します。
属性：name・・・データ名を指定します。
・ele 配列の配下の要素を表します。このタグの配下には、data, vec, mapなどを指定できます。
・map マップ(DesignDataMap)を表します。配下には、data, vec, mapなどを指定できます。
【デバッグ用のデータファイルのサンプル】
<data name="animal" value="dog"/>
<data name="remarks" value="備考です。
何か？"/>
<vec name="mails">
<ele>
<data name="subject" value="お疲れ様です"/>
<data name="addres" value="nana@ne.jp"/
>
</ele>
<ele>
<data name="subject" value="お疲れ様です２"/>
<data name="addres" value="nana@ne.jp"/
>
</ele>
<ele>
<data name="subject" value="お疲れ様です３"/>
<data name="addres" value="nana@ne.jp"/
>
</ele>
<ele>
<data name="subject" value="お疲れ様です４"/>
<data name="addres" value="nana@ne.jp"/
>
<map name="m">
<data name="bb" value="ほほー"/>
</map>
</ele>
</vec>
【スタイルファイルのサンプル】
<html>
<table border="1">
<nana:for-each select="mails" cnt-var="$i">
<nana:set name="$mod" select="$i" format="mod(2)"/>
<tr>
<td bgcolor="<nana:if select="$mod" cmp="eq" value="0">red</nana:if><nana:if select="$mod" cmp="eq" value="1">blue</nana:if>" >
<nana:value-of select="$i" /></td>
<td><nana:value-of select="/remarks" escape="html"/></td>
<td><nana:value-of select="address"/></td>
<td><nana:value-of select="subject"/></td>
</tr>
</nana:for-each>
</table>
<nana:value-of select="/mails[3]/m/bb" />
</html>
【サンプルの出力結果例】
<html>
<table border="1">
<tr>
<td bgcolor="red" >
0</td>
<td>備考です。<br/>何か？</td>
<td></td>
<td>お疲れ様です</td>
</tr>
<tr>
<td bgcolor="blue" >
1</td>
<td>備考です。<br/>何か？</td>
<td></td>
<td>お疲れ様です２</td>
</tr>
<tr>
<td bgcolor="red" >
2</td>
<td>備考です。<br/>何か？</td>
<td></td>
<td>お疲れ様です３</td>
</tr>
<tr>
<td bgcolor="blue" >
3</td>
<td>備考です。<br/>何か？</td>
<td></td>
<td>お疲れ様です４</td>
</tr>
</table>
ほほー
</html>
詳しくは、実際にプログラムを動かしてみてください。
そう。
大きな開発時には、こういうツールを作るところまで気を配って開発をした方がいいと思います！
参考：
・Viewとは？