モックhtmlの内容を操作する（アンカーリンク編）

通常のJava/JSPによるWeb開発では、htmlモックをJSPに書きなおす作業をします。この作業によって、Webデザイナーでは手が出せないような呪文が埋め込まれていきます。<form> が<html:form>になったり、<c:if test="${user.isLogin == true }" />こんにちは${user.name}さん！</c:if> と書き加えたりする、あの作業です。

JSPに書きなおす作業が発生し、さらにJSPに書き換えたが最後デザイナーはほとんど手が出せなくなる（うっかり修正してJSPの呪文を壊すとまずい）のですから、この工程に入った瞬間から開発現場の生産性はガタ落ちです。jspなのでアプリとして実行できる状態まで作業しないと、見栄えの確認も修正もできません。モックhtml作成のときのように「ちょっとブラウザで表示してみて見栄えを確認してまた修正する」といったことはできないのです。

そんな愚痴はさておき、ではmixer2ではそこをどう解決するのか？といったお話を少しずつ書いてゆきます。今日はアンカーリンク編です。aタグとformタグ（のaction属性等）についてお話しします。

たとえばテンプレート（htmlモック）に書いたaタグで
<a href="detail.html">
となっている箇所はすべて
<a href="/contextPath/foo/detail?id=99">
のような形に書き換えなければならない、と想定します。

この場合まず、テンプレートを作る段階で当該のaタグにid属性またはclass属性をつけておいてもらうのが早道です。

<a href="detail.html" id="detailLink" > ※このリンクがページ上に唯一ならid属性で
あるいは
<a href="detail.html" class="detailLink" > ※リンクがページ上に複数あるならclass
といった感じです。命名規則は特にありませんのでデザイナーとプログラマーの間で適当に取り決めておいてください。

テンプレート（htmlモック）をMixer2EngineでロードしてHtml型のオブジェクトに変換したら、次のようにします。

File file = ResourceUtil.getResourceAsFile("detail.html");
Html html = mixer2Engine.loadHtmlTemplate(file);
// id属性で走査して書き換え
html.getById("detailLink", A.class).setHref(
    request.getContextPath() + "/foo/detail?id=" + 99);
// class属性で走査してそれら全部を書き換え
for (A a : html.getDescendants("detailLink", A.class)) {
    a.setHref(request.getContextPath() + "/foo/detail?id=" + 99);
}

これで、該当のid属性またはclass属性を持つaタグのhref属性はすべて動的に書きかえられます。

formタグも同様です。htmlモック上では紙芝居のように画面遷移させるために
<form id="fooForm" method="get" action="thanks.html">
のようになっていたとすると、

html.getById("fooForm",Form.class).setAction(request.getContextPath() + "/foo/thanks");
html.getById("fooForm",Form.class).setMethod("post");

によって、
<form id="fooForm" method="post" action="/contextPath/foo/thanks">
に書き換えることができます。