セレクトフィールドのラベル名をAPIとThymeleafで取得・表示する方法
フォームでセレクトフィールドを表示する際、IDではなくラベル名で表示させたいケースもあると思います。 本記事では、そのような場合にAPIとThymeleafを使ってラベル名で表示する方法をご紹介します。 APIでセレクトフィールドのラベル名を取得
登録/更新フォームで項目を横並びにする方法
ビジュアル設定の登録/更新フォームで、項目をグループ化して横並びにする方法をご紹介します。 この例では、「姓」と「名」使って説明しています。 グループ化とは 複数のフィールドをグループパーツ化してフォームページに表示させる機能です。 ビジュアル設定は、登録フォームブロックと更新フ
ステップアンケートをスマホでも見やすく!CSSでできるマルチデバイス対応
ステップアンケートは、PC向けまたは携帯電話向けのデザインのみ対応しており、スマートフォン向けのデザインには対応していません。 本記事では、CSSやHTMLを調整することで、スマートフォンからも見やすいデザインに変更する方法をご紹介します。 カスタム
一覧表・単票をもっと見やすく!スマホ対応デザインにする方法
SPIRAL ver.1をご利用の皆さん、「一覧表をもっと見やすくできたら…」と思ったことはありませんか? 今回は、そんなお悩みを解消するために、一覧表を手軽にリッチ化し、スマホでも見やすくデザイン性のある画面を作成する方法をご紹介します。 一覧表のテンプレートを
単票で未入力の項目を非表示にする方法
SPIRALの単票ページで、データが未入力の項目(行)を自動的に非表示にするJavaScriptの実装方法を紹介します。 これにより、データが入力されている項目のみをスッキリと表示させることができ、ユーザーにとって見やすい画面を作成できます。 実装の概要 今回のコードでは、以下の流れで処理を
ウェビナー管理アプリ サイト設計・構築②
最近ではWeb会議ツールを使用したセミナー、ウェビナーが主流となってきています。 参加する側は気軽に参加ができ、運営する側はWeb会議ツールを用意するだけでよく会場の手配などが不要なので、両者にメリットがありそうです。 そんなウェビナー管理ですが、SPIRALver.2では申込受付か
CSVファイルをページ上から一括更新するサンプルプログラム
ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括更新するサンプルプログラムを紹介します。 注意点 ・ 付属のJavaScript CSVパーサーは簡易的なものです。複雑なCSV(改行を含む値など)には対応できない場合があります。 ・ 更新先のDB(サ
CSVファイルをページ上から一括更新するサンプルプログラム
ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括更新するサンプルプログラムを紹介します。 注意点 ・ このサンプルは、SPIRALのページで動作することを前提としています。 ・ 更新先のDBと、CSVの列構成を事前に一致させておく必要があります。 ・
CSVファイルをページ上から一括アップロードするサンプルプログラム
ブラウザ上でCSVファイルを解析し、SPIRALのデータベースに一括登録するサンプルプログラムを紹介します。 注意点 ・ 付属のJavaScript CSVパーサーは簡易的なものです。複雑なCSV(改行を含む値など)には対応できない場合があります。 ・ 登録先の
定型登録でデータを一括登録・更新を行う方法
SPIRAL ver.1ではDBに対してデータの一括登録・更新が可能です。 データ一括登録・更新を実施する際、 登録方法は【登録(ヘッダー無データの登録)】と【定型登録(ヘッダー有データの登録)】の2種類あります。 本ページでは【定型登録(ヘッダー有データの登録)】を使ったデータ
ラベルクリックで星が表示される評価アイコンの実装方法
本記事では、セレクトフィールドの選択内容に応じて★マークで視覚的に評価を表示するシステムの実装方法を紹介します。 評価システムを導入するだけで、ユーザーの選択内容が直感的に把握でき、入力体験の向上とエンゲージメント向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。 ポイント:
一覧の詳細画面リンクをボタン風にカスタマイズする方法
一覧から詳細画面へ遷移するリンクが見づらいと思ったことはありませんか? リンクをボタン化することで、ユーザーにとって直感的にわかりやすくなり、操作性(ユーザビリティ)の向上につながります。 本記事では、一覧機能の“裏ワザ”第七弾として、一覧の詳細画面リンクをボタン風にカスタマイズする方法