GitHub 上のマークダウンを Travis CI 経由で Qiita に記事として投稿する


先日英語で書かれた GitHub 上のドキュメントを日本語訳しました。

https://qiita.com/miya0001/items/8fff46c201bf9eaeba4a

この場合、翻訳作業そのものは GitHub でやったほうが効率がいい一方で、多くの人に見てもらうには Qiita がいいなと思いまして、当初は README.md をコピペして Qiita に投稿しました。

ところが翻訳の対象となる英語のドキュメントの方がすごくアクティブに更新されていて、コピペをいちいちやってると大変だし、いまにぶっ壊しそうだったので、GitHub への push をトリガーにして Qiita 上の記事を自動更新するようにしました。

## .travis.yml を準備

まず、`.travis.yml` を `travis init` コマンド等々の方法で準備して、Travis CI 上でリポジトリを有効化しましょう。

`travis` コマンドがない場合は `gem install travis` でインストールしておきましょう。便利ですよ。

https://github.com/travis-ci/travis.rb

## Qiita の API トークンを取得

まず Qiita の個人用アクセストークンというものを取得してください。

https://qiita.com/settings/applications

![](https://www.evernote.com/l/ABX4TIyQYd1K4YM600wiF5u6X6fsUAHOYkMB/image.png)

## Qiita に投稿するためのスクリプトを準備

今回は、以下の npm モジュールを使用したので、それらをインストール。

```bash
$ npm install bluebird isomorphic-fetch qiita-js -g
```

`qiita-js` 以外の2つは、`qiita-js` のドキュメント上のサンプルがそうなってたので入れただけで、あんま必要性はわかっていません。

https://github.com/increments/qiita-js

次にデプロイ用のスクリプトを以下のような感じで準備します。

```javascript
global.Promise = require('bluebird');
require('isomorphic-fetch');

const fs = require( 'fs' );
const Qiita = require( 'qiita-js' );

if ( "false" !== process.env.TRAVIS_PULL_REQUEST ) {
  console.log( 'Thanks for contribution. :)' );
  process.exit();
}

// set your token
Qiita.setToken( process.env.QIITA_TOKEN );
Qiita.setEndpoint( 'https://qiita.com' );

fs.readFile( 'README.md', 'utf8', ( err, readme ) => {
  Qiita.Resources.Item.update_item( process.env.QIITA_POST_ID, {
    title: process.env.QIITA_POST_TITLE,
    body: readme,
    private: false,
  } ).then( function( res ) {
    console.log( res );
  } )
} );
```

このスクリプトでは以下の環境変数を使っています。

* `QIITA_TOKEN` - 個人用アクセストークン
* `QIITA_POST_ID` - 更新したい記事の ID
* `QIITA_POST_TITLE` 更新したい記事のタイトル

これらの環境変数は、`.travis.yml` 側で定義しますので、多くの場合スクリプトはコピペでいいはず。

今回のユースケースでは、既存の記事を更新するのが目的なので、既存の記事の ID 及びタイトルはあらかじめ確認しておいてください。
（タイトル省略したいんですが、省略するとエラーになってしまいます。。。）

## package.json に登録

`npm run deploy` で Qiita にデプロイできるように、以下のように `package.json` に記述しました。

```json
  "scripts": {
    "deploy": "node deploy/deploy.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

`depoloy/deploy.js` という部分は、先ほど作ったデプロイ用のスクリプトへのパスです。

## .travis.yml に環境変数を追加

まず、先ほど取得した Qiita の個人用アクセストークンを暗号化して `.travis.yml` に追加します。

```bash
$ travis encrypt QIITA=xxxx --add
```

次に、更新したい記事の ID とタイトルも環境変数として追加します。

```
env:
  global:
    - QIITA_POST_ID: 8fff46c201bf9eaeba4a
    - QIITA_POST_TITLE: "フロントエンドチェックリスト（日本語訳）"
```

あと、以下のような感じで、先ほどのスクリプトが自動発火するように記述します。

```
script: ls -al README.md
after_success: npm run deploy
```

さらに、`master`ブランチ以外で発火しないようにしておきましょう。じゃないと記事が意図せず書き換わってしまいます。

```
branches:
  only:
  - master
```

以上、トータルでの `.travis.yml` のサンプルは以下の通りです。

```
language: node_js
node_js:
- 6
branches:
  only:
  - master
before_script:
- npm install
script: ls -al README.md
after_success: npm run deploy
env:
  global:
    - QIITA_POST_ID: 8fff46c201bf9eaeba4a
    - QIITA_POST_TITLE: "フロントエンドチェックリスト（日本語訳）"
    - secure: xxxx
```

## ローカルでの動作テスト

ローカルで動作テストを行うには、以下のように環境変数を定義してコマンドを実行してください。

```bash
$ export QIITA_TOKEN=xxxx
$ export QIITA_POST_ID=xxxx
$ export QIITA_POST_TITLE=xxxx
$ npm run deploy
```

非公開の記事を先に作っておいて、その記事の ID に対して動作確認をすると安心です。

環境変数の定義がめんどくさい場合は、`direnv` が超便利です。

https://github.com/direnv/direnv