はじめに

はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、ITアーキテクト育成などの技術者育成を担当しています。

今回は、Nablarch解説書に記載されていない情報の補完を目的に記事を書きました。「ここは実際どうなってるの？」といった情報をお伝えします。

Nablarchは、色々なJSPカスタムタグ を提供しています。このカスタムタグの見た目やレイアウトをカスタマイズしたいと思ったことはありませんか。またその時、JSPに書いた内容がどのようにHTMLに影響するのか知りたくなったことはありませんか。

本記事では、そんな時にお役に立てるよう、JSPに書いたタグはどのようなHTMLを出力するのか紹介していきます。

扱うタグは、入力フォームを作成するのによく使われる以下のタグです。

JSPカスタムタグが出力するHTML

ではさっそく、JSPカスタムタグが出力するHTMLを紹介します。

textタグ

Nablarch解説書はこちら。

JSPでの実装

<n:text
  name="loginId" 
  cssClass="input-medium" 
  errorCss="input-error" 
  autofocus="true"/>

出力されるHTML

<input 
  type="text" 
  name="loginId" 
  class="input-medium" 
  value="" autofocus="autofocus"/>

JSPで指定した属性がほとんどそのままHTMLに反映されます。

しかし、「errorCssはどこ行った？」となりますよね。errorCssはエラーが発生した場合に使用されるCSSクラス名で、入力値のバリデーションでエラーがあった時に現れます。 例えば、テキストボックスにhogeと入力してバリデーションエラーが発生したら、次のようになります。

入力値にエラーがあった場合に、出力されるHTML

<input 
  type="text" 
  name="loginId" 
  class="input-medium 
  input-error" 
  value="hoge" 
  autofocus="autofocus"/>

class属性の値が、JSPに記述したcssClassのものだけでなく、errorCssのものも追加されます。この動作は、textタグ以外でも、errorCss属性を指定可能なタグであれば、共通です。

textareaタグ

Nablarch解説書はこちら。

JSPでの実装

<n:textarea 
  name="note" 
  rows="4" 
  cols="40" 
  cssClass="input-medium" 
  errorCss="input-error"/>

出力されるHTML

<textarea 
  class="input-medium" 
  name="note" 
  rows="4" 
  cols="40"> </textarea>

HTMLになって変わるところといえば、cssClass程度です。textareaタグは、ほとんどそのままHTMLに変換されます。

passwordタグ

Nablarch解説書はこちら。

JSPでの実装

<n:password 
  name="newPassword" 
  restoreValue="true" 
  replacement="●" 
  cssClass="input-medium" 
  errorCss="input-error"/>

出力されるHTML

<input 
  class="input-medium" 
  type="password" 
  name="newPassword" 
  value="" />

JSPで記述したrestoreValueやreplacementは、passwordタグの動作を指示する属性なので、HTMLには直接反映されません。

例えば、restoreValue="true"と指定すると、入力値エラーなどで画面が再表示された際、入力値を復元します。 このため、入力値にエラーがあった場合は、次のようなHTMLが出力されます。

入力値にエラーがあった場合に、出力されるHTML(restoreValue=”true”)

「hogehoge」と入力した場合です。

<input 
  class="input-medium input-error" 
  type="password" 
  name="newPassword" 
  value="hogehoge" />

value属性に入力値が設定されます。

一方、restoreValue="false"と指定し、入力値にエラーがあった場合は、次のようなHTMLが出力されます。

入力値にエラーがあった場合に、出力されるHTML(restoreValue=”false”)

「hogehoge」と入力した場合です。

<input 
  class="input-medium 
  input-error" 
  type="password" 
  name="newPassword" />

入力値を復元する必要がありませんから、value属性自体現れません。

radioButtonタグ

Nablarch解説書はこちら。

JSPでの実装

<n:radioButton 
  name="plan" 
  value="1" label="フリープラン" 
  cssClass="input-medium" 
  errorCss="input-error"/>

出力されるHTML

<input
  id="nablarch_radio1"
  class="input-medium"
  type="radio"
  name="plan"
  value="1" />
<label for="nablarch_radio1">
  フリープラン
</label>

id属性はlabelタグで使用するために、Nablarchが自動的に割り当てたものです。

checkboxタグ

Nablarch解説書はこちら。

JSPでの実装

<n:checkbox
  name="optionPlan"
  value="1"
  label="オプションプラン"
  useOffValue="true"
  offLabel="オプション無し"
  offValue="0"
  cssClass="input-medium"
  errorCss="input-error"/>

Nablarchのcheckboxタグは、useOffValue属性がtrueなら、チェックがない場合でも値を送信できます。offLabel属性は、チェックがない場合に確認画面で表示する文字列、offValue属性は、チェックがない場合に送信する値をそれぞれ指定しています。

出力されるHTML

<input
  id="nablarch_checkbox1"
  class="input-medium"
  type="checkbox"
  name="optionPlan"
  value="1" />
<label for="nablarch_checkbox1">
  オプションプラン
</label>
<input
  type="hidden"
  name="nablarch_hidden"
  value="nablarch_cbx_off_param_optionPlan=0|
  nablarch_hidden_submit_nablarch_form1_1="/>

