VS CodeでのCreator AIスタジオの操作

VS CodeでのCreator AIスタジオの操作

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

メモメモ：この機能は現在ベータ版です。早期アクセスは近日中に提供予定です。
このページの内容
このガイドでは、Creator AI Studio for VS Codeのインストール方法と使用方法について説明します。インストール後、拡張機能をZoho Creatorアカウントに接続し、使用するLLMを設定すると、VS Code内で直接アプリを構築できます。AIにアプリの要件を説明するか、アカウントから既存のアプリをインポートするか、Creatorからエクスポート済みのアプリの.dsファイルを編集して開始できます。
利用条件
  • Zoho Creatorのすべての有料プランで利用できます。
  • 役割と権限。
    • スーパー管理者は、［操作］→［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アカウントの［操作］→［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. 拡張機能のインストール

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

  4. ダウンロードした.vsixファイルを選択し、［インストール］をクリックします。
  5. インストールが完了すると、VS Codeの左側にあるアクティビティバーに［Creator AI Studio］アイコンが表示されます。アイコンをクリックして拡張機能を開きます。
  1. インストール後、Creatorアカウントに接続する必要があります。
  2. VS Codeの右上にある［Creator AI Studio］アイコンをクリックし、拡張機能のホームページを開きます。
  3. ［Zohoでサインイン］をクリックします。
  4. Zoho Accountsのサインアップページがブラウザーウィンドウで開きます。Zoho Creatorアカウントにログインし、アクセスを許可します。
  5. 認証が完了すると、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ファイルがすでに含まれているローカルフォルダーをインポートします。Creatorから直接取得していないアプリが端末上にある場合に使用します。

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


2.3.3. チャットパネルのコントロール

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

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

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

2.3.4. コマンド

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

メモ：このアプリについてAIが構築したコンテキストも削除され、以降の回答の品質に影響する可能性があるため、慎重に実行してください。
/compact チャットを要約してトークンの空き容量を確保します
/resume 以前のチャットを開きます
デプロイ /create-app DSファイルを新しいアプリとしてZoho Creatorにアップロードします
/update-app 既存のZoho Creatorアプリをこのバージョンに更新します
/sample-data アクティブなアプリのサンプルデータを生成し、Zoho Creatorにアップロードします
調査 /review UI/UX、効率性、セキュリティの観点からアプリを確認します
/overview エンティティ図とアプリの概要
/modules 主要なモジュールの内訳
/dataflow データフロー分析

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

2.4.1. 開始方法の選択

新しく構築する場合も、既存のアプリを使用する場合も、Creator AIスタジオでは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スタジオが構造化されたプランを生成します。このプランには、構築予定のコンポーネントが番号付きで網羅的に表示され、それぞれがアプリ内の対応する.dsファイルのパスに関連付けられます。各コンポーネントの［詳細を表示］を展開すると詳しい内容を確認でき、［図をプレビュー］をクリックすると全体像を視覚的に確認できます。

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

2.4.3. Zoho Creatorへのデプロイ

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

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

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

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

  1. 設定したLLMプロバイダーのAPIキーからトークンが消費されます。
  2. レート制限とパフォーマンスはプロバイダーによって異なります。
  3. 処理レベルを高くすると、セッションごとのトークン消費量が増加します。
  4. プロンプトにファイルやドキュメントを添付すると、トークン使用量が増加します。
  1. どこからでも構築
  2. Zoho Creator for Claude Codeの使用