はじめに

この記事はアイスタイル 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を組み合わせた、リアルタイム売上可視化システムです。イベント中の売上状況をリアルタイムで把握し、視覚的な演出によってイベントの社内での盛り上がりに貢献しています。