VS Code での Creator AI Studio の利用

VS Code での Creator AI Studio の利用

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Notesメモ：この機能は現在ベータ版です。早期アクセスは近日中に提供される予定です。
このページの内容
このガイドでは、VS CodeにCreator AI Studioをインストールして使用する方法を説明します。インストール後、拡張機能をZoho Creatorアカウントに接続し、使用するLLMを設定すると、VS Code内で直接アプリを構築できるようになります。AIにアプリの概要を説明する、アカウントから既存のアプリをインポートする、またはZoho Creatorからエクスポート済みのアプリの.dsファイルを編集することで、作業を開始できます。
利用条件
  • Zoho Creatorのすべての有料プランで利用できます。
  • 役割と権限：
    • 特権管理者は、［操作］→［Zoho Zia］でLLMプロバイダーを設定できます。
    • 特権管理者は、Creator AI Studioをインストールして使用し、アプリを構築または変更できます。
  • VS Code（1.114.0以降）。使用している端末にインストールされているVS Codeが1つだけであることを確認してください。確認するには、ターミナルで次のコマンドを実行します。
    mdfind 'kMDItemCFBundleIdentifier == 'com.microsoft.VSCode*'' | while read -r app; do echo '$app → v$(defaults read '$app/Contents/Info.plist' CFBundleShortVersionString)'; done
    出力に複数のパスが表示された場合は、続行する前に重複するインストールをアンインストールしてください。
  • 対応OS：Windows、macOS、Linux。

1. 前提条件

  1. Zoho Creatorアカウントの［操作］→［Zoho Zia］で設定されたLLM APIキー。設定されていない場合、拡張機能ではZohoの独自AIであるZoho GenAIが使用されます。Zoho GenAIは、Zoho Creatorのすべての有料プランに追加料金なしで含まれています。
  2. Gitリポジトリーと個人用アクセストークンが必要になるのは、Creator AI Studioでバージョン管理を使用する場合のみです。リポジトリーのURLと、読み取りおよび書き込み権限を持つ個人用アクセストークンが必要です。

2. VS CodeでのCreator AI Studioの設定手順

2.1. 拡張機能のインストール

Creator AI Studioは現在、.vsixファイルとして提供されています。VS Codeにインストールするには、次の手順を実行します。
  1. Creator AI Studioの.vsixファイルを入手するには、Zoho Creatorサポートにお問い合わせください。
  2. VS Codeを開き、左側のパネルにある［拡張機能］アイコンを選択します（または、ショートカットのCtrl+Shift+X／Cmd+Shift+Xを使用します）。
  3. ［拡張機能］パネルの右上にある⋯（ミートボール）メニューをクリックし、［VSIXからのインストール…］を選択します。

  4. ダウンロードした.vsixファイルを選択し、［インストール］をクリックします。
  5. インストールが完了すると、VS Codeの左側にあるアクティビティバーにCreator AI Studioのアイコンが表示されます。アイコンをクリックして拡張機能を開きます。
  1. インストール後、Zoho Creatorアカウントに接続する必要があります。
  2. VS Codeの右上にあるCreator AI Studioアイコンをクリックし、拡張機能のホームページを開きます。
  3. ［Zohoでサインイン］をクリックします。
  4. Zoho Accountsのサインアップページがブラウザーウィンドウで開きます。Zoho Creatorアカウントにログインし、アクセスを許可します。
  5. アカウントに複数のワークスペースがある場合、いずれかを選択するよう求められます。ワークスペースが1つだけの場合は、自動的に選択されます。
    メモ：特権管理者、管理者、または開発者の役割を持つワークスペースのみが表示されます。これらのワークスペースでは、アプリを作成または更新する権限があります。
  6. 認証が完了すると、VS Codeにリダイレクトされます。

2.2.1. アカウントの切り替え

別のZoho Creatorアカウントでサインインするには、次の手順を実行します。
  1. チャットパネルの［アカウント］アイコンをクリックします。
  2. ［アカウント］ページの［Creatorアカウント］で、［サインアウト］をクリックします。
  3. 拡張機能にサインイン画面が表示されます。［Zohoでサインイン］をクリックし、切り替え先のアカウントで認証します。
    メモ：アカウントを切り替えると、現在のワークスペースとの接続が解除されます。新しいアカウントでサインインした後、ワークスペースを選択するよう求められます。

2.3. 拡張機能の概要

Zoho Creatorへの接続が完了すると、Creator AI Studioを使用できるようになります。操作画面に表示される項目の概要を以下に示します。

2.3.1. アプリフォルダー

