GitHub と連携して Confluence でプルリクを一覧する

Atlassian Confluence は、とても優れた UI により、
非常にドキュメント作成の捗る Wiki ツールなわけですが、
これにいろいろなものをインテグレートすると、さらに捗るので、
今回は Github を連携してみようと思います。

やりたいことは以下。

* Confluence 上で、対象プロジェクトの Open な PullRequest を一覧したい。

# 環境

* Atlassian Confluence 5.8.10
* Github API v3

# 準備

今回の目的を果たすために必要な物がいくらかあるため、これを入手します。
以下を集めます。

* Github Personal access tokens
* 対象リポジトリの属している、ユーザー名、または Organization 名
* 対象リポジトリの名前

## Github Personal access tokens

アクセストークンは、以下のように画面右上の [プロフィールアイコン] > [Settings]。

<img width="192" alt="スクリーンショット 2016-04-25 21.04.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/a41a0a53-60f5-8d9d-aea7-f35945a0d386.png">

[サイドバー] > [Personal access tokens]。

<img width="244" alt="スクリーンショット 2016-04-25 21.04.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/1e216b1b-6986-02ce-8e45-b89046cde888.png">

[Generate new token] ボタン、と たどっていくと作成できます。

<img width="211" alt="スクリーンショット 2016-04-25 21.05.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/1912fa9d-fdaa-e816-ed05-07a9329f6457.png">

設定する権限は `public_repo` のみで大丈夫です。
[Token description] は適宜、わかりやすいものを設定してください。
画面下部の [Generate token] ボタンからトークンの作成ができます。

この後、画面に表示されるトークンは、必ずその場で控えて下さい。

<img width="762" alt="スクリーンショット 2016-04-25 20.42.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/d4de3777-a6d5-1b8c-2812-b834913c0d48.png">

## ユーザー名、Oraganization 名、リポジトリ名

プルリクエストを取得したいリポジトリの URL から、
それぞれ以下の部分を控えておきます。

<img width="506" alt="スクリーンショット 2016-04-25 21.11.37_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/834549d6-317b-1814-f642-e79a3a6486ae.png">

以上で事前準備は完了です。

# 連携

Confluence には、もとより `AJS` という、
jQuery をラップしたライブラリが組み込まれています。

基本的には、これを使用すれば、Ajax リクエストだろうとなんだろうと、
jQuery でできることは、ほとんどできてしまいます。

というわけで、さっそくスクリプトを組んでみましょう。
今回の機能を実現するには、Confluence の HTML マクロというものを使用します。
以下のようなやつですね。

<img width="318" alt="スクリーンショット 2016-04-25 20.55.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/efca797e-0d1b-f175-e11e-36c00de0d330.png">

<img width="310" alt="スクリーンショット 2016-04-25 21.01.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/ca8c9ab9-1bbf-4194-f010-ad3e415ad8d6.png">

この、HTML という枠の中に以下のスクリプトを記述していきます。
そのままコピペで大丈夫ですが、`TODO: 要変更` とコメントされている行のみ、
環境に合わせて、先の手順で準備した値に適宜変更して下さい。

```html
<table id="github-pulls2" class="aui">
<tbody>
  <tr>
    <th style="text-align: left; text-transform: capitalize;"><span class="jim-table-header-content">PR</span></th>
    <th style="text-align: left; text-transform: capitalize;"><span class="jim-table-header-content">ユーザー</span></th>
    <th style="text-align: left; text-transform: capitalize;"><span class="jim-table-header-content">タイトル</span></th>
  </tr>
</tbody>
</table>
<script type="text/javascript">
(function() {
  var githubToken = "Github Personal access tokens";                         // TODO: 要変更
  var ownerOrOrg = "対象リポジトリの属している、ユーザー名、または Organization 名";  // TODO: 要変更
  var repos = "対象リポジトリの名前";                                           // TODO: 要変更
  var requestUrl = "https://api.github.com/repos/" + ownerOrOrg + "/" + repos +
          "/pulls?access_token=" + githubToken;

  AJS.$.ajax({
    url: requestUrl,
    type: "GET",
    dataType: "json",
    success: function(items) {
      var $tbody = $("#github-pulls2 tbody");
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var $tr = $('<tr class="rowNormal"></tr>');
        var $tdNum = $('<td nowrap="true"></td>');
        var $tdUser = $('<td nowrap="true"></td>');
        var $tdTitle = $('<td nowrap="true"></td>');
        var $aNum = $('<a></a>');

        $aNum.append('PR-' + item.number);
        $aNum.attr("href", item.html_url);
        $tdNum.append($aNum);
        $tdUser.append(item.user.login);
        $tdTitle.append(item.title);
        $tr.append($tdNum);
        $tr.append($tdUser);
        $tr.append($tdTitle);
        $tbody.append($tr);
      }
    }
  });
})();
</script>
```

保存して、ページを確認してみます。

<img width="1073" alt="conflu-github-integration.png" src="https://qiita-image-store.s3.amazonaws.com/0/47993/81c0aa33-f2ce-7c05-7814-40571b596bb2.png">

プルリクエスト番号、作成ユーザー、タイトルが一覧表示されました！
プルリクエスト番号には、該当のプルリクエストへのリンク付きです。

Confluence に、製品ドキュメント、製品課題 (JIRA)、製品の製造状況 (PullRequest) が
集約されることで、プロジェクトの状態は非常に見通しが良くなり、
チームが今何をしているのか、次に何をすべきなのかが、
いつでも簡単に把握できるようになるので、とてもおすすめです！