Qiita Team を使って個人ブログをつくれるか考えてみる

この記事は[Qiita Advent Calendar 2021](https://qiita.com/advent-calendar/2021/qiita)の 4 日目の記事です！
Qiita株式会社 CX 向上グループの花田（@ohakutsu）が担当します！

https://qiita.com/advent-calendar/2021/qiita

## はじめに

先日、知人との会話でこのような話題があがりました。

知人「Qiita Team って Headless CMS になれるんじゃね？」

Qiita Team は Headless CMS サービスではないものの、API が存在するのもあって拡張性は高いです。既存の機能だけを使って Qiita Team で個人ブログを作れないかを考えてみました。

## 案

Qiita Team には API があって、Qiita Team 内の記事を取得できます。また、Webhook も用意されています。
今回はこれらを用いて、

1. Qiita Team にブログ用の記事を投稿する
2. Qiita API でブログ用の記事を取得
3. Qiita Team Webhook で記事投稿・編集時にデプロイ

を考えてみます。

## :qiita-team: Qiita Team とは？

Qiita Team は Qiita 株式会社が運営している社内向けの情報共有サービスです。

https://teams.qiita.com/

Qiita Team はマークダウンで記事を書くことができるだけでなく、グループごとに記事を分けたり、テンプレート機能などがあります。

（30 日間の無料トライアルがあるので、ぜひお試しください！）

## 事前準備

自身の Qiita Team のチームを用意しておく必要があります。
Qiita アカウントがあれば簡単につくることができます。

https://teams.qiita.com/ の「無料トライアル」から作成できます。

## Qiita Team に記事を用意する

グループ機能を使うことで、個人ブログ用の記事を他の記事と分けることができます。
今回は、「Blog 用グループ」を用意して記事を紐付けていきます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/d17ae440-8123-6f34-e8c3-2cb32b379f29.png)

次に、Qiita Team に個人ブログ用の記事を用意します。
今回は、以下のような記事を用意してみました。
右下のグループ選択から「Blog 用グループ」を選択し、投稿します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/2dedf81b-3d44-2eb4-661f-088c16e0a199.png)

このままでは画像などのリソースに外部からアクセスができないので、記事をウェブに公開します。

設定 > チーム設定 からウェブに公開できるよう権限を設定します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/0150d82f-c759-1d55-e03a-31a0277c0624.png)

そして、記事に戻って右上からウェブに公開をします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/53ccf88e-d436-73c0-006d-2231cfcedfa7.png)

これで記事の用意は終わりです。

## Qiita API で記事を取得する

API を使って先程投稿した記事を取得します。
詳しいドキュメントは以下をご覧ください。

https://qiita.com/api/v2/docs

Qiita Team で個人用アクセストークンを取得します。
設定 > 〇〇向けアプリケーション > 〇〇向け個人用アクセストークン からトークンを取得します。

:::note warn
トークンはコピーしておいてください
:::

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/673fab6e-0aff-6ca9-f606-258833980162.png)

取得したトークンを使って、以下のような`curl`コマンドで記事一覧を取得できることを確認しておきます。

```bash
curl "https://YOUR_TEAM.qiita.com/api/v2/items?query=group:blog" -H "Authorization: Bearer YOUR_TOKEN"
```

また、[Qiita API v2 ドキュメント - Qiita:Developer](https://qiita.com/api/v2/docs#get-apiv2items)にもあるように、任意のクエリをつけることができます。

例）`blog`グループの記事を、10 記事ごとにページネーションをし、1 ページ目をとってくる

```
https://ohakutsu.qiita.com/api/v2/items?page=1&per=10&query=group:blog
```

以下のように記事データを取得できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/71b947f3-b960-8a74-3160-da8e20eb20dd.png)

## 取得した記事を元にブログを用意する

あとは、上記で取得した記事データを使って Gatsby などでブログを作成すれば完成です！

## 記事投稿・編集時のデプロイを自動でやりたい

Qiita Team Webhook を使って記事投稿・編集時にデプロイまで行えるようにします。

まずは、Webhook 用の URL を取得しておきます。
Vercel, Amplify などお好きな環境で用意しましょう。

次に Qiita Team 側に Webhook の設定をします。
Qiita Team の、
設定 > チーム設定 サービス連携 > 追加　から任意の Webhook を追加できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/b9248af2-df0b-91da-cec4-6e34489ca73d.png)

発火させたいイベント、対象のグループを選択します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/77c5d634-bb26-e20f-6689-87247d09a8ef.png)

これで`テスト`をしてみてデプロイが走れば完了です。

## 結論

- 個人ブログとして公開できる！
- デプロイも自動化できる！
- Qiita Team のマークダウン記法が使える！

---

Qiita Advent Calendar 2021 の 5 日目は、
Qiita株式会社 Qiita プロダクトマネージャーの清野（@getty104）が担当します！
楽しみですね！

ぜひ Qiita Advent Calendar 2021 を購読設定して、明日の記事もご覧いただけると嬉しいです。