拡張機能の左上にあるドロップダウンには、現在の作業フォルダーが表示されます。これは、アプリの.dsファイルが保存される端末上のフォルダーです。
各アプリには、ここに専用のサブフォルダーが作成されます。空のフォルダーを選択すると、新しいアプリの作成が開始されます。.dsファイルがすでに含まれているフォルダーを選択すると、そのアプリが編集用に開かれます。クリックして、作業フォルダーを選択または変更します。

2.3.2. ミートボールメニュー（⋯）

拡張機能の上部にあるミートボールメニューから、次のアプリ管理オプションを利用できます。
  1. ［Creatorからインポート］：認証済みのZoho Creatorアカウントにあるアプリを取得し、作業ディレクトリーにインポートします。既存のアプリで作業を開始する最も簡単な方法です。

  2. ［ファイルからインポート］：.dsファイルがすでに含まれているローカルフォルダーをインポートします。Zoho Creatorから直接取得したものではないアプリが端末上にある場合に使用します。

  3. ［国と通貨］：アプリで使用する国を設定します。通貨や電話番号など、国に固有の項目には、該当する形式と初期値が自動的に適用されます。たとえば、インドを選択すると、通貨項目がINRに設定されます。


2.3.3. チャットパネルの操作項目

拡張機能の下部にあるチャットパネルで、AIと対話できます。
プロンプトを入力する前に、次の項目を設定します。

プロンプトを入力する前に、次の項目を設定します。

操作項目 オプション 機能
［許可モード］
［許可を求める］
［自動編集］
［計画モード］
［許可を求める］：AIが変更を1件ずつ提案し、.dsファイルに書き込む前に承認を待ちます。
［自動編集］：AIが承認を求めずに、変更を.dsファイルへ直接適用します。
［計画モード］：AIが最初に、予定しているすべての変更を含む完全な計画を作成します。続行する前に、その計画を確認します。
［AIモデル］ 設定済みのモデル（例：GPT-5.6-sol） このセッションで使用するLLMを選択します。Zoho Creatorアカウントの［操作］→［Zoho Zia］で設定されているモデルのみが表示されます。
［処理レベル］ ［低］／［中］／［高］ 出力を生成する前に、AIがプロンプトをどの程度詳細に分析するかを設定します。処理レベルを高くすると、より詳細な結果が得られますが、使用するトークンが増え、処理時間も少し長くなります。
［添付］（+アイコン） ファイルまたはドキュメント 直接処理するファイルをアップロードします。要件定義書、ワイヤーフレーム、データサンプル、その他のファイルを添付できます。AIはその内容を読み取り、構築するアプリの基礎として使用します。
メモ：使用したトークンの料金は、設定済みのLLMプロバイダーアカウントに請求されます。

2.3.4. コマンド

特定の操作をすばやく実行するには、チャットパネルで次のコマンドを使用します。
カテゴリー コマンド 説明
チャット /clear 現在のチャット画面の履歴を消去します。

メモ：この操作を行うと、このアプリについてAIが蓄積したコンテキストも削除され、その後の回答品質に影響する可能性があるため、慎重に実行してください。
/compact チャットを要約してトークンの空き容量を確保します
/resume 以前のチャットを開きます
/creatorAIStudioQry 現在のチャット内容を添付してサポート問い合わせを作成し、問題の詳細なコンテキストをサポートチームに共有します
展開 /generate-ds アプリの.dsファイルを含むZIPファイルを生成します。
/deploy-as-new-app DSファイルを新しいアプリとしてZoho Creatorにアップロードします
/deploy-to-existing-app 既存のZoho Creatorアプリをこのバージョンで更新します
/sample-data アクティブなアプリのサンプルデータを生成し、Zoho Creatorにアップロードします
分析 /review UI／UX、効率性、セキュリティーの観点からアプリを確認します
/overview エンティティ図とアプリの概要
/modules 主要なモジュールの内訳
/dataflow データフロー分析

2.4 AIを使用したバイブコーディング

2.4.1. 開始方法の選択

新しいアプリを作成するか、既存のアプリを使用するかに応じて、Creator AI Studioでは3通りの方法で作業を開始できます。
  1. 新しいアプリを一から作成する：チャットパネルを開き、作成するアプリについて説明するか、BRDやフローチャートなどを含むファイルをアップロードします。以降の作業はAIが行います。
  2. Zoho Creatorから既存のアプリをインポートする
    1. ［⋯］メニューをクリックし、［Zoho Creatorからインポート］を選択します。
    2. 認証済みのZoho Creatorアカウントにあるアプリが一覧表示されます。作業するアプリを選択します。
    3. アプリが構造化された.dsファイルとして作業ディレクトリーにダウンロードされます。
    4. 必要な変更や追加についてチャットパネルに入力すると、AIが作成を開始します。
  3. ローカル環境からインポートする
    1. ［⋯］メニューをクリックし、［手動インポート］を選択します。
    2. .dsファイルが保存されているローカルフォルダーを選択します。
    3. 拡張機能のワークスペースでアプリが開きます。変更内容をチャットパネルに入力します。

