Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TIPSTAR と Google Cloud
Search
MIXI ENGINEERS
PRO
February 16, 2023
Technology
2
120
TIPSTAR と Google Cloud
第18回酒とゲームとインフラとGCP
https://sake-game.connpass.com/event/273161/
にてお話した山谷の発表資料です。
MIXI ENGINEERS
PRO
February 16, 2023
Tweet
Share
More Decks by MIXI ENGINEERS
See All by MIXI ENGINEERS
【D2-5】MIXI SREの最新事例まるわかり! 〜 各事業のSRE活動にかかわるエンジニアに本音を聞く | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
3
85
【D2-7】共闘ことばRPG コトダマンの自律分散型QA組織 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
33
【D2-S1】MIXIオンプレミス設備のこれまでとこれから~そして印西へ~ | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
58
【D2-6】モンスト10周年における真獣神化実装担当者が10年分の形態変化の設計をイチから作り直した話 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
83
【D2-8】WordPressのヘッドレス運用化 〜minimo roomのJamstack構成移行プロジェクト〜 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
43
【D2-S2】Kotlin と Flutter を愛であう会 for Android開発 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
2
67
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
250
【D1-3】フィギュアスケートにおける自動追尾カメラ開発 - 位置情報+AI画像解析 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
310
【D1-6】netkeibaにおける機械学習を用いた競馬オッズ予測手法の開発とその変革 | #MTDC2024 | MIXI TECH DESIGN CONFERENCE 2024
mixi_engineers
PRO
1
300
Other Decks in Technology
See All in Technology
ルーターでプレゼンする
puhitaku
1
3.4k
データベース02: データベースの概念
trycycle
0
190
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
2023年度にEMとして頑張ったこと
ikefukurou777
0
110
Grafana x PagerDuty Better Together
jacopen
1
300
個人のAWSアカウントをマルチ運用してみた
miura55
2
200
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
2
530
認知症フレンドリーテックとスタックチャン
naokiuc
0
310
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
3
370
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.3k
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
160
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
238
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Visualization
eitanlees
137
14k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
How to Ace a Technical Interview
jacobian
273
22k
Designing with Data
zakiwarfel
96
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Become a Pro
speakerdeck
PRO
13
4.6k
Raft: Consensus for Rubyists
vanstee
133
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Transcript
©MIXI TIPSTAR と Google Cloud 2023/2 ver1.0 TIPSTAR開発部 システム1グループ リーダー
山谷 優介
©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