ナレッジサイト
ログイン
暗い場所でも快適に。OS設定に連動するダークモードでUXを向上させるCSS
フォームを入力するユーザーのPC、ブラウザの環境によってライトモードとダークモードを自動で切り替える方法をご紹介します。 デモサイトをご用意しました。 デモサイト フォームのデザインテンプレートも用意いたしましたので、ダウンロードして試してみてください。 ダークモー
確認ページでマルチセレクトの選択項目を並び替える方法
マルチセレクトの項目を登録フォームブロックの「確認ページ」にて、選択されたラベルを横並び・カンマ区切りで表示させる方法について紹介いたします。 Thymeleafの記法や動作についてはSPIRAL ver.2 サポートサイト Thymeleaf記法をご参照ください。 関連
フィールド間の重複選択を不可にするサンプルプログラム
アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2
SPIRALフォームのUXを劇的改善！入力・確認ページ間の遷移をCSSだけで滑らかにする方法
View Transition APIを使用してSPIRALのフォームでスムーズなページ遷移をする方法をご紹介します。 View Transition APIとは View Transition APIはLPのような単一ページアプリケーションにおけ
フィールド間の重複選択を不可にするサンプルプログラム
アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2
メールアドレス入力時にドメインをサジェスト表示し入力補完する機能
SPIRALフォームにおけるメールアドレス入力欄にドメイン部分のサジェスト機能を追加する方法について紹介いたします。 はじめに メールアドレス入力欄にドメインのサジェスト機能を実装する方法として、以下の2種類の方法があります。 1. サジェストするドメインを全てソース内で管理
テキストをカレンダー形式で表示させるサンプルプログラム
フォームの日付入力欄は、ユーザーにとって入力が煩雑になりがちな要素です。 特に、年月日が別々のテキストフィールドになっている場合、UI/UXの低下を招くことがあります。 本記事では、既存の年月日入力欄を、 直感的に操作できるカレンダーピッカーに置き換えるJavaScrip
SPIRALAPIにおけるbulkとbatchリクエストの違いについて
SPIRAL ver.2 APIでは、複数のレコードを操作する方法として「bulk」と「batch」の2つの方式が提供されています。これらの違いを理解することで、適切なAPIを選択し、効率的なデータ処理を実現できます。 bulkとbatchの基本的な違い
設定デザインで項目に文言やリンクを追加する方法
本記事ではソースの編集を行わずに、フォームの入力・選択項目に文言やURLを追記する方法をご案内します。 個人情報の取り扱い同意のチェック項目等で補足説明を表示したいときなどにご活用ください。 設定デザインで項目に文言追加する方法 フォームの設定メニュー「フィールド別チェック」
SPIRALAPIにおけるoffsetとは？
SPIRAL ver.2 APIでレコード一覧を取得する際に使用される「offset（オフセット）」パラメータについて、基本的な概念から実践的な使い方まで解説します。ITの専門知識がなくても理解できるよう、わかりやすく説明していきます。 offsetとは？ offset（オフセット
マルチセレクトでその他を選択した時に入力欄の活性化・非活性化を切り替えるサンプルプログラム
本記事では、HTMLのチェックボックス群において、 「その他」の選択肢（特定のチェックボックス）が選ばれた際に、 関連するテキスト入力欄を動的に活性化・非活性化するJavaScriptの実装方法を紹介します。 この機能により、ユーザーが
APIのWHERE指定でつまずきやすいポイント集
SPIRAL ver.2のAPIやPHPでDB操作を行う際の where条件の記述・データ型の扱い・関数利用で つまずきやすいポイントをまとめました。 サポートサイト（公式ドキュメント）を参考に、 「なぜか動かない」「エラーになる」事例とその回避策を解説します。 where条件は
