PLAIDEngineer Blog
エンジニア積極採用中

Mobile SDK発火のKARTEイベントをリアルタイムに閲覧する機能をハッカソンで１日で作った話

TomokiIchikawa

Posted on

はじめに

プレイドのApp Teamでエンジニアをしている市川です。

App Teamとは『KARTE for App』は分析から施策実行までをワンストップで提供し、モバイルアプリのエンゲージメントをより高めるためのプロダクトを提供するチームです。

今回はApp Teamのエンジニアだけで1日ハッカソンを開催し、KARTE for Appが提供するSDKから送信されるイベントデータをリアルタイムに近い速度で閲覧可能にする新機能を作りました！ 🥳

なぜハッカソン？

App Teamの開発は、「大きなIssue＝エピックでチーム対応、小さなIssue＝月1回のスプリントで個人ごとにIssueをアサイン」というスタイルで進めています。ただ、ちょうど中間レベルのIssueで「これがあったら便利だよね」と言われつつ、誰も手をつけられずにいたものが、なかなか実行に移されない課題がありました。そこで、チームビルディング観点も含めて「1日ハッカソンで一気に作ってしまおう！」というでハッカソンを決行しました 😎

当日の流れ

1日ハッカソンにはApp Teamのエンジニア4名、デザインエンジニア1名、そしてインターン生1名が参加しました。朝から集まって開発するというのは、なかなかない機会なので学園祭感で面白かったです！

9:00〜

  • ブリーフィングと質問対応
  • タスク分担やざっくり設計の打ち合わせ

12:00〜

  • ランチ（お弁当を食べながら雑談＆進捗共有）

16:30〜

  • Pull Request作成・レビュー・動作確認

18:00〜

  • チーム内でデモ共有
  • 「早く使いたい」というフィードバックに盛り上がるw

18:30

  • 解散

作成したかった機能

概要

  • KARTE for Appが提供するSDKから送信されるイベントデータを、ほぼリアルタイムでKARTE管理画面から閲覧できるようにする

制約

  • 従来の仕組みではイベントデータが送信されてから、KARTE管理画面で閲覧するまでに数秒遅延があるため別の仕組みを考える（詳しくは後述）
  • 社内検証から始めて、将来的にはクライアントにも提供する想定
  • 保守性・拡張性・セキュリティを担保した設計にすること

背景/課題

KARTE for Appの提供するSDKは、モバイル向けのネイティブアプリ上でのユーザー行動を計測したり、アプリ内メッセージやプッシュ通知でのアクションを行うことが可能にするものです。

実際にアプリを操作すると、そのイベントデータをKARTE管理画面で閲覧できますが、閲覧タイミングには数秒のラグが発生します。プレイドの強みでもあるリアルタイム解析基盤「Blitz」を通し、BigQueryに保存されたデータをKARTE管理画面で参照し表示しているためです。Blitzについて、詳しく知りたい方はこちらをご覧ください！
Blitz（後編）：リアルタイムユーザー解析エンジンを実現する技術 - 強整合な解析 -

実際の運用上、「イベントデータが正しく送信されているかをテストしたいだけ」の場面があり、その数秒が意外と煩わしいという声があがっていました。

成果物

  • 送信されたイベントデータを閲覧するための画面（React）
  • SDKから送信されるイベントデータを受け取るエンドポイントとロジック（express）
  • イベントデータを新しく作成したエンドポイントに送付するモジュールの作成（iOS/Android）

実装の仕組み

従来のフロー

スクリーンショット2025-02-269.56.02.png

従来は、SDKからのイベントデータが「Blitz」で解析され「BigQuery」に保存されてから、KARTE管理画面から参照しています。数秒の遅延が発生する原因でした。

新しく作成したフロー

スクリーンショット2025-02-269.56.20.png

工夫した点

  • 「SSE（Server-Sent Events）」を使い、サーバーがイベントを受け取ったタイミングでフロントエンドに即通知する設計を採用した
  • 「KARTE」はマイクロサービスアーキテクチャを採用しており、イベントデータ受信用サービスとKARTE管理画面は別サービスになっている
    • ここを「Redis」のPub/Sub機能で接続して、リアルタイム通知を実現した
  • クライアントの本番環境には要らない機能なので、コアのSDKのモジュール群とは別のモジュールとして開発し、コア側はイベントビューワーのモジュールを「知らない」状態を実現した
  • フロントエンド側は、弊社デザインシステムSourのReactJS用ライブラリである「sour-react」を使うことで、フロントエンジニアだけで綺麗なUIを実現した

デモ

今回開発したUIでは、アプリ操作（ボタンクリックなど）からリアルタイムにイベントデータがKARTE管理画面で表示され、イベントデータをその場で確認できます。
ScreenRecording.gif

従来の画面（数秒の遅延があるため、テスト時には待ち時間が発生していました）

スクリーンショット2025-02-0619.30.46.png

この機能によって「誤ったフィールドを送っている」「イベント自体が飛んでいない」といったミスを即座に発見できるようになりました！この改善によってデバッグやテスト作業が劇的に楽になり、チーム内外のメンバーから「便利になった」と好評です！

まとめ

1日ハッカソンという短い時間でしたが、集中力とモチベーションを高められたのも大きな成果です。実際にメンバーからは「丸一日コードに没頭できて最高」「少し重いなと思っていたIssueも意外と完成できた」といった声があがりました。

App Teamでは、クライアントSDKの開発と運用からKARTE管理画面の開発をしています。スタートアップからメガバンクまで、幅広いクライアントが利用できるマーケティング機能を提供するSDKを開発し、日々数千万人を超えるエンドユーザーへの価値提供ができる環境です。
興味がある方は採用ページをご覧ください。お待ちしております！