Shifter Headless で WordPress を Headless CMS として使う

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、 Shifter Headless という WordPress をサーバーレスの Headless CMS として提供するサービスについて知見をまとめたいと思います。

Shifter Headless は、以前このブログでも弊社の森田がご紹介した Shifterに新しく登場したサービスです。

以前 Shifter と呼ばれていた、サーバーレスの WordPress サイトを静的化するサービスは Shifter Static として、 Shifter 内の1サービスという扱いになりました。

Shifter Headless とは?

Shifter ロゴ

Shifter Headless とは、あらかじめ Headless CMS として最適化された WordPress をサーバーレスでセットアップし、 Contentful や microCMS などといった、APIベースの Headless CMS のデータソースとして使用できるようにするサービスです。

WordPress を Headless CMS として使用できるため、 GatsbyJS など、任意の静的サイトジェネレーターを選択してフロントを開発することができます。

詳しくは公式のドキュメントもご覧ください。

使ってみて感じたメリット

実際に使ってみて、以下がメリットだと感じました。

  • 全てサーバーレスでセットアップができる
  • 最初から Headless CMS として使われることを前提に、必要なプラグイン等がデフォルトでセットされている
  • WordPress のコア部分やプラグインは自動更新される
  • WordPress の知見をそのまま Jamstack 構成の開発に活かすことができる
  • Web フロントとデータソースが分離することで、開発者と運用者が分業したワークフローを実現できる

元々 WordPress を静的サイトジェネレーターのデータソースとして使用することは可能だったのですが、このサービスはサーバーレスで使用可能かつ最初から WordPress が Headless CMS として使うために最適化されており、必要な設定が初期状態で既に済んでいるので、すぐに使い始めることができて非常に便利だと感じました。

また、 WordPress の知見をそのまま Jamstack に活かすことができる点は Jamstack サイトを開発する上でとても有用なのではないかと思います。

料金プランは以下のようになっています。

Shifter Headless の料金プラン

Shifter Static とは異なり全て有料プランとはなってしまいますが、7日間はフリートライアルで使用することができます。

利用する方法

ダッシュボードにログイン後、 Headless タブを選択した後の状態のキャプチャ画像

Shifter ダッシュボードにログイン後、 Headless タブを選択し、 Create new site (Headless) または Create new をクリックします。

プランの選択画面が出てくるので、任意のプランもしくは下部の Free Trial を選択します。

サイトが生成された画面のキャプチャ画像

WordPress が生成されるので、WordPress admin URL に表示されたIDとパスワードでログインします。

以上で WordPress のセットアップは完了しますので、後は WordPress にデータを流し込み、任意の静的サイトジェネレーターでAPIを呼ぶことでコンテンツを表示できるようになります。

まとめ

今回は Shifter Headless について知見をまとめました。

静的サイトジェネレーターのデータソースとして WordPress を使用できるのはとても便利で、セットアップも非常に簡単なので Jamstack サイトを構築する上で選択肢になってくるのではないかと使ってみて感じました。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

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

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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