tsubasatwi( つばさ） 
こんにちは！NoCodeCamp＆AppTalentHubのツバサです。
知人から、小売店で簡単に作れるポイントサイトを作ってという依頼があったので、記事に書いて伝えます。
今回は、ノーコードツール「Bubble」を使って、シンプルなポイントサイトを作ってみたので、その手順や仕組みをご紹介します。おおよそ、初心者が1時間くらいを目安に作れる程度のもので想定しました。
ユーザー登録・ログイン機能付き、ポイント履歴の表示・合計ポイントの集計までをBubbleだけで構築しました。
ノーコード初心者の方にもおすすめの内容になっています！
🎯 作ったものの概要
- サービス名（仮）：Pointsite
- 主な機能：
- ユーザー登録／ログイン（Bubble AIによる自動生成）
- ポイント履歴の表示（Repeating Group）
- 合計ポイントの表示（自動集計）
- 管理者による手動ポイント付与（Bubbleエディターから）
💡 使用したデータベース
1. User
Bubble標準のユーザーデータ型を使用し、以下のフィールドを追加しました。nameだけ新規で追加します。
| フィールド名 | 種類 | 用途 |
|---|---|---|
| name | text | ユーザー名(新規で追加します) |
| text | メールアドレス | |
| slug | text | 固有URL用のスラッグ |
2. PointHistory
ポイントの履歴を記録するためのデータ型です。
| フィールド名 | 種類 | 用途 |
|---|---|---|
| user | User | ポイントの対象ユーザー |
| point_change | number | 加算/減算されたポイント値 |
| created_date | date | 履歴が作成された日時 |
🖥️ UI構成
サインアップ画面
BubbleのAIアシスタントを使って、ワンクリックで生成。
「Full name」「Email」「Password」「Re-enter password」の入力欄を持つ、ベーシックなログイン/サインアップを登録
- すでにアカウントがあるユーザー向けに「ログインはこちら」リンクも設置。
Workflowでサインアップのアクションを追加しましょう。（自動でできてる場合もあります。）
サインアップ後は、indexページへのＮａｖｉｇａｔｉｏｎも忘れず
ポイント履歴画面（index）
ログイン後に表示されるホーム画面では、次の情報を表示します。
- 「ようこそ、〇〇」
- ポイント履歴（Repeating Groupで表示）
- 合計ポイント
ようこそ、とポイント履歴を作る
（↓履歴表示ページ）
ポイント履歴を表示させる。Data sourceを登録
プレビューでポイント履歴が反映していることを確認
✅ 合計ポイントの表示方法
「このユーザーが今持っている合計ポイントを出したい！」
そんなときもBubbleなら簡単。
以下のように設定します：
🔧 手順
- テキスト要素を配置
Insert dynamic dataを選択- 以下のように記述：
plaintextコピーする編集するSearch for PointHistory's point_change:sum
- 検索条件（Constraint）で：
user = Current User
この設定で、ログイン中のユーザーがこれまでに受け取ったポイントの合計を自動表示できます！
🔁 ポイントが増減した場合も、
point_changeをマイナスで記録すればOK！
±両方対応できる設計です。
🛠️ ポイントの追加方法
今回はシンプルにするため、管理者がBubbleエディターから手動でポイントを加算しています。
具体的には：
- データ → App Data → PointHistory にアクセス
- 「Add entry」をクリック
- 以下のように入力：
- user：対象のユーザー
- point_change：加算したいポイント数（例：+100）
- created_date：省略可（自動入力される）
⚠ 今後はワークフローで自動加算する処理にも発展できます。
📸 スクリーンショット
（↓データベース設定）
🔐 セキュリティ面で気をつけること
今回、1時間程度で作れるものが目安なので、本格運用する場合には、以下の
点などにも配慮してください。特にポイントサイトの増減は、お金がからむ
ケースもありますので、お客様がいる場合には、何度もテスト検証をお願いします。
1. 管理者操作の制限
- 懸念点：ポイントの追加をBubbleエディター上から手動で行っているため、ログイン情報を知っていれば誰でも操作可能。
- 対策：
- 管理者用の専用ダッシュボードを用意し、**
is_adminフラグ（User データに Boolean 型で追加）**を持たせて表示・操作を制限する。 - エディターアクセス権はなるべく共有しない。
- 管理者用の専用ダッシュボードを用意し、**
2. データの読み取り制限（Privacy Rules）
- 懸念点：
PointHistoryのデータがすべてのユーザーに表示されてしまう可能性。 - 対策：
- Privacy設定で「Current User is this PointHistory’s user」のときのみ表示可にする。
- 管理者にはすべて見えるように、
is_adminで条件分岐。
3. ページアクセス制限（Navigation制御）
- 懸念点：ログインしていないユーザーでも
indexページにアクセスできてしまう。 - 対策：
indexページなどは「Current User is logged inでないとリダイレクト」処理を追加。- 管理者ページも同様に
Current User's is_admin is yesでないとアクセス不可に。
✅ Bubble上で追加すべき項目
| 項目名 | 内容 | 理由 |
|---|---|---|
is_admin（Userフィールド） | Boolean型 | 管理者だけがポイント追加画面を見れるようにする |
| Privacyルール | PointHistoryに対し「This PointHistory’s user is Current User」条件で閲覧可 | 他ユーザーの履歴を見られないようにする |
| アクセス制限Workflow | 未ログインユーザーをloginページへリダイレクト | 不正アクセス防止 |
| フォームバリデーション | 入力値の空欄・形式チェック | データの破損や不正な入力を防止 |
📝 まとめ
今回は、Bubbleだけで作れるシンプルなポイントサイトの作り方を紹介しました。
- ログイン・サインアップはAIアシスタントで自動生成
- ポイント履歴はRepeatingGroupで表示
- 合計ポイントは
sum関数でカウント - ポイントはエディターから簡単に追加可能
🚀 今後の拡張アイデア
- ポイント付与の自動ワークフロー（例：ボタンを押すと加算）
- 管理者専用のダッシュボード
- ポイントランキング表示
- 月別・カテゴリ別集計
- ポイントと交換できるアイテム設計
👋 最後に
「Bubbleで何か作ってみたいけど、難しそう…」という方でも、
このようなポイントサイトならサクッと作れて、機能の練習にも最適です！
気になる方はぜひチャレンジしてみてください 😊
オンラインサロンNoCodeCampでもお待ちしてます
