Studio コード

このテキストはAIを使用して翻訳されました。英語の原文を表示するには、こちらをクリックしてください。

Studio Code は、Studio CLI に組み込まれた AI 搭載のコーディングエージェントです。ターミナル上でインタラクティブなチャットを提供し、自然言語を通じて WordPress サイトの構築、カスタマイズ、管理を会話形式で行えます。テーマの作成、ファイルの編集、WP-CLI コマンドの実行、プレビューのデプロイ、サイトの公開など、すべて自然言語で操作できます。

はじめに

Studio Code は、スタンドアロンの Studio CLI npm パッケージの一部として利用できます。

Studio デスクトップアプリがインストールされており、CLI が有効になっている場合は、ターミナルから直接 studio code を使用できます。

npx を使って直接実行できます：

npx wp-studio@latest code

グローバルにインストールすれば、studio code を直接使用できます：

npm i -g wp-studio@latest
studio code

WordPress.com に接続する

デフォルトでは、Studio Code は WordPress.com のインフラストラクチャを使用して AI レスポンスを生成します。WordPress.com にログインして始めましょう：

1. ターミナルから studio code を実行します。
2. チャットで /login と入力します。
3. ブラウザウィンドウが開きます。WordPress.com アカウントにログインし、接続を承認します。
4. 認証トークンをターミナルに貼り付けて、ログインを完了します。

または、チャットで /api-key と入力して、ご自身の Anthropic API キーを使用することもできます。

Studio Code の使い方

起動すると、Studio Code はターミナルにインタラクティブなチャットインターフェースを表示します。自然言語でリクエストを入力すると、AI エージェントがファイルの作成、コマンドの実行、サイトの変更などを行います。

↓ 矢印キーを押して Studio サイトを選択するか、↓ と → を押して WordPress.com のリモートサイトを選択できます。

ワークフローの例

新しいサイトを作成してカスタマイズする：

> Create a new WordPress site called "My Portfolio" with PHP 8.2

> Build a minimal portfolio theme with a dark color scheme

> Add a homepage with a hero section and project grid

既存のサイトで作業する：

studio code

作業を共有する：

> Create a preview site so I can share this with my client

> Update the preview site with my latest changes

作業を公開する：

> Publish "My Portfolio" site to examplesite.com

エージェントは、サイトディレクトリ内のファイルの読み書き、WP-CLI コマンドの実行、サイトのスクリーンショットの取得、WordPress.com への変更のプッシュなど、すべてあなたの指示に基づいて実行できます。

スラッシュコマンド

チャット中にスラッシュコマンドを使用して、素早くアクションを実行できます：

AI プロバイダー

AI レスポンスの生成方法を選択できます：

• WordPress.com（デフォルト）：WordPress.com アカウントを使用します。ログイン以外の追加設定は不要です。早期アクセス終了後に制限が変更される場合があります。
• Anthropic API キー：独自の API キーを使用して Claude に直接アクセスします。/api-key コマンドで設定してください。

/provider コマンドでプロバイダーを切り替えられます。

AI モデル

Studio Code は2つの AI モデルに対応しています：

• Claude Sonnet 4.6（デフォルト）：ほとんどのタスクに対して高速かつ効率的です。
• Claude Opus 4.6：複雑で多段階のタスクに対してより高い能力を発揮します。

/model コマンドでいつでもモデルを切り替えられます。

ビジュアルインスペクター

/annotate を使うと、アクティブなサイトがブラウザウィンドウで開き、注釈ツールバーが表示されます。「Annotate」をクリックし、ページ上の任意の要素をクリックして指示を入力します。1回のセッションで複数の要素に注釈を付けることができます。保存後もピッキングモードは維持されます。完了したら「Done」をクリックすると、ブラウザが自動的に閉じます。

その後、エージェントが注釈の番号付きサマリーを表示し、ファイルの編集を行う前に確認を求めます。

セッション

Studio Code は会話履歴を自動的に保存するため、前回の続きから再開できます。

セッションを再開する

studio code sessions list                  # View all saved sessions

studio code sessions resume                # Interactive picker

studio code sessions resume latest         # Resume the most recent session

studio code sessions resume <id>           # Resume a specific session by ID

セッションを削除する

studio code sessions delete                # Interactive picker

studio code sessions delete <id>           # Delete a specific session

セッション記録を無効にする

会話を保存したくない場合は、–no-session-persistence フラグを使用してください：

studio code --no-session-persistence

Studio Code でできること

Studio Code には、AI エージェントが WordPress 環境と連携するためのツールセットが用意されています。

サイト管理

• ローカルサイトの作成、開始、停止、削除。
• すべてのローカルサイトの一覧表示とサイト詳細の確認。

ファイル操作

• テーマやプラグインのファイルの読み取り、作成、編集。
• ファイル名やコンテンツによるファイル検索。

WordPress CLI

• 任意の WP-CLI コマンドの実行（プラグインのインストール、投稿の管理、設定の更新など）。

コンテンツの検証

• 生成されたブロックコンテンツの正確性を検証します。

スクリーンショットとパフォーマンス

• サイトのスクリーンショットを撮影します（デスクトップおよびモバイル）。
• Lighthouse スタイルの指標を使用してパフォーマンス監査を実行します。

プレビューサイト

• WordPress.com でプレビューサイトを作成、更新、削除します。

同期

• ローカルサイトを WordPress.com にプッシュします。
• WordPress.com サイトをローカル環境にプルします。

インポートとエクスポート

• サイトのバックアップをインポートおよびエクスポートします。

コマンドリファレンス

studio code                                # Start a new chat session

studio code --path /path/to/site           # Start with a specific site directory

studio code --no-session-persistence       # Start without saving the session

studio code sessions list                  # List saved sessions

studio code sessions resume [id]           # Resume a session

studio code sessions delete [id]           # Delete a session

すべてのオプションを確認するには：

studio code --help