SPIRAL ver.1アプリから見る機能 – 一覧表・単票

変更・改訂履歴

[ 2025.05.09 ] 改訂
内容に一部修正および追記を行いました。

本記事ではローコードツール「SPIRAL ver.1」の一覧表・単票機能について紹介します。

こんな方に向けて書いてます

SPIRAL ver.1のフォーム機能の活用方法を知りたい方

一覧表・単票を活用して業務効率化を図りたい方

ローコードツールを使った一覧表・単票作成を学びたい方

本記事で学べること
本記事では、マイエリアの認証機能と合わせて、一覧表・単票機能を活用方法を習得できます。

全体フロー説明

・管理者は申し込みフォームからセミナー情報を登録
　↓
・マイエリアにログインして、登録されたセミナー情報を確認
　↓
・単票に更新フォームを設置し、一覧表から個別のセミナー情報を更新できる

【今回のポイント】

フォームから入力された情報を一覧表と単票を活用して表示・管理します。

入力内容は一覧表にまとめて表示され、個別の情報は単票を通じて確認・編集できるようにします。

アプリ作成

すでに存在するアプリ内にDBを作成する場合は、アプリを選択して進んでいきます。
新しくアプリを作成する場合は、＋ボタンから新規作成してください。

セミナーアプリを作成します。

DB作成

セミナーアプリに進んで、DBを作成します。
フィールド構成は全く同じにしなくても良いので、必要なフィールドを追加してください。

▼セミナーDBフィールド構成

表示名	識別名	タイプ	詳細設定
登録日時	RegistedDate	登録日時	―
セミナー認証キー	seminarKey	簡易パスワード	フィールド値自動生成トリガ・動作：値が存在しても、上書きする・生成する値：数字・アルファベット16桁
セミナーID	seminarID	数字・記号・アルファベット(32 bytes)	必須・重複不可・主キーフィールド値自動生成トリガ・動作：値が存在しても、上書きする・生成する値：（接頭文字列）SEM レコードID5桁
セミナー名	seminarName	テキストフィールド(64bytes)
セミナー内容	seminarContent	テキストフィールド(128bytes)
開催日	seminarDate	日付（○年○月○日）	―
残席数	semUnsoldSeat	整数	―

▼管理者DBフィールド構成

表示名	識別名	タイプ	詳細設定
登録日時	RegistedDate	登録日時	―
ログインID	adminLoginID	数字・記号・アルファベット(32 bytes)	必須・重複不可・主キー
パスワード	adminPassword	メッセージダイジェスト（SHA256）
氏名	adminName	テキストフィールド(64 bytes)	―
メールアドレス	adminEmail	メールアドレス（大・小文字無視）	―

管理者はDBオペレーションによって登録を行うため、管理者DB用の登録フォームを作成するフローはありません。

フォーム設定

▼セミナー登録フォーム設定

フィールド・設定	入力設定
フォーム種類	新規登録
登録日時	特殊入力：登録日時自動取得
セミナー認証キー	使用しない
セミナーID	使用しない
セミナー名	入力項目として使用する
セミナー内容	入力項目として使用する
セミナー開催日	入力項目として使用する
残席数	入力項目として使用する

▼セミナー更新フォーム設定

フィールド・設定	入力設定
フォーム種類	更新
セキュリティ設定	マイエリア認証によるアクセス制限：制限する
識別キーフィールド	ID
認証キーフィールド	セミナー認証キー
ID	特殊入力：値を引き継ぐ
登録日時	特殊入力：値を引き継ぐ
セミナー認証キー	特殊入力：値を引き継ぐ
セミナーID	特殊入力：値を引き継ぐ
セミナー名	入力項目として使用する
セミナー内容	入力項目として使用する
セミナー開催日	入力項目として使用する
残席数	入力項目として使用する

更新フォームには識別キーフィールドと認証キーフィールドと設定します。
セミナーIDに該当するもののみ、変更更新を行える仕組みとなります。

マイエリア作成

管理者DBからマイエリアを作成します。

