サポート > Wagby Developer Network > 見栄えのカスタマイズ > ボディ部のカスタマイズ
自作したHTMLをボディ部に適用する方法を学ぶことで、見栄えの上でもオリジナルのシステムを開発することができるようになります。
自作したHTMLをWagbyに組み込む
Wagbyでは、モデル部分を表示（または登録、更新）する HTML ファイルを自作することができます。 この方法を用いると、Web デザイナによって作成された HTML をベースとした、オリジナルの見栄えをもった Web アプリケーションを構築できます。
図1 自作したHTMLの適用
（クリックすると拡大画像が表示されます）
テンプレートHTML
テンプレートHTMLの構造
開発者は、Wagby が読み込める「テンプレートHTML」ファイルを作成します。テンプレートHTMLとは、各モデル項目の「ラベル部」と「内容（値）部」を $block{...} 表記にしたものです。ここで、$block{...} という部分を「プレースホルダ」と呼びます。例えば、次のようになります。
...
<tr>
<th class="display_label_nowrap_notnull" width="20%">
$block{staff_p.name.label}
</th>
<td width="80%" align="left" valign="top"
class="display_field_noalign">
$block{staff_p.name}
</td>
</tr>
...
項目のラベル部の書式は次のとおりです。
項目の内容（値）部の書式は次のとおりです。
標準で提供されるテンプレートHTMLをカスタマイズする
テンプレートHTMLは $(DEVHOME)\work\template_html\webpage\(モデル名) フォルダ以下に自動生成されます。 このファイルをカスタマイズし、$(DEVHOME)\customize\template_html\webpage\(モデル名) というフォルダに同名のファイル名で保存します。
新規にテンプレートHTMLを作成する
プレースホルダを埋め込んで作成したテンプレートHTMLファイルを$(DEVHOME)\customize\template_html\webpage\(モデル名) というフォルダに保存します。このとき、ファイル名の命名規則は次のようになります。
テンプレートHTMLと、JSPファイルの関係
テンプレートHTMLファイルは、ボディ部の表示レイアウト情報が記述されたものとなっています。 Wagby はこのレイアウト情報を適用します。このときプレースホルダを適切なコードに変換します。 変換された JSP ファイルは、次のようになります。
...
<tr>
<th class="display_label_nowrap_notnull" width="20%">
<!-- $block{staff_p.name.label} -->
<fmt:message key="staff_name"/>
</th>
<td width="80%" align="left" valign="top"
class="display_field_noalign">
<!-- $block{staff_p.name} -->
<div id="content_staff_p$002fname"
name="staff_p$002fname">
<c:set var="__value" value="${staff_p_name.content}"/>
<c:out value="${__value}"/>
</div>
</td>
</tr>
...
具体的には、上記のコードにおいて $block{staff_p.name.label} という表記は、その直後の <fmt:message> タグに相当します。 同様に $block{staff_p.name} という表記は、その直後の <div id="..."> から </div> タグまでの部分に相当します。
ビルドと確認
- テンプレートHTMLを編集したあと、Wagby ビルダから「定義ファイルの変換」処理を行ないます。このとき、「連続したビルド処理の実行」は「行わない」とします。
- 「定義ファイルの変換」処理後、$(DEVHOME)\env\work\srcgen\webpage\(モデル名) フォルダに、新しい JSP ファイルが生成されます。例えばテンプレートHTMLファイル showCustomerP_template.html を編集したとすると、これに対応した showCustomerP.jsp が生成されています。（ファイルの日付を確認してください。）
- 新しい JSP ファイルを直接、（すでにビルドしていた）$(DEVHOME)\wagbyapp\webapps\wagby\(モデル名) フォルダに上書きコピーします。Web アプリケーション(Tomcat) を再起動することなく、編集したページを Web ブラウザからリロードすることで、動作を確認することができます。
