AIで静的ページを移行する

ここでは、静的なHTMLで作成されたページを、WEEGLOOが管理するコンテンツベースのサービスへ移行する流れを見ていきます。

このガイドでは、単独公演の案内ページを例（ダウンロード）として使います。このページには公演自体の情報に加えて、出演するアーティスト3名の情報が含まれており、すべてのデータがHTMLファイルの中に直接書き込まれている形です。こうした構造はページを最初に作るときは負担になりませんが、出演者が変わったり公演情報が修正されたりするたびに、HTMLファイルを毎回手作業で直さなければならないという限界があります。

この段階では、LLMエージェントとWEEGLOO MCPを組み合わせて、3つの作業を順番に進めます。まず静的なHTMLページを分析して適切なContent Typeを自動的に作成し、続いてページに書かれていたデータを取り出してContentとして登録し、最後にページがCDAを通じてデータを取得するようコードを修正します。

この流れを経ると、別途バックエンド（データを保存・処理する裏側のシステム）を自分で作らなくても、既存の静的ページをWEEGLOOベースのコンテンツサービスへ移行できます。

事前準備

作業を始める前に、2つのものが準備されている必要があります。

1つ目に、WEEGLOOに新しいSpaceが空の状態で作成されている必要があります。これから作るContent TypeとContentはすべてこのSpaceの中で管理され、空の状態から始めることで流れをより明確に追えるためです。OrganizationとSpaceについての詳しい内容はアクセスと権限で扱います。

2つ目に、LLMエージェントがWEEGLOO MCPに接続されている必要があります。このガイドはCursor IDEを基準に進めますが、Claude DesktopのようにMCPをサポートする環境であれば、同じ流れで進められます。インストール方法はMCPで扱います。

インストールが終わると、LLMエージェントがWEEGLOOのCMA（Content Management API）に定義されたツールを直接呼び出せる状態になります。つまり、これまで人がコンテンツスタジオで行っていたContent Typeの作成、Contentの登録・公開といった作業を、LLMエージェントが自然言語のリクエストだけで実行できるようになります。

コンテンツモデリング

まず最初にやることは、ページに含まれるデータの構造をContent Typeとして定義することです。Content Typeはデータの設計図のようなもので、どんなFieldを持つデータをWEEGLOOで管理するかをあらかじめ決めます。

例のページを見ると、公演自体の情報（タイトル、日時、場所、価格など）と出演者の情報（名前、役割、セットタイム、紹介）が一緒に含まれており、2種類のデータが一対多の関係を成しています。そのため、このページは公演情報を収めるContent Typeと出演者情報を収めるContent Typeの2つに自然と分かれます。

この分析とContent Typeの作成は、LLMエージェントに次のようにリクエストするだけで自動的に行われます。

Hey, so there's an HTML file in the project — nightshift-2026.html. It's a
landing page for a one-night concert and right now everything's hardcoded
straight into the markup (the show details, the lineup, set times, all of it).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look at nightshift-2026.html and figure
out what content types would make sense for it, then go ahead and create
them in Weegloo? We'll deal with the actual content and the API wiring in
the following steps.

リクエストを受けたLLMエージェントは、HTMLファイルの構造を調べてデータの種類と関係を推論し、各Fieldに適したタイプを決めたうえで、WEEGLOO MCPでContent Typeを作成します。

作業が終わった後、WEEGLOOコンテンツスタジオのContent Typeページを見ると、公演を表すContent Typeと出演者を表すContent Typeの2つが新しく作成されているのが分かります。公演のContent Typeにはタイトル・日時・場所・価格といったFieldが、出演者のContent Typeには名前・役割・セットタイム・紹介に加えて、どの公演に属するかを指す参照（Reference）Fieldが含まれます。

このようにContent Typeが定義されると、この構造をもとに実際のデータを登録する準備が整います。Content Typeについての詳しい内容はContentモデリングで扱います。

コンテンツの作成

Content Typeはデータの形式を定義するだけで、それ自体にはデータが入っていません。この段階では、先ほど定義したContent Typeをもとに、ページに書かれていた実際のデータをContentへ移します。

LLMエージェントに次のようにリクエストすると、ページのデータを分析してContent Typeに合ったContentを作成し、公開まで一緒に処理します。

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through nightshift-2026.html again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too so
they're ready to be served.

リクエストを受けたLLMエージェントは、HTMLを再び分析してデータを項目ごとに分けたうえで、WEEGLOO MCPで公演情報1件と出演者情報3件を登録します。登録されたContentは、外部から参照できるよう合わせて公開されます。

作業が終わった後、WEEGLOOコンテンツスタジオのContent一覧を見ると、公演1件と出演者3件がすべて公開された状態で登録されています。この時点からは、ページのコードを直接直さなくても、コンテンツスタジオやLLMエージェントでデータを自由に変更できます。

Contentの作成と公開についての詳しい内容はContentの作成と公開で扱います。

CDA連携

データまで準備できたら、最後に、ページが静的に書かれたHTMLではなく、WEEGLOOのCDAを通じてデータを取得するようコードを修正します。CDAは、公開されたContentを外部サービスから参照できるよう提供される読み取り専用のAPIで、ウェブページやモバイルアプリがWEEGLOOのデータを直接取得して使えるようにします。

この作業も、LLMエージェントに次のようにリクエストすると自動的に行われます。

Okay, last step. The content's all in Weegloo and published, so now let's
hook the page up to actually use it.
 
Could you update nightshift-2026.html so that instead of having all that
data hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before, just
pulling from the API now.

リクエストを受けたLLMエージェントは、ページに埋め込まれていた静的データを取り除き、その代わりにCDA呼び出しと、応答データを画面に反映するコードを書き込みます。出演者情報があった場所には出演者のContent一覧を参照するCDA呼び出しが、公演情報があった場所には公演のContentを単件で参照する呼び出しが入ります。

修正したページを再読み込みした後、ブラウザの開発者ツールのNetworkタブを見ると、ページの読み込み時にWEEGLOOのCDAへ実際のリクエストが送られ、応答が届くのを確認できます。

これでWEEGLOOコンテンツスタジオから出演者のセットタイムを変えたり新しい出演者を追加したりした後にページを再読み込みすると、別途ビルドやデプロイをしなくても、変更した内容がすぐに反映されます。CDAについての詳しい内容はContent Delivery APIで扱います。

ここまでで、静的に作成されていた単一のHTMLページを、WEEGLOOが管理するコンテンツベースのサービスへ移行してみました。同じ流れは、より複雑なページにもそのまま適用できます。Content Typeの数とContentの量が増えるだけで、モデリングから登録、CDA連携に至る全体の流れは同じように進みます。