2019/09/10
Contentful + Gatsby + Netlify
*この記事はマークダウンで書かれています。
今回はこのを作るなかで、使用したツールについて簡単に紹介していきます。
Contentful
Contentful(コンテントフル)は、記事のデータや商品情報などのコンテンツを管理するCMS(コンテンツ管理システム)です。(CMSで有名なところだとWordPressなどがあります。) このContentful上で記事を書いたり、新しい商品の画像を追加・更新したりすると、それらのデータをGatsby.jsが読み込み静的なファイルを作成してくれます。Contentfulでは記事の文章を書く際、使用できる形式が２つあり、それぞれ、Markdown(マークダウン)とRich Text(リッチテキスト)と言います。このサイトではそれらの形式の長所、短所を解説しているので、ぜひ読んでみてください。
ContentfulはNetlifyと連携することで、記事を保存した時に自動でNetlifyに通知を飛ばすことができます。その通知を受け取ったNetlifyがページを生成(ページデータを追加・更新)してくれて、スムーズに本番環境に反映される仕組みになっています。しかもどちらもほぼ無料で高品質のサービスを使用することができます。
有名なところだと、人気のデザインツールのFigmaや音楽配信サービスSpotify、日本を代表するデザイン会社Goodpatchなどに利用されています。(ちなみにContenfulの存在を知ったのはGoodpatchで使われていたため!)
Gatsby.js
Gatsby.jsはReactで作られたフレームワークで、静的サイトジェネレーターと言われています。静的サイトとはユーザーがアクセスする前に、予めページを用意しておくような仕組みでページを表示しているものです。それに対してWordPressで管理しているようなサイトやデータの送受信、ログインが必要なサイトは動的サイトと呼ばれ、基本的にアクセスされる度にページを生成するような仕組みで動いています。動的サイトはアクセスされる度にページを生成するため、サーバーで処理を行う時間が必要になりますが、静的サイトの場合は、すでに生成されているページを表示するだけなので、ユーザーがアクセスしてからページを表示するまでの時間が短縮できます。
Gatsby.jsはこの静的サイトをとてつもなく速いスピードで表示することができます。本当に速いです。その他にも画像を自動で最適化してくれたり、簡単に導入できる豊富なプラグインなど魅力的なところがたくさんあります。有名なところだと、JavascriptライブラリのReactやデザインツールのFigmaなどのサイトに使われています。
Netlify
Netlifyはホスティングサービス、つまりレンタルサーバーを提供しています。GitHubやContentfulと連携することで、GitHubのソースコード変更時や、Contentfulの記事を更新した際に自動で、ビルド(静的ページの生成)、デプロイ(本番環境に反映)、を行います。そのため、開発者にとっても、管理者にとってもカスタマイズ、追加・更新が容易になります。しかも、ほとんど無料で利用できます。さらに、SSL化も無料で、独自ドメインも利用可能です。
