社内エンジニア生産系可視化ツールで個人のメトリクスを見れるようにした話

こんにちは。
CTO室でインターンをしてるtakuanです。

今回は私たちが開発している社内のエンジニア生産性可視化ツール「Fadil」に個人のメトリクスを見れる機能を追加したので紹介したいと思います。

Fadilとは

FadilはMoney Forward社内のエンジニアの生産性を可視化することができるweb アプリケーションです。
詳しくはこちらの記事に書かれているので今回は省略します。

個人のメトリクスを可視化できるようにした背景

phase1 リリースで Repository ごとの Commit, Monthly Active Developers, Pull Request Countなどのメトリクスを表示する機能は実装しました。
fadilプロジェクトの定例ミーティングの中で「phase2では個人のメトリクスも見れるようになったら面白いね」という話が出たので実装することが決まりました。(fadil開発チームではこのような雰囲気で、比較的自由に機能追加などを決めることができます。)

(phase1 時点でのメトリクスの画面)

どのようにやるか

個人のメトリクスを表示するのに必要な機能は大きく分けて

  • 個人のメトリクスを集計する部分
  • ユーザーのGitHubユーザーネームを取得する部分

の2つに分けられます。

個人のメトリクスを集計する部分

既存の集計タスクには、Repository ごとのメトリクスと全社のメトリクスを主計するロジックしかないので個人のメトリクスを集計できるロジックを追加します。

個人のメトリクスとして表示させたいと考えたのは

  • Commit → commit 数
  • Issue → issue を open した数
  • Pull Request Count → Pull Request を出した数
  • Review → Review をした数

の4つです。(今後どんどん増やしていく予定です。)

上記をふまえて、DBの構成を修正しました。

(個人のメトリクスに対応したDB構成の一部)

集計タスクのコード

今までのメトリクスの集計ロジックはそれぞれのテーブルの repository_id を group メソッドで まとめて metrics テーブルに入れています。
個人のメトリクスを集計するときは repository_id でまとめていたところを author に変えることで集計できるようにしています。

以下に示しているのが個人 commit メトリクスの集計タスクです。

    def calc_individual_commits(from, to)
      indiv_commits = Commit.group("author", "date")
                            .where(date: from..to)
                            .count
      github_id_hash = indiv_commits.keys.each_with_object({}) do |key, h|
        v = h[key[0]] || {}
        v[key[1]] = indiv_commits[key]
        h[key[0]] = v
      end
      metrics = []
      github_id_hash.each do |github_id, h|
        (from..to).each do |date|
          LOG_INFO.info("METRICS: CALC INDIVIDUAL COMMITS --> Date: #{date}, Author :#{github_id}")
          metrics << {}.tap do |r|
            r["name"] = "indiv_commits"
            r["author"] = github_id
            r["date"] = date
            r["value"] = h[date] || 0
          end
        end
      end
      upsert_indiv_metrics(metrics)
    end

ユーザーのGitHubユーザーネームを取得する部分(GitHub認証)

クライアント側で個人のメトリクスを表示するにはユーザーそれぞれのGitHubユーザーネームが必要です。
GitHubとの認証は次ような流れで行うように決めました。

  • クライアント側からGitHub oauth アプリケーションの url に遷移する
  • GitHub側から code が返ってくる
  • クライアント側からサーバー側にパラメーターとしてGitHubから受け取った code を入れてPOSTリクエストを送る
  • クライアント側から受け取った code を access token と交換するためにサーバー側からGitHub API にPOST リクエストを送る
  • GitHub側から token を受け取る
  • header に 受け取った token を入れてサーバー側からGitHub API に GET リクエストを行う
  • userのデータを受け取る
  • クライアント側にuserのデータを返す

GitHub認証の実装

GitHub認証しているかしていないかの状態管理はCookieで行いました。
ボタンが押された際に確認を行なって、認証ページに遷移させるか、マイページに遷移させるかを判断しています。

<v-btn v-if="this.$cookies.get('github_id') == null || this.$cookies.get('github_id') == 'null'" text @click="github">
    <v-icon left dark>mdi-account</v-icon>
    My Page
</v-btn>
<v-btn v-else text>
    <nuxt-link
      class="remove-text-decoration black--text"
      :to="localePath({name: 'user-name', params: { name: this.$cookies.get('user_id') } })"
    >
        <v-icon left dark>mdi-account</v-icon>
        My Page
    </nuxt-link>
</v-btn>

まとめ

上で書いた実装の他に、エンドポイントを追加したりクライアント側でページを追加をして、実装は終わりです。
実際の個人のメトリクスを表示している画面は以下のようになっています。

今後は公開、非公開のオプションをつけて他の人のメトリクスを見れるようにしたり、社内のピアボーナスサービスと連携してFadilから送れるようにしたり… などの機能を追加して行けたらと思っています。


マネーフォワードでは、エンジニアを募集しています。
ご応募お待ちしています。

【サイトのご案内】
マネーフォワード採用サイト
Wantedly
京都開発拠点

【プロダクトのご紹介】
お金の見える化サービス 『マネーフォワード ME』 iPhone,iPad Android

ビジネス向けバックオフィス向け業務効率化ソリューション 『マネーフォワード クラウド』

おつり貯金アプリ 『しらたま』

お金の悩みを無料で相談 『マネーフォワード お金の相談』

だれでも貯まって増える お金の体質改善サービス 『マネーフォワード おかねせんせい』

金融商品の比較・申し込みサイト 『Money Forward Mall』

くらしの経済メディア 『MONEY PLUS』

Pocket