Sanity Studio の起動

Sanity Studio の起動

これから運用するコンテンツ管理のベースになる、Sanity Studio を立ち上げていきます。

ガイドで提供されているコマンドではなく、以下のコマンドを実行します。

npm create sanity@latest

今回はサンプルと同じように設定するために、各質問に対しては以下のように回答していきます。

プロジェクトの作成が完了したところで、作成したパスに移動をして以下のコマンドを実行します。

npm run dev

実行すると URL が表示されるため、アクセスをしてください。ログインをしたあと、以下のような画面が表示されます。

ログインができましたが、何もコンテンツの定義などもしていないため、何も表示されていない形となります。

スキーマの作成

Sanity Studio のスキーマの作成に関しては、設定ファイルを参照すると以下のように記載されています（該当部分のみ抜粋）

import {schemaTypes} from './schemaTypes'

export default defineConfig({



  schema: {
    types: schemaTypes,
  },
})

上記で読み込んでいるファイルの中は以下のように記載されています。

export const schemaTypes = []

Sanity ではコンテンツのスキーマの定義を、TypeScript を利用して定義することが可能となっています。

イベント情報のスキーマを作成したいと思います。apps/studio/schemaTypes/eventType.ts のファイルを作成します。

import {defineField, defineType} from 'sanity'

export const eventType = defineType({
  name: 'event',
  title: 'Event',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
    }),
  ],
})

このスキーマを index.ts で読み込みをするようにします。

import {eventType} from './eventType'

export const schemaTypes = [eventType]

上記の反映をすると、起動している管理画面が更新されて Event というコンテンツの追加が可能となります。

このように、スキーマで定義した項目がコンテンツの項目として定義する形となります。

続けて Artist および Venue のスキーマを追加していきます。

artist のサンプルは以下の通りです。

import {defineField, defineType} from 'sanity'

export const artistType = defineType({
  name: 'artist',
  title: 'Artist',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
    }),
    defineField({
      name: 'description',
      type: 'text',
    }),
    defineField({
      name: 'photo',
      type: 'image',
    }),
  ],
})

続いて Venue を作成します。

import {defineField, defineType} from 'sanity'

export const venueType = defineType({
  name: 'venue',
  title: 'Venue',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
    }),
    defineField({
      name: 'city',
      type: 'string',
    }),
    defineField({
      name: 'country',
      type: 'string',
    }),
  ],
})

上記２つを index.ts に反映させます。

import {artistType} from './artistType'
import {eventType} from './eventType'
import {venueType} from './venueType'

export const schemaTypes = [artistType, eventType, venueType]

変更後、Sanity Studio の画面を参照すると以下のように更新されています。

続いてイベントのスキーマを更新します。公式サイトにいくつかのフィールドが用意されており、それを順に追加していく形です。完成したコードは以下のようになります。

import {defineField, defineType} from 'sanity'

export const eventType = defineType({
  name: 'event',
  title: 'Event',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      type: 'slug',
    }),
    defineField({
      name: 'eventType',
      type: 'string',
    }),    
    defineField({
      name: 'date',
      type: 'datetime',
    }),
    defineField({
      name: 'doorsOpen',
      type: 'number',
    }),
    defineField({
      name: 'venue',
      type: 'reference',
      to: [{type: 'venue'}],
    }),
    defineField({
      name: 'headline',
      type: 'reference',
      to: [{type: 'artist'}],
    }),
    defineField({
      name: 'image',
      type: 'image',
    }),
    defineField({
      name: 'details',
      type: 'array',
      of: [{type: 'block'}],
    }),
    defineField({
      name: 'tickets',
      type: 'url',
    }),
  ],
})

フィールドのタイプに関して、２つほど補足する点があります。

• reference: このタイプは別のスキーマタイプのコンテンツを参照するフィールドになります
• block: リッチテキストのように汎用性のあるコンテンツを作成することができるフィールドのタイプになります

サンプルのデータのインポート

公式サイトで提供されているサンプルデータをダウンロード、day-one に data フォルダを作成して、移動します。

続いて studio のパスで、以下のコマンドを実行することでインポートを実行きできます（path は適宜書き換えてください）。

npx sanity@latest dataset import ~/day-one/data/production.tar.gz production

インポートが成功すると以下のように表示されます。

インポートが完了したあと Sanity Studio で確認をすると、コンテンツのインポートが完了しています。

Studio を展開する

現在は手元の環境で動かしていますが、この管理画面を展開することができます。今回は、Sanity が提供している Hosting を利用して展開していきます。

apps/studio のパスの下で、以下のコマンドを実行してください。

npx sanity deploy

まだ展開していない場合、ホスト名の確認が表示されます。希望するホスト名を指定して、展開すると以下のような形で完了となります。

無事、ホスティングの展開が完了しました。

コンテンツの編集をするサーバーの準備が完了した形です。

今後、展開をする際に毎回ホスト名を選択するのを省略するために、sanity.cli.ts のファイルに studioHost の１行と合わせてホスト名を記述してください。

import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: 'sampleproject',
    dataset: 'production',
  },

  studioHost: 'haramizu-day-one',

これで、コマンドを実行するだけで自動的に Studio の展開ができます。

まとめ

今回は Sanity Studio の起動まで紹介をしました。公式のガイドで Step by Step でより細かく説明をしているため、合わせてご覧ください。

• Hello, Studio
• Local development
• Creating a schema
• Deploying your Studio

またここまでのコードは以下のリポジトリ / ブランチで公開しています。

• Day One - Step 1

Learning GROQ