※訂正とお詫び（2025年6月11日追記）
前回の記事にて、「オンボーディングステータスのデフォルト値を固定値で１」と記載しておりましたが、正しくは「固定値は０」です。申し訳ありません。
はじめに
こんにちは！今回は「オンボーディングアプリを作ってみた」シリーズの第2弾として、
登録後にユーザーが最初に見る TOPページの作成
ユーザーの進捗状況に応じた コンテンツ出し分け機能の実装
について紹介します。
前回は、SPIRAL ver.2を使って会員DBの作成と登録フォームまでを構築しました。
今回は、その続きとして上記２つの機能を追加していきます。
登録後のTOPページの役割
ユーザーが登録を終えてログインすると最初に表示されるTOPページでは、以下の機能を持たせました。
機能一覧：
現在のオンボーディングステップを表示
各ステップの進捗状況（完了/未完）を表示
ステータスに応じた次のアクションへの誘導
コンテンツ出し分け機能の概要
次に紹介するのが「コンテンツ出し分け機能」です。この機能は、ユーザーが現在どのオンボーディングステップにいるかを判定し、それに応じたコンテンツだけを表示させるというものです。たとえば、Step1を完了していないユーザーにはStep2以降のコンテンツはURLを非表示にし、順番に進んでもらうように制御します。
実装
今回の実装では以下のような流れで進めました。
-
Step1: TOPページ作成
-
Step2: 更新フォーム作成
-
Step3: 各ステップの作成
Step1: TOPページ作成
まずは認証エリアの作成をしました。認証エリアを作成すると、自動でログインフォームや更新フォームなど、基本的に必要なページが作成されます。
作成した認証エリア内に、ログイン後に最初に遷移するTOPページを作成します。ページ作成する際に、設定方法という項目でソース設定を選択し、下記プログラムをbody欄に張り付けてください。このTOPページでコンテンツの出し分け機能を実装します。
<body th:attr="data-status-value=${siteClient.record[14]}">
<h1>ようこそ！</h1>
<p>以下のステップから選んで進められます。</p>
<ul id="stepList"></ul>
<p id="nextMessage"></p>
<script>
// bodyタグのカスタム属性からステータス値を取得
const status = Number(document.body.dataset.statusValue);
const stepList = document.getElementById("stepList");
const message = document.getElementById("nextMessage");
for (let i = 1; i <= 5; i++) {
const li = document.createElement("li");
if (i <= status) {
li.innerHTML = `<a href="step${i}">✅ STEP${i}（完了）</a>`;
} else if (i === status + 1) {
li.innerHTML = `<a href="step${i}">▶️ STEP${i}（進行中）</a>`;
} else {
li.textContent = `🔒 STEP${i}（未完了）`;
}
stepList.appendChild(li);
}
if (status >= 5) {
message.textContent = "🎉 オンボーディングコンテンツは完了です。お疲れさまでした！";
} else {
message.textContent = `STEP${status + 1} をクリアすると次に進めます`;
}
</script>
</body>
※${siteClient.record[14]} は認証レコード値挿入からオンボーディングステータスを選択すると各自のデータベースからの値（スパンタグの中のth:textの部分）が出てきますので、このコードを貼り付ける際は各自で認証レコード値挿入からオンボーディングステータスを選択し、正しい値に修正してください。
※プログラムについて詳しく知りたい方はプログラム中のコメントを参照してください。
※後半でオンボーディングコンテンツの各ステップ（１～５）を作成します。各ステップへ飛ぶリンクは、各ステップ作成後に正常に機能します。
Step2:更新フォーム作成
会員DBのonboarding_statusを更新するために、自動で作成された更新フォームとは別に、作成した認証エリア内にオンボーディングステータス用の更新フォームを作成します。
ページ作成時にビジュアル設定を選択するとブロック設定で更新フォームを選択できるので、登録フォームと同様に簡単に更新フォームを作成することができます。
作成後、まず赤枠部分をクリックします。
下記部分を変更しました。
テキストリンクでTOPページへ戻るリンクを追加しました。
▼SPIRAL ver1のお試しはこちら
Step3:各ステップの作成
オンボーディングコンテンツの各ステップを作成します。まずはstep1からです。ページ作成時にソース設定を選択し、識別名をstep1にして、body欄に下記コードを貼り付けてください。
<body>
<h1>STEP1：プロフィール登録</h1>
<p>ここにSTEP1の説明やフォームなどを書く</p>
<form method="POST" action="https://statusUpdate">
<!-- 以下は、非表示のデータ（ユーザー情報やステータス）を取得するための埋め込み情報 -->
<input type="hidden" name="email" th:value="${siteClient.record[3]}">
<input type="hidden" name="memberID" th:value="${siteClient.record[1]}">
<input type="hidden" name="displayName" th:value="${siteClient.record[2]}">
<input type="hidden" name="onboarding_status" th:value="${siteClient.record[14]}">
<button type="submit">このステップを完了する</button>
</form>
</body>
※変更点はページ作成時の識別名とマーカー部分です。識別名がstep1（1の部分は1～５）以外だと、TOPページから正しく遷移しません。
※<h1>STEP1：プロフィール登録</h1> <p>ここにSTEP1の説明やフォームなどを書く</p>については各ステップの適切な内容に変更して下さい。
※https://statusUpdateについては作成した更新フォームのURLに変更してください
※${siteClient.record[3]} ${siteClient.record[1]} ${siteClient.record[2]} ${siteClient.record[14]} についてはTOPページと同様、認証レコード値挿入からメールアドレスや会員IDを選択し、各自のデータベースの値に修正してください。
※ステップ２～５についても同様です。
※プログラムについて詳しく知りたい方はプログラム中のコメントを参照してください。
まとめ
今回は、オンボーディングアプリの「TOPページ」と「コンテンツ出し分け機能」について紹介しました。このようにSPIRALでは、基本的に必要なもの（登録フォームや更新フォームなど）はプログラミングなしで超簡単に作り、複雑な部分のみプログラミングをするというような作成方法ができます。ぜひ試してみてください。
次回は、メール送信機能とユーザー管理画面の実装について紹介する予定です。お楽しみに！
私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1のトライアルアカウントを無償提供しています。このアカウントの記事でも紹介するように、たくさんの機能ございます。
▶︎ フォーム
▶︎ 認証エリア
▶︎ ログイン
▶︎ メール送信
▶︎ カスタムプログラム
などの作成できますので、ぜひ試してみてください!!
そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。SPIRAL ver.1にご興味のある方、ぜひこちらもご覧ください👇