2.4.2. プロンプトを使用した作成

どの方法を選択した場合でも、プロンプトを入力すると、AIは同じ手順で処理を行います。
  1. チャットパネルにプロンプトを入力します。作成するアプリの要件を入力してください。具体的に入力するほど、適切な結果を得られます。必要に応じて要件定義書、ワイヤーフレーム、データサンプルを添付すると、AIに追加のコンテキストを提供できます。
  2. 生成を開始する前に、AIがプロンプトに基づいて一連の質問を行い、要件をより正確に把握します。
    質問はテーマ別にグループ化されます（例：ユーザー、ワークフロー、通知）。提示された選択肢から選択するか、［その他］を選択して任意の回答を入力します。残りの質問をスキップすることもできます。

  3. 回答を送信すると、Creator AI Studioが構造化されたプランを生成します。このプランには、作成予定のコンポーネントが番号付きで網羅的に一覧表示され、各コンポーネントにはアプリ内の対応する.dsファイルのパスが関連付けられます。各コンポーネントの［詳細を表示］を展開すると詳細を確認でき、［図をプレビュー］をクリックすると視覚的な概要を確認できます。

  4. プランを確認し、操作を選択します。次の5つの選択肢があります。
    1. ［承認して編集を適用］：プランを承認し、以降の確認なしで、AIにすべての変更を.dsファイルへ直接適用させます。
    2. ［承認］：プランを承認します。ただし、AIは各変更を適用する前に許可を求めます。
    3. ［質問への回答で調整］：AIが新たな一連の質問を行い、回答に基づいてプランを修正します。
    4. ［フィードバックで調整］：自由形式のプロンプトを入力してプランを変更します。
    5. ［キャンセル］：プランを破棄して、最初からやり直します。
  5. 承認すると、Creator AI Studioがプランに従って.dsファイルを生成し、書き込みます。進行状況はチャットパネルで確認できます。
  6. 作成が完了した後も、新しいプロンプトを入力して、生成結果の任意の部分を拡張、変更、修正できます。

2.4.3. Zoho Creatorへの展開

アプリをZoho Creatorに公開する準備ができたら、次の手順を実行します。
  1. チャットパネルで、目的に応じた展開コマンド（/generate-ds、/deploy-as-new-app、または/deploy-to-existing-app）を実行します。詳細については、2.3.4. コマンドを参照してください。
  2. 拡張機能がローカルフォルダー内の.dsファイルを結合してアプリを作成し、ログイン中のZoho Creatorアカウントにアップロードします。アップロード中にエラーが発生した場合、エージェントが自動的に原因を診断して修正し、再試行します。自動的に解決できないエラーが発生した場合、エージェントは処理を停止し、Zoho Creatorサポートへの問い合わせを提案します。
  3. 同期が完了したら、Zoho Creatorアカウントを開き、アプリにアクセスしてテストします。
メモ：アップロードコマンドを実行すると、ローカルのアプリフォルダー内にあるすべての変更がアップロードされます。実行する前に、生成結果に問題がないことを確認してください。

2.5. Gitによるバージョン管理

Creator AI Studioでは、既存のアプリを使用する開発者向けにGit連携がサポートされています。設定すると、アプリの.dsファイルへの変更がGitリポジトリーにプッシュされると同時に、Zoho Creatorにも同期されます。これにより、すべての変更について完全なバージョン履歴を確認できます。
Gitを設定するには、次の手順を実行します。
  1. チャットパネルの［アカウント］アイコンをクリックします。
  2. ［アカウント］ページの［バージョン管理・Git］で、［Gitを設定］をクリックします。
  3. リポジトリーURL（例：https://github.com/user/repo.git)）を入力し、アクセストークンを貼り付けます。
  4. ［保存］をクリックします。
  5. 設定後、/deploy-to-existing-appを使用して変更を展開すると、更新された.dsファイルがGitリポジトリーにプッシュされ、Zoho Creatorアカウントにも同期されます。
メモ：Git連携は任意であり、既存のアプリを使用する場合にのみ必要です。

3. トークン消費量とパフォーマンス

  1. 設定したLLMプロバイダーのAPIキーからトークンが消費されます。
  2. レート制限とパフォーマンスはプロバイダーによって異なります。
  3. 処理レベルを高くすると、セッションごとのトークン消費量が増加します。
  4. プロンプトにファイルや文書を添付すると、トークン使用量が増加します。
  1. 場所を問わない開発
  2. Claude Code向けZoho Creatorの使用