数日前、WordCamp Europe の WordPress.com ブースで、エージェンシーパートナー Arsnova の Marco さんと話す機会がありました。話をしている中で、私がほぼ毎日使っている機能なら、エージェンシー業務で特に手間のかかる、クライアントからの修正依頼をスクリーンショットごとに確認して対応する作業を大幅に効率化できると思いました。

Studio Code は、ターミナル上で動作する WordPress 専用の AI コーディングエージェントです。ローカル開発環境でサイトやプラグイン、テーマの作成をサポートします。WordPress Studio のツールのひとつとして提供されています。やりたいことを自然な文章で伝えるだけで、Studio Code が作業を進めてくれます。WordPress に精通したシニア開発者が、そばで開発を手伝ってくれるような感覚で利用できます。

Studio Code in a terminal window with the site Maya's Food Blog selected

Studio Code に搭載されている機能の中でも、私が特に気に入っているのが、/annotate という便利なスラッシュコマンドです。

/annotate running in a terminal window with the skill loaded

ブースで来場者に紹介したり、Slack でやり取りしたり、同僚と立ち話をしたりするたびに、この機能の話をしていました。
この機能は、ほかの AI コーディングエージェントを使うたびに感じていた悩みを解決してくれます。それは、スクリーンショットを撮り、矢印やコメントを書き込んで修正内容を伝えるという、手間のかかるフィードバックのやり取りです。

/annotate を使わない場合

  1. AI コーディングエージェントがコードを生成する。
  2. 気になる箇所があればスクリーンショットを撮り、矢印やコメントを書き込んで修正箇所を伝える。
  3. スクリーンショットを AI コーディングエージェントに送り返し、修正内容を説明する。
  4. 思いどおりの仕上がりになるまで、このやり取りを何度も繰り返す。

        /annotate を使う場合

        1. Studio Code がコードを生成する。
        2. 修正したい箇所があれば、/annotate と入力する。
        3. ブラウザーが起動し、修正したい要素をクリックしながらコメントを追加できる。複数のフィードバックをまとめて、Studio Code に一度に送信できる。
        4. Studio Code が、指定した修正を一括で反映する。

        冒頭で紹介したエージェンシーパートナーの Marco さんを覚えていますか。
        私が Studio Code のこの機能を Marco さんに実演していたところ、同僚の Davi が「クライアントとの打ち合わせ中に /annotate を使えば、大幅な時間短縮になり、使い勝手も格段によくなる」と話してくれました。

        たとえば、クライアントとオンラインで画面共有をしながら、制作したサイトを一緒に確認している場面を想像してみてください。会話をしながら修正点がでたら、その場でコメントを追加していくだけです。コメントは必要なだけ、細かい内容まで自由に追加できます。打ち合わせが終われば、Studio Code が修正をまとめて反映してくれます。

        何度も修正依頼をやり取りする必要はありません。/annotate セッションを一度実行するだけで、クライアントからの修正内容がすべてローカル開発環境のサイトに反映されます。その後は、数回クリックするだけで、更新内容を WordPress.com で公開している本番サイトへ反映できます。

        Studio Code は現在ベータ版です。Studio CLI は、デスクトップアプリまたはターミナルからインストールできます。studio code を実行すると利用できます。ローカルサイトを新しく作成するか既存のサイトを選択したら、/annotate を実行して、この機能をぜひお試しください。

        ベータ期間中は、Studio Code のトークンを無制限で利用できます。さまざまなサイトを構築・改善しながら試していただき、GitHub でフィードバックをお寄せください。