2024.08.29

GitHubのPRメンションをSlackに通知させる

こんにちは、5月にAITPにジョインしたキムと申します！

普段はTypeSciptを使ってフロントエンド、バックエンドの開発、保守を行っています。以前から興味のあった言語なので、日々難しいながら楽しく働いています！

AITPでは社内、チーム内のコミュニケーションにSlackを使っています。
チーム開発をしていく中で、GitHubでのメンション時の通知がSlackに来ると便利だよね、という話が上がり、その機能を実装してみました。

この記事でやること

本記事では、GitHubのpull request上で@をつけてメンションした際にslackにコメントを通知する処理について説明します。

1.対象slackチャンネルの追加とGitHub連携
2.SlackAPPの作成、チャンネルへのinstall、WebhoookURLの取得
3.GitHubの設定とファイル作成

の3つに分けて手順を書いていきます。
やることは多いですが、技術的に難しいものではないのでお役に立てれば幸いです！
※SlackやGitHubのUIはバージョンや時期により微妙に異なることがあるので、ご了承ください。

1.対象slackチャンネルの追加とGitHubの連携

1_1.チャンネルをslackで作る

Slackの「チャンネルを追加する」より、メッセージを流したいチャンネルを作成します。
※プライベートチャンネルでもokです！

1_2.対象のチャンネルにアプリを追加

チャンネル情報の隣の下向き矢印アイコンをクリックし、「インテグレーション」を選び、「アプリを追加する」をクリック。

1_3.GitHubを追加

アプリを追加する画面に遷移するので、GitHubを「追加」します。（画面は追加後の状態です）

2.SlackAPPの作成、インストール、Webhook URLの取得

2_1.アプリの作成

まずはアプリ管理のダッシュボードであるhttps://api.slack.com/apps にアクセスし、「Create New App」を選択し、「From scratch」を選択します。

「App Name」とSlackの「workspace」を選択し、「create app」で作成します。
※workspaceは、連携しているslackの部屋が自動で出てきます。

2_2.APPが行えるアクションを追加

続いて、サイドバーの「OAuth ＆ Permissions」を選択します。

下にスクロールし、「Add an OAuth Scope」をクリック。

権限一覧が表示されるので、「chat:write」と「channels:read」を追加します。

これで、このアプリはslackに対してチャットの書き込みや、チャンネルの読み込みができる権限が付与されました。他にも様々な権限がありますが、GitHub上のメンションをslackに通知を飛ばしたい場合はこれでokです。

2_3.slackワークスペースへのappインストール

サイドバーから「Basic Infomation」に戻り「Install your app」を選択し、「Request to install」を選びます。続いて画面の案内に従い、slackのワークスペースにアプリをインストールします。

☕️Request to Installからリクエストをすると、管理者にリクエストが飛ぶので承認いただく必要があります。許可されたらslack上で通知されます。
この場合、Basic infomationに戻り、改めて同じところからインストールしましょう。

インストールが完了したらサイドバーの「OAuth & Permissions」を選び、「OAuth Tokens for Your Workspace」にtokenが記述されていることを確認します。

2_4.Webhook URLを作成する。

続いてWebhookのURLを作成します。Webhook URLは、GitHubとの連携に必要です。サイドバーの「incoming Webhooks」を選択し、設定をONにします。

下にある「Request to Add New Webhook」を選択。

再度管理者にリクエスト通知が行きます。（Webhookの許可があらためて必要なようです。）管理者へのリクエストが許可されたら、投稿したいチャンネルを指定し、「許可する」をクリックします。

WebhookのURLができました！同じ画面の下にあるSample curl request to post to a channel のコードをターミナルで実行すると、「slackに疎通ができているか？」をcurlでテストできます。

ターミナルでこのコードを実行し、該当のslackチャンネルに以下の投稿がポストされているかを確認し、成功したら祝いのアイコンを押しましょう🎉

これで、slack appとslackが繋がりました！

☕ ちなみにデフォルトではappのアイコンは本のアイコンですが、Basic infomationの下部にある「Display Information」から、iconの変更が可能です。

3.GitHubの設定とファイル作成

続いてGitHub actionsを作成します。
slackにメンションを飛ばす「Github mention to Slack」というアプリがあるので、今回はこちらを使ってみます。

