Portfolioこの記事について
顧客がマイページを開くと、裏側でPOSにポイント残高を問い合わせます。この処理は数秒以内に完了し、顧客は待たされることなくポイントを確認できます。その仕組みを詳しく解説します。
フローの全体像
ステップバイステップの流れ
マイページへアクセス
顧客がログイン後、マイページにアクセス
認証トークン確認
サーバーでセッショントークンの有効性を検証
顧客ID特定
トークンからShopify顧客IDを取得
会員番号抽出
Shopify顧客IDから数字部分（会員番号）を抽出
POS問い合わせ
会員番号でPOSの顧客情報を検索
ポイント取得
POSから現在のポイント残高を取得
画面表示
取得したポイントをマイページに表示
各ステップの詳細
ステップ1-2: アクセスと認証
認証フロー
顧客ブラウザ
マイページにアクセス（Cookie: sessionToken を送信）
自社サーバー
トークン検証（有効期限チェック、署名検証）
結果: 認証OK → マイページ表示 / 認証NG → ログイン画面へリダイレクト
ステップ3-4: 顧客IDの処理
ID変換の流れ
Shopify顧客ID（GraphQL形式）
gid://shopify/Customer/8840734670934
数字部分を抽出
8840734670934
POS検索に使用
この数字がPOSの会員番号として照合に使われる
ステップ5-6: POS問い合わせ
POSへの問い合わせ
自社サーバー
顧客検索リクエスト（会員番号: 8840734670934）
POSシステム
顧客データ検索
| レスポンス項目 | 値 |
|---|---|
| ポイント残高 | 1250 |
| 有効期限 | 2025/12 |
| 会員ランク | ゴールド |
ポイント残高
値1250
有効期限
値2025/12
会員ランク
値ゴールド
ステップ7: 画面表示
| POSレスポンス | 変換後（表示用） | 変換内容 |
|---|---|---|
| point_balance: 1250 | 1,250 | 3桁カンマ区切り |
| point_expiry: 2025-12-31 | 2025年12月31日 | 日本語形式 |
| member_rank: gold | ゴールド会員 | ラベル変換 |
point_balance: 1250
変換後（表示用）1,250
変換内容3桁カンマ区切り
point_expiry: 2025-12-31
変換後（表示用）2025年12月31日
変換内容日本語形式
member_rank: gold
変換後（表示用）ゴールド会員
変換内容ラベル変換
エラーハンドリング
起こりうるエラーと対処
| エラー | 原因 | ユーザーへの表示 | 内部対応 |
|---|---|---|---|
| 認証エラー | トークン期限切れ | ログイン画面へ誘導 | 再ログインを促す |
| 顧客未登録 | POSに同期されていない | 「店舗未登録」と表示 | 同期処理を確認 |
| POS接続エラー | POSシステム障害 | 「一時的に取得できません」 | リトライ後、管理者通知 |
| タイムアウト | POS応答遅延 | 「再度お試しください」 | タイムアウトをログ記録 |
認証エラー
原因トークン期限切れ
ユーザーへの表示ログイン画面へ誘導
内部対応再ログインを促す
顧客未登録
原因POSに同期されていない
ユーザーへの表示「店舗未登録」と表示
内部対応同期処理を確認
POS接続エラー
原因POSシステム障害
ユーザーへの表示「一時的に取得できません」
内部対応リトライ後、管理者通知
タイムアウト
原因POS応答遅延
ユーザーへの表示「再度お試しください」
内部対応タイムアウトをログ記録
エラー時のフォールバック表示
エラー時の画面表示例
顧客名は表示しつつ、ポイント部分のみエラー表示にします。
| 表示要素 | 内容 |
|---|---|
| 顧客名 | 山田 太郎 様（正常表示） |
| ポイント残高 | 「現在取得できません」 |
| アクション | 「再読み込み」ボタン |
| 補足情報 | 「※店舗でのご確認も可能です」 |
顧客名
内容山田 太郎 様（正常表示）
ポイント残高
内容「現在取得できません」
アクション
内容「再読み込み」ボタン
補足情報
内容「※店舗でのご確認も可能です」
ポイント: エラーでも他の機能は使え、再試行の選択肢を提示
パフォーマンス最適化
処理時間の内訳
| 処理ステップ | 所要時間 |
|---|---|
| マイページアクセス | 0ms |
| 認証トークン検証 | 約50ms |
| 顧客ID抽出 | 約10ms |
| POS API呼び出し | 500-800ms |
| データ整形・表示 | 約50ms |
| 合計 | 約600ms〜900ms |
マイページアクセス
所要時間0ms
認証トークン検証
所要時間約50ms
顧客ID抽出
所要時間約10ms
POS API呼び出し
所要時間500-800ms
データ整形・表示
所要時間約50ms
合計
所要時間約600ms〜900ms
ボトルネック: POS API呼び出しが大半を占めるため、改善にはPOS側の対応が必要
ローディングUXの工夫
セキュリティ考慮事項
他人のポイントを見せない仕組み
所有権検証の流れ
リクエスト受信
認証トークン（顧客Aのもの）と取得対象（顧客Aのポイント）を受け取る
検証
トークンの顧客ID = リクエストの顧客ID → 一致ならOK
結果
一致 → ポイント返却 / 不一致 → 403エラー、アクセス拒否
この仕組みがもたらす効果
顧客体験
- ページを開くだけで最新ポイントを確認
- 待ち時間は1秒以内で快適
- エラー時も適切なフィードバック
システム面
- 認証と認可を適切に分離
- エラー時も他機能に影響しない
- パフォーマンスの可視化と改善が可能