Microsoft 系のあれこれ

港区の SIer で よくわからんことをしている SE みたいな人です。Xamarin 中心です。

GitHubの組織へのメンバー変更をMicrosoft Teamsに通知する(by Microsoft Flow)

ちょっと手順が面倒だったのでまとめておきます。
GitHub の Organization で会社のソース管理諸々をしているのですが、メンバーの変更が流動的だったりで変更の内容を Microsoft Teams に通知したかったのです。
Microsoft Flow を使って連携します。
今回実現したいことは

  • GitHub の Organization にメンバーが招待された、削除された時に通知がしたい

です。

目次

Microsoft Teams にコネクタを追加する

まずは通知先の Teams のチャンネルにコネクタを追加します。
f:id:ShunsukeKawai:20180719191506p:plain
表示されたコネクタ一覧から Incoming Webhook を選択します。
f:id:ShunsukeKawai:20180719191648p:plain
適当な名前と画像を設定して作成すると URL が生成されるので、それを控えておきます。
f:id:ShunsukeKawai:20180719191954p:plain

Microsoft Flow にトリガーを追加する

トリガーの作成

今回はマッシュアップ的なサービスである Microsoft Flow を利用して連携します。
プロセスとタスクの自動化 | Microsoft Flow
様々なテンプレートが用意されていますが、新規作成します。(以下の URLから)
https://japan.flow.microsoft.com/manage/flows/new
トリガーとなるコネクタ一覧から「要求」というのを選択します。(もうちょっと名前どうにかならんのかな…)
f:id:ShunsukeKawai:20180719193024p:plain
表示されたトリガーから「要求 - HTTP 要求の受信時」というのを選択します。(もうちょっと名前どうにかならんのかな…2)
f:id:ShunsukeKawai:20180719193614p:plain
次の画面で「サンプルのペイロードを使用してスキーマを生成する」を選択します。
f:id:ShunsukeKawai:20180719194732p:plain
その画面のまま次の手順に進みます。

GitHub の Webhooks のペイロードからスキーマを設定

