Gaji-Labo 的 Netlify CMS の運用方法
この記事は Gaji-Labo Advent Calendar 2019 10日目の記事です。
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
前回の僕の記事 「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」では Netlify CMS の概要と、Gaji-Laboのコーポレートサイトでコンテンツの運用に Netlify CMS を使用していることを書きました。
今回は実際にどのように Netlify CMS を使っているかをご紹介します。具体的な運用事例を知りたい方の参考にしていただけたらと思います。
どこで使ってる？
現在はお知らせと事例紹介の運用に Netlify CMS を使用しています。
今後トップページにある「直近のスケジュール」や、採用情報の詳細ページなども CMS 化していく予定です。
この「直近のスケジュール」は普通の CMS で投稿するような記事やページではなく、ページの一部分として存在しているコンテンツですが、ページ全体ではなくこの一部分だけを CMS から編集可能にすることができるのも Headless CMS の利点の1つです。
設定はどうしてる？
Netlify CMS は config.yml というファイルをリポジトリ上に置いて、全体の設定や、コンテンツを扱うひとまとまりである collection の追加・設定などを行います。
以下は Gaji-Labo のコーポレートサイトで実際に使用している config.yml の一部です。
各種設定項目の解説を付記していますが、詳しい設定方法については公式のドキュメントがまとまっているのでそれを参照してみてください。
```
backend: # 連携するリポジトリの設定
name: git-gateway
branch: master
publish_mode: editorial_workflow # ここで下書き機能を有効化
media_folder: "images/uploads" # 画像ファイル等を保存するフォルダを指定
collections: # ここで個別に collection とそれが持つフィールドを設定
- name: 'news' # collection の識別子
label: 'News' # 管理画面で表示されるラベル
folder: 'src/pages/news' # collection のファイルが格納されるフォルダ
create: true # 新規投稿を許可するかどうか
slug: '{{fields.slug}}' # ここで指定した命名規則でファイルを生成
fields:
- {
label: 'タイトル (必須)', # 投稿画面で表示されるラベル
name: 'title', # フィールドの識別子
widget: 'string' # フィールドの形式を設定
}
- {
label: 'URL (必須)'
name: 'slug'
widget: 'string'
hint: '/news/hoge/ の hoge に入る URL となる文字列。e.g. 「2019-12-10」'
# 投稿画面に表示されるヒント
}
- {
label: 'Description',
name: 'description',
widget: 'text',
required: false, # 必須かどうか (デフォルトは true)
default: '', # プレースホルダーを指定
hint: 'OGP の description となるテキスト。ページには表示されません。',
}
- {
label: 'OGP 画像',
name: 'ogpThumbnail',
widget: 'image',
required: false,
default: '',
hint: 'OGP に使用される画像。ページには表示されません。'
}
- {
label: '本文 (必須)',
name: 'body',
widget: 'markdown'
}
- {
label: '投稿日時 (必須)',
name: 'date',
widget: 'datetime'
}
- {
label: 'テンプレートタイプ',
name: 'type',
widget: 'hidden',
default: 'news',
}
```name が title と body になっているフィールドは特別なフィールドとなり、それぞれ
title: CMS上で管理画面に表示されるコンテンツのタイトルbody: 生成されるマークダウンファイルの本文
となります。
以上で設定した collection から投稿した記事が以下の形式で生成されます。
---
title: タイトル
slug: 2019-12-10
description: ''
ogpThumbnail: '/uploads/example.png'
date: 2019-12-10T12:00:00+09:00
type: news
---
本文まとめ
今回は Gaji-Labo が Netlify CMS をどのように設定して使っているかについて書きました。
次回は運用する上でカスタマイズした点やハマったところの解決策などをご紹介したいと思います。
Gaji-Labo は Jamstack 開発の知見があります
高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。
フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応します。
「Jamstack にしたいが、社内調整ができるか不安」
「Jamstack 開発がわかるエンジニアがいない」
Jamstack に関わるお困りごとに対して、メリット／デメリットの判断からお手伝いできます。
まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！関連リンク
