Netlify CMSのちょっとしたTips集

ishigaki

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

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回アドベントカレンダーの自分の記事で「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」「Gaji-Labo 的 Netlify CMS の運用方法」と続けて Netlify CMS の解説とどういう風に運用しているかについて書いてきました。
今回の記事ではもう少し細かい内容で、 Netlify CMS を使う上で「これは知っておきたかった」「これについての解説がどこかにあれば時間を費やさずに済んだかも」みたいなハマり所や Tips 的なことをいくつか書いていきたいと思います。

記事のファイル名を変更する

Netlify CMS で記事を新規作成した時は、config.yml 内のその collection の設定で、 folder で指定したディレクトリ以下に slug で指定した命名規則でファイルが生成されます。
この slug は設定で変更することが可能です。

collections:
  - name: 'Blog'
    label: 'blog'
    folder: 'src/pages/blog'
    create: true
    slug: '{{fields.slug}}'
    fields:
      - label: 'slug'
        name: 'slug'
        widget: 'string'

例えばこのように {{fields.slug}}とすると、 slug フィールドに入れた値でファイル名を生成することができます。
その他にも公式のドキュメントに載っている規則で命名することが可能です。

ただし注意点として、slug に入れた値はファイルを生成する時にファイル名として一回だけ使用されるのみで、その値を変更してもファイル名を変えることはできない点に注意が必要です。
slug をそのまま記事のパーマリンクとしている場合では、直接ファイル名を操作する必要があります。

また、別々の記事で slug を重複させた場合は 2019-12-17-2.md のように自動的に連番が付与されます。

管理画面に表示されるタイトルを変更する

管理画面のタイトルは 、name に title が指定されたものが自動で入ると前回の記事で書きましたが、このフィールドも自由に変更可能です。
collection の identifier_field を設定してタイトルを変更します。

- name: 'Blog'
  label: 'blog'
  folder: 'src/pages/blog'
  create: true
  slug: '{{fields.slug}}'
  identifier_field: slug
  fields:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Slug", name: "slug", widget: "string", default: "default-slug"}

以上のように設定すると、一覧のタイトルには default-slug と表示されます (slug フィールドに何も入れなかった場合)。

記事一覧に「default-slug」というタイトルで記事が表示されている様子

そのため、例えば以下のように、「投稿画面で編集はさせたくないけど一覧のタイトル用に値を持っておきたい」といった場合に hidden widget の field を identifier_field に指定することで、投稿画面では非表示の値を一覧のタイトルとして表示させることが可能です。

- name: "Blog"
  label: "blog"
  identifier_field: title
  ...
  fields:
    - {label: "Title", name: "title", widget: "hidden", default: "投稿一覧に出るタイトル"}
    - {label: "Slug", name: "slug", widget: "string", default: "default-slug"}
    ...
記事一覧に「投稿一覧に出るタイトル」というタイトルで記事が表示されている様子
hidden widget に入れた値は編集画面には表示されません

必須ではない項目を作る時の注意点

必須ではない項目は、無しにするとフィールド自体が生成されません。
GatsbyJS を使用している場合、 GraphQL で取得することも不可能になるため、ビルド時にエラーが発生します。
そのために、空のプレースホルダーを指定しておくとフィールドが生成され、空データとして取得することが可能になります。

- { label: 'Title',
    name: 'title',
    widget: 'string' 
    default: 'title'
  }
- {
    label: 'Description',
    name: 'description',
    widget: 'text',
    required: false,
    default: ''
  }
---
title: title
description: ''
---

まとめ

今回はNetlify CMSを使う上でのちょっとしたTipsを紹介しました。
ご紹介した3つはどれも日本語で書かれている参考ドキュメントがあまり無く、それなりにハマりどころだったため、同じようにハマっている方の手助けになればと思います!

シリーズ「Netlify CMSを実践で使ってみた」として、他にもNetlify CMSの感触・知見・TIPSについて書いた記事をまとめています。Netlify CMSやNetlify関連の周辺トピックに興味のある方は、シリーズの他の記事もぜひ読んでいただけたらと思います!

Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。


パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

関連リンク


ishigaki

投稿者 石垣 祥太郎

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