Sanity Studio の起動

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

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

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

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

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

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

スキーマの作成

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

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

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

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

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

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

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

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

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

続いて Venue を作成します。

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

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

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

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

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

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

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

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

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

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

Studio を展開する

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

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

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

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

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

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

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

まとめ

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

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

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

• Day One - Step 1

GROQ を学ぶ

Sanity に保存しているデータを取得する仕組みとして、GraphQL 以外に GROQ という仕組みが提供されています。今回は、この GROQ に関して動作確認をしていきます。