ver.2サポートサイト

ソース設定とThymeleaf

機能概要

SPIRAL ver2ではDBやフォームの設定、入力値をページ上で表示などのために、テンプレートエンジンとしてThymeleaf（タイムリーフ）を使用しています。

例えば、通常のHTMLタグでフォームのドロップダウンを記述した場合、

DB側で項目追加や名称変更した際に、HTML側も手動で変更する必要がありますが、SPIRAL ver2のコードを挿入すると自動でHTML側も変更されます。

Thymeleafとは？

Thymeleafの特徴としてHTMLとして解釈してもデザイン崩れを起こさずロジック部分と分けて管理することが可能です。

（Thyemeleafの基本的な記法についてはこちら）

詳しい内容は以下のURLを参照してください。使用しているthymeleafのバージョンは3.0です。

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html

フォームブロック毎のソースの詳細については「フォームブロックのソース解説」をご参照ください。

HTMLエディタ

フォームの各ステップページ作成のHTMLエディタでThymeleafを使用することができます。

またこのHTMLエディタにはValidation機能があります、タグの閉じ忘れや記述間違いなどがあると保存ができません。

※Thymeleaf記法の間違いや、HTMLタグのカッコ漏れ等に関しては保存できてしまいますのでご注意ください。
　間違いのある状態でページを表示した場合、「Internal server error」と表示されます。

フォームの入力ステップページの記述方法

フォームの1項目につきフォーム項目、フォーム項目名、インプット、エラーメッセージ、ヘルプテキスト

のコードが1セットになります。

フォーム項目

各フォーム入力項目には下記タグが必須になります。

（※フォームで使用するDBフィールドの指定をしていますので、省略してしまうとDBに入力値が保存されなくなります）

<sp:input-field name="f0XXX"></sp:input-field>

フォーム項目名（ラベル）

DBのフィールドに設定した表示名が表示されます。

th:text="${fields['f0XXX'].label}

属性として記述するとタグ内に出力されます。

例：f0XXXのフィールド表示名は氏名を設定

<p th:text="${fields['f0XXX'].label}"></p>

実際に出力されるHTMLは以下になります。

<p>氏名</p>

インプットタグ

各フォームのインプット/セレクト/テキストエリアタグを作成します。

※各出力HTMLのclassはSPIRAL ver.2デフォルトのclassが自動で出力されます。

※実際に出力されるHTMLのname属性はフィールド一覧で指定したname属性で出力されます。

1行テキスト

<input type="text" th:name="${fields['f0XXX'].name}" th:value="${inputs['f0XXX']}">

参照フィールド（1レコード参照）デフォルト値「引用（任意レコード値）」の場合

(※XXXの部分はフィールドID、YYYの部分は参照先DBのDBID、ZZZの部分は参照先DBのフィールドIDに応じて適宜変更してください)

<input type="text" th:name="${fields['f0XXX'].name}" th:value="${inputs['f0XXX']} ?: (${dbs[YYY] != null} ? ${dbs[YYY].record['ZZZ']} : '')">

実際に出力されるHTMLは以下になります。

<input type="text" name="text" value="">

テキストエリア

<textarea th:name="${fields['f0XXX'].name}" th:text="${inputs['f0XXX']}"></textarea>

実際に出力されるHTMLは以下になります。

<textarea name="textarea"></textarea>

マルチセレクト＞チェックボックス

<label th:each="option : ${fields['f0XXX'].options}">

<input type="checkbox" th:name="${fields['f0XXX'].name}" th:value="${option.id}" th:checked="${inputs['f0XXX'] != null ? #lists.contains(inputs['f0XXX'], #strings.toString(option.id)) : false}">

<span th:text="${option.label}">Item</span>

</label>

実際に出力されるHTMLは以下になります。

<label>

<input type="checkbox" name="multiselect" value="1">

<span>セレクト項目1</span>

</label><label>

<input type="checkbox" name="multiselect" value="2">

<span>セレクト項目2</span>

</label><label>

<input type="checkbox" name="multiselect" value="3">

<span>セレクト項目3</span>

</label>

セレクト＞ラジオボタン

<label th:each="option : ${fields['f0XXX'].options}">
<input type="radio" th:name="${fields['f0XXX'].name}" th:value="${option.id}" th:checked="${inputs['f0XXX'] == #strings.toString(option.id)}">
<span th:text="${option.label}">Item</span>
</label>

実際に出力されるHTMLは以下になります。

<label>
<input type="radio" name="radiobuttons" value="1">
<span>セレクト項目1</span>
</label><label>
<input type="radio" name="radiobuttons" value="2">
<span>セレクト項目2</span>
</label><label>
<input type="radio" name="radiobuttons" value="3">
<span>セレクト項目3</span>
</label>

セレクト＞プルダウン

