【ITニュース解説】Pulse Wall: I Let Sanity Run My Repost Marketplace's Content

ウェブ開発の世界では、効率的にコンテンツを管理し、ユーザーに届けることが非常に重要だ。今回紹介する「Pulse Wall」は、まさにその課題に、Sanityという強力なツールを使って挑んだプロジェクトである。システムエンジニアを目指す皆さんにとって、実際の開発でどんな工夫がされ、どんな困難に直面し、どう乗り越えたのかを知る良い機会となるだろう。

Pulse Wallは、元々開発が進められていた「Pulse」というソーシャルプロモーションのプラットフォームの一部として生まれた。Pulseは、企業がプロモーションキャンペーンを立ち上げ、それをソーシャルメディアで共有することで報酬を得るプロモーターを募集する場を提供するものだ。しかし、このPulseの全体を再構築するには多くの手間と時間、そしてGo言語やMongoDB、Paystackといった複雑なバックエンド技術（ウェブサイトの裏側でデータの保存や処理を行う部分）が必要となる。そこで、Pulse Wallでは、既存のNext.jsで構築されたユーザーインターフェース（ウェブサイトの見た目や操作部分）を最大限に活用しつつ、キャンペーン情報やプロモーターの紹介といった「コンテンツ」の部分だけをSanityというツールで管理する形に切り替えた。

このアプローチの最大の利点は、コンテンツの更新が非常に簡単になることだ。Sanity Studioという専用の管理画面から、新しいキャンペーンやプロモーターの情報を追加・編集できるため、ウェブサイト全体を再デプロイ（つまり、再度インターネットに公開し直す作業）することなく、最新のコンテンツをすぐに公開できる。これは、コンテンツが頻繁に更新されるウェブサイトにとって、開発者の負担を大幅に減らし、運用を効率化する画期的な方法と言える。

開発プロセスでは、AIツールである「Claude Code」が大きな役割を果たした。開発者は既存のPulseプロジェクトのコードをClaude Codeに読み込ませ、「ウェブサイトの見た目を再利用し、裏側の複雑な処理をなくして、コンテンツ管理をSanityに任せる」という指示を出した。これにより、ゼロからすべてを作るのではなく、効率的に開発を進めることができた。具体的には、キャンペーンとプロモーター紹介の二種類の「スキーマ」（コンテンツのデータの形を定義するもの）を作り、Sanity StudioをNext.jsのウェブサイトの中に直接組み込むことで、一つだけのアプリとしてデプロイできるように工夫した。これにより、管理画面とウェブサイトが一体となり、管理がしやすくなる。

しかし、開発は常に順風満帆に進むわけではない。Pulse Wallの開発でも二つの大きな壁にぶつかった。一つ目は「CORS（Cross-Origin Resource Sharing）」という問題だ。これは、ウェブサイトとSanityのコンテンツが異なる場所（サーバー）にある場合、セキュリティ上の理由から互いの通信が制限される仕組みだ。Sanityは、許可されていない場所からのアクセスをブロックするため、開発環境のPCや、ウェブサイトをデプロイしたRenderのURLをSanityの設定に明示的に「許可リスト」として追加する必要があった。この問題は、ブラウザの開発者ツールでエラーメッセージが表示されるまで原因が分かりにくく、解決に時間がかかったという。

二つ目の壁は、Sanity Studioで新しいコンテンツを公開しても、ウェブサイトにすぐに反映されないという問題だった。これは、Next.jsという技術でウェブサイトを構築する際、「ページの情報をいつ更新するか」という設定が正しく機能していなかったために起こった。具体的には、ウェブサイトのトップページが、ビルド（ウェブサイトを公開できる形に変換する作業）された時点の古い情報のままで、新しいSanityのコンテンツを取得しに行ってくれなかったのだ。この問題を解決するためには、「export const dynamic = "force-dynamic"」という設定を、ページの情報を決定する主要なファイルに記述する必要があった。これにより、ウェブサイトがアクセスされるたびに常に最新のSanityコンテンツを取りに行くようになり、「ビルド不要でライブ更新」という目標が達成された。

ウェブサイトのデプロイ（公開）には、Renderというサービスが選ばれた。Renderは、render.yamlという設定ファイル一つで簡単にデプロイできるのが特徴だ。また、開発者は、無料プランのサーバーが一定時間アクセスがないとスリープしてしまうのを防ぐため、GitHub Actionsという自動化ツールを使って、5分ごとにウェブサイトにアクセスする仕組みも導入した。これにより、審査員がウェブサイトを訪問した際に、常にスムーズに動作する状態を保つことができた。

このプロジェクトでは、Sanityの全ての機能を深く掘り下げるのではなく、「Content Lake」（コンテンツを保存する場所）、「Studio」（コンテンツを編集する管理画面）、そして「GROQクエリ」（コンテンツを取り出すための特別な問い合わせ言語）といった核となる機能に焦点を当てて開発が進められた。システムエンジニアを目指す皆さんにとって、このPulse Wallの事例は、既存の技術を再利用し、新しいツールを導入する際の具体的なアプローチ、そして開発中に発生するであろう課題とその解決策を学ぶ上で、非常に参考になるはずだ。