id属性はlabelタグで使用するために、Nablarchが自動的に割り当てたものです。

JSPで指定したoffValue属性は、HTMLではnablarch_hiddenという名前のinput type="hidden"に反映されています。 nablarch_hiddenはvalue属性に色々な値を|区切りで持っています。 この中の、nablarch_cbx_off_param_【checkboxタグのname属性の値】(今回だと、nablarch_cbx_off_param_optionPlan)にoffValue属性の値が反映されています。 Nablarchはこれらの情報を元に、チェックがない場合でも、値を設定しています。

radioButtonsタグ

Nablarch解説書はこちら。

radioButtonタグは、1つのラジオボタンを作成するタグでした。radioButton"s"タグは、リクエストスコープに格納しておいたリストから、複数のラジオボタンを作成するタグです。

Javaでの実装(ラジオボタンの各項目に対応するクラス)

public class Plan{
    private String name;
    private String value;
    // Setter、Getterは省略。
}

Javaでの実装(アクションクラス)

public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
    // 選択肢のリストの作成。
    List<Plan> radioItems = new ArrayList<>();
    Plan plan = new Plan();
    plan.setName("フリープラン");
    plan.setValue("1");
    radioItems.add(plan);
    plan = new Plan();
    plan.setName("定額プラン");
    plan.setValue("2");
    radioItems.add(plan);
    plan = new Plan();
    plan.setName("従量プラン");
    plan.setValue("3");
    radioItems.add(plan);
    // リクエストスコープに格納する。
    context.setRequestScopedVar("radioItems", radioItems);

    return new HttpResponse("/WEB-INF/view/hoge.jsp");
}

JSPでの実装

<n:radioButtons
  name="optionPlan"
  listName="radioItems"
  elementLabelProperty="name"
  elementValueProperty="value"
  elementLabelPattern="$VALUE$:$LABEL$"
  listFormat="ul"
  cssClass="input-medium"
  errorCss="input-error"/>

出力されるHTML

<ul>
  <li>
    <input id="nablarch_radio1" class="input-medium" type="radio" name="optionPlan" value="1" />
    <label for="nablarch_radio1">1:フリープラン</label>
  </li>
  <li>
    <input id="nablarch_radio2" class="input-medium" type="radio" name="optionPlan" value="2" />
    <label for="nablarch_radio2">2:定額プラン</label>
  </li>
  <li>
    <input id="nablarch_radio3" class="input-medium" type="radio" name="optionPlan" value="3" />
    <label for="nablarch_radio3">3:従量プラン</label>
  </li>
</ul>

JSPのlistName属性が、アクションクラスでリストをリクエストスコープに格納した際の名前に対応します。elementLabelProperty属性は、リストの要素からラベル(elementLabelPatternの$LABEL$の部分にあたります)を取得するためのプロパティ名です。elementValueProperty属性は、リストの要素から値(elementLabelPatternの$VALUE$の部分にあたります)を取得するためのプロパティ名です。またこれは、HTMLのvalue属性の値にもなります。

この例では、JSPでlistFormatにulを指定したため、HTMLもulタグで整形されています。

checkboxesタグ

Nablarch解説書はこちら。

checkboxタグは、1つのチェックボックスを作成するタグでした。checkbox"es"タグは、リクエストスコープに格納しておいたリストから、複数のチェックボックスを作成するタグです。

Javaでの実装(チェックボックスの各項目に対応するクラス)

public class Plan{
    private String name;
    private String value;
    // Setter、Getterは省略。
}

Javaでの実装(アクションクラス)

public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
    // 選択肢のリストの作成。
    List<Plan> checkItems = new ArrayList<>();
    Plan plan = new Plan();
    plan.setName("フリープラン");
    plan.setValue("1");
    checkItems.add(plan);
    plan = new Plan();
    plan.setName("定額プラン");
    plan.setValue("2");
    checkItems.add(plan);
    plan = new Plan();
    plan.setName("従量プラン");
    plan.setValue("3");
    checkItems.add(plan);
    // リクエストスコープに格納する。
    context.setRequestScopedVar("checkItems", checkItems);

    return new HttpResponse("/WEB-INF/view/hoge.jsp");
}

JSPでの実装

<n:checkboxes
  name="optionPlan"
  listName="checkItems"
  elementLabelProperty="name"
  elementValueProperty="value"
  elementLabelPattern="$VALUE$:$LABEL$"
  listFormat="ul"
  cssClass="input-medium"
  errorCss="input-error"/>

出力されるHTML

<ul>
  <li>
    <input id="nablarch_checkbox1" class="input-medium" type="checkbox" name="optionPlan" value="1" />
    <label for="nablarch_checkbox1">1:フリープラン</label>
  </li>
  <li>
    <input id="nablarch_checkbox2" class="input-medium" type="checkbox" name="optionPlan" value="2" />
    <label for="nablarch_checkbox2">2:定額プラン</label>
  </li>
  <li>
    <input id="nablarch_checkbox3" class="input-medium" type="checkbox" name="optionPlan" value="3" />
    <label for="nablarch_checkbox3">3:従量プラン</label>
  </li>
