Gaji-Labo 的 Netlify CMS の運用方法

ishigaki

この記事は Gaji-Labo Advent Calendar 2019 10日目の記事です。

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

前回の僕の記事 「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」では Netlify CMS の概要と、Gaji-Laboのコーポレートサイトでコンテンツの運用に Netlify CMS を使用していることを書きました。

今回は実際にどのように Netlify CMS を使っているかをご紹介します。具体的な運用事例を知りたい方の参考にしていただけたらと思います。

どこで使ってる?

現在はお知らせ事例紹介の運用に Netlify CMS を使用しています。
今後トップページにある「直近のスケジュール」や、採用情報の詳細ページなども CMS 化していく予定です。

トップページに置かれている「直近のスケジュール」のスクリーンショット
Gaji-Labo コーポレートサイトのトップには直近のリソース状況が掲載されています

この「直近のスケジュール」は普通の CMS で投稿するような記事やページではなく、ページの一部分として存在しているコンテンツですが、ページ全体ではなくこの一部分だけを CMS から編集可能にすることができるのも Headless CMS の利点の1つです。

設定はどうしてる?

Netlify CMS は config.yml というファイルをリポジトリ上に置いて、全体の設定や、コンテンツを扱うひとまとまりである collection の追加・設定などを行います。
以下は Gaji-Labo のコーポレートサイトで実際に使用している config.yml の一部です。
各種設定項目の解説を付記していますが、詳しい設定方法については公式のドキュメントがまとまっているのでそれを参照してみてください。

static/admin/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 が titlebody になっているフィールドは特別なフィールドとなり、それぞれ

  • title : CMS上で管理画面に表示されるコンテンツのタイトル
  • body : 生成されるマークダウンファイルの本文

となります。
以上で設定した collection から投稿した記事が以下の形式で生成されます。
src/pages/news/2019-12-10.md

---
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が得意なフロントエンドエンジニアを募集しています

弊社ではフロントエンドのエンジニアさんを随時募集しています。現在は特にJAMstackの知見で事業作りに貢献するフロントエンドエンジニアさんを求めています! 大きな会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるフリーランスの方やパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

関連リンク


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。