Ken Games
Ken Games
HOMEBLOGCONTACTDONATION

BigQueryとCloudflareでイベントを可視化する話


BigQueryとCloudflare Workerを活用し、イベントデータを収集・分析・可視化しました。

今回のシステム構成図(アプリ側は未完成:2025/01/17時点)

はじめに

既存の野球アプリの大きめのアップデートを加えるために、バックエンド側を構築しています。現在バックエンドを作り途中です。

実は先日、高校野球の応援歌アプリを出しまして、これの大型アップデートも兼ねています。

高校野球応援歌のダウンロードはこちら

IOS

https://apps.apple.com/jp/app/高校野球-応援歌/id6740153616

Android

https://play.google.com/store/apps/details?id=com.hbsound

今回のアプデ内容

主にどんな応援歌が人気あるかみたいなものをアプリ側で計測&可視化させて、応援してる感じをインタラクティブに表示させようとするものです。

上記の図の数字で言うと4番目くらいまで終わっていて、バックエンドのテストと、あとは5番のアプリクライアント側のみの実装です。

何をしてるのかの解説

  • Firebase Analytics
    1. Eventデータを蓄積させる
    2. BigQueryと連携
  • BigQuery
    1. サービスアカウントを作成&ジョブ権限付与
    2. 実行クエリデモの試作
    3. 個別プロジェクトのテーブルにサービスアカウントと閲覧権限を付与
  • Cloudflare Woker
    1. 定期実行させるプログラムを作成
    2. BigQueryへクエリリクエストを作成
    3. APIへKVの書き込み(PUT)リクエストを作成
  • API(NextJS)
    1. EventデータをPUTするエンドポイントを作成
    2. GETでデータを閲覧する用のエンドポイントを作成
  • Cloudflare KV
    1. Eventデータをキャッシュキーで保存させる
  • ReactNative
    1. GETエンドポイントを叩いてアプリ側で応援してるデータを閲覧する
  • ざっくりこんな感じの機能を作っています。

    AWS使うと金額がとんでもなくかかりますが、Cloudflareを使うと金額を相当押さえ込むことができます。

    つくりたいシステムの設計上、書き込みや個人のインタラクティブ要素を省いてしまえばかなりコスパの良い実装が行えます。

    シンプルにKVベースなので読み込み速度が爆速なのが嬉しいです。

    自分のシステムは完全にユーザー認証や、漏洩したら問題ありそうなデータの収集を省いているのでこうゆうことができます。

    ReactNativeとCloudFlare、BigQuery、Firebaseの連携がスムーズでとても作って楽しいです。また設計から色々練っていけば面白いものが作れそうだなと思いました。


    ブログトップへ戻る