©MIXI TIPSTAR と Google Cloud 2023/2 ver1.0 ＴＩＰＳＴＡＲ開発部 システム１グループ リーダー 山谷 優介

©MIXI 自己紹介 山谷 優介 (Yusuke Yamatani) ニックネーム: kinpira ●株式会社 MIXI の TIPSTAR 開発部 にて システム1グループの サーバーチームのリーダーを しています ○ API開発やチームのマネジメントなどを行っています ●経歴 ○ 2011年に音響屋(PA) から アルバイトととしてエンジニアに転職、 ○ その後 ソーシャルゲーム会社のサーバーエンジニア、AIベンチャーでの経験を経て、ミクシィ （現 MIXI ）へ入社し、現在に至ります ●駆け出し時代について ○ エンジニア駆け出し当時に長男が産まれ、家族を養うために 昼はエンジニアのアルバイト、夜中 は飲食店でアルバイトを行いながら、ジリ貧生活のなかで「エンジニアに俺はなる！」という夢 を追っていました (笑)

©MIXI TIPSTARについて

©MIXI 競輪、オートレース、PIST6 (新しいスポーツエンターテイン メントとして誕生した自転車競技) へのネット投票を365日楽 しむことができるサービスです。 特徴として、投票に使える無料メダルが存在し、基本無料で車 券購入を楽しむ事ができます。 フレンド同士でコミュニケーションが取れるニュースフィード 機能があり、フレンドの予想した購入車券に のっかって購入 をする事ができます。 また、4人でマルチプレイを行う事ができ、一緒にワイワイと レース観戦をして楽しむ事ができます。 TIPSTARとは

©MIXI 各場の映像 AI による 映像編集 ユーザ・決済基盤 競輪 オートレース PIST6 認証・認可・決済 etc. レース情報取得・投票 ユーザ TIPSTARの仕組み

©MIXI TIPSTARの使用技術 Web TypeScript React Redux Next.js styled-components iOS Swift RxSwift RxFlow Analytics Google Analytics Looker Public Cloud AWS - Media Services Google Cloud - GKE - GAE - Cloud Spanner - Memorystore - Pub/Sub - Cloud Run - Cloud Functions - Cloud Storage - Cloud Logging - BigQuery Firebase - Authentication - Cloud Messaging - Remote Config - Firestore CI/CD CircleCI Bitrise Cloud Build Protocol gRPC FTP HTTPS IDL OpenAPI Protocol Buffers Android Kotlin Coroutines/Navigation Components MotionLayout ExoPlayer Go echo Ruby on Rails Server Unity Unity as a Library

©MIXI TIPSTARのアーキテクチャ Load Balancer Cloud Load Balancing TIPSTAR API Kubernetes Engine レース情報 API Kubernetes Engine レース情報取り込み Kubernetes Engine レース情報 API Kubernetes Engine Cloud Spanner Monitoring レース情報り込み Kubernetes Engine レース情報 API Kubernetes Engine Logging レース情報取り込み Kubernetes Engine Error Reporting Workers Kubernetes Engine Functions Cloud Functions webhook Cloud Run Messages Pub/Sub Resource Cloud Storage Scheduler Cloud Scheduler BigQuery Dataflow 外部サービス CircleCI GitHub アプリケーション　デプロイ 競輪 オートレース PIST6

©MIXI ニュースフィードへの 画像投稿機能についてご紹介

©MIXI ニュースフィードについて ベッティング情報を共有したり、気持ちをつぶやいたり、コメン トやいいねなどを行うことにより、ユーザー間でコミュニケー ションがとれる機能、それがニュースフィードです。 ＜ニュースフィードに表示されるアクティビティの種類＞ ・車券購入 (自分でベット・のっかりベット) ・車券公開 ・車券の的中 ・テキスト自由投稿 ・一般TIPSTARのお気に入り追加 ・いいね ※アクティビティとはニュースフィードに表示される投稿の事を指します

©MIXI 画像投稿について ニュースフィードでは、フレンドやお気に入りユーザーの投稿が常に表示され、簡単にユーザー間のコ ミュニケーションが行えますが、そこに新しいアクティビティとして、画像を自由に投稿できる機能を 1/25にリリースしました。 画像を投稿 この画像を 投稿しよう

©MIXI 画像投稿機能のアーキテクチャ

©MIXI 画像の保存期間について 今回 Cloud Strage に画像保存期間は設けていません 極力画像が表示されないような状態を防ぐために、削除を行わない方針が望ましいのですが、 画像の保存料金が積み重なることも危惧されるため、保存期間については当初議論されました。 しかし、Cloud Strage は保存料金自体は安く、試算した結果も危惧する金額ではなかったため、画像保 存期間を設ける必要はないと判断されました。

©MIXI 画像の容量について 画像を取り扱う場合に、他にも危惧されるのが画像容量でした。 画像容量削減のために、影響がない程度にできるだけ画像容量の削減を行う仕組みにしています。 仕様として、10M 以上の画像は投稿できないように容量制限を設けているのですが、 それだけでは無く、クライアント側で画像のクオリティを適度に下げてからアップロードするようにし ています。 さらに、サーバー側でも適宜、画像のクオリティを下げ画像の容量を削減するようにしています。

©MIXI 画像添付アクティビティの投稿の仕組み 1. 画像のアップロード 2. サムネイル画像の作成 3. 画像投稿アクティビティを保存

©MIXI オリジナル画像のアップロード ●サーバー負荷を軽減するため、画像アップロード用のエンドポイントは Cloud Run で用意 ●画像の拡張子の確認と画像サイズの確認などを実行 ●Cloud Run から Cloud Strage へアップロード ●Cloud Storage の pubsub 通知機能を使い、非同期でサムネイルを作成するworkerを起動

©MIXI サムネイル画像のアップロード ●pubsub メッセージを受け取り、サムネイル画像を作成する Worker が処理を開始 ●オリジナル画像をリサイズすることでサムネイル画像を作成 ●画像情報や作成状況のステータスなどを DB に保存 ●作成されたサムネイル画像をCloud Strage へアップロード

©MIXI 画像投稿アクティビティを保存 ●画像アップロード時にレスポンスで受け取った画像情報をPOST ●API は アクティビティの情報と共に画像に関する情報をDBへ保存

©MIXI 画像添付アクティビティの取得の仕組み 1. 画像投稿アクティビティを取得 2. 画像を取得

©MIXI 画像投稿アクティビティを取得 ●クライントは TIPSTAR API から画像を添付したアクティビティの情報を取得 ●APIはアクティビティに紐づいた画像情報をDBから取得 ●APIはアクティビティ情報と共に画像のURLをクライアントへ返す

©MIXI 取得したURLで画像を取得 ●アクティビティ情報に紐づいたURLから画像を取得 ●取得した画像をアクティビティ内に表示 ●アクティビティ表示にはサムネイルを使用し、プレビュー表示にオリジナル画像を取得 ●画像はクライアントでキャッシュをすることで取得頻度を軽減

©MIXI さいごに 冒頭でも紹介しましたが、 TIPSTAR はユーザー間のコミュニケーションを重視しており、みんなでワイ ワイとベッティングを楽しめるサービスを目指しています。 無料で遊べて、のっかりベットもできるため、初心者でも安心して楽しめるサービスになっています。 是非、みなさんにも遊んでいただければ幸いです。

©MIXI