メインコンテンツへ移動
AIチュートリアル

shipwordsでキーワード重視のAIサイト群を構築・公開する

shipwordsを使って、新しいキーワードを軸にAI画像サイトや動画サイトのひな形を作成し、モックサービスでローカル実行する方法を紹介します。認証と決済を設定し、各サイトを個別のCloudflare環境へデプロイする準備も行います。

約11分で読了
shipwordsでキーワード重視のAIサイト群を構築・公開する

shipwordsの概要

shipwordsは、キーワードごとに専用サイトを1つずつ用意し、Cloudflare上でAI画像・動画サイト群を運用するための、MITライセンスのオープンソースフレームワークです。アカウント、決済、クレジット、AI生成などの共通機能はフレームワークに一度だけ実装し、各サイトには独自のページ、ビジュアルアイデンティティ、ドメイン、データベース、ストレージ、決済アカウントを持たせられます。

各サイトは、D1、R2、Workflowsを備えた独自のCloudflare Worker上で動作するTanStack StartおよびReact 19アプリケーションです。この分離により、共通コアの改善を今後のデプロイで受け取りながら、サイトを個別に起動、更新、終了できます。

主な機能

  • アカウントページを備えたGoogleおよびメールログイン。
  • クレジットパック、サブスクリプション、注文、返金、異議申し立てに対応したStripeおよびPayPal。
  • メール通知と、reCAPTCHA v3による不正利用制限付きのゲスト向け無料お試し。
  • プライバシー、利用規約、返金、DMCAの各ページ。
  • sitemap.xml、robots.txt、llms.txtを含むSEOおよびGEOヘルパー。
  • 一方向のジョブ状態と、失敗したジョブの自動返金を備えたワークフローベースの生成ランタイム。
  • GPT Image、Nano Banana、Seedream、FLUX、Seedance、Veo、Kling、Wanなどのモデルに対応するYir API統合。
  • モデルAPIキーなしでローカル開発できるモックアップストリーム。
  • ffmpegコンテナによる任意の動画合成。

前提条件

開始する前に、リポジトリの.nvmrcで指定されているNode 24をインストールし、Corepackを有効にして必要なpnpmバージョンを利用できるようにします。

corepack enable

WindowsではGit BashまたはWSLを使用してください。デプロイして決済を受け付ける段階では、CloudflareアカウントとStripeまたはPayPalアカウントが必要です。基本的なローカルセットアップには必要ありません。

リポジトリをインストールする

リポジトリをフォークまたはクローンしてから、依存関係をインストールします。

pnpm install

新しいサイトをスキャフォールドする

サイトジェネレーターを使い、完全なAIサイトテンプレートからサイトを作成します。最初の引数はsites/配下のディレクトリ名になり、ドメインはサイト設定に記録されます。

pnpm new-site my-tool --domain my-tool.com
pnpm install

生成されたサイトには、ホームページ、料金ページ、アカウントおよびログインフロー、ポリシーページ、標準のsitemap.xml、robots.txt、llms.txtファイルが含まれます。新しいサイトの依存関係をインストールするため、もう一度pnpm installを実行してください。

ローカルシークレットを設定する

ローカルのシークレットはリポジトリの外部で管理します。設定ディレクトリを作成し、生成されたサイトのサンプル変数ファイルをコピーして、ワークツリー設定を接続します。

mkdir -p ~/.config/shipwords
cp sites/my-tool/.dev.vars.example ~/.config/shipwords/my-tool.dev.vars
pnpm setup:worktree

サンプル設定は、ローカル開発ですぐに動作するよう設計されています。メールログインコードは開発サーバーのターミナルに表示され、新規アカウントにはサインアップクレジットが付与され、UPSTREAM_MOCK=1の場合はモックアップストリームを使用して生成します。これにより、モデルAPIキーなしでアプリケーションをテストできます。

実際の生成を追加する

実際のモデルリクエストを行うには、Yir APIキーを追加し、UPSTREAM_MOCKを変更してモックアップストリームを無効にします。

決済をテストする

クレジット購入をテストするには、sk_test_で始まるStripeテストキーを追加します。サイトのディレクトリから、ローカル開発でStripeイベントを受信できるように、リポジトリのWebhook転送ユーティリティを実行します。

node ../../tools/stripe-listen.mjs

共通の決済コードは、決済イベントの重複や順不同、二重請求、失敗したジョブの返金に対応するよう設計されています。

任意のログインとゲストアクセスを設定する

