Portfolioこのトピックについて
オンラインストアにログインした顧客に対して、POSシステム（スマレジ）からリアルタイムでポイント残高を取得して表示する仕組みを構築しました。
店舗で貯めたポイントをオンラインで確認できることで、オムニチャネル体験を実現しています。
なぜリアルタイム取得が重要なのか
定期バッチ同期の問題点
| 問題 | 具体的な影響 |
|---|---|
| データの鮮度 | さっき店舗で使ったポイントが反映されていない |
| 顧客の混乱 | 「ポイントが減ってない」という問い合わせ |
| 信頼性の低下 | オンラインの表示を信用してもらえない |
| 運用負荷 | バッチ失敗時の対応が必要 |
データの鮮度
具体的な影響さっき店舗で使ったポイントが反映されていない
顧客の混乱
具体的な影響「ポイントが減ってない」という問い合わせ
信頼性の低下
具体的な影響オンラインの表示を信用してもらえない
運用負荷
具体的な影響バッチ失敗時の対応が必要
リアルタイム取得のメリット
- 常に最新のポイント残高を表示
- 顧客からの問い合わせが減少
- 「店舗で使った直後」でも正確に表示
全体アーキテクチャ
ポイント取得フロー
① 顧客がマイページを開く
ログイン後のマイページにアクセス
② 認証トークンを確認
認証済み → 続行 / 未ログイン → ログイン画面へ
③ ポイント取得をリクエスト
自社サーバーにAPI呼び出し
④ Shopify顧客IDから会員番号を抽出
例: gid://shopify/Customer/12345 → 12345
⑤ POSの顧客を検索
会員番号でPOSシステムを検索
⑥ ポイント残高を取得
現在のポイント数、有効期限などを取得
⑦⑧ 結果を返却・表示
フロントエンドに返却し、画面にポイント残高を表示
実現のための3つのポイント
この仕組みを実現するためには、3つの重要な要素があります。
1. ポイント取得の全体フロー
マイページを開いてからポイントが表示されるまでの一連の流れを詳しく解説します。
2. Shopify IDとPOS会員番号のマッピング
オンラインとオフラインで顧客を紐付けるために、Shopify顧客IDをPOSの会員番号として使う方法を解説します。
3. API認証とセキュリティ
ポイント残高は個人情報のため、適切な認証が必要です。セキュリティ設計について解説します。
顧客が見る画面イメージ
表示される情報
| 項目 | 表示例 |
|---|---|
| 顧客名 | 山田 太郎 様 |
| 現在のポイント残高 | 1,250 pt |
| 有効期限 | 2025年12月31日 |
| アクション | ポイントを使うボタン |
顧客名
表示例山田 太郎 様
現在のポイント残高
表示例1,250 pt
有効期限
表示例2025年12月31日
アクション
表示例ポイントを使うボタン
最近のポイント履歴
| 日付 | 内容 | ポイント |
|---|---|---|
| 01/15 | 店舗購入 | +100pt |
| 01/10 | オンライン購入 | +50pt |
| 01/05 | クーポン交換 | -500pt |
01/15
内容店舗購入
ポイント+100pt
01/10
内容オンライン購入
ポイント+50pt
01/05
内容クーポン交換
ポイント-500pt
パフォーマンスの考慮
レスポンス時間の目標
| 処理 | 所要時間 |
|---|---|
| 認証確認 | 約100ms |
| POS API呼び出し | 約500-800ms |
| データ整形・表示 | 約100ms |
| 合計目標 | 1秒以内 |
認証確認
所要時間約100ms
POS API呼び出し
所要時間約500-800ms
データ整形・表示
所要時間約100ms
合計目標
所要時間1秒以内
待ち時間が長いとUX低下するため、ローディング表示で体感を改善します。
キャッシュの検討
この仕組みがもたらす効果
お客様にとって
- いつでも最新のポイント残高を確認できる
- 店舗で買った直後でもオンラインで正確に表示
- 「ポイントがおかしい」というストレスがない
運営側にとって
- ポイントに関する問い合わせが減少
- データ不整合によるクレームがなくなる
- オムニチャネル体験で顧客満足度向上