オンライン家庭教師サービス初の機能！アナリティクス機能開発ストーリー

5月も後半に差し掛かりましたね！NoSchoolは5月10日にオフィスのお引越しをしまして、新しいオフィスでスタッフ一同ルンルンです。

今回は今月初旬リリースされた「アナリティクス機能」に関して、CTOの名人さんに突撃インタビューしました！

今回の開発の山場や工夫点、今後の改善につなげたい点など語っていただきました！

NoSchoolではエンジニア採用も積極的に行っているので、興味ある方は「話を聞きに行きたい」からご連絡ください！

-今回も名人さんにお話を伺います！今回リリースした機能の内容を簡単に教えて下さい！

先生が自分のプロフィールや自分が作成した指導コース画面のアクセス数などを期間別に確認できる機能をリリースしました！

期間は週・月・全期間から選択できて、前後に移動できます。過去に遡ることができるので、先生が指導コースやプロフィールを更新して、どういう結果につながったかわかることができます。閲覧どれぐらいされたのかとか、どれぐらい検討リストに入れてもらえたのか...結果どれぐらい授業を受講したいなどの問い合わせが来たかなど。

また、Web経由のアクセスについてはRefererが取れるのでアクセス元の比率が分かる円グラフもあります。マナリンクはアプリも提供してますが、アプリの画面からのアクセスも収集できます。

-おー！これは先生方の改善などに役立ちそうですね！インタビューを読んでいただいている向けに実際に画像で見せていただけますか？

先生方が実際に見る画面になります。画面最上部で週・月・全期間を切り替えできます。切り替えるとその下に表示されている日付の期間が変わる仕様になっています。

ちなみにリリース日が2023年5月なので、5月以前には遡ることができないようになっています。

‐開発を始める前に、技術的に一番ネックだと思ったことはなんですか？

そうですね...挙げるとすれば3点でしょうか。

そもそもアクセスログをWeb・アプリからどうやって収集するか
収集したアクセスログを期間別に予め集計しておく処理をどう設計するか
最終的に画面上に表示するときの円グラフやテーブルといったUIの組み方

‐今挙げていただいた、「技術的に一番ネックだったこと」は開発を初める前と開始後でGAPはありましたか？

ありましたね。

アクセスログの収集処理をGoogle Analyticsに頼らずに内製することにしたが、考慮することが多く大変でした。

頼らなかった理由はWebとアプリ双方でアクセス数を収集するのでGoogle Analyticsでスムーズに集計する方法がわからなかったというのと、全先生の全コースという大量のページに対して期間別にアクセス数を一気に取得するようなクエリをReporting API等で発行することができるのか不明だったためです。もしかしたらなにか方法があったのかもしれませんが...

自前ならRDBに突っ込めるので自在にクエリ可能・アクセスログの記録処理自体を高負荷になりうる設計で実装すると、アクセス数がスパイクしたときにDB等が高負荷になるおそれがあるので、詳しくは割愛しますがFluentdを使ってアクセスログを収集しS3に吐き出して、集計時にAthenaでクエリして最終的にバックエンドのRDBMSに集計結果を日次で入れておくように組むことで、高負荷時の影響を限定的にする工夫をしました。このへんは結構たいへんでした。業務委託のエンジニアさんに多くを手伝っていただきました。感謝です。

‐今回の開発の山場はどのポイントになりますか？

先ほどお話したものも含みますが、3つぐらい山場はあったと思います。

そもそもアクセスログをWeb・アプリからどうやって収集するか
収集したアクセスログを期間別に集計するSQL 1ページ内にそれなりに多くのデータをクエリして表示するので、SQLのパフォーマンスにも気を払いつつ、各データフェッチ処理を関数に切り出して単体テストで動作保証しつつ、最後に組み合わせるというのをLaravelのEloquentを使って組み上げました。
最終的に画面上に表示するときの円グラフやテーブルといったUIの組み方 @tanstack/react-tableというReactでヘッドレスな表を組めるライブラリを使ったのですが、個人開発で予習していたのでコピペで動かすことができてこの辺で見積もりをガツッと巻けました。円グラフのライブラリもすぐに見つかったので、「Reactを採用していてよかった！」という瞬間でした。