ステップアンケートをスマホでも見やすく!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種類あります。 本ページでは【定型登録(ヘッダー有データの登録)】を使ったデータ
ラベルクリックで星が表示される評価アイコンの実装方法
本記事では、セレクトフィールドの選択内容に応じて★マークで視覚的に評価を表示するシステムの実装方法を紹介します。 評価システムを導入するだけで、ユーザーの選択内容が直感的に把握でき、入力体験の向上とエンゲージメント向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。 ポイント:
一覧の詳細画面リンクをボタン風にカスタマイズする方法
一覧から詳細画面へ遷移するリンクが見づらいと思ったことはありませんか? リンクをボタン化することで、ユーザーにとって直感的にわかりやすくなり、操作性(ユーザビリティ)の向上につながります。 本記事では、一覧機能の“裏ワザ”第七弾として、一覧の詳細画面リンクをボタン風にカスタマイズする方法
UXを向上させるリアルタイム・パスワード強度チェッカー
入力されたパスワード強度を視覚的に分かるUI 概要 ユーザーが入力するパスワードの強度をリアルタイムで視覚的にフィードバックするUIコンポーネントです。 強度メーターと条件チェックリストにより、ユーザーは安全なパスワードを直感的に作成できます。セキュリティ向上とUX改善に繋がり、会員登
フォームの入力状況を確認できる進捗バーを導入する方法
本記事では、フォーム入力の進捗度を可視化するプログレスバーの実装方法を紹介します。 プログレスバーを設置するだけで、入力の現在地がひと目で分かり、離脱抑止と完了率向上に寄与します。軽量で既存フォームに簡単に組み込み可能です。 ポイント: 視覚的な進捗提示は入力ストレスの低減に有効 導入効