一覧の詳細画面リンクをボタン風にカスタマイズする方法
一覧から詳細画面へ遷移するリンクが見づらいと思ったことはありませんか? リンクをボタン化することで、ユーザーにとって直感的にわかりやすくなり、操作性(ユーザビリティ)の向上につながります。 本記事では、一覧機能の“裏ワザ”第七弾として、一覧の詳細画面リンクをボタン風にカスタマイズする方法
UXを向上させるリアルタイム・パスワード強度チェッカー
入力されたパスワード強度を視覚的に分かるUI 概要 ユーザーが入力するパスワードの強度をリアルタイムで視覚的にフィードバックするUIコンポーネントです。 強度メーターと条件チェックリストにより、ユーザーは安全なパスワードを直感的に作成できます。セキュリティ向上とUX改善に繋がり、会員登
一覧の検索項目に初期値を設定する方法
一覧機能で「特定の日付」や「特定の値」「ログイン中のユーザー名」などが、最初から入力されていたら便利だと思ったことはありませんか? 本記事では、一覧機能の“裏ワザ”第五弾として、一覧画面にアクセスした時点で検索項目に初期値をセットする方法をご紹介します。 反映イメージ ▶ デモサイトはこちら 上記の例で...
一覧画面の表示件数を増やす方法|デフォルト10件を100件・1000件に変更
一覧機能では、初回アクセス時の表示件数はデフォルトで「10件」に固定されています。 しかし、ちょっとした工夫で「100件」や「1000件」など、任意の件数を最初から表示させることが可能です。 本記事では、一覧機能の“裏ワザ”第六弾として、初回アクセス時の表示件数を
フォームの入力状況を確認できる進捗バーを導入する方法
本記事では、フォーム入力の進捗度を可視化するプログレスバーの実装方法を紹介します。 プログレスバーを設置するだけで、入力の現在地がひと目で分かり、離脱抑止と完了率向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。 ポイント: 視覚的な進捗提示は入力ストレスの低減に有効 導入効
一覧検索の入力タイプ変更:カレンダーやプルダウンで検索を快適に
一覧機能の検索で、日時をカレンダーで指定できたり、チェックボックスをプルダウン形式に変えられたら便利だなと思ったことはありませんか? 本記事では、一覧機能の“裏ワザ”第四弾として、検索項目の入力タイプを変更する方法をいくつかご紹介します。 ※本方法を適用するにはxslファイルを
レコード照合フォームブロックのソース解説
レコード照合フォームブロックのソースの構造や役割を解説いたします。 Thymeleafの記法や動作についてはSPIRAL ver.2 サポートサイト Thymeleaf記法 をご参照ください。 また、Thymeleaf関連記事をまとめた Thymeleaf特集 も是非ご覧ください。
企業情報を自動反映!SPIRAL® ver.1とgBizINFOを連携する方法
この記事では、SPIRAL® ver.1と、経済産業省が運営する法人情報のオープンデータ提供サービス「gBizINFO」を連携する方法をご紹介します。 「gBizINFO」について 経済産業省が運営する法人情報のオープンデータ提供サービスです。
SPIRALからX(旧Twitter)に連携し、ツイートを取得する方法
SPIRALからxの投稿を取得する方法。 概要 Webフォームから指定したX (旧Twitter) ユーザーIDの投稿を取得し、任意で指定したキーワードを含む投稿を絞り込んで表示するPHPツールです。 X、SPIRALとの連携を実現することで、キャンペーン等で応募者が指
ステータスの値に応じて一覧編集モードを非活性にする方法
一覧上でステータスを「未完了」から「完了」に更新することはよくあります。 ですが、「完了」にした後は「未完了」に戻せないようにしたい、と思ったことはありませんか? 本記事では一覧機能の“裏ワザ”第三弾として、ステータスの値に応じて一覧編集モードを非活性にする方法を紹介します。 ※本方法
「エラーがどこか分からない!」を防ぐ。ユーザーのストレスを減らすエラーサマリーの実装方法
SPIRALのフォームでエラーサマリーを表示するJavaScriptをご紹介します。 機能としてはエラーメッセージをカウントし内部リンクによってエラー位置に遷移するというシンプルなものですが、どこでエラーが起きたかを一目で把握でき、エラー位置までクリッ
CSVファイルをページ上から一括アップロードするサンプルプログラム
ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括登録するサンプルプログラムを紹介します。 注意点 ・ このサンプルは、SPIRALのページで動作することを前提としています。 ・ 登録先のDBと、CSVの列構成を事前に一致させておく必要があり