AIでサイトを作って公開する

先ほどの AIで静的ページを移行する では、すでに作られていた静的ページを WEEGLOO が管理するコンテンツベースのサービスへ移行する流れを見てきました。今回はページを一から新しく作る段階まで含めて、より広い流れを扱います。

このヘルプでは LLM エージェントと WEEGLOO MCP を活用して、白紙の状態から始めて五つの作業を順番に進めます。まず AI ベースのデザインツールでページのデザインと実装を仕上げ、続いて生成されたページを分析して Content Type を自動で定義したうえで、ページに書かれていたデータを Content として取り込みます。そしてページが CDA からデータを取得するようにコードを修正したあと、最後に WEEGLOO の Web Hosting でページを外部に公開します。

この流れをひととおり経れば、デザインからコンテンツ管理、公開まで全工程を、別途インフラを自分で構築することなく、LLM エージェントと WEEGLOO だけで完成させられます。

事前準備

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

一つ目に、WEEGLOO に新しい Space が空の状態で作られている必要があります。これから作る Content Type と Content はすべてこの Space の中で管理されます。Organization と Space についての詳しい内容は アクセスと権限 で扱います。

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

三つ目に、ページのデザインと実装を自動で作ってくれる AI ツールが必要です。このヘルプでは便宜上 Vercel v0 を使いますが、Lovable や Bolt.new のように、自然言語のリクエストだけでデザインとコードをまとめて作ってくれるツールであれば何でもかまいません。直接コードを書く環境のほうが慣れているなら、Cursor IDE のような普段使っている LLM エージェントにデザインと実装をまとめて依頼してもかまいません。

ページのデザインと実装

まず最初に行うことは、ページのデザインと実装を仕上げることです。この段階では、どんなページを作りたいかを自然言語で整理し、それをそのまま AI ツールに渡します。

このヘルプでは、架空の分析 API サービスのための API ドキュメントページを例として使います。多くの開発チームは API ドキュメントを運用するために別途ドキュメントツールや外部テンプレートを導入しますが、こうした方法はドキュメントの形とコンテンツが強く結び付いているため、自由な構造変更やチームの流れに合わせた運用が難しい場合が多くあります。今回はデザインからコンテンツ管理まで全工程を自分で構成し、必要に応じて自由に運用できる形に作っていきます。

ページには API 自体についての情報(名前、タグライン、短い紹介)とあわせて、各エンドポイントについての情報(HTTP メソッド、パス、概要、説明)が入ります。ページの具体的な形や扱うエンドポイントの数は、運用する API に合わせて自由に決められ、運用しながらいくらでも広げていけます。こうした要件は、次のように自然言語に書き起こして AI ツールに渡します。

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

リクエストを受け取った AI ツールはデザイン案を作り、それに合うマークアップとスタイルをあわせて書き出します。この時点ではまだコンテンツ管理システムが接続されていないため、ページに見えるすべてのデータはコードの中に直接書かれている形です。

こうして作ったページのコードをダウンロードし、Cursor IDE のような LLM エージェント環境に取り込みます。以降のすべての作業はこのコードをもとに進められ、AIで静的ページを移行する で見た流れと同じ段階を経ます。

コンテンツモデリング

この段階では、先ほど生成されたページのデータ構造を Content Type として定義します。Content Type はデータの設計図のようなもので、どんな Field を持つデータを WEEGLOO で管理するかをあらかじめ決めます。

ページのコードを見ると、API 自体についての情報と各エンドポイントについての情報がいっしょに入っており、二種類のデータが一対多の関係を成しています。そのためこのページは、API 情報を持つ Content Type とエンドポイント情報を持つ Content Type の二つに自然と分かれます。

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

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
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 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 エージェントはコードの構造を調べてデータの種類と関係を推論し、各 Field にふさわしいタイプを決めたあと、WEEGLOO MCP で Content Type を作ります。

作業が終わったあと WEEGLOO コンテンツスタジオの Content Type ページを見ると、API を表す Content Type とエンドポイントを表す Content Type の二つが新しく作られたことが分かります。API Content Type には名前・タグライン・紹介といった Field が、エンドポイント Content Type には HTTP メソッド・パス・概要・説明とあわせて、どの API に属するかを指し示す参照(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 project 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 エージェントはコードを再び分析してデータを項目ごとに分けたあと、WEEGLOO MCP で API 情報と各エンドポイント情報を順番に登録します。登録された Content は、外部から参照できるようにあわせて発行されます。

作業が終わったあと WEEGLOO コンテンツスタジオの Content 一覧を見ると、API 情報とエンドポイント情報がすべて発行された状態で登録されています。ここからはページのコードを直接修正しなくても、コンテンツスタジオや LLM エージェントでデータを自由に変えられます。

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

CDA連携

データまで準備できたら、今回はページがコードに直接書かれたデータではなく、WEEGLOO の CDA からデータを取得するようにコードを修正します。CDA は発行された Content を外部サービスから参照できるように提供される読み取り専用 API で、Web ページやモバイルアプリが WEEGLOO のデータを直接取得して使えるようにします。

この作業も LLM エージェントに次のように依頼すると自動で行われます。

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project 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 呼び出しが、API 情報があった場所には API Content を単件で参照する呼び出しが入ります。

修正したページをローカルで実行したあと、ブラウザの開発者ツールの Network タブを見ると、ページが読み込まれるときに WEEGLOO の CDA へ実際にリクエストが送られ、応答が届くことを確認できます。CDA についての詳しい内容は Content Delivery API で扱います。

ウェブホスティング

最後の段階は、これまで作ってきたページを外部に公開することです。WEEGLOO はページを自分でホスティングできるように Web Hosting 機能を提供しています。これにより、別途ホスティングインフラを自分で構成することなく、完成したページを誰でもアクセスできる状態で公開できます。

LLM エージェントに次のように依頼します。

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

リクエストを受け取った LLM エージェントはページのビルド成果物を Web Hosting にアップロードし、自動で発行されるサブドメインを通じて外部からアクセスできるようにページをデプロイします。

デプロイが終わると、発行されたサブドメインのアドレスでどこからでもページにアクセスできます。ここからは WEEGLOO コンテンツスタジオで Content を修正するだけで、別途ビルドしたり再デプロイしたりしなくても、変わった内容がそのままライブサイトに反映されます。新しいエンドポイントが追加されたり、既存のエンドポイントの説明が変わったりといった、API ドキュメント運用で頻繁に起こる作業も、コード修正なしで処理できます。

のちの運用段階で独自ドメインを使いたい場合は、WEEGLOO コンテンツスタジオで Custom Domain を接続できます。Web Hosting と Custom Domain についての詳しい内容は ウェブサイトの公開 で扱います。

ここまで、白紙の状態から始めてデザインと実装、コンテンツ管理、公開まで全工程を LLM エージェントと WEEGLOO だけで完成させてきました。同じ流れはより複雑なサイトにもそのまま適用でき、運用しながら新しい Content Type を追加したり Content の量を増やしたりする作業も、同じやり方で自然に続けていけます。