3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

先日、Cloudflareから次世代WordPressを謳うEmdashがリリース(?)されましたが、実は全く触れていません。
同じく次世代のWordPressを謳っていた国産Headless CMS「Newt」がサ終してしまった今、ポストWordPressとしては最後の砦となってしまいました。

ところで、個人的には最近「Sanity」がお気に入りです。
以前、Headless CMSを調べた記事でも紹介していたのですが、どうにもロゴが好きになれずスルーしていました。

Sanity新旧ロゴ

ところが、いつの間にかロゴがリニューアルしていました!
昨今のアパレルブランドっぽいBeforeAfterでクールです。
触ってみたところ、なかなかWordPressyです。

Sanityのいいところ

  • 無料で全然使える
  • ローカルでもクラウドでも使える
  • 管理画面(Sanity Studio)のカスタマイズ性が高い
  • 多様なプラグイン

Sanityのよくないところ

  • 予約投稿は有料プランのみ
    • Webhookをあれこれ頑張ればできるけど、なかなか面倒

基本的な始め方

まずは sanity.io でアカウントを作成します。無料プランで十分です。

次に、下記のコマンドで新しいプロジェクトを作成します。

npm create sanity@latest

対話形式でプロジェクト名やテンプレート、データセット名などを設定すれば、Sanity Studio がセットアップされます。

Sanity Studio の起動

以下のコマンドで開発環境を起動します。

npm run dev

管理画面が http://localhost:3333 で開くので、コンテンツタイプ(スキーマ)の定義からコンテンツの入力、公開まで、すべてここで行います。

スキーマの定義

schemaTypes/ 以下に TypeScript(または JavaScript)で下記のようにコンテンツタイプを定義します。

schemaTypes/post.ts
export const post = {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    { name: 'title', title: 'タイトル', type: 'string' },
    { name: 'content',  title: '本文',     type: 'text'   },
  ],
}

匙加減といえば匙加減ですが、ここで存分に俺たちのWordPressを再現できます。

データの取得(GROQ)

Sanity独自のクエリ言語(?) GROQ を使って、GraphQLっぽくコンテンツを取得できます。

*[_type == "post"] | order(_createdAt desc) {
  _id,
  title,
  content
}

あとは好きにフロント側をあれこれしたらできあがりです。

「よくないところ」であげた予約投稿ですが、月15ドルのGrowthプランから利用できるので、Headless CMS的にはまだお買い得な気がしています。
本当はおすすめプラグインとかあれこれ書こうとも思っていたのですが、AIに尋ねたら一瞬で凌駕されたので割愛します。

終わり。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?