Gaji-LaboのコーポレートサイトはNetlify CMSを使っています

ishigaki

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

はじめまして、Gaji-Laboアシスタントエンジニアの石垣です!
Gaji-Laboでは去年、2018年の4月から働いています。
実業務に携わりながらも勉強を続けているまだまだ未熟な身ですが、その成長過程を当Blogでお見せできればなと思っています。

最初の記事ということで、まずはGaji-Laboのコーポレートサイトにも使用しており、僕が直近で興味を抱いているNetlify CMSについて書こうと思います。

Netlify CMSとは?

Gaji-Labo コーポレートサイトのトップページ

Gaji-Laboのコーポレートサイトは2018年冬にリニューアルしましたが、その構成はReact.jsをベースにした静的サイトジェネレーターであるGatsbyとNetlifyで作られています。

https://www.netlify.com/

Netlifyとは静的なサイトを公開できるホスティングサービスで、大きな特徴として、

  • GitHubリポジトリ(Bitbucketなどとも連携可能)と連携し、任意の公開用ブランチにファイルをプッシュするだけで、自動的にビルド&デプロイされ、サイトとして公開することができる
  • 1つのコミットごとにプレビューサイトが自動生成される = 公開することなく開発用ブランチで変更を確認することが出来る

という点が挙げられます。

このサービスから生まれたCMSがNetlify CMSです。

https://www.netlifycms.org/

Netlify CMSとは、Headless CMS(コンテンツの表示部分を持たず、データのみを管理するCMS)の一つで、GatsbyJSなどの静的サイトジェネレーターと組み合わせて使うCMSです。

このNetlify CMS上で記事を作成・編集するとGitHubのリポジトリに変更内容がコミットとして自動でプッシュされ、更にNetlify側でビルドが走って公開されるという流れになっています。

Gaji-LaboのコーポレートサイトはこのNetlify CMSを使用して、お知らせなどのコンテンツの更新が楽に行えるようにしています。

Netlify CMSのメリットとデメリット

メリット

公開の手間が大幅に省略できる

Netlifyを使用しないとNetlify CMSが使えないということはなく、2つはそれぞれプラットフォームとコンテンツ管理システムという点で独立しているものです。

しかしなんといってもNetlifyの名を冠しているので、Netlifyと組み合わせて使用するとこの上ない威力を発揮します。

投稿画面で記事をささっと編集し、保存しただけで、Netlify CMSが自動でリポジトリに変更をプッシュし、なおかつNetlifyによって自動でビルドが走り、公開までしてくれるのは、ファイル編集もデプロイの手間も省けてすごく便利です!

投稿画面が分かりやすく、カスタマイズもしやすい

記事の一覧画面、投稿画面は以下のようになっていますが、とても分かりやすいものになっています。

お知らせの記事一覧画面
実際の投稿画面

もちろん投稿画面にあるフィールドは自由にカスタマイズ可能で、かつヒントテキストを入れることで更に使いやすくすることも可能です。

静的サイトジェネレーターを使っているとコンテンツはMarkdownなどで書いていることが多いと思いますが、手動で直接Markdownなどを編集してGitHubにプッシュするのは、GitHubやMarkdownを触り慣れた方でないと難しいところがあります。

しかしNetlify CMSを導入すると、Netlifyや静的サイトジェネレーターの利便性はそのままに、誰にとっても扱いやすくすることが出来ます。

Editional Workflowという下書き機能も完備

設定でEditional Workflowという機能を有効にすることによって、リリース前の記事を、下書き/レビュー中などのステータスで管理することができます。

記事をリリースする前に誰かに見てもらったり、書きかけを途中保存することも可能です。

このEditional Workflowですが、以前はある collection (CMSからコンテンツを挿入する部分) に既に存在しているパーマリンクの記事を、この機能を使って別の collection に新しく下書き状態で追加すると、既に存在している記事の投稿画面が追加した方の記事に上書きされるという問題が存在していましたが、公式GitHubに issue として立ててみたところ、つい先日に対応いただいて解決したようです。

デメリット

Netlify CMSは非常に便利かつカスタマイズもしやすいのですが、いろいろ手を加えているとどうしても手の届かないところがあったりします。(Gaji-Laboのコーポレートサイトではコンテンツを効率的に更新出来るように大きくカスタマイズしているため、そのせいもあるかもしれません!)

CMS からファイル名が変更できない問題

Netlify CMSから記事を投稿すると、静的サイトジェネレーターの方にMarkdown形式で記事ファイルが追加されますが、この時のファイル名はCMSから変更することは出来ないようです。

フィールド追加時の問題

新しくフィールドを追加したいとなった時などに、公開用ブランチに設定しているブランチに設定ファイルの変更作業をマージしないと確認できないという問題もあります。これが地味に手間で悩ましいところでもあります……。

まとめ

今回は初めての記事ということで、ざっと自己紹介と現在Gaji-Laboのコーポレートサイトに使用しているNetlify CMSについて書いてみました。

今後もこのような業務の中で得た知見についての記事を書いていこうかなと思っているので、なにとぞよろしくお願いします!!

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

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

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


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

お問い合わせしてみる!

関連リンク


ishigaki

投稿者 石垣 祥太郎

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