Python初心者がdjangoでGitlab上のレビューコメント一覧を作ってみた

# はじめに
今のお仕事では、社内（グループ内）にGitlabを内包したOSSツールセットを推進したり、技術支援したりしています。
そのなかでGitlabの「MergeRequest」（GithubのPullRequest相当）を用いたソースコードレビューについて説明したりするのですが、SierなSEさんからは「レビュー記録票とか作れないのか？」とか「レビューの品質記録をいい感じに出力できないか」というような質問を頂きます。

で、実際のところGitlabのWebAPIを使ってどこまでできそうかちょっとやってみようと思いました。

# やりたいこと
* Gitlab(CE)のMergeRequest内に挙げられたソースコードへの指摘（コメント）や、指摘を契機に行われたやり取りをプロジェクトごとにリストアップするWebアプリを作る。
* WebAPIですんなりできることに画面をつけるだけなので難易度は低め。なので、お勉強かねてPython/djangoを使ってみる。

# 構成
* Python 3.7.1
* django 2.1.4
* GitlabCE 11.0.5

# Gitlab(CE)のWebAPIを調べる
Gitlab Docsにて公開されている[APIリファレンス](https://docs.gitlab.com/ce/api/)から、今回の要件にあうAPIを探します。
仕様については上記HPを含め、ググればよいのですが実際にWebAPIを叩ける環境がある場合は、Chromeの拡張機能[Restlet Client](https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagimdiliamlcdmfm?hl=ja)を用いて実際にWebAPIを実行するとよいです。

* [プロジェクト情報にアクセスするAPI](https://docs.gitlab.com/ce/api/projects.html)
  プロジェクトごとに表示したいので、先に「プロジェクト一覧」が欲しいです。
　[このAPI](https://docs.gitlab.com/ce/api/projects.html#list-all-projects)で「認証されたユーザのために、GitLabのすべての可視プロジェクトのリストを取得」できそうです。
  なお、ここでいう「認証されたユーザ」は、対象のGitlabから[Personal access tokens](https://docs.gitlab.com/ce/user/profile/personal_access_tokens.html)を発行する際に使用したユーザアカウントになります。
  今回使用するWebAPIは[ここ](https://docs.gitlab.com/ce/api/#personal-access-tokens)にあるように、Header内のPrivate-TokenにこのPersonal acces tokenを指定してアクセスします。

* [コメント情報（Notes）にアクセスするAPI](https://docs.gitlab.com/ce/api/notes.html)
  Issue,Snipets,MergeRequestごとの、コメント（Notes）にアクセスするAPIです。  
  最初はこれ使えばよいかな、と思ったのですがどうもこのAPIではコメントが単品でしか取得できず、コメント間の関係性がわからない模様。つまり、複数コメントのやり取り（レビュー指摘に対する回答や反論など）がうまく拾えなさそう。

* [ディスカッション情報にアクセスするAPI](https://docs.gitlab.com/ce/api/discussions.html)
  ちょうど良さそうなの見つけましたよ。
  この中に[MergeRequest内のディスカッション一覧](https://docs.gitlab.com/ce/api/discussions.html#list-project-merge-request-discussions)を取得できるAPIがありました。まさに求めていたやつ。

で、最終的に以下のAPIを使ってアプリ作ろうと思います。

* プロジェクト一覧を取得  
  `http://{GitlabのURL(FQDN)}/api/v4/projects?per_page=100&membership=true&simple=true`
* 任意のプロジェクトのMergeRequest一覧を取得  
  `http://{GitlabのURL(FQDN)}/api/v4/projects/{プロジェクトID}/merge_requests`
* 任意のプロジェクトの任意のMergeRequestのディスカッション一覧を取得  
  `http://{GitlabのURL(FQDN)}/api/v4/projects/{プロジェクトID}/merge_requests/{マージリクエストID}/discussions`

# djangoの環境を準備
この辺は先人の知恵を拝借したので、参考にさせて頂いたブログ記事へのリンクを張っておきます。
[Djangoを最速でマスターする part1 \- Qiita](https://qiita.com/gragragrao/items/373057783ba8856124f3)

また、pipenvを用いた環境を使ったので、その参考URLも。
[Pipenvと仮想環境](https://pipenv-ja.readthedocs.io/ja/translate-ja/install.html#installing-pipenv)

# djangoでWebアプリを作る
全体像としてはこんな感じです。
![reviewapp.png](https://qiita-image-store.s3.amazonaws.com/0/328233/53904df9-0323-3a42-de58-2b6c03b20f1a.png)


ソースコードを[ここ](https://github.com/mscytk/reviewlist)にあげておくので、細かいところは見て頂いたほうがよいかと。
本稿ではポイントっぽい個所をいくつかご紹介します。

## 実装の大半は view.py 
ポイントというか、djangoの基本というか・・・
リクエストのパラメタを受領・解析したり、バックエンド処理（今回の場合GitlabのWebAPIを呼び出す）を書いたり、レスポンス用のデータを編集したりするのはここでやってます。
で、メインのお話である使用しているGitlab WebAPIの話はもう書いてしまったので・・・・これ以上書くことがない・・・＾＾；；；

## 初期画面はフォームを使ってみた
入力画面の実装例を探していたらたまたまたどり着いたのがこれだったので・・・（＾＾；
参考にしたぺーじ：[Djangoフォームを使ってみよう](https://eiry.bitbucket.io/tutorials/tutorial/forms.html#django)

## models.py は今回未使用
ただ、GitLabURLとアクセストークンをアプリ内で保持するためにセッションを使ったので、データベース（djangoデフォルトのsqlite3）は用意しています。
参考にしたぺーじ：[Djangoでセッションを使用する](http://python.zombie-hunting-club.com/entry/2017/11/06/222409)

実際にやったのは、[こちら](http://python.zombie-hunting-club.com/entry/2017/11/06/222409#4-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E6%9C%89%E5%8A%B9%E8%A8%AD%E5%AE%9A)を参考に `python manage.py migrate` を叩いただけですが。

# 実行方法
前提として、Python3.7.1とpipenv(version 2018.11.26)をセットアップしてください。

1. [ここ](https://github.com/mscytk/reviewlist)のGitリポジトリをクローンします。
2. Pipfileがある場所で`pipenv install`を実行
3. Pipfileがある場所で`pipenv shell`を実行
4. `python manage.py migrate`を実行
5. `cd review_pj`したのち`python manage.py runserver`を実行
6. ブラウザから`http://localhosts:8000/review`にアクセス！

・・・で行けると思うのですが、まだ別環境で動かせていない・・・（公開日までに自宅環境で試す予定）

# 一応できました
ここで覗きたいGitlabのURLと、Gitlabから払い出したアクセストークンを入力します。
![ss022 - .png](https://qiita-image-store.s3.amazonaws.com/0/328233/17b0fd1f-c352-ad96-0fb4-4009a10e737c.png)
↓
で、こんな感じに。
![reviewapp.gif](https://qiita-image-store.s3.amazonaws.com/0/328233/a7c7d1b6-7585-4a9a-4978-f667666c8edd.gif)

ビューはもう少し工夫したかったのですが、今回はちょっと時間切れでした・・・
（工夫というか、FなSE受けするようにレビュー記録票とかを意識した項目名や構成にしようと思っていた＾＾；）

# さいごに
肝心の「どこまでできそうか」は、UIの工夫というか見せ方も踏まえてやらないとあまり価値がないことに気づき、本稿ではそこまで踏み込めませんでした。今後、Bootstrapの勉強がてら少しずつそれっぽい画面を作ってみようと思います。

djangoは思いのほか取っかかりやすかった印象です。
MVT（Model+Veiw+Template）モデルのおかげで、BootstrapとかのCSSフレームワークがさくっと使えるし。
formsとか[テンプレート言語](http://djangoproject.jp/doc/ja/1.0/topics/templates.html)で、動的な画面構成も結構いけそうな気がするし。

なによりも、自分の手で0からWebアプリのコード書いたのなんて数十年ぶり？だったもので、普通に楽しかったですね。
上流工程ばっかりにかまけていないで、ちゃんとコードも書き続きなきゃなあと改めて思いました。

そんな浦島プログラマーが数日でこういうアプリを動かせるようになった世の中にも改めて感動。
優れたアーキテクチャ・フレームワークと、なによりもインターネット上の多数の先生方のおかげです。本当にありがとうございました！