はじめに
この記事は アイスタイル Advent Calendar 2025 13日目の記事です。
今年のうりあげクンを担当した25卒新卒のfukushirです。
本記事では、istyleが運営する@cosme BEAUTY DAY期間中に毎年社内で恒例の「うりあげクン」について紹介します。
うりあげクンの過去記事
2021年：
https://techblog.istyle.co.jp/archives/8571
2018年：
https://techblog.istyle.co.jp/archives/2714
https://techblog.istyle.co.jp/archives/1800
うりあげクンとは
うりあげクンは、@cosme BEAUTY DAY期間中のEC売上と店舗売上をリアルタイムで集計・可視化するシステムです。イベント中の売上達成状況をリアルタイムで把握し、社内のモチベーション向上やイベントの盛り上がりを演出する役割を担っています。
- EC売上（@cosme SHOPPING）のリアルタイム表示
- 店舗売上のリアルタイム表示
- 売上合計の表示
- 目標達成までのプログレスバー表示
- マイルストーン達成時のモーダル表示
- イベント終了までのカウントダウン表示
- ライブストリーミング連携
対象イベント
@cosme BEAUTY DAYは、年に一度開催される@cosmeの大規模セールイベントです。2025年は12月1日12:00から12月4日0:00まで開催されます。
技術スタック
フロントエンド
| 技術 | 用途 |
|---|---|
| Vue.js | UIフレームワーク |
| Vue Router | ルーティング |
| Firebase SDK | Realtime Database連携 |
| GSAP | アニメーション |
| moment.js | 日時処理 |
| vue-confetti | 達成時の演出 |
| Webpack | ビルドツール |
バックエンド
| 技術 | 用途 |
|---|---|
| Spring Boot | アプリケーションフレームワーク |
| Apache Kafka | メッセージキュー |
| Firebase Admin SDK | Realtime Database更新 |
| SQL Server | 店舗売上データソース |
インフラストラクチャ
| 技術 | 用途 |
|---|---|
| AWS | クラウドプラットフォーム |
| Terraform | インフラ構成管理 |
| CloudFront | CDN |
| S3 | 静的コンテンツホスティング |
| ELB | ロードバランサー |
| WAF | セキュリティ |
| Auto Scaling | スケーリング |
アーキテクチャ
データフロー
-
EC売上データ
- 決済システムからKafkaへメッセージを送信
- uriage-consumer（Spring Boot）がKafkaからメッセージを受信
- BEAUTY DAY期間内の決済かどうかを判定
- Firebase Realtime Databaseへ売上金額を加算
-
店舗売上データ
- SQL Serverから定期的にバッチ処理で取得
- Firebase Realtime Databaseへ更新
-
フロントエンド表示
- Firebase Realtime Databaseをリアルタイム監視
- 売上金額の変更を検知してUIを更新
- GSAPによるアニメーションで数値をスムーズに変化
主要コンポーネントについて
フロントエンド
Home.vue
メイン画面のコンポーネントです。Firebase Realtime Databaseから売上データをリアルタイムで取得し、各子コンポーネントに表示データを渡します。
主な機能:
- カウントダウンタイマーの管理
- マイルストーン達成判定
- モーダル表示制御
- 店舗売上の更新時刻監視
SalesCounter.vue
@cosme SHOPPINGのEC売上を表示するコンポーネントです。Firebase Realtime Databaseのsales/amountを監視し、GSAPを使用してスムーズなアニメーションで数値を更新します。
ProgressBar.vue
売上目標に対する達成度をプログレスバーで表示します。マイルストーンを設定し、各目標到達時に視覚的なフィードバックを提供します。目標を超えた場合は、プログレスバーの最大値を動的に拡張します。
バックエンド
主な処理:
- Kafkaメッセージの受信と変換
- BEAUTY DAY期間内の決済判定（2025/12/1 12:00 - 2025/12/4 0:00）
- 税抜き価格への変換（税率10%）
- Firebase Realtime Databaseへの売上加算
インフラ構成
Terraformを使用してAWSインフラを構成しています。
主要リソース
- VPC: ネットワーク分離
- CloudFront + S3: 静的コンテンツ配信
- ELB + Auto Scaling: バックエンドのスケーラビリティ
- WAF: セキュリティ保護
- ACM: SSL/TLS証明書
工夫しているポイント
リアルタイム性の確保
Firebase Realtime Databaseを採用することで、サーバーからのプッシュ通知によるリアルタイム更新を実現しています。ポーリングではなく、データ変更時に即座にクライアントへ通知されるため、低遅延での売上反映が可能です。
アニメーションによるUX向上
GSAPライブラリを使用して、売上金額の変更時にスムーズなアニメーションを適用しています。急激な数値変化ではなく、徐々に変化することで視覚的に追いやすい表示を実現しています。
マイルストーン達成の演出
vue-confettiを使用した紙吹雪演出と、モーダル表示によって、目標達成時の盛り上がりを演出しています。
トランザクション処理による整合性確保
Firebase Realtime Databaseのトランザクション機能を使用し、同時に複数の決済が発生した場合でも、売上金額の整合性を保証しています。
インフラのコード化
Terraformを使用してインフラをコード化することで、環境の再現性と変更管理を実現しています。
まとめ
うりあげクンは、Vue.js + Spring Boot + Firebase + Kafkaを組み合わせた、リアルタイム売上可視化システムです。イベント中の売上状況をリアルタイムで把握し、視覚的な演出によってイベントの社内での盛り上がりに貢献しています。