フィールド間の重複選択を不可にするサンプルプログラム
アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2
ナレッジサイト
ログイン
アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2
アンケートフォームなどで、「第一希望」「第二希望」のように複数の項目を選択してもらう際に、 同じ項目が選ばれるのを防ぎたい場合があります。 このページでは、JavaScriptを使用して、フィールド間の重複選択を動的に不可にする方法を、 プルダウンメニューとラジオボタンの2
フォームの日付入力欄は、ユーザーにとって入力が煩雑になりがちな要素です。 特に、年月日が別々のテキストフィールドになっている場合、UI/UXの低下を招くことがあります。 本記事では、既存の年月日入力欄を、 直感的に操作できるカレンダーピッカーに置き換えるJavaScrip
SPIRAL ver.2 APIでは、複数のレコードを操作する方法として「bulk」と「batch」の2つの方式が提供されています。これらの違いを理解することで、適切なAPIを選択し、効率的なデータ処理を実現できます。 bulkとbatchの基本的な違い
SPIRAL ver.2 APIでレコード一覧を取得する際に使用される「offset（オフセット）」パラメータについて、基本的な概念から実践的な使い方まで解説します。ITの専門知識がなくても理解できるよう、わかりやすく説明していきます。 offsetとは？ offset（オフセット
本記事では、HTMLのチェックボックス群において、 「その他」の選択肢（特定のチェックボックス）が選ばれた際に、 関連するテキスト入力欄を動的に活性化・非活性化するJavaScriptの実装方法を紹介します。 この機能により、ユーザーが
SPIRAL ver.2のAPIやPHPでDB操作を行う際の where条件の記述・データ型の扱い・関数利用で つまずきやすいポイントをまとめました。 サポートサイト（公式ドキュメント）を参考に、 「なぜか動かない」「エラーになる」事例とその回避策を解説します。 where条件は
カスタムAPIを使ってリアルタイム売上ダッシュボードを作成するサンプルプログラムを紹介します。 本記事は「最小構成で動作検証 → 実DB連携」の2段階で解説します。 開発初期はカスタムAPI（モックデータ）でUIと動作をすばやく検証し、その後に本番データ
本記事では、アンケートの回答を受け付けた後、 メールにてギフトコードが閲覧可能なURLを送信する方法について紹介します。 全体像 予めギフトコードDBにギフトコードを格納しておきます。 アンケート回答フォームよりアンケートを回答すると、ギフトコードDBのギフトコードに紐
本記事では、アンケートの回答を受け付けた後、 メールにてギフトコードが閲覧可能なURLを送信する方法について紹介します。 全体像 予めギフトコードDBにギフトコードを格納しておきます。 アンケート回答フォームよりアンケートを回答すると、ギフトコードDBのギフトコードに紐
SPIRALで作成した予約フォームのデータを自動的にGoogleカレンダーに反映させることで、予約管理の効率化が図れます。 本記事では、外部連携ツール「Zapier（ザピアー）」を使用して、SPIRALの予約データをGoo
本記事では、PDFをアップロードして自動解析し、 フォームのフィールドへ情報を自動入力する仕組みを2種類ご紹介します。 pdf.js を用いてブラウザ上でPDFを解析し、 OpenAIのサービスを利用してテキスト情報を抽出する方法になります
DBに格納したPDFをレコードアイテムブロックで描画するサンプルを紹介します。 レコードアイテムブロックにデフォルトで出力されるファイルフィールドのリンクはダウンロード専用になっており、 画面上に描画する事が出来ません。 そのため、PDFを画面上に描画するために本
カスタムAPIを利用してマスタDBを検索しプルダウンに反映するサンプルプログラムを紹介します。 今回は社員検索フォームを題材にサンプルの実装方法を解説します。 本記事では、社員マスタデータベースから階層的に本部、部署、課、社員を選択し、 社員IDをhidd
RESTful APIを簡単に利用するためのカスタムAPIクライアントのライブラリを作成しました。 カスタムAPIクライアントを使用することで、バックエンドとフロントエンドの連携が容易になり、 データベース操作やメール配信ジョブの管理などの機能を簡単にできるだけでな
JavaScript（fetch API）を使用して、レコードアイテムを読み込み、 設定されているファイルURLをダウンロードURLに差し替えるの実装方法を紹介します。 ファイルをDBに格納することで、ログイン時のみファイルをダウンロードさせたい場合に便利な
ver.2.35でリリースされたカスタムAPI機能を利用して開発を行う際、 Basic認証を利用する事で外部環境からでもテスト環境に接続を行い、デバッグすることが可能です。 本記事では、Basic認証を利用したデバッグ方法を解説します。 ※特定IPアドレス制限を利用
本記事では、ver.2.35でリリースされたカスタムAPIを活用して、非同期通信を用いたシンプルなデータ検証システムを実装する方法をご紹介します。 この仕組みでは、ユーザが入力したテキストをカスタムAPIのPHPで検証し、その結果をフロントエンドで即時にフィードバック
本記事では、ver.2.35でリリースされたカスタムAPIを活用して、OpenAIのチャットAPIを呼び出すチャットボットウィンドウを出力するJavaScriptの構築手法をご紹介します。 この仕組みでは、バックエンド側はPHPでカスタムAPIを実装し、 フロントエンド側はJa
フォームブロックに置いて各フィールドに対してスライダーを生成し、操作性を向上させるガジェットのご紹介です。 name値とスライダー設定を指定するだけで、自動的にスライダーが生成され、初期値が設定されます。 この様なイメージでスライダーを作成できます。 注意点 ・スラ
全体像 SPIRALのDBにアップロードされるファイルのファイル名は、アップロード者依存してしまいます。 ファイル名をレコードの値にリネームし、管理しやすくするためのサンプルプログラムです。 例えば自動発番される会員IDを用いてアップロードされるファ
全体像 SPIRALのDBにアップロードされるファイルのファイル名は、アップロード者依存してしまいます。 ファイル名をレコードの値にリネームし、管理しやすくするためのサンプルプログラムです。 例えば自動発番される会員IDを用いてアップロードされるファ
全体像 SPIRALのAPIから取得したデータを暗号化し、ダウンロード可能な形式に変換します。 ダウンロードしたファイルは、別ページにて復号化し、CSVとしてダウンロードできます。 データを暗号化しダウンロードボタンに引き渡す設定 PHP <?//<!
全体像 SPIRALのAPIから取得したデータを暗号化し、ダウンロード可能な形式に変換します。 ダウンロードしたファイルは、別ページにて復号化し、CSVとしてダウンロードできます。 データを暗号化しダウンロードボタンに引き渡す設定 PHP <?php //-
SPIRALの登録フォームにてアップロードされたファイルを、 Googleドライブへアップロードするサンプルプログラムをご紹介いたします。 全体像 SPIRALのAPIを用いてDB内のファイルをダウンロードし、 そのファイルをGoo
GoogleColab を使ってSPIRALのDBにアップロードされているファイルをGoogleDriveにアップロードするプログラムを作成してみました。 GoogleColabとはGoogleの環境上でPythonコードを実行
SPIRALの登録フォームからアップロードされたファイルをAPIを用いてダウンロードし、 Googleドライブへアップロードするサンプルプログラムをご紹介いたします。 全体像 SPIRALのAPIを用いてDB内のファイルをダウンロー
GoogleColab を使ってSPIRALのDBにアップロードされているファイルをGoogleDriveにアップロードするプログラムを作成してみました。 GoogleColabとはGoogleの環境上でPythonコードを実行
フォームブロックに置いて各フィールドに対して初期入力値を設定する強化ガジェットのご紹介です。 name値と入力値を指定するだけで、自動的にフィールドタイプを判定して初期値が入力されます。 注意点 ・入力コントロールで、[年/月/日][時/分/秒]の形式で設定してください ・HTML
APIで取得したデータをCSVにしてダウンロードが出来るボタンを設置する方法をご紹介いたします。 レコードリストの抽出条件とAPIでデータを取得する条件を一致させるとレコードリストのデータをダウンロードさせる様なボタンを作成することができます。 本記事のプロ
SPIRALのカスタムプログラムでGoogleDriveのファイルをダウンロードし、 SPIRALのDBへファイルを格納するサンプルプログラムをご紹介いたします。 全体像 GoogleDriveのAPIを用いてGoogleDrive内のファイル
GoogleColab を使ってGoogleDriveに保存されているデータをSPIRALのDBへアップロードするプログラムを作成してみました。 GoogleColabとはGoogleの環境上でPythonコードを実行出来るサービ
SPIRALのPHP（アクション>PHP実行）でGoogleDriveのファイルをダウンロードし、 SPIRALのDBへファイルを格納するサンプルプログラムをご紹介いたします。 全体像 GoogleDriveのAPIを用いてGoogle
GoogleColab を使ってGoogleDriveに保存されているデータをSPIRALのDBへアップロードするプログラムを作成してみました。 GoogleColabとはGoogleの環境上でPythonコードを実行出来るサービ
この記事では登録フォームブロックを使って知識テストの様なテストフォームを作成するサンプルをご紹介します。 点数計算をし、最後に出力及びDBへの記録もします。 全体像 機能 完了ステップにて正答か誤答か判定をしてその結果を出力します。 テストの点数配当を設定し、何点獲得したかを
この記事ではフォームに電子署名（マウスやスマートフォンのタップで描けるサイン）を、 追加する方法をご紹介いたします。 この様な形でマウスで文字を書く事ができます。 DB設定 電子署名を格納したいDBにフィールドタイプ：ファイルのフィールドを追加してください。 本サンプルにつきましては識別名をsig...
この記事ではフォームに電子署名（マウスやスマートフォンのタップで描けるサイン）を、 追加する方法をご紹介いたします。 この様な形でマウスで文字を書く事ができます。 DB設定 DBを新規作成する場合はDBタイトルをsignDBとして作成してください。 既存のDBを利用する場合は後述するサンキューページ...
日付フィールドに生年月日を入力した際に年齢を自動取得するJavaScriptを紹介いたします。 JavaScript window.addEventListener('DOMContentLoaded', (event) =>
この記事ではSPIRALから株式会社サイボウズのkintoneへのレコード連携について、メソッドごとにサンプルコードをまとめています。 SPIRAL ver.1 とkintoneをAPI連携したアプリケーションを構築する時の参考になれば幸いです。 共通モジュール <?php
この記事では、SPIRALでの顧客マスタにおける所持ポイント管理と、商品交換フォームを通じたポイント使用フローを紹介します。 また、顧客マスタの所持ポイントがマイナスにならないように、データベース（DB）側とページ上でのエラー表示設定についても説明します。 DB
この記事ではSPIRALから株式会社サイボウズのkintoneへのレコード連携について、メソッドごとにサンプルコードをまとめています。 SPIRAL ver.2 とkintoneをAPI連携したアプリケーションを構築する時の参考になれば幸いです。 共通モジュール <?php
フォームブロックの締切設定により開始日時と終了日時を設定する事は可能ですが、 特定の時間（例えば営業時間9:00～18:00のみ）のみ表示したいであったり、土日はクローズしたいといった場合はデフォルトの設定では不可能です。 今回の記事は上記の設定を可能とする為のカスタマイズ記事となりま
APIによってレコード一覧を取得する場合、 1回のリクエストでは取得できるレコード数に制限があります。 limitの値が一回のリクエストで取得するレコード数ですが、こちらの上限値が200件までとなっております。 APIリファレンス この時に200件以上のレコードを取得
前回の記事 JavaScirptでセレクトをドリルダウン表示する のラジオボタンバージョンとなります。 JavaScriptソース document.addEventListener('DOMContentLoaded', function() {
登録フォームブロックにて選択したセレクト項目の内容によって、下位層のセレクト項目の内容を絞り込む方法（ドリルダウン表示）をご紹介します！ 今回はjQueryを使わずにJavaScirpt（Vanilla JS）のみで作成しているため、ライブラリ等の読み込みは必要ありません
背景として、多くの企業様にSPIRALをご利用頂き、 SPIRAL内にてお問い合わせ対応アプリケーションを構築し 毎日、大量の顧客からの問い合わせやフィードバックを受け取られて居ると存じます。 問い合わせに効率
openAIのGPTのAPIを利用する事で、 SPIRALに格納されているデータを組み込んだ自動回答が出来るチャットボットを構築する事が出来ます。 このチャットボットを構築すると以下のようなことが可能となります。 サポートデスクのチャット対応