</ul>

radioButtonsと同じです。

selectタグ

Nablarch解説書はこちら。

リクエストスコープに格納しておいたリストを選択肢とする、HTMLのselectタグを出力するタグです。

Javaでの実装(選択肢1つ1つに対応するクラス)

public class Plan{
    private String name;
    private String value;
    // Setter、Getterは省略。
}

Javaでの実装(アクションクラス)

public HttpResponse hoge(HttpRequest request, ExecutionContext context) {
    // 選択肢のリストの作成。
    List<Plan> selectItems = new ArrayList<>();
    Plan plan = new Plan();
    plan.setName("フリープラン");
    plan.setValue("1");
    selectItems.add(plan);
    plan = new Plan();
    plan.setName("定額プラン");
    plan.setValue("2");
    selectItems.add(plan);
    plan = new Plan();
    plan.setName("従量プラン");
    plan.setValue("3");
    selectItems.add(plan);
    // リクエストスコープに格納する。
    context.setRequestScopedVar("selectItems", selectItems);

    return new HttpResponse("/WEB-INF/view/hoge.jsp");
}

JSPでの実装

<n:select
  name="optionPlan"
  listName="selectItems"
  elementLabelProperty="name"
  elementValueProperty="value"
  elementLabelPattern="$VALUE$:$LABEL$"
  withNoneOption="true"
  noneOptionLabel="未選択"
  cssClass="input-medium"
  errorCss="input-error"/>

出力されるHTML

<select class="input-medium" name="optionPlan">
  <option value="">未選択</option>
  <option value="1">1:フリープラン</option>
  <option value="2">2:定額プラン</option>
  <option value="3">3:従量プラン</option>
</select>

こちらも、radioButtonsやcheckboxesと変わりません。 selectタグに特有なのは、withNoneOptionとnoneOptionLabelの2つの属性です。withNoneOption属性がtrueだと、HTMLではvalueが""となるoptionタグが生成されます。noneOptionLabelは、このoptionタグのラベルに反映されます。

fileタグ

Nablarch解説書はこちら。

JSPでの実装

<n:file
  name="fileName"
  cssClass="input-medium"
  errorCss="input-error"/>

出力されるHTML

<input
  class="input-medium"
  type="file"
  name="fileName"
  value="" />

submitタグ

Nablarch解説書はこちら。

JSPでの実装

<n:submit
  uri="/action/confirm"
  type="submit"
  value="確認"/>

出力されるHTML

<input
  type="submit"
  name="nablarch_form1_1"
  value="確認"
  onclick="return window.nablarch_submit(event, this);" />

<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
  "nablarch_form1_1": {
    "action": "/action/confirm",
    "allowDoubleSubmission": true,
    "submissionAction": "TRANSITION"
  }
};
-->
</script>

HTMLのname属性は、フォーム内で一意でなくてはいけません。JSPでname属性を指定しなければ、submitタグが一意な名前を自動で出力します。このため、submitタグでname属性を指定する必要はありません。 また、submitタグのuri属性に指定した値は、JavaScriptとして、フォーム内に出力されます。

Nablarchでは、サブミット処理はJavaScript関数で処理します。このJavaScript関数が、nablarch_submit(event, this)です。NablarchがJSPからHTMLを生成する際に、自動的に出力されます。このJavaScript関数は、フォーム内に出力されたJavaScript(今回の場合は、nablarch_submission_info.nablarch_form1)を使用して、サーバの処理を呼び出します。

ちなみに、フォーム内に出力されるJavaScriptのallowDoubleSubmissionは、submitタグのallowDoubleSubmission属性と対応しています。submitタグのallowDoubleSubmission属性にfalseを指定すれば、以下のような出力となります。

JSPでの実装

<n:submit
  uri="/action/confirm"
  type="submit"
  value="確認"
   allowDoubleSubmission="false"/>

出力されるHTML

<input
  type="submit"
  name="nablarch_form1_1"
  value="確認"
  onclick="return window.nablarch_submit(event, this);" />

<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
  "nablarch_form1_1": {
    "action": "/action/confirm",
    "allowDoubleSubmission": false,
    "submissionAction": "TRANSITION"
  }
};
-->
</script>

submitLinkタグ

Nablarch解説書はこちら。

JSPでの実装

<n:submitLink uri="/action/confirm">
  確認
</n:submitLink>

出力されるHTML

<a 
 name="nablarch_form1_1"
 href="/action/confirm"
 onclick="return window.nablarch_submit(event, this);">
  確認
</a>

<script type="text/javascript">
<!--
nablarch_submission_info.nablarch_form1 = {
  "nablarch_form1_1": {
    "action": "/action/confirm",
    "allowDoubleSubmission": true,
    "submissionAction": "TRANSITION"
  }
};
-->
</script>

submitタグと同じです。JavaScript関数でサブミットを処理することや、フォーム内にJavaScriptを出力する点も同じです。

おわりに

いかがだったでしょうか。JSPカスタムタグが出力するHTMLを知ることで、見た目のカスタマイズをする際の一助となれば幸いです。

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。