Redmine PluginでもSideCI使えるかな？


いつもどおり、「やってみた」なシリーズです。「なぜやってみるの？」というところから記載しますので、とりあえず、すぐに結果や流れをご覧になりたい方は、目次に沿って冒頭は読み飛ばしてくださいませ。

## はじめに / なぜやるか

### 使ってもらうため、信頼性を少しでも上げたい

個人で細々とRedmineのちょっとしたプラグインを書いているのですが、最近はあまり大きな更新をしていません^^;
それでも、公開をしているとプルリクエストをいただいたり、バグ報告や改善のご指摘をいただいたりします。

せっかく試していただけたのに、トラブルでちゃんと使えなかったりすると申し訳ないので、なんとか少しでもコードの信頼性を上げたい...というところから、少なくともbundle install + migartionが通るか、とか、簡単なテストの実施をCIツールでチェックするようになりました。

- Ref. [drone.ioを使ってビルドする](http://qiita.com/akiko-pusu/items/dff76fb64a5dfb934a53)

### それでも予想外のことが起こる...

ところが、これ以外にも、「あなたのJSやCSSあんまり綺麗じゃないですね」というissueを頂いたりします。

プラグインでJSやCSSを調整する場合は、Redmineの本体機能というよりは、Redmineのテーマと組み合わせたときに期待した画面にならない場合があります。
一方、しばらくフロントを学習する機会があったので、だんだんとJSやCSSもCoffeeScriptやSCSSで書きたいなと思うようになってきました。何かコードの綺麗さを担保して、潜在的に潜むバグの根を潰したいとの思いから、構文チェックといったものが必要だなと感じてきた次第です。

### Editorの機能 + SideCIはどう？

構文チェックは、エディタの機能を使って一気にチェックしてもらうのも良いですが、一気に行うと心が折れます...。
コミットした単位で、少なくとも新しく追加したり調整したりした部分から綺麗にしていくというアプローチがいいなあと思っていたところ [SideCI](https://www.sideci.com) というCIツール・サービスに触れる機会が出てきました。

- Ref. [QiitaでのSideCI関連記事](http://qiita.com/search?q=sideci)

ということで、SideCIに慣れるためにも、自分のプラグインにも使ってみよう、というのがこのエントリになります。


## やってみました

### まず連携

SideCIは、本当に簡単。
GitHubのアカウントでログインすると、連携の許可の確認が出て、次にチェック対象にしたいリポジトリを選ぶ画面になります。
日本語のドキュメントがきちんとありますので（そもそも日本製）、敷居も高くありません。

### ウィザード形式ですすみます

ターゲットのリポジトリを選びます。無料でも非公開リポジトリに対してもサービスが利用できますが、私は公開のものしか持っていませんので、そのまま進みます。

![wizard-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/b3ccf847-fba0-e632-75f6-bd3abf5b540c.jpeg "wizard-1.jpg")

利用したい解析ツールを選びます。たくさんあります！
自前で手元の環境に揃えるのは大変なので、本当に便利ですし、いろいろな解析ツールがあることもわかって、これだけでも学習になりました...。

![wizard-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/8db7f645-66d1-a37c-ab6e-367c52820071.jpeg "wizard-3.jpg")

設定完了時には、マスターブランチに対しての静的解析を実施する画面になります。
また、SideCIはプルリクエスト時にも解析を行ってくれて、そのプルリク画面に結果をコメントしてくれますが、このときのコメント用アカウントを設定できます。
（なにか執事的な擬人化キャラ、アカウントだといいかもしれませんね）

![wizard-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/e595ff46-5e32-0a83-ef0c-f062a840e177.jpeg "wizard-2.jpg")

### マスターブランチへの解析結果！

さて、比較的息の長いリポジトリを解析してみた結果...。
他のCIで行うような、bundle install / migration / test といった工程は無い分、非常に早くチェックが終わりました。
本当に30秒くらいです。

が、その結果...。

### 心が折れる...かも？

![result-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/de845729-9d27-2b37-1d0d-09320f8f52fb.jpeg "result-2.jpg")

構文チェックの警告以外に、エラーが上がってしまいまいた！
（警告の数もものすごく多いのですが...）

気になって確認すると、ちゃんとエラー内容の解説がありました。ありがたい限りです！

![result-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/27976/08d772cd-cf29-ad7a-49bf-e741336881d3.jpeg "result-3.jpg")

上記のエラーについては、ほかに原因がありそうですが、そのほかの指摘箇所は、直さないといけなさそうです^^;


## 今回のまとめ

駆け足での結果紹介ですので、まだプルリク時にどうなるかは記載していません。
今回チェックしたリポジトリは、機能的には調整の予定はなかったのですが、コード修正の目標ができたので、修正とプルリク時の結果を別途レポートしたいと思います。

とはいえ、これだけたくさんいろんな指摘があるのを目の当たりにすると、心が折れそうです。
もちろん、デフォルトのルールではなく、現実的な解析時に抽出するルールを決めて運用するのが普通かと思います。

ただし、実際のところ、コードレビュー用にプルリクを出した際に、本来レビューしていただきたい内容以上にたくさんの指摘が上がってくると、レビューしてくださる方にも申し訳ありません....。

ということで、pushやプルリクをする前に、まず手元で綺麗に書く・構文チェックをするといった自衛をしていかないとな、という意識が持てるようになりました。

最初のうちは大変かもしれませんが、なんとか綺麗でバグの可能性が減らせるものにしていきたいと思います。

## さいごに

SideCI、便利です！
最初はdroneやtravisといったものとどう違うのかわからなかったのですが、静的解析に特化したものというのがわかりました。
また、非常にチェックが早く終わりますし、プルリク前のブランチにもスキャンの実施ができます。

新しいツールに触れることは、気持ちの良いUIやドキュメント（英語）の勉強にもなるので、個人的にも良い出会いだと思いました。
SideCIの提供の皆様、ありがとうございます！

へなちょこエンジニアですが、「外に出すものなんだから使う人に迷惑かけないように！」を目指して、うまく利用していきたいと思います。