この投稿は、アイスタイル Advent Calendar 2021 の９日目の記事です。
はじめに
こんにちは。
アイスタイル21新卒エンジニアのshinohararです！
先日、年１回の大セール@cosme BEAUTY DAY 2021（以下「BD」）が行われました！
私は今年が初めての参加だったのですが、社内も大いに盛り上がり早くも来年が楽しみです！
そんなBDで毎年恒例となっているのが、売上金額を見守るための社内ツール「うりあげクン」です！
今年は私もこの「うりあげクン」の開発に参加させていただきました！
昨年から大きくアップデートして社内でもとても好評だったので、昨年までとの違いや開発の裏話ができたらと思います！！！
※ 記事中の数値はすべて仮の物で、実際の数値とは異なります
うりあげクンの構成
まず構成ですが初年度からあまり変更はなく、Kafkaに蓄積されていく売上のデータをバックエンド（Spring Boot）でデータベース（Firebase Realtime Database）に保存して、フロントエンド（Vue.js）で表示するといった仕組みです。
詳細は過去の記事で説明されていましたので、下のリンクからご覧ください！
▼ フロントエンド
新卒エンジニアが初めてのVue.jsとFirebaseで社内サイネージを作った話
▼ バックエンド
初めてのSpring BootとFirebaseで社内サイネージの裏側を作った話
昨年との違い
① 各々のPCから閲覧できるように！
上の記事をご覧いただければわかるように初代のうりあげクンは社内サイネージでの表示でした。
また、昨年は新型コロナウイルスの影響でBD期間中に出社することができなかったため、YouTubeや社内SNSでの配信を行っていました。
しかし、今年は社内ネットワークに接続した状態で各々のPCから閲覧することができるようにしました！！！
② ライブ視聴エリアの追加！
今年はBD開催期間中に「教えて！美容部員さん」と題して、お客様の買い物をサポートする生配信を合計20時間行いました。社外向けにも特設ページで配信していましたが、社内向けにはうりあげクン上で売上金額を確認しながらライブも楽しめるようになりました！
※ライブ配信時間になると「ライブ配信スケジュール」がライブ映像に切り替わりました
③ マイルストーンチャートを追加！
BDには日別の売上目標が設定されています。
今年はそれらの目標をマイルストーンとして示すことで、目標に対して今の進捗が一目でわかるようになりました！
目標を達成すると旗が立つアニメーションを追加して、達成する瞬間を楽しんでもらえるように工夫しました！
④ 盛り上がる演出を追加！
一定金額毎と目標達成時に、下の写真のような演出が出るようにしました！
お祭り感を出したかったので、紙吹雪を降らせたりテキストをアニメーションさせたりと考えられる全てを詰め込みました笑
（実は目標達成時の演出は当初実装しておらず、BD期間中に大急ぎで実装しました…w）
⑤ 動くミカエル！！！
@cosme公式キャラクター「ミカエル」が今年は動くようになりました！
マイルストーンチャート上で手を振っていたり、目標を達成したときに万歳して喜ぶミカエルは「可愛い」「癒される」と大好評でした！！！
社内の声
皆さんからたくさんのお礼やお褒めの言葉をいただきました！
- 「すごい。演出めっちゃアガる。ご対応された皆さまありがとうございます！」
- 「ミカエルがイキイキとお仕事していて嬉しいです！」
- 「ワクワク感を引き立てる楽しい演出、とても素敵です！GoodJob！」
- 「うりあげクン、細かな演出最高でした！」
- 「うりあげクン癒されて最高でした！！！！」
- 「うりあげクン見てるのが楽しいので本日仕事できません」
これを励みに来年はさらにパワーアップさせます！！！
最後までお読みいただきありがとうございました！
