Gitで継続的Qiita記事投稿をする（前編）

5731 ワード
GitHub 自動化 GithubAction CICD Qiita Qiita テキストリンク

はじめに

今回が初めてのQiita投稿なのですが、単純に記事を投稿するのではつまらないので、CI/CDの要領でGitで管理した記事をシームレスにQiitaに投稿することを目指したいと思います。
同じような取り組みをしている方は沢山いると思いますが、勉強のためになるべく公式ドキュメントなどの一次情報を参照して取り組んでいきます。

目標

以下のような仕組みを目標とします。

  1. ローカルで記事をmarkdownファイルで作成
  2. GithubにpushするとQiitaに記事が投稿される
  3. 更新・削除を行ってGithubを更新するとQiitaの記事も同期して更新・削除が行われる

課題

解決が必要な技術課題は以下の2つ。

  1. APIによるQiitaの操作
  2. Githubの更新をトリガーに更新スクリプトを実行する方法

前編である本ページでは1項目目のAPIによるQiitaの操作についてまとめます。

APIによるQiitaの操作

Qiitaのページ下部のリンクからAPIドキュメントを参照できます。
このAPIを使ってどのようにQiit投稿を操作できるか試していきます。

APIのテストツールとしては VS Code の REST Client 拡張機能を使用しました

前準備

まずはQiitaをAPIで操作するための認証tokenを発行します

  1. Qiitaにログインし、右上にあるアイコンをクリック > 設定 > アプリケーション と進む
  2. 「個人用アクセストークン」の欄から「新しくトークンを発行する」をクリック
  3. アクセストークンの説明を入力、スコープの「read_qiita」「write_qiita」にチェックして「発行する」をクリック
  4. 表示される個人用アクセストークンをコピペして保存しておく（トークンはこの時の画面でしか表示されないので注意）

続いてAPI動作確認のためにVS Codeを設定していきます。

  1. 左のメニューから拡張機能を開き、「REST Client」をインストール
  2. Ctrl + , で設定画面を開き、右上のアイコンからsettings.json を開く
  3. REST Client の環境変数としてhost, tokenを記述 
    {
    "rest-client.environmentVariables": {
        "$shared": {},
        "qiita": {
            "host": "qiita.com",
            "token": "コピーしたtoken文字列"
        }
    }
}
  4. .http拡張子のファイルを作成し、VS Codeで開く
  5. Ctrl + Alt + e でREST Clientの環境を qiita に設定

この *.http ファイルにAPIリクエストの内容を記述するとSend Requestという表示がエディタ内に現れ、クリックすることでリクエストの送信ができます。
1ファイルの中で複数のリクエストを書く際には###でブロックを分割して記入します

また、{{host}}のようにブランケット2個で囲うことにより、上記で設定した変数を利用することができます。
（もちろんべた書きでも動作しますが、今回は資材をgitで管理する都合上tokenを環境変数に持たせています。）

以下のリクエストはこちらのファイルにあるリクエストを実行したものです

記事の投稿

POSTリクエストで限定公開の記事を投稿します。

レスポンス内容

HTTP/1.1 201 Created
Date: Sat, 27 Nov 2021 06:28:08 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: nginx
...(省略)

{
  "rendered_body": "...(省略)",
  "body": "...(省略)",
  "coediting": false,
  "comments_count": 0,
  "created_at": "20xx-xx-xxTxx:xx:xx+09:00",
  "group": null,
  "id": "d86cad756db1e4de776c",
  "likes_count": 0,
  "private": true,
  "reactions_count": 0,
  "tags": [
    {
      "name": "xxx",
      "versions": []
    }
  ],
  "title": "XXXXXXXXXX",
  "updated_at": "20xx-xx-xxTxx:xx:xx+09:00",
  "url": "(省略)",
  "user": {
    ...(省略)
  },
  "page_views_count": null,
  "team_membership": null
}

記事一覧の取得

GETリクエストで自分の作成した記事の一覧を取得します

レスポンス内容

HTTP/1.1 200 OK
Date: Tue, 30 Nov 2021 12:55:30 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: nginx
...(省略)

[
  \\ 記事数だけkey-valueがリスト内に並ぶ
  {
    "rendered_body": "...(省略)",
    "body": "...(省略)",
    "coediting": false,
    "comments_count": 0,
    "created_at": "20xx-xx-xxTxx:xx:xx+09:00",
    "group": null,
    "id": "xxxxxxxxxxxxxx",
    "likes_count": 0,
    "private": true,
    "reactions_count": 0,
    "tags": [
      {
      "name": "xxx",
      "versions": []
      }
    ],
    "title": "XXXXXXXXXX",
    "updated_at": "20xx-xx-xxTxx:xx:xx+09:00",
    "url": "(省略)",
    "user": {
      ...(省略)
    },
    "page_views_count": null,
    "team_membership": null
  }
]

記事の更新

PATCHリクエストで記事を更新します。

レスポンス内容

HTTP/1.1 200 OK
Date: Tue, 30 Nov 2021 14:26:23 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: nginx
...(省略)

{
  "rendered_body": "...(省略)",
  "body": "...(省略)",
  "coediting": false,
  "comments_count": 0,
  "created_at": "20xx-xx-xxTxx:xx:xx+09:00",
  "group": null,
  "id": "d86cad756db1e4de776c",
  "likes_count": 0,
  "private": true,
  "reactions_count": 0,
  "tags": [
    {
      "name": "xxx",
      "versions": []
    }
  ],
  "title": "XXXXXXXXXX",
  "updated_at": "20xx-xx-xxTxx:xx:xx+09:00",
  "url": "(省略)",
  "user": {
    ...(省略)
  },
  "page_views_count": null,
  "team_membership": null
}

記事の削除

DELETEリクエストで記事を更新します。

レスポンス内容

HTTP/1.1 204 No Content
Date: Mon, 21 Mar 2022 14:46:27 GMT
Connection: close
Server: nginx
...(省略)

DELETEのAPIリファレンスを見ると200で返ってくるように記載されていますが、実際に実行してみると204で返ってきており、レスポンスボディもありませんでした。

続く

後編は Github Actions を使って記事をアップロードする部分を書く予定です