Netlify CMS に「下書き→レビュー中→公開状態」のワークフローを導入する

## はじめに

[こちら](https://qiita.com/Kento75/items/7316dd5b7a8014d6c178)の記事で紹介した方法でブログの運用はできるのですが、下書きを保存しておきたい時に不便を感じると思いますので、Netlify CMS のワークフロー機能について解説したいと思います。

## ワークフロー機能

[Netlify CMS の公式リファレンス](https://www.netlifycms.org/docs/configuration-options/#publish-mode)にも記載されているのですが、Netlify CMS の設定ファイルを編集することで以下の画像のように、「Workflow」タブが選択できるようになります。

<img width="800" alt="スクリーンショット 2019-04-29 11.32.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/7ed552a6-dfa0-fb1b-5a8e-47c0e98aca7e.png">

## 有効化手順

「/admin/config.yml」に「publish_mode: editorial_workflow」を追記または書き換えることで有効化できます。
以下、[前回作成したアプリ](https://github.com/Kento75/gatsby-demo-app)での例です。
追記完了後、GitHubのリポジトリにPushします。これだけで有効化できるはずです。

```YAML:gatsby-demo-app/static/admin/config.yml
backend:
  name: git-gateway
  branch: master                 ← [補足]ここでどのブランチを参照するのか設定できます。

media_folder: static/img         ← [補足]ここで設定したディレクトリにアップロードした画像が格納されます。
public_folder: /img

publish_mode: editorial_workflow  ←　この一行を追加

{省略}
```

## ワークフローの確認
「https://<ブログのURL>/admin」にアクセス、ログインまで済ませると、以下の画像のように「Workflow」タブが表示されます。
<img width="800" alt="スクリーンショット 2019-04-29 11.52.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/497b6339-6b4a-7c61-82b4-3c1999c607ca.png">

「Workflow」タブをクリックすると、ワークフロー画面に遷移するので、「New Post」→「Blog」をクリックして記事を作成してみます。
<img width="800" alt="スクリーンショット 2019-04-29 11.56.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/fb00e750-fe83-0173-b6c1-3a2c7649bc4f.png">

記事の内容を入力し終えたら、「Save」をクリックします。
<img width="800" alt="スクリーンショット 2019-04-29 11.59.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/5dd73524-c655-3acc-a46c-d18bb5021387.png">

「Save」をクリックしてしばらくすると、以下の画像のようにボタンが複数出てきます。
<img width="800" alt="スクリーンショット 2019-04-29 12.00.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/a4754c21-64a4-ee3e-ea29-07f94d988f3f.png">

「Set status」をクリックすると、記事がどのステータスにあるのかを確認できます。
<img width="800" alt="スクリーンショット 2019-04-29 12.03.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/8edcb252-23d8-1ffb-b399-32427e822881.png">

また、ワークフロー画面の Draft に先ほど作成した記事が表示されます。
<img width="800" alt="スクリーンショット 2019-04-29 12.10.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/e1085e18-2d9a-deae-6414-7d1d2168607b.png">

現在のステータスから次に進めるには、ワークフローで表示される記事を進めたいステータスにドラッグ&ドロップで移動できます。
<img width="800" alt="スクリーンショット 2019-04-29 12.11.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/bef11fd8-104a-1172-cd9d-b4fa1f1956ce.png">

記事のステータスを Ready まで進めると、記事の公開準備は完了です。
※ あくまで記事の公開準備ができただけで、Publish(GitHub への Push)を実行するまでは公開はされません。
<img width="800" alt="スクリーンショット 2019-04-29 12.14.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/123df307-2da4-edfc-c65b-1a3a030789a8.png">

記事の公開は、「Publish new entry」→ 「OK」の順でクリックすると実行されます。
<img width="800" alt="スクリーンショット 2019-04-29 12.17.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/cb83350c-3366-448f-0b40-dc536fbf5caf.png">
<img width="800" alt="スクリーンショット 2019-04-29 12.18.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/ded1cfa5-cc2d-6ffa-ba44-245893e41b1f.png">

ブログを確認すると、記事が公開されていることがわかります。
<img width="800" alt="スクリーンショット 2019-04-29 12.20.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/e99efe5a-e0a3-04b5-c1b8-3ec28d152005.png">
<img width="800" alt="スクリーンショット 2019-04-29 12.22.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/c674f31f-26e2-0674-7d39-d5f077df9a51.png">

以上で、設定は完了です。
ワークフロー機能が追加されることで、記事の下書きを保持できるようになるため、より実用的なブログになるかと思います。

今回作成したアプリケーションのリポジトリは[こちら](https://github.com/Kento75/gatsby-demo-app)
サイトは[こちら](https://gatsby-demo-app.netlify.com/?_ga=2.261656141.1109025524.1555842977-1576201322.1555842977)