🎁

クーポン機能の実装

対象環境

Webブラウザ;ネイティブアプリ(iOS,Android)

対象プラン

Freeプラン以上

サンプルアプリ


クローンアプリ


データベース構成

1-1. 「クーポン」テーブルの新規作成

テーブル名:クーポン
項目名データタイプ備考
クーポン名テキスト特典の明記
クーポン詳細テキスト説明文、利用条件等
配信開始日日付
使用期限日日付
使用済みユーザーリレーション(多対多)対Usersテーブル

1-2. Users(既存)テーブルの項目追加

自動生成された逆リレーションの項目名を「使用済みクーポン」に変更しておく。
*自動生成された項目名のままだと将来にどういう紐づけかわかりにくくなるため

2. 一覧画面(ユーザー向け)

2-1. クーポン一覧を表示するカスタムリストの設置

データベースの選択:クーポン
表示項目:タイトル/説明/有効期限などを、テキストエレメントで適切に配置
カスタムフィルター条件
使用済みユーザー:logged in user が含まれない
使用期限日:  start of today 、~の後
AND
start of today、等しい
アクション設定
カスタムリストのアクション:ページ移動→クーポン詳細画面
*利用するクーポンをタップで詳細・利用画面に遷移する

3. 詳細・利用画面(ユーザー提示用)

3-1. 画面の構成

・タイトル、説明、利用条件(小さめでも明記)、使用期限をテキストエレメントで適切に配置
・”ご利用の際はこの画面を店員へご提示ください”の表示
・”利用する ”ボタン(店員に提示後に押下)

3-2. ボタンのアクション設定

”クーポン”更新:”使用済み”のリレーション→ add  → logged in user
ページ移動:クーポン利用確認画面へ
クーポン利用確認画面作成:
  1. モーダル画面を新規作成
  1. 「クーポンを利用しました」表示
  1. ”確認”ボタン設置
ボタンアクション:ページ移動→クーポン画面

4. 利用履歴画面(*必要に応じて)

4-1. データベース構成

4-1-1. 「クーポン利用履歴」テーブル作成

テーブル名:クーポン利用履歴
項目名データタイプ備考
利用したクーポンリレーション(多対1)
利用したユーザーリレーション(多対1)
利用日日付

4-1-2. Users(既存)およびクーポン(既存)テーブルの項目追加

自動生成された逆リレーションの項目名を以下のように変更しておく。
Usersテーブル: クーポン利用履歴
クーポンテーブル:クーポン利用履歴
*自動生成された項目名のままだと将来にどういう紐づけかわかりにくくなるため

4-2. 利用履歴画面の作成

4.2.1 クーポン利用履歴のカスタムリストを配置

・表示項目:タイトル/「ご利用日:yyyy/MM/dd HH:mm」などを、テキストエレメントで適切に配置。
・「利用済み」を表示。
・カスタムフィルター条件
利用したユーザー>email、等しい、logged in user >email
・戻るボタンの設置
最終更新日:2025/08/28