ゲストの無料お試しにはreCAPTCHAキーが必要です。キーがない場合、訪問者は最初の生成前にログインする必要があります。Googleログインは任意です。有効にする場合はGoogle OAuthクライアントを作成し、許可されたオリジンとしてhttp://localhost:<port>を使用します。メールログインはGoogle OAuthなしで動作します。

サイトをローカルで実行する

生成されたサイトに移動し、ローカルデータベースのアーティファクトを作成してローカルマイグレーションを適用し、開発サーバーを起動します。

cd sites/my-tool
pnpm db:generate && pnpm db:migrate:local
pnpm dev

開発サーバーに表示されたローカルURLを開きます。サンプル設定を使って、メール認証、アカウント作成、クレジット、モック生成を試せます。

リポジトリのコマンドを使用する

ほとんどのコマンドは、サイト単位またはリポジトリ全体のチェックとして実行できます。

pnpm new-site <dir> --domain <domain>
pnpm list-sites
pnpm setup:worktree
pnpm --filter "./sites/<site>" dev
pnpm --filter "./sites/<site>" check
pnpm check:packages
pnpm check:template
pnpm lint && pnpm test:tools

list-sitesコマンドは、各サイトのコードとREADMEからサイト一覧を作成します。サイトのcheckコマンドは、型チェック、ビルド、起動チェックを実行します。パッケージチェックは共通コアとjobsパッケージを対象とし、テンプレートとツールのチェックは起動前の問題発見に役立ちます。

AIコーディングエージェントでサイトを構築する

対象にしたいキーワードがすでに決まっている場合、リポジトリはエージェント主導のワークフローに対応しています。Claude Code、Codex、またはCursorで、リポジトリのエージェント指示を読み込ませ、サイトの構築を依頼します。

Read shipwords.dev/llms.txt and build a site for "<your keyword>"

エージェントはリポジトリをクローンし、サイトを作成して、ローカルで実行できます。AIコーディングエージェント向けのルールはAGENTS.mdに記載されています。新たなキーワードのアイデアが必要な場合は、別プロジェクトのnew-term-radarが、X、Hugging Face、GitHub、サイトマップ上の新しいAI用語を監視しています。

高度なサイト動作をカスタマイズする

共有生成ランタイムを使用する

packages/jobsパッケージは、ワークフローベースのランタイム、上流アダプターのインターフェース、Yirアダプター、ローカルモック上流サービス、オプションのffmpeg合成機能を提供します。サイト固有の生成動作はサイト設定に保持し、ジョブ処理と返金処理には共有ランタイムを使用してください。

生成コストの上限を設定する

Yir経由のモデル呼び出しはリクエストごとに課金されます。各ジョブの最大コストはsite.models.tsで設定されています。実際の生成を有効にする前にこれらの上限を確認し、サイトの料金体系とクレジット動作が上流サービスの最大コストと一致するようにしてください。

動画の例を確認する

動画に重点を置いたサイトについては、sites/tinydeskai-exampleを確認してください。これはTiny Desk AIの完全なソースで、写真スロット、ワンパス動画編集、出力チェック、ffmpegによる合成、コンテンツページを実装しています。そのワークフローは、話題になったクリップを、訪問者がアップロードした写真で利用できるテンプレートに変換します。

サイトを独立して運用する

各サイトは、それぞれ独自のデータベース、ストレージ、決済アカウントを持ち、独立してデプロイされます。このアーキテクチャにより、共有コアを一度改善し、その更新を選択したサイトにデプロイできます。サイト同士のローンチや終了時期を結び付ける必要はありません。

本番環境に備える

ローカルサイトが動作したら、サイトローンチハンドブックに従って本番環境への移行を進めてください。ドメイン費用、Cloudflareの利用料金、決済処理手数料、Yirのモデルリクエストを計画に含めます。クリップをつなぎ合わせる動画サイトではCloudflare Containersを使用するため、Workers Paidプランが必要です。

ローンチ前に、サイトの認証、決済Webhook、クレジット動作、生成失敗時の処理、返金、ポリシーページ、SEOファイル、アナリティクス設定を確認してください。リポジトリには、より詳細な設定を確認するためのアーキテクチャとローカル開発のドキュメントも用意されています。

まとめ

shipwordsは、プロジェクトごとに認証、請求、クレジット、生成ワークフロー、SEO対応を作り直すことなく、キーワードに特化した複数のAIサイトを立ち上げるための実用的な基盤を提供します。テンプレートから始め、ローカルテストにはモック上流サービスを使用し、準備ができたら実際のプロバイダーを追加して、完成した各サイトをCloudflare上に独立してデプロイしてください。