GitHub の Organization 関連の Webhook の内容は以下の GitHub 公式ドキュメントを参考にします。
https://developer.github.com/v3/activity/events/types/#organizationevent
そこの Webhook payload example に記載されてる JSON を丸ごとコピーします。
https://developer.github.com/v3/activity/events/types/#webhook-payload-example-17
この JSON からスキーマが作成され、後で作成するアクションに対して簡単に埋め込めるようになります。
※ 上記公式サンプルは action が member_invited の場合ではないので一旦コピーした JSON をなにかエディターに貼り付けて action と membership の間に以下の invitation 部分を追加します。

  "action": "member_added",

    "invitation": {
        "id": 999999,
        "node_id": "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
        "login": null,
        "email": "XXXXX@XXXX.co.jp",
        "role": "direct_member",
        "created_at": 9999999999,
        "inviter": {
            "login": "shunsuke-kawai",
            "id": 6369070,
            "node_id": "MDQ6VXNlcjYzNjkwNzA=",
            "avatar_url": "https://avatars2.githubusercontent.com/u/6369070?v=4",
            "gravatar_id": "",
            "url": "https://api.github.com/users/shunsuke-kawai",
            "html_url": "https://github.com/shunsuke-kawai",
            "followers_url": "https://api.github.com/users/shunsuke-kawai/followers",
            "following_url": "https://api.github.com/users/shunsuke-kawai/following{/other_user}",
            "gists_url": "https://api.github.com/users/shunsuke-kawai/gists{/gist_id}",
            "starred_url": "https://api.github.com/users/shunsuke-kawai/starred{/owner}{/repo}",
            "subscriptions_url": "https://api.github.com/users/shunsuke-kawai/subscriptions",
            "organizations_url": "https://api.github.com/users/shunsuke-kawai/orgs",
            "repos_url": "https://api.github.com/users/shunsuke-kawai/repos",
            "events_url": "https://api.github.com/users/shunsuke-kawai/events{/privacy}",
            "received_events_url": "https://api.github.com/users/shunsuke-kawai/received_events",
            "type": "User",
            "site_admin": false
        }
    },

   "membership": {
    …

編集した JSON を先ほどの Flow のページに貼り付けるとスキーマを作成してくれます。(左のメッセージは「わかりました」で OK です。)
f:id:ShunsukeKawai:20180719205121p:plain

Microsoft Flow に Teams に通知するアクションを追加する

アクションの作成

先ほど作成したトリガーの下に「新しいステップ」というのがあるので選択して「条件の追加」を選択します。
f:id:ShunsukeKawai:20180719205240p:plain
「値の選択」にフォーカスを当てると以下の画面が出てきます。先ほどの JSON から作成してくれたスキーマです。
f:id:ShunsukeKawai:20180719205351p:plain
今回は招待されたらという条件を追加したいので「action」を選択して、GitHub 公式ドキュメントにあった値である「member_invited」を設定します。
f:id:ShunsukeKawai:20180719205611p:plain
続いてその条件が True だった時に行うアクションを設定します。
f:id:ShunsukeKawai:20180719205628p:plain
アクションの追加から「HTTP」を選択します。
f:id:ShunsukeKawai:20180719205719p:plain
表示されたアクションから「HTTP - HTTP」を選択します。
方法に「POST」URI に Teams でコネクタを作成した時に生成された URL を設定します。
f:id:ShunsukeKawai:20180719210047p:plain

本文の設定

本文の設定内容については以下の記事を参考にさせていただきました。
Microsoft Flow を使って Microsoft Teams へ投稿する(続編) | idea.toString();
以下のような JSON に編集しました。後程設定するので value が空の箇所があります。

{
    "@@type": "MessageCard",
    "@@context": "http://schema.org/extensions",
    "themeColor": "ff4fbc",
    "summary": "概要",
    "sections": [
      {
        "activityTitle": "GitHubにメンバーが招待されました。",
        "facts": [
          {
            "name": "担当者",
            "value": ""
          },
          {
            "name": "追加メンバー",
            "value": ""
          }
        ],
        "markdown": true
      }
    ],
    "potentialAction": [
      {
        "@@type": "ActionCard",
        "name": "GitHub メンバー一覧",
        "actions": [
          {
            "@@type": "OpenUri",
            "name": "GitHub メンバー一覧",
            "targets": [
              {
                "os": "default",
                "uri": "https://github.com/orgs/JMASystems/people"
              }
            ]
          }
        ]
      }
    ]
  }

それを Flow の「本文」に貼り付けます。
担当者の value の値を選択した状態で(見えない箇所にありますが)右下に出てくる動的なコンテンツの「login」を選択します。
※ login が複数ありますが、選択して設定した後にマウスカーソルを当てると階層が表示されるのでそこで正しいかを確認してください。(ここは「triggerBody()?['sender']?['login']」となっていれば OK)
  面倒な場合は動的なコンテンツでなく、式のタブから直接「triggerBody()」を選択して階層を記載しても大丈夫です。
f:id:ShunsukeKawai:20180719223113p:plain
続いて追加メンバーも同じ様に value の値を選択した状態で「email」を選択します。
そうすると、招待をした人の GitHub アカウント ID、招待された人のメールアドレスが埋め込まれます。

削除時のアクションも追加する

先ほどは招待時だったので条件の「いいえの場合」にさらに条件を追加します。
f:id:ShunsukeKawai:20180719223724p:plain
条件は action が「member_removed」だったらです。
f:id:ShunsukeKawai:20180719223804p:plain
招待時と同じ様に、HTTP のアクションを追加して本文を加工します。
設定した内容は以下の通りです。削除された時は GitHub のアカウント ID が取れるのでそれを設定しています。

{
  "@@type": "MessageCard",
  "@@context": "http://schema.org/extensions",
  "themeColor": "bcff4f",
  "summary": "概要",
  "sections": [
    {
      "activityTitle": "GitHubからメンバーが削除されました。",
      "facts": [
        {
          "name": "担当者",
          "value": "@{triggerBody()?['sender']?['login']}"
        },
        {
          "name": "削除メンバー",
          "value": "@{triggerBody()?['membership']?['user']?['login']}:@{triggerBody()?['membership']?['user']?['html_url']}"
        }
      ],
      "markdown": true
    }
  ],
  "potentialAction": [
    {
      "@@type": "ActionCard",
      "name": "GitHub メンバー一覧",
      "actions": [
        {
          "@@type": "OpenUri",
          "name": "GitHub メンバー一覧",
          "targets": [
            {
              "os": "default",
              "uri": "https://github.com/orgs/JMASystems/people"
            }
          ]
        }
      ]
    }
  ]
}

ここまでで Flow の設定は終わりです。(今回は追加時にはなにもしないとしています。)
保存をするとトリガーとして作成した「HTTP 要求の受信時」の「HTTP POST の URL」の箇所に URL が生成されているのでコピーします。
f:id:ShunsukeKawai:20180719224824p:plain

Github に Webhooks を追加する

GitHub の Organization の Settings から「Webhooks」を選択します。
f:id:ShunsukeKawai:20180719224938p:plain
「Add webhook」を選択して、「Payload URL」に Flow で生成された URL を貼り付けます。
「Content type」は「application/json」を選択してください。
f:id:ShunsukeKawai:20180719225352p:plain
Which events would you like to trigger this webhook? のところで「Let me select individual events.」を選択します。
するとイベントが一覧で出てくるので今回は「Organizations」を選択します。
f:id:ShunsukeKawai:20180719225454p:plain
「Add webhook」ボタンを押して完了です。

動作確認

実際にメンバーを招待してみます。
すると Teams に通知が来ました!
f:id:ShunsukeKawai:20180719225829p:plain
削除してみます。同じ様に通知が来ます!
f:id:ShunsukeKawai:20180719225949p:plain

完成!

※ 同じユーザーを招待/削除を繰り返すと GitHub の招待 Webhook が飛ばないみたいです。うまく行かない場合は GitHub の Webhook の履歴、Flow の履歴を追ってみるとどこが動いてる/動いてないは分かると思います。