認証設定 - 識別キー & 認証キー

今回はIDを識別キーとしてログイン条件しています。識別キーをIDにし、認証キーをパスワードと設定します。

一覧表のセキュリティ設定

セミナーDBから一覧表を作成します。

アクセス権限をマイエリアにし、
「許可するマイエリアの追加・削除」をクリックし、管理者DBを選びます。
設定後、一覧表はマイエリア内のみ開けます。

一覧表のタイトルは基本情報の設定から変更できます。

一覧表の設定後、「詳細一覧」が自動生成され、「検索フォーム・単票」で確認することができます。

ログイン後のページ設定

ログイン後トップページを「セミナー一覧表」に設定します。

単票設定

更新フォームを単票に設定

更新フォームの入力ページから、マイエリア用ファイルの「設定デザイン」をダウンロードします。

次に、一覧表に遷移し、「単表作成」をクリックし、「新しい単票」をクリックします。

基本情報のページ名やタイトルを設定します。
次に、単票のソース編集画面に、ダウンロードしたHTMLソースを貼り付けます。

これにより、更新フォームの内容が単票として表示され、
マイエリア内のフォームとして、一覧表に登録されたデータのうち1件を個別に編集できるようになります。

セミナー登録フォームは更新フォームと同じ、単票で作成します。
登録フォームからマイエリア用ファイルの設定デザインをダウンロードし、
一覧表の「検索フォーム・単表」内に、単表作成から作成してください。

【動作確認のポイント】

マイエリア内にフォームを設置する際、マイエリア制限を設定すると、
フォーム内に「%SMPAREA%」が表示されます。
「%SMPAREA%」が表示されることで、マイエリアのセキュリティ設定が有効になっていることを確認できます。
更新フォームのセキュリティ設定で「マイエリア認証によるアクセス制限：制限する」に設定しているため、
フォームのURLを直接開こうとすると、エラーページが表示されます。
更新フォームから変更した情報が一覧表に反映されます。
DBオペレーションにも反映されます。

完成した更新フォームはこのようになります。

セミナー詳細を単票に設定

単票の設定は更新フォームと同様ですが、この場合は内容を入力させないため、セミナー名、セミナー内容、開催日、残席数の各項目についてはinputタグを使用せず、表示専用の形式に書き換えます。具体的には、以下のような形になります。

　　　　　　　<div class="smp_tmpl">
					<dl class="cf">
						<dt class="title">
							セミナー名
						</dt><dd class="data ">
						 %val:usr:seminarName% <br>						</dd>
					</dl>
					<dl class="cf">
						<dt class="title">
							セミナー内容
						</dt><dd class="data ">
						 %val:usr:seminarContent% <br>						</dd>
					</dl>
					<dl class="cf">
						<dt class="title">
							開催日
						</dt><dd class="data time">
						 %val:usr:seminarDate% <br>						</dd>
					</dl>
					<dl class="cf">
						<dt class="title">
							残席数
						</dt><dd class="data integer">
						 %val:usr:unsoldSeat% <br>						</dd>
					</dl>
			</div>

セミナー一覧、セミナー詳細遷移リンクを設定

セミナー一覧画面およびセミナー詳細画面から、それぞれ「セミナー登録」や「セミナー詳細変更」へ遷移できるようにするため、差し替えキーワードを使用してリンクを作成する必要があります。

更新フォームへのURLは、「差し替えキーワード表示」から該当するキーワードを選択し、aタグをつけて
で以下のように設定します。

<a href="%url/card:SeminarChange%">セミナー詳細変更</a>

リンク設定後

<a href="%url/card:SeminarReg%">セミナー登録</a>

リンク設定後

※差し替えキーワードは、ソース上に設定することで、ページ上に差し替えキーワードと紐づく設定物や値を簡単に呼び出すことができる機能です。
差し替えキーワードは、設定したフォームやページのタイトルによって異なります。
「差し替えキーワード表示」を開き、「使用可能差し替えキーワード一覧」から、ご自身が設定する内容に合ったキーワードを参考にして作成してください。