NEXTSCAPE blog

株式会社ネクストスケープの社員による会社公式ブログです。ネスケラボでは、社員が日頃どのようなことに興味をもっているのか、仕事を通してどのような面白いことに取り組んでいるのかなど、会社や技術に関する情報をマイペースに紹介しています。

MENU

ヘッドレスCMS Contentfulを触ってみました

はじめに

株式会社ネクストスケープ、ソリューションビジネス部に所属している小野塚です。

今回はヘッドレスCMS、「Contentful」を紹介したいと思います。
Contentfulはドイツのベルリンにある会社ですが、この会社名を冠するヘッドレスCMS、Contentfulは様々な会社で採用されています。

www.contentful.com

ネスケラボでは以前もヘッドレスCMSとしてチェコ生まれのヘッドレスCMS、Kentico Kontentを紹介したことがあります。

ヘッドレスCMS自体の説明についてはその記事や他のWebサイトでも既に説明されていますので、今回は軽く説明する程度にとどめ、本記事ではContentfulの特徴を中心に説明していきたいと思います。

 

ヘッドレスCMS

ヘッドレスCMSとは簡単に説明すると「コンテンツ」、例えばコーヒー店を例にとるとその店で扱っている商品(商品名、商品説明、画像等)であったり、あとはそのコーヒー店のサイトで使用している文章や動画、画像といったものを登録し、それをAPIで取得できるようにするCMSになります。

通常のWordPressのようなCMSはコンテンツだけでなく、Webサイトのページレイアウト等も非エンジニアであっても簡単に編集できるというところが利点でした。

ヘッドレスCMSはコンテンツ管理に特化し、APIで取り出せるようにしたことでWebサイトだけでなく、スマホアプリ等も特定のコンテンツを利用できる、つまりコンテンツの一元管理が行え、マルチチャネルに対応できるようにしたものになります。

CMSの正式名称はContents Management Systemであるため、ある意味コンテンツ管理の正しい形と言えるかもしれません。

見た目部分、フロントエンド側は別途作成する必要があるため、通常のCMSの機能を望む方にはそぐわないものとなりますが、CMSで使用する言語に縛られなくなり、コンテンツ管理に集中ができます。

海外から始まり、徐々に日本にも普及してきまして、ここ最近ではWordPressの有名どころのCMSもコンテンツをAPIで取得できるようになったり、様々なヘッドレスCMSが開発されています。

 

豊富なSDK

この特徴はContentfulに限らずですが、重要な点であるため、先に紹介します。

上のヘッドレスCMSで説明した通り、APIを使用するサイト、アプリについては開発を容易にするため、様々な言語でSDKが提供されています。

詳しくは以下のページをご覧いただければと思いますが、当社が得意とする.NET以外にもJavaScript、Java、PHP、Android、iOSと様々な言語、プラットフォームに対応しています。

www.contentful.com

 

UI Extension(UI拡張)

UI Extensionはその名の通りUIを拡張するための機能となります。

具体例を挙げないとピンとこないかと思いますが、例えば入力フィールドに何か入力されて、ボタンを押したタイミングでそこに入力された内容を3rdパーティのAPIに渡して出力結果を別の場所に表示するといったことができます。

あとはテキストエディタに対してオープンソースのWISYWIGエディタを組み込むといったこともできます。

既存のContentfulのコンポーネントでは実現できないこともこのUI Extensionによって可能になります。

 

Forma36

ヘッドレスCMSは最初に説明した通り、見た目ではなくあくまでコンテンツに着目したものであります。

逆に言えば見た目はContentfulを利用するユーザーあるいは開発ベンダーにお任せしますよ、というところなのですが、見た目部分にも配慮された今までのCMSと比べるとどうしても物足りなさを感じてしまいます。

Contentfulはこれを補うためにForma36というオープンソースのデザイン システムを有しています。
React UIライブラリやCSSが含まれていて、これによってUI開発が容易になると共に統一性を持たせることができます。

このForma 36の新バージョンはWebアクセシビリティの国際基準WCAGのレベルAAAに準拠しています。官公庁や海外のサイトでもこの基準(正確にはこの国際基準と同じ内容とされるJIS X 8341-3:2016)を求められるところがありますので、そういったお客様の要望にも応えられるものとなります。

 

Contentfulアプリ

正確にはContentful Appsと表現されていますが、いわゆるプラグインのようなものだと思ってください。

以下のマーケットプレイスで様々なアプリが提供されています。

www.contentful.com

これによって3rdパーティの様々なサービスとの連携が可能になり、例えばShopifyと連携させたりできます。

個人的に面白いと思ったのはCloudinaryという動画・画像配信プラットフォームがあるのですが、そこと連携を行い、動画や画像についてはContentfulではなく、Cloudinaryで管理することができます。

提供されているものを利用するだけでなく、TypeScriptで開発することも可能です。

 

Compose

ContentfulにはComposeというアプリがあります。
ContentfulはヘッドレスCMSであるため、通常のCMSのようにページという概念がそもそもありません。

ヘッドレスCMSとしては正しい形なのですが、それでは管理がしづらい場面も出てくると思います。

例えばSEO対策については別途フロントエンド側で対策する必要があるのですが、Composeというアプリを使うとページ単位でのアプローチが可能になり、noindex等のSEO対策もContentfulで行えます。

 

その他

あとは他の有名どころのCMSも持っているであろう機能、例えば

  • ワークフローによってコンテンツ承認の手続きを管理
  • 記事やフィールドごとにユーザーごとの細かいCRUD管理が可能
  • 変更履歴を管理

といった機能も有しています。

また、もう1点注意点かつ特徴の1つとして挙げられるのはContentfulはSaaSとなりますのでその分インフラにかかるコストが削減できます。
また、CMSのバージョンアップに伴う改修が発生しないため、その分のコストも削減できます。

APIの仕様変更に伴う改修等は発生するかもしれませんが、CMSのバージョンアップに伴う改修工数と比較すればかなり少ない工数で対応できると思います。
ただ、最近は有名どころのCMSもSaaS版を提供していたりしますので、Contentfulの特徴というよりは紹介・説明となります。

コンテンツの管理に集中したい場合であったり、あとは様々なプラットフォームでの自社のコンテンツの展開を検討、もしくは進めていきたい方はヘッドレスCMSの利用を検討してみてはいかがでしょうか。

今後も機会があればこのContentfulの機能等を紹介していきたいと思いますので、よろしければ当社ブログを引き続きチェックしてください。

 

またWebサイト構築や現在のCMSからの入れ替え等ご検討の場合は是非弊社ホームページからお気軽にお問い合わせください。

www.nextscape.net