GitHub Copilotの利用状況を可視化しよう🚀copilot-metrics-viewerでお手軽可視化！(ローカル環境編)

# はじめに
スクラムマスター/エンジニアの三宅(@jnymyk)です。
生成AIプロダクトの企画・開発とりまとめをしています。
縁があって社内のGitHub Enterpriseの管理者を6年間ほど担当していました。その流れで現在も開発生産性や開発者体験に強い関心があります。
そんな私は、GitHub Copilotが登場してすぐ飛びつきまして、その後自社内でどのように活用されているのか？について、以前こんな記事を書きました。

https://developers.kddi.com/blog/70lix5UbfLU0k0AnJq5JzY

これが1年前くらいの記事だったのでそろそろ今のGitHub Copilotの利用状況が知りたいなーと思い、改めてデータの取得や可視化の方法をまとめてみました。

# 結論
GitHub Metric APIでGitHub Copilotの利用状況データが取得できます👍
copilot-metrics-viewerで手軽に可視化できます🚀

![スクリーンショット 2024-12-12 3.31.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/0d73220a-2077-7632-0f4c-1d06a5caef3d.png)


# 背景

これまで、GitHub Copilotの利用状況データを取得するにはGitHubの営業の方に依頼して統計情報データのグラフを共有いただいていました。

外部に依頼することから自分の任意のタイミングでデータを取得できない課題がありました。
そんな中、2024/4についにGitHub.comからCopilotの利用状況データを取得できるAPIがパブリックプレビューになりました🎉

https://github.blog/changelog/2024-04-23-github-copilot-metrics-api-now-available-in-public-beta/

# GitHub Copilot Metrics APIとは？

## できること
* 日毎のGitHub Copilot使用状況のメトリクス取得: 各ユーザーのCopilot利用状況を日ごとに集計し、提案数、受け入れ数、アクティブユーザー数などの詳細を取得可能。

* エディタおよび言語別の内訳: 使用されているエディタ（例: VSCode、JetBrains）やプログラミング言語（例: Python、JavaScript）ごとに、提案数や受け入れ数の内訳の詳細を取得可能。

* 最大28日間のデータを取得: 最大で過去28日間のGitHub Copilot使用状況のデータを取得可能で、データは毎日更新され、前日までの情報を取得可能。

## 制約・注意点
* 2024/12時点でプレビュー版であること: Public previewであり、将来的に変更される可能性あり。

* API実行に必要な権限: Enterpriseの所有者や課金管理者のみが、EnterpriseレベルのCopilot使用状況メトリクスを取得可能。

* タイムゾーン: APIレスポンスの時間はUTCで表示されること。

## API仕様
取得できる情報のレベルに応じて3つのAPIが提供されています。
### 1. EnterpriseレベルのCopilotメトリクス取得
エンドポイント
```
GET /enterprises/{enterprise}/copilot/usage
```
実行例
```
curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/enterprises/ENTERPRISE/copilot/metrics
```

### 2. OrganizationレベルのCopilotメトリクスを取得
エンドポイント
```
GET /orgs/{org}/copilot/usage
```
実行例
```
curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/orgs/ORG/copilot/metrics
```

### 3. TeamレベルのCopilotメトリクスを取得
エンドポイント
```
GET /teams/{team_id}/copilot/usage
```
実行例
```
curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/orgs/ORG/team/TEAM_SLUG/copilot/metrics
```