3_1.GitHubの対象リポジトリにWebhook urlを登録

GitHubの対象リポジトリの「setting」内の「secrets and variables」からActionsを選び「New repository secret」を選択。

「2_4」で取得した WebhookのurlをSLACK_WEBHOOK_URL_FOR_MENTIONというキー名で登録します。（名前が異なると動作しないのでご注意ください。）

3_2.ワークフローを記載したファイルをメインブランチに追加

以下の2つのファイルを、メインブランチに作成します。

「.github/mention-to-slack.yml」　・・・GitHubアクションのワークフローを記述する
「.github/workflows/mention-to-slack.yml」・・・対象者の名前を記述する

⚠️ これらのファイルは、基本的にメインブランチに存在しないとワークフローが走りません。（メインブランチがどこなのかは、 GitHubのsetting > Default branch で確認できます）
該当プロジェクトのメインブランチにファイル追加をしても問題ないか、事前に確認しておきましょう。

それでは、ファイルを編集していきましょう。

ファイル1：.github/workflows/mention-to-slack.yml

ワークフローを走らせるトリガーを「on:」に記載。トリガーが走った時に行う処理を「jobs:」に記載します。基本的にjobsは以下のコードのままで、 onの内容はトリガーを走らせたいタイミングに合わせて適宜調整します。「on:」の詳細タイミングなどはこちらを参照してください。

on:
  issues:
    types: [opened, edited]
  issue_comment:
    types: [created,edited]
  pull_request:
    types: [opened, edited, review_requested]
  pull_request_review:
    types: [submitted,created]
  pull_request_review_comment:
    types: [created, edited]

jobs:
  mention-to-slack:
    runs-on: ubuntu-latest
    steps:
      - name: Run
        uses: abeyuya/actions-mention-to-slack@v2
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          slack-webhook-url: ${{ secrets.SLACK_WEBHOOK_URL_FOR_MENTION }}
          icon-url: <https://img.icons8.com/color/256/000000/github-2.png>
          bot-name: "CLメンションお知らせbot"
          run-id: ${{ github.run_id }}

ファイル2：.github/mention-to-slack.yml

メンション対象の名前のマッピングファイルです。ここに記載した対象にmentionした時に通知がとびます。

git上のユーザー名は@を押して出てくる名前を反映させます。
slack上のユーザーIDは、対象アカウントの「プロフィールを表示」> 3点縦リーダーのアイコン > 「メンバーidをコピー」より取得可能です。

例えば、

GitHub上の名前が「@tarou」で、 slack上のメンバーIDが「U0123456ABC」
GitHub上の名前が「@hanako」で、 slack上のメンバーIDが「U9999999ABC」

の場合は以下のように記述します。

# For Github User
# github_username: "slack_member_id"

tarou:"U0123456ABC"
hanako:"U9999999ABC"

以上です！この変更内容をmainブランチにマージしましょう。

動作確認

実際に動作するかを試してみましょう。
Githubの該当リポジトリのいずれかのプルリクエスト（close済みのプルリクエストでも大丈夫です！）にコメントを追加し、その中で「@tarou」さんにメンションをしてみます。
スラック上に、そのメンションが反映されることを確認しましょう！

注意点（ハマったポイント）

もしうまくいかない場合（メンションしてもエラーがslackに通知される場合など）、以下を確認してみましょう。

作成したフォルダ名、ファイル名が正しいか
SLACK_WEBHOOK_URL_FOR_MENTIONなど、綴り間違い
メンバーIDやGitHubでのアカウント名は正しいか

自分は細かいファイル名などのスペルミス（正しくはworkflowsなのにworkflowというフォルダで作っていた）などでしばらくエラーにハマったりしていました。。

最後に

この機能実装後は、プルリクエストを見に行かなくても、普段基本的に開いているSlack上で開発中のコミュニケーションも目にすることができるようになったので、
「今xxさんがあの実装しているんだな、どんな感じになったのかな」
「このプルリクエストのコメントは気になる」
など、キャッチアップのフックにもなりやすく、チームの状況把握などがしやすくなったように思います。

あまりにメンションしすぎると通知が多くなりすぎるなど、ある程度チームでのルール作りも必要ですが、ご興味があれば是非試してみてください。

最後までお読みいただき、ありがとうございました！

All Blog