web

web

目的

このスキルは、プロジェクト構成の設定、適切なツールの選定（例：フロントエンドにはReact、バックエンドにはExpress）、デプロイ方法の決定（例：AWSとHerokuのどちらを選ぶか）など、ウェブ開発の主要なタスクを管理します。プロジェクトがスケーラビリティと保守性に関するベストプラクティスに従うようにします。

使用するタイミング

新しいウェブプロジェクトを始めるとき、既存のプロジェクトをリファクタリングするとき、または技術スタックを決めるときに、このスキルを使用します。たとえば、フロントエンドとバックエンドの統合が必要なフルスタックアプリや、クラウドサービスへのデプロイ時に適用します。モバイルアプリやデータサイエンスなどの専門分野では使用しないでください。

主な機能

• プロジェクト構成の生成：コード用の /src、アセット用の /public、設定ファイル（例：Node.js用のpackage.json）などのディレクトリを作成します。
• ツールの選定：要件に基づいて提案します。例：バンドルにはWebpack、トランスパイルにはBabelを提案します。
• デプロイ方法の決定：コストやスケーラビリティなどの要素を考慮し、Dockerコンテナやサーバーレス（AWS Lambda）などの選択肢を評価します。
• バージョン管理との統合：ウェブプロジェクト用の.gitignoreを自動的に設定します。

使用パターン

JSONペイロード（例：{"action": "setup", "params": {"type": "full-stack"}}）を指定して /skills/web にPOSTリクエストを送信し、OpenClawのAPI経由でこのスキルを呼び出します。コード内では、スキルモジュールをインポートしてskill.web.setupProject(options)などのメソッドを呼び出し、スクリプト内で使用します。認証が必要な操作では、$WEB_API_KEYなどの必須環境変数を必ず渡してください。CLIでは、openclaw web --action setup --params '{"framework": "react"}'を実行してプロジェクトを初期化します。

一般的なコマンド／API

• APIエンドポイント：POST /skills/web/setup — {"projectName": "myapp", "structure": {"frontend": "react", "backend": "express"}}のようなJSON本文が必要です。認証ヘッダーを含めます：Authorization: Bearer $WEB_API_KEY。
• CLIコマンド：openclaw web generate --type full-stack --tools webpack,babel — フラグ：--type（例："spa"はシングルページアプリ）、--tools（カンマ区切りのリスト）。
• コードスニペット：

  import openclaw
  response = openclaw.invoke('web', {'action': 'selectTool', 'criteria': 'fast-rendering'})
  print(response['recommendation'])  # Outputs e.g., "React"
  

• 設定形式：プロジェクト設定にはYAMLを使用します。例：

  project:
    frontend: react
    backend: node
    deployment: docker
  

統合に関する注意

呼び出しを連鎖させて、他のOpenClawスキルと統合します。例：ウェブのセットアップ後に「deploy」スキルを呼び出します。APIアクセス用に、$WEB_API_KEYなどの環境変数を設定します。外部ツールでは、出力をパイプで渡します。たとえば、セットアップ後にサブプロセス呼び出しでnpm installを実行します。互換性を確保するため、バージョンを確認します。たとえば、最新のウェブプロジェクトではNode.js 14+を使用します。CI/CDで使用する場合は、GitHub Actionsなどのツール向けに設定をJSONとしてエクスポートします。

エラー処理

レスポンスのステータスコードを確認します。APIが400を返した場合は、エラーメッセージ（例：「Invalid project type」）を記録し、修正したパラメーターで再試行します。CLIでは、try-catchでエラーを処理します。例：Pythonでは、try: subprocess.run(['openclaw', 'web', 'setup']) except subprocess.CalledProcessError as e: print(e.output)を使用します。よくあるエラーには、$WEB_API_KEYが設定されていない（.envファイルに設定して解決します）、無効なフラグが指定されている（例：--toolsにサポートされていない値を指定している）などがあります。呼び出し前に入力を必ず検証します。たとえば、「framework」が["react", "vue"]に含まれていることを確認します。

具体的な使用例

1. 基本的なウェブプロジェクトのセットアップ： これを使用してReactとNode.jsのアプリを作成します。コマンド：openclaw web setup --name myapp --frontend react --backend express。これにより、Reactコード用の/src/clientとExpressのルート用の/src/serverを含む構成が生成されます。続けて、プロジェクトディレクトリでnpm installを実行します。
2. デプロイ方法の決定： 本番アプリの場合は、本文{"app": "myapp", "provider": "aws", "type": "ec2"}を指定して、API経由でPOST /skills/web/deployを呼び出します。Dockerベースのセットアップが提案され、Dockerfile: FROM node:14; COPY . /app;のような設定が出力されます。これを使用してデプロイスクリプトを自動化します。

グラフの関係性

• クラスターとの関連：web-dev（例：「frontend」や「backend」などのスキルとノードを共有します）。
• タグによる接続：「web」（開発クラスター内のスキルにリンクします）、「development」（「git」や「docker」などのツールとエッジで接続します）。
• 依存関係：API 呼び出しには「auth」が必要で、セットアップ後の操作には「deployment」スキルと連携します。