## APIをたたいてみた
まずはEnterpriseレベルで情報を取得すべくAPIを叩いてみました。
```
% curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <MY-TOKEN>"" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/enterprises/{my-enterprise}/copilot/usage
[
  {
    "day": "2024-11-07",
    "total_suggestions_count": 18055,
    "total_acceptances_count": 5711,
    "total_lines_suggested": 34222,
    "total_lines_accepted": 6679,
    "total_active_users": 161,
    "total_chat_acceptances": 176,
    "total_chat_turns": 1441,
    "total_active_chat_users": 105,
    "breakdown": [
      {
        "language": "javascriptreact",
        "editor": "vscode",
        "suggestions_count": 56,
        "acceptances_count": 19,
        "lines_suggested": 83,
        "lines_accepted": 15,
        "active_users": 2
      },
      {
        "language": "typescriptreact",
        "editor": "vscode",
        "suggestions_count": 2808,
        "acceptances_count": 916,
        "lines_suggested": 4249,
        "lines_accepted": 797,
        "active_users": 45
      },
=========途中省略。私たちの環境では合計で25言語分あり。=========
      {
        "language": "yaml",
        "editor": "jetbrains",
        "suggestions_count": 95,
        "acceptances_count": 26,
        "lines_suggested": 297,
        "lines_accepted": 28,
        "active_users": 4
      },
      {
        "language": "unknown",
        "editor": "vim",
        "suggestions_count": 32,
        "acceptances_count": 6,
        "lines_suggested": 137,
        "lines_accepted": 14,
        "active_users": 2
      }
    ]
  },
=========以下これが過去27日分続くため省略=========
```
日ごとに言語・エディタごとの詳細データが取得できる一方で、私の環境ではレスポンス全体で2万行超の情報が返ってきました。シンプルに見るのがしんどい😭
ということで、さくっとお手軽に可視化できるOSSを使ってみます！

## copilot-metrics-viewerを使ってみる

### 設定
まずは
.envに以下環境変数を設定

```
# Determines if mocked data should be used instead of making API calls.
# モックデータではなく実際のメトリクスデータを利用するためfalseを設定
VUE_APP_MOCKED_DATA=false

# Determines the scope of the API calls. 
# Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
# 今回は自社の全体感を把握したいためenterpriseを設定
VUE_APP_SCOPE=enterprise

# Determines the enterprise or organization name to target API calls.
# 今回はEnterpriseスコープで利用するため設定不要
VUE_APP_GITHUB_ORG=

# 自社のenterprise名を設定
VUE_APP_GITHUB_ENT=<enterprise-name>

# Determines the team name if exists to target API calls.
# 今回はざっくり全体を把握したいため設定不要
VUE_APP_GITHUB_TEAM=

# Determines the GitHub Personal Access Token to use for API calls.
# Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
# EnterpriseのOwner権限を持つGitHubユーザーでPATを作成して設定
VUE_APP_GITHUB_TOKEN=<PAT>

# GitHub Api Url
# for proxy api - set to /api/github defaults to https://api.github.com
# まずはAPI Proxyなしで動かしてみるため不要
VUE_APP_GITHUB_API=
```
.envの設定ができたら以下を実行

依存関係のインストール
```
npm install
```
コンパイルしてアプリを実行
```
npm run serve
・
・
（途中省略）
・
・
App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.241.0.144:8080/
```

`http://localhost:8080/` もしくは `http://10.241.0.144:8080/` にブラウザからアクセス

はい！出来上がり！
超絶お手軽にダッシュボードで可視化ができました🚀

![スクリーンショット 2024-12-12 3.31.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536303/0d73220a-2077-7632-0f4c-1d06a5caef3d.png)

# まとめ
* GitHub Metric APIでGitHub Copilotの利用状況データが取得できます👍
  - ただし、APIレスポンスそのままだと非常に見づらいです🤮
* copilot-metrics-viewerで手軽に可視化できます🚀


# 今後に向けて
今回はまずはお手軽に可視化してみようとテーマにローカル環境で実施ました。
次はセキュアに組織内で共有できるように以下を対応してみます。
* API ProxyでGitHubのPersonal Access Tokenを隠蔽
* AWS上にデプロイ

次回、『セキュアにGitHub Copilotの利用状況を可視化しよう🚀copilot-metrics-viewerでお手軽可視化！(API Proxy・AWSデプロイ編)』に続きます！

また、可視化した内容からKAGのGitHub Copilot活用状況2024年版も別途記事化予定です。


# 参考資料
* REST API endpoints for GitHub Copilot usage metrics
  * https://docs.github.com/en/enterprise-cloud@latest/rest/copilot/copilot-metrics?apiVersion=2022-11-28
* github-copilot-resources/copilot-metrics-viewer
  * https://github.com/github-copilot-resources/copilot-metrics-viewer