【Thymeleafを使いこなそう】第1回 基本コード解説
Thymeleaf（タイムリーフ）は属性名th:~で指定された値を処理し様々なHTMLを生成することができます。 本記事ではソース設定を行う際、Thymeleafでよく使用されている記載についてまとめています。 Thymeleafの記法や動作についてはSPIRAL
ナレッジサイト
ログイン
Thymeleaf（タイムリーフ）は属性名th:~で指定された値を処理し様々なHTMLを生成することができます。 本記事ではソース設定を行う際、Thymeleafでよく使用されている記載についてまとめています。 Thymeleafの記法や動作についてはSPIRAL
フォームでセレクトフィールドを表示する際、IDではなくラベル名で表示させたいケースもあると思います。 本記事では、そのような場合にAPIとThymeleafを使ってラベル名で表示する方法をご紹介します。 APIでセレクトフィールドのラベル名を取得
最近ではWeb会議ツールを使用したセミナー、ウェビナーが主流となってきています。 参加する側は気軽に参加ができ、運営する側はWeb会議ツールを用意するだけでよく会場の手配などが不要なので、両者にメリットがありそうです。 そんなウェビナー管理ですが、SPIRAL WebToolsでは申
レコード照合フォームブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法 をご参照ください。 また、Thymeleaf関連記事をまとめた Thymeleaf特集 も是非ご覧くだ
SPIRAL WebToolsでは内覧の予約受付から内覧後のアンケート、検討状況の確認対応やメール配信を行うモデルルーム予約管理アプリの構築が可能です。 アプリ（DB）設計・構築 / サイト設計・構築 / ユーザ・アプリロール・グループ設定 に各工程を分け、ポイントやおすすめ
マルチセレクトの項目を登録フォームブロックの「確認ページ」にて、選択されたラベルを横並び・カンマ区切りで表示させる方法について紹介いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。
SPIRAL WebToolsでは内覧の予約受付から内覧後のアンケート、検討状況の確認対応やメール配信を行うモデルルーム予約管理アプリの構築が可能です。 アプリ（DB）設計・構築 / サイト設計・構築 / ユーザ・アプリロール・グループ設定 に各工程を分け、ポイントやおすすめ
SPIRAL WebToolsでは内覧の予約受付から内覧後のアンケート、検討状況の確認対応やメール配信を行うモデルルーム予約管理アプリの構築が可能です。 アプリ（DB）設計・構築 / サイト設計・構築 / ユーザ・アプリロール・グループ設定 に各工程を分け、ポイントやおすすめ
SPIRAL WebTools では、サーバーサイドで動作するテンプレートエンジン Thymeleafを採用しています。 特徴としては、タグに 属性名th:~ を設定することで、タグ構成を保ちながら動的に操作できる点です。 今回は、ログイン時のユーザーのステータ
登録・更新時の完了画面でアップロードされた画像を表示させるサンプルプログラムを作成いたしました。 写真投稿キャンペーンなどで、完了画面でアップロードされた画像を表示したい場合は、ぜひ参考にしてみてください。 また、ファイル添付時にサムネイルを表示させる強化ガジェ
SPIRAL WebTools のサイト管理での日付操作をまとめました。 レコード値、認証値や引用値などは、Thymeleaf で出力を行うため、出力方法や比較など日付を操作したい場合の参考にしてください。 レコード値の 日付/月日/時刻 フィールド
更新フォームブロックのソースの構造や役割を解説いたします。 入力欄のインプットタグ部分については「更新フォームブロックのインプットタグ解説」をご覧ください。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 ま
更新フォームブロックのインプットタグ部分の構造や役割を解説いたします。 更新フォームブロック全体のソースについては「更新フォームブロックのソース解説」をご覧ください。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご
削除フォームブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 また、Thymeleaf関連記事をまとめた Thymeleaf特集 も是非ご覧ください。 関連記事
ログインフォームブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 また、Thymeleaf関連記事をまとめた Thymeleaf特集 も是非ご覧ください。
レコード検索ブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 関連記事はこちら 登録フォームブロックのソース解説 登録フォームブロックのインプットタグ解説 更新フ
WebTools を使ってサイトを作る際に使用する Thymeleaf の小技を実用例を元に紹介します。 変更・改定履歴 [ 2022.07.29 ] 改定 「レコードID」の記述を「フィールドID」に変更 [ 2022.09.12 ] 追加 認証値の 日付/月日/時刻 の値を分解して表示する方法...
レコードアイテムのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 関連記事はこちら 登録フォームブロックのソース解説 登録フォームブロックのインプットタグ解説 更新フォ
最近ではWeb会議ツールを使用したセミナー、ウェビナーが主流となってきています。 参加する側は気軽に参加ができ、運営する側はWeb会議ツールを用意するだけでよく会場の手配などが不要なので、両者にメリットがありそうです。 そんなウェビナー管理ですが、SPIRAL WebToolsでは申
レコードリストブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 関連記事はこちら 登録フォームブロックのソース解説 登録フォームブロックのインプットタグ解説 更
登録フォームブロックのインプットタグ部分の構造や役割を解説いたします。 フォームブロック全体のソースについては「登録フォームブロックのソース解説」をご覧ください。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照
登録フォームブロックのソースの構造や役割を解説いたします。 入力欄のインプットタグ部分については「登録フォームブロックのインプットタグ解説」をご覧ください。 Thymeleafの記法や動作についてはSPIRAL WebTools サポートサイト Thymeleaf記法をご参照ください。 ま
完了画面でサイト内ページリンクに登録情報をパラメータとして付与する方法を紹介します。 「サイト内ページ選択」と「URL直接入力」の2種類の方法があり、記載方法が変わるため、両方を参考にしてください。 ※ 完了動作の「リダイレクト」「ページ内リンク」には対応していません
SPIRAL WebTools おいて、ver.2.18時点では、サイト側にファイルダウンロード機能が実装されていません。(※) 今回は、 DB に保存されているファイルをサイト側でダウンロード可能にするボタンを作ってみました。 ファイルをダ
Thymeleaf の使い方（書き方）がよくわからないという質問を多くいただきましたので、よくある使い方をまとめました。 この記事は、【 MKupdate vol.4「SPIRAL WebTools.18 PHP」】を基に記載しています。 重複する部分がありますが、ご了承ください。 ま
SPIRAL WebTools.18 のアップデートで「PHP実行環境」がリリースされました。 前回のMK update でも ver.2 の メンテナンス性についてご案内しましたが、 今回も引き続き アップデートで利用可能となった PHPにつ
WebTools ver.2.18 にて PHPが利用できるようになりました。 PHP が使えるようになったということで試しにカレンダーを作ってみました。 WebTools では、PHP + Thymeleaf なので、使い方の参考になれば。 当月の
ソース設定とThymeleaf 目次 Toggle 機能概要Thymeleafとは？HTMLエディタフォームの入力ステップページの記述方法フォーム項目フォーム項目名（ラベル）インプットタグエラーメッセージヘルプテキスト記述例：フォームの確認ステップページ入力/選択した値の表示日時系フィールドの表示形式編集記述例：引用値表示パーツ/認証レコード値挿入f0XXXについてSPIRAL WebToolsで...
Thymeleaf記法 Thymeleaf（タイムリーフ）は属性名th:~で指定された値を処理し様々なHTMLを生成することができます。 <div th:text="${'Hello!'}">Goodbye!</div> 上記の場合th:textの中の文字列"Hello!"を"Goodbye!"...
ページのPHP設定 サイト内のページ（ソース設定）にて、PHPを実行することができます。 実行結果はThymeleafを使用し、ページのbody（ソース設定）およびブロック（ソース設定）に渡すことができます。 外部サービスのAPIやSPIRAL WebToolsのAPIと連携することで、多機能なアプリケーションを構築することができます。 目次 Toggle 仕様SPIRAL WebToolsで提供...
既存のHTML＋CSSを使ってフォームを作成したい 既存のHTML＋CSSを使ってフォームを作成したい場合には、フォーム入力/選択部分や各項目のエラーメッセージをThymeleaf記法に差し替えることで機能します。 ※Thymeleaf（タイムリーフ記法）記法について詳しくはこちら 目次 Toggle 作成の流れ1.フォーム作成2.ページ詳細画面3. 入力ステップページの作成4. タグの差し替え5...
フォームブロックのソース解説 フォームブロックのソース設定では、HTMLエディタでThymeleafを使用することができます。 Thymeleafについての説明は以下のページをご参照ください。 ソース設定とThymeleaf Thymeleaf記法 SPIRAL ナレッジサイトでは、Thymeleafの使い方や、フォームブロック毎のソースの構造や役割を解説しておりますのでこちらもご参照ください。 ...
PHPでURLパラメータを取得したり、PHPの実行結果をページやブロックに表示したい。 ページに設定したPHPを使って、ページのURLパラメータを取得したり、PHPの実行結果をページやブロックに表示する機能を提供しています。 当該機能を使用するには、独自クラス「$SPIRAL」にアクセスし、独自関数を使用します。 使い方 //URLパラメータを取得 $SPIRAL->getParam(&qu...
パラメータ付与 目次 Toggle 機能概要機能仕様1．形式2．制限UI：ページリンク追加画面でのパラメータ付与1．ビジュアル設定でのページリンク追加画面の表示2．ソース設定でのページリンク追加画面の表示3．パラメータ付与フォームブロックのパラメータ設定（任意値）フォームブロックの各ステップのパラメータ（自動付与）パラメータ付与対象ブロックURL表示形式 機能概要 Googleアナリティクスなどの...
登録フォームブロックのソース設定 目次 Toggle 機能概要機能仕様UI1．フォームブロック作成モーダル2．フォーム設定画面コンテンツ：入力ステップ/確認ステップ複数ステップ設定郵便番号住所自動補完メールアクション自動登録完了締切エラーフィールド一覧CSS/JSCSSJS共通設定 機能概要 フォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができます。 機能仕様...
DBに登録されているデータを登録フォームに表示 PHPとAPIを使用して、DBに登録されているデータを登録フォーム上に表示するサンプルプログラムです。 ページのPHP <?php //------------------------------------------------ //DBのデータを画面に表示 //---------------------------------------...
残席状況表示 セミナーなどの定員数や枠数に対して、申込み数の合計から、残り数を算出し、レコードアイテムブロックにて、自動的に「残席わずか」と表示したり、申込ボタンの表示を変えるサンプルプログラムです。 レコードアイテムブロックを設定したページのPHP <?php //------------------------------------------------ //残席わずか表示 //--...
レコード検索ブロックのソース設定 目次 Toggle 機能概要機能仕様レコード検索ブロックの作成レコード検索設定プレビューレコード検索CSS/JSCSSJS 機能概要 レコード検索ブロックの設定方法を「ソース設定」にすることでHTMLでコンテンツ作成/編集ができます。 機能仕様 各フィールドのHTMLはThymeleaf記法で記述されます。Thymeleafに関してはこちらをご参照ください。 ※ビ...
更新フォームブロックのソース設定 目次 Toggle 機能概要機能仕様更新フォームブロック設定プレビュー更新フォーム複数ステップ設定郵便番号住所自動補完メールアクション自動登録完了エラーフィールド一覧CSS/JSCSSJS共通設定 機能概要 更新フォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができます。 機能仕様 ・各フィールドのhtmlはThymeleaf記...
機能 ここでは、SPIRAL WebTools全般での設定方法や利用方法についてご案内しております。 アプリ利用 レコード ・レコード管理 －レコード詳細検索 ・レコード一括登録 ・レコード一括更新 ・レコード一括更新登録 ・レコード一括削除 ・レコード一括ダウンロード ・ファイル一括ダウンロード メール配信 ・一斉メール配信 ・配信ログ ・メールのクリックカウント/HTMLメール開封確認 アプ...
パスワード再登録フォームブロックのソース設定 目次 Toggle 機能概要機能仕様パスワード再登録フォームブロック設定プレビューパスワード再登録フォーム依頼ステップ依頼完了ステップ依頼メール再登録ステップ再登録完了ステップ再登録完了メールエラーステップCSS/JSCSSJS共通設定 機能概要 パスワード再登録フォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができ...
参照先DBのレコードをフォームにプルダウンで表示 PHPとAPIを使用して、参照先DBに登録されているデータを参照元DBの登録フォーム入力ステップ上にプルダウンで表示するサンプルプログラムです。 ここでは、セミナー申込DBの登録フォームに、セミナーマスタDBに登録されているセミナー名をプルダウンで表示しつつセミナー管理IDを登録するサンプルプログラムを紹介します。 ※予め各DBに必要なフィールドを...
削除フォームブロックのソース設定 目次 Toggle 機能概要機能仕様削除フォームブロック設定プレビュー削除フォームメールアクション完了エラーCSS/JSCSSJS共通設定 機能概要 削除フォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができます。 機能仕様 ・各フィールドのhtmlはThymeleaf記法で記述されます。Thymeleafに関してはこちらをご参...
ログインフォームブロックのソース設定 目次 Toggle 機能概要機能仕様ログインフォームブロック設定プレビューログインフォームID/PASSWORDステップとID/認証フィールドステップメールアクションエラーステップCSS/JSCSSJS共通設定 機能概要 ログインフォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができます。 機能仕様 ・各フィールドのhtml...
レコード照合フォームブロックのソース設定 目次 Toggle 機能概要機能仕様レコード照合フォームブロック設定プレビューレコード照合フォーム（ソース設定）入力ステップ照合成功/照合失敗ステップ照合成功メールエラーステップCSS/JSCSSJS共通設定 機能概要 レコード照合フォームブロックの設定方法を「ソース設定」にすることでhtmlでコンテンツ作成/編集ができます。 機能仕様 ・各フィールドのh...
機能 ここでは、SPIRAL ver.2全般での設定方法や利用方法についてご案内しております。 スタイル ・ソース設定とThymeleaf ・Thymeleaf記法 ・CSS/JavaScript
レコードアイテムブロックのソース設定 目次 Toggle 機能概要機能仕様レコードアイテムブロックの作成レコードアイテム設定プレビューレコードアイテムフィールドパーツ追加サイト内ページリンク追加ファイル挿入フィールド一覧CSS/JSCSSJS 機能概要 レコードアイテムブロックの設定方法を「ソース設定」にすることでHTMLでコンテンツ作成/編集ができます。 機能仕様 ・各フィールドのHTMLはTh...
機能 ここでは、SPIRAL ver.2全般での設定方法や利用方法についてご案内しております。 サイト管理 ・ページのソース設定 ・フォームのメールアクション ・ソース設定とThymeleaf ・Thymeleaf記法 ・CSS/JavaScript ・登録フォームブロック ・ブロック機能 ・ページ機能 ・サイト機能の全体像...
レコードリストブロックのソース設定 目次 Toggle 機能概要機能仕様レコードリストブロックの作成レコードリスト設定プレビューレコードリストコード挿入設定例（1）フィールド追加（2）サイト内ページリンク追加（3）ファイルフィールドに登録した画像ファイルを画像として表示する方法CSS/JSCSSJSリスト設定 機能概要 レコードリストブロックの設定方法を「ソース設定」にすることでHTMLでコンテン...
フォームブロックのプレビュー画面にAn error has occurred - line XXXと表示される HTMLタグのカッコの記載漏れ（例：</divなど）や、Thymeleaf記述の間違い等が主な原因となります。 プレビュー画面に表示されているエラーのline XXXが当該箇所の行数になります。再度該当ページのソースをご確認ください。...
フォームブロック 目次 Toggle 機能概要フォームブロックの種類メールアクション複数ステップステップフロー完了ステップエラーステップ 機能概要 フォームブロックとは、DBに対してデータ登録、更新、削除を行うためのサイト上の画面のことです。 入力するデータに応じて、テキスト入力やプルダウン、ラジオボタンなどのフィールドを配置して作成することができます。 フォームブロックの種類 登録フォームブロッ...
自動登録 目次 Toggle 機能概要機能仕様値タイプ値タイプの指定可能条件各機能詳細固定引用値注意事項 機能概要 フォームブロックからレコード登録/更新する際、認証エリアに紐づく認証DB内のフィールドの値(認証レコード値)、URLパラメータで引き継ぎたい値(任意値)をフォームからDBへ自動登録させたり、予め指定した値(固定値)をDBへ自動登録するための機能です。 ※ 本機能は、登録フォームブロッ...
認証エリア 目次 Toggle 機能概要仕様認証方法認証エリア認証エリア内ページ認証エリア用ブロック認証エリア削除時の注意事項認証エリアの設定更新時、本番環境リリースの注意事項認証フィールドにパスワード以外のフィールドを使用する際の注意事項認証エリアのログインフォームで入力可能な形式テスト環境でセッションエラーページの動作確認を行う際の注意事項UI（認証エリアの作成）認証エリア作成認証エリア設定認...
フォームブロック 目次 Toggle 機能概要フォームブロックの種類メールアクション複数ステップステップフロー完了ステップエラーステップ 機能概要 フォームブロックとは、DBに対してデータ登録、更新、削除を行うためのサイト上の画面のことです。 入力するデータに応じて、テキスト入力やプルダウン、ラジオボタンなどのフィールドを配置して作成することができます。 フォームブロックの種類 登録フォームブロッ...
【アップデート情報】ver.2.43（2026年5月12日実施） 2026年04月16日2026年5月12日実施のver.2.43アップデートに関する主な内容は以下になります。 目次 Toggle 機能追加・改善【サイト】【アプリ】【通知メール】【その他】【API】仕様変更【アプリ】【アプリ/サイト】【サイト】【ログイン画面】不具合修正 機能追加・改善 【サイト】 リリース時のコメント記録機能追加...
【アップデート情報】ver.2.18（2021年11月30日実施） 2021年10月14日2021年11月30日実施のver.2.18アップデートに関する主な内容は以下になります。 目次 Toggle 新機能【アプリ】【サイト】機能改善【アプリ＞メール配信】【サイト＞ページ】【サイト＞ブロック】【サイト＞認証エリア】【サイト＞サイト管理権限】仕様変更【アプリ＞DB】不具合修正 新機能 【アプリ】 ...