Gaji-LaboのコーポレートサイトはNetlify CMSを使っています
この記事は Gaji-Labo Advent Calendar 2019 2日目の記事です。
はじめまして、Gaji-Laboアシスタントエンジニアの石垣です！
Gaji-Laboでは去年、2018年の4月から働いています。
実業務に携わりながらも勉強を続けているまだまだ未熟な身ですが、その成長過程を当Blogでお見せできればなと思っています。
最初の記事ということで、まずはGaji-Laboのコーポレートサイトにも使用しており、僕が直近で興味を抱いているNetlify CMSについて書こうと思います。
Netlify CMSとは？
Gaji-Laboのコーポレートサイトは2018年冬にリニューアルしましたが、その構成はReact.jsをベースにした静的サイトジェネレーターであるGatsbyとNetlifyで作られています。
Netlifyとは静的なサイトを公開できるホスティングサービスで、大きな特徴として、
- GitHubリポジトリ(Bitbucketなどとも連携可能)と連携し、任意の公開用ブランチにファイルをプッシュするだけで、自動的にビルド&デプロイされ、サイトとして公開することができる
- 1つのコミットごとにプレビューサイトが自動生成される = 公開することなく開発用ブランチで変更を確認することが出来る
という点が挙げられます。
このサービスから生まれたCMSがNetlify CMSです。
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について書いてみました。
今後もこのような業務の中で得た知見についての記事を書いていこうかなと思っているので、なにとぞよろしくお願いします！！
Gaji-Labo は Jamstack 開発の知見があります
高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。
フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応します。
「Jamstack にしたいが、社内調整ができるか不安」
「Jamstack 開発がわかるエンジニアがいない」
Jamstack に関わるお困りごとに対して、メリット／デメリットの判断からお手伝いできます。
まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！関連リンク