<select" th:name="${fields['f0XXX'].name}">
<option value="" th:text="${fields['f0XXX'].unselectedLabel}" th:selected="${inputs['f0XXX'] == null}">Select option</option>
<option th:each="option : ${fields['f0XXX'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0XXX'] == #strings.toString(option.id)}">Item</option>
</select>

実際に出力されるHTMLは以下になります。

<select" name="pulldown">
<option value="" selected="selected">----- 選択してください -----</option>
<option value="1">項目1</option>
<option value="2">項目2</option>
<option value="3">項目3</option>
</select>

エラーメッセージ

各フィールドのエラーメッセージを出力します。

th:if="${errors['f0XXX'] != null}" th:text="${errors['f0XXX'].message}"

属性として記述するとタグ内に出力されます。

例：<span>タグ内に設置する場合。（f02のエラーメッセージは"入力してください。"を設定）

<span th:if="${errors['f02'] != null}" th:text="${errors['f02'].message}"></span>

実際に出力されるHTMLは以下になります。

<span>入力してください。</span>

ヘルプテキスト

各フィールドのヘルプテキストを出力します。

th:if="${fields['f0XXX'].help != null}" th:text="${fields['f0XXX'].help}"

属性として記述するとタグ内に出力されます。

例：<span>タグ内に設置する場合。（f03のヘルプテキストは"半角英数字のみになります。"を設定）

<span th:if="${fields['f03'].help != null}" th:text="${fields['f03'].help}"></span>

実際に出力されるHTMLは以下になります。

<span>半角英数字のみになります。</span>

記述例：フォームの確認ステップページ

日時系フィールドの表示形式編集

確認ステップ上に表示する日時系フィールドのフィールド値の表示形式を編集することができます。

例えば、日時フィールドの入力コントロールが「[年]/[月]/[日] [時]:[分]:[秒]」の場合、確認ステップ上のデフォルトソースは以下の形式になっています。

<span class="sp-form-embedded" th:text="${values['f0X']?.format('uuuu/MM/dd HH:mm:ss')}">2000/01/01 12:00:00</span>

表示形式を「2022年6月29日 12時30分45秒」といった表示形式に修正したい場合は、以下のソース編集を行います。

<span class="sp-form-embedded" th:text="${values['f0X']?.format('uuuu年MM月dd日 HH時mm分ss秒')}">2000/01/01 12:00:00</span>

記述例：引用値表示パーツ/認証レコード値挿入

設置認証エリアを指定している登録/更新/削除フォームの入力/確認ステップ、または認証ページ内に挿入することで認証エリアで認証されたレコードの値を表示することができます。

1行テキスト

th:text="${siteClient.record[f0X]}"

属性内に記述するとタグ内に出力されます。
例：f05の入力値は"スパイラル"

<span th:text="${siteClient.record[f05]}"></span>

実際に出力されるHTMLは以下になります。

<span>スパイラル</span>

作成日時/最終更新日時は表示形式を編集することができます。
デフォルトソース
作成日時

<span class="sp-form-embedded" th:text="${siteClient.record['_createdAt']?.format('yyyy-MM-dd HH:mm:ss')}">2000/1/1 12:00:00</span>

「2025年4月1日 12時30分45秒」といった表示形式に修正したい場合は、以下のソース編集を行います。
作成日時

<span class="sp-form-embedded" th:text="${siteClient.record['_createdAt']?.format('yyyy年MM月dd日 HH時mm分ss秒')}">2000/1/1 12:00:00</span>

「2025/4/1 12:30」といった表示形式に修正したい場合は、以下のソース編集を行います。
作成日時

<span class="sp-form-embedded" th:text="${siteClient.record['_createdAt']?.format('yyyy/MM/dd HH:mm')}">2000/1/1 12:00:00</span>

f0XXXについて

こちらの数字はフォームで使用しているDBのフィールドIDの数字になっています。
f0+フィールドIDで参照するフィールドを指定することができます。

${fields['f01']} IDが1のフィールド

${fields['f010']} IDが10のフィールド

SPIRAL ver2で許可されている記法

Thymeleaf自体には多くの機能が用意されていますがSPIRAL ver2では幾つかの機能を制限しています。
以下はSPIRAL ver2で許可している属性です。

Thymeleaf記法についてはこちらをご参照ください。

許可している属性

• th:alt-title
• th:attrappend
• th:attr
• th:block
• th:case
• th:classappend
• th:each
• th:if
• th:remove
• th:styleappend
• th:switch
• th:text
• th:unless
• th:with

また、HTMLの属性に「th:」を付けることで、値を処理した結果をHTMLとして出力することができます。
例）ページのbodyタブに

<input type="number" name="number" th:value="${1+1}">

を設定した場合、HTMLソースは

<input type="number" name="number" value="2">

になります。

許可しているユーティリティオブジェクト

• #strings.toString(Object)