アプリの新規作成

早速ですが、シンプルなアプリの開発を進めます。以下のコマンドを day-one の下で実行します。

実行をすると、Organization の確認が表示されます。これは既存の Studio と同じ Organization を選択してください。

実行すると、以下のように apps の下に新しいアプリが追加されます。

作成されたファイルでは、apps/tickets/src/App.tsx に projectId と dataset を追加してください。

標準では 3333 ポートを利用してこのアプリケーションが動作します。studio もローカルで起動した時は同じポートを利用しています。そこで、studio をローカルで起動する際に、3334 でこのアプリを起動できるように、apps/tickets/sanity.cli.ts のファイルを以下のように変更します。

この変更をすると、Sanity の管理画面の CROS に localhost:3334 が含まれていないため以下のような画面が表示されます。

apps/studio のフォルダで以下のコマンドを実行してください。

警告が表示されますが、今回は意図的に追加するため Yes を選択してください。

これで準備ができました。 apps/tickets のディレクトリに移動をして、以下のコマンドを実行します。

URL が表示されるため、クリックをしてください。以下のようにダッシュボードが表示されれば、ローカルのアプリが動くようになった形です。

コンポーネントの作成

作成した新しいアプリに幾つかの機能を追加していきます。まず、コンテンツが下書きになっている場合に公開を実行する Publish.tsx を作成します。apps/tickets/src/Publish.tsx を作成して以下のコードを設定します。

続いて、チケットの URL が正しいか確認をするための Open ボタンを作成します。apps/tickets/src/TicketURL.tsx を追加して、以下のコードを設定します。

続いてイベントの情報を表示するコンポーネントとして、apps/tickets/src/Event.tsx ファイルを作成します。

最後に、イベントの一覧を表示するための Events として、apps/tickets/src/Events.tsx を追加します。

最後に、apps/tickets/src/App.tsx ファイルを更新します。以下の部分が Events を読み込んでコンポーネントを追加できているか確認をしてください。

完了すると、以下のように画面が更新されます。

動作確認

例えば、Kendrick Lamar at Ronnie Scott's Jazz Club のイベントの tickets の項目に Studio を通じて URL を設定します。

作成をしたアプリを開くと、この URL が反映されていることがわかります。

このアプリで Publish のボタンをクリックすると、公開が完了します。逆のパターンも可能で、このアプリで変更したデータは Studio で開いているデータにも反映されます。

アプリを展開する

作成をしたアプリを展開したいと思います。展開の手順は非常に簡単で、今回は apps/tickets の下で以下のコマンドを実行するだけとなります。

実行するとアプリ名の確認となります。

上記の画面に sanity.cli.ts に id を追加するというメッセージが表示されています。この設定を入れることで、更新したにもう一度展開する時に、アプリの選択をするのを省略できます。

展開をしたあと、Dashboard にアクセスをします。左側のメニューから Studio & Applications のメニューを選択、Applications に今回作成をしたアプリが含まれています。

クリックをすると以下のようなエラーが表示されます。

上記のエラー画面に表示されている URL をブラウザで開くと CORS の設定画面となります。

なお、上記のドメインの追加で必ず他と同様に Allowed になっていることを確認してください。展開に成功すると、以下のようにアプリが動作するようになります。

まとめ

今回はサンプルをそのまま動かしただけですが、Studio での UI とは異なる形でコンテンツの更新をすることが可能となりました。複数のコンテンツを跨いだ更新が多い場合や、コンテンツの一部だけ更新頻度が高い、といったケースではこのような更新画面を別途用意することで、サイト運用を効率化ができます。