> ## Documentation Index
> Fetch the complete documentation index at: https://help.teable.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# App Builder
> AIを使用して、データをカスタムWebアプリケーションへ変換します。
すべてのCloudプランで利用できます。セルフホストではBusinessプラン以上が必要です。
Teable App Builderを使用すると、コードを書かずに、データベースを完全に機能するカスタマイズ済みWebアプリケーションへ変換できます。データ構造の力とAIによる設計を組み合わせることで、社内ツール、顧客ポータル、データダッシュボードを数分で公開できます。
## 概要
App Builderは、「プロンプトからアプリへ」というワークフローに従います。必要なものを説明すると、AIがアプリケーションの構造、ページ、ロジックを構築します。その後、ビジュアルエディターまたはコードを使用して、細部を調整できます。
カスタムインターフェースや独立したアプリを作成するには、App Builderを使用します。データベース内でのインタラクティブなデータ分析やその場限りの質問には、[AIチャット](/ja/basic/ai/ai-chat)を使用してください。
## アプリを作成する
アプリを作成する主な方法は2つあります。
1. **ベースから**: 任意のベースで「アプリを作成」をクリックし、現在のデータにリンクされたアプリケーションを生成します。
2. **チャットから**: AIチャットを開き、「この顧客テーブル用のCRMアプリを作成して」と伝えます。
## アプリエディターの画面
App Builderには、技術者以外のユーザーと開発者の両方に対応する2つの画面があります。
### 1. チャット画面（AI駆動）
アプリの司令塔です。
* **自然言語による編集**: *「ヘッダーを青にして」*、\*「新しいレコードの送信フォームを追加して」\*など、変更内容を説明します。
* **自動ルーティング**: AIが参照しているコンポーネントまたはページを理解し、直接変更します。
* **連携**: アプリのタスクでサードパーティーアカウントへのアクセスが必要な場合、App Builderはチャットパネルに**Slackへ接続**などのカードを表示できます。**接続**をクリックしてOAuth認証を行います。認証をキャンセルするには**スキップ**をクリックします。AIは、その接続なしで完了できる処理を続行します。
* **Skill**: **+**メニューを開いて**Skill**を選択し、このアプリの会話で使用するSkillを管理します。ここで追加したSkillは現在のアプリでのみ利用でき、アプリのベースとスペースで共有されているSkillも使用できます。入力ボックスに`/`と入力すると、有効なSkillを選択できます。
* **ファイルを管理**: **+** → **その他** → **ファイルを管理**を開き、アプリのサンドボックス内にあるファイルを表示します。対応ファイルのプレビュー、生成ファイルのダウンロード、不要になったファイルやフォルダーの削除に使用します。
* **会話を消去**: 現在の会話が本題から外れた場合は、パネル右下の**チャットを消去**をクリックして、新しいセッションを開始します。現在の会話のチャット履歴は消去されますが、アプリ自体は削除されません。初回は確認が表示され、次回から表示しないよう選択できます。
### 2. プレビューパネル
* **プレビューと公開版**: パネルには2つのタブがあります。**プレビュー**では、まだ公開していない変更を含め、構築中のバージョンが実行されます。**公開版**では、公開アドレスから公開済みアプリを読み込み、ユーザーに表示される内容と作業中の内容を比較できます。アプリが公開されるまでは、代わりに**公開版**へ公開を促すメッセージが表示されます。App Builderは、公開済みのアプリを**公開版**で、未公開のアプリを**プレビュー**で開き、その後はアプリで最後に使用したタブを記憶します。
* **複数端末のシミュレーション**: 上部の切り替えを使用して、**デスクトップ**、**タブレット**、**モバイル**のビューを切り替えます。
* **リアルタイム生成**: App Builderによる生成中、プレビューパネルにはアプリが形作られていく様子が表示されます。
* **即時フィードバック**: App Builderが変更を完了すると、最新の保存済みバージョンでプレビューが更新されます。
**プレビュー**タブでは、下部のフローティングツールバーを使用して、対象を絞った変更を行います。
* **編集する要素を選択**を選び、プレビュー内の要素をクリックします。App Builderがその要素をチャット入力欄へ追加します。指示を追加してメッセージを送信すると、AIがアプリの該当部分を更新します。
* **テキストを直接編集**を選び、プレビュー内の静的テキストをクリックして置換内容を入力します。**保存**をクリックする前に複数のテキスト要素を編集できます。保留中のテキスト変更を元に戻すには、**編集を破棄**をクリックします。
データから読み込まれた内容やアプリで計算された内容などの動的テキストは、直接編集できません。代わりに要素を選択し、チャットで変更内容を説明します。AIによる生成中は、要素の選択とテキストの直接編集が一時停止します。いずれかのモードを終了するには、`Esc`を押します。
### 3. 開発者モード（コードエディター）
制限なくカスタマイズできるよう、コードへ直接アクセスできます。
* **Monacoエディター**: ブラウザー内でVS Codeのような操作感を提供します。
* **Reactコンポーネント**: 基盤となるReactコード、Tailwind CSSクラス、ロジックを編集します。
* **ファイルツリー**: プロジェクト構造内を移動します。
#### コードをダウンロードする
アプリ全体をZIPアーカイブとしていつでもダウンロードできます。
1. エディターの**コード**タブへ切り替えます。
2. タブバーの\*\*`...`\*\*メニューをクリックします。
3. **コードをダウンロード**を選択し、すべてのソースファイルを含むZIPアーカイブを保存します。
アプリでカスタム環境変数を使用している場合、ダウンロードしたアーカイブにはルートの`.env`ファイルが含まれることがあります。ZIPを共有する前に確認してください。
#### コードをインポートする
ZIPをインポートして、アプリのコードを更新できます。
1. エディターの**コード**タブへ切り替えます。
2. タブバーの\*\*`...`\*\*メニューをクリックします。
3. **コードをインポート**を選択し、20MB以下のZIPファイルを選びます。
* ソースファイルだけを含めてください。`node_modules`、`.next`、その他のビルド成果物は自動的に無視されます。
* ZIPは既存のプロジェクトを置き換えます。含めなかったファイルは新しいバージョンから削除されます。
* ZIPにラッパーフォルダーが1つ含まれている場合、Teableはそのフォルダーを取り除きます。最上位のプロジェクトフォルダーをそのまま圧縮できます。
* インポートするプロジェクトには、プロジェクトのルートに`package.json`が必要です。
* ZIP内のルートの`.env`ファイルは、アプリの**シークレット**へ読み込まれます。その他の`.env*`形式（`.env.local`など）は無視されます。
#### シークレット
実行中のアプリで必要なAPIキー、認証情報、設定値には、**シークレット**を使用します。App Builderのチャットパネルで\*\*+\*\*メニューを開き、**シークレット**を選択します。
| 詳細 | 動作 |
| ---------- | ------------------------------------------------------- |
| 利用範囲 | アプリのシークレットは、アプリのプレビュー環境と公開済みアプリで利用できます |
| コードからのアクセス | サーバーサイドのアプリコードは、`process.env.MY_API_KEY`などの環境変数から読み取れます |
| 保存済みの値 | 保存後のシークレット値は書き込み専用です。更新するには、新しい値を入力します |
| 名前の形式 | **名前**は大文字で始める必要があり、大文字、数字、アンダースコアを使用できます |
シークレット値を追加、削除、変更すると、アプリのプレビュー環境では新しい値が使用されます。公開済みアプリでは、再公開した後にのみ使用されます。シークレットの説明だけを編集した場合、再公開は不要です。
#### アプリファイルを管理する
App Builderは、アップロードファイル、生成された出力、ランタイムファイルをアプリのサンドボックスへ保存します。チャットパネルで\*\*+\*\* → **その他** → **ファイルを管理**を開いて確認します。対応しているファイル形式はプレビューで開けます。ファイルのダウンロードや、不要になったファイルとフォルダーの削除も可能です。
#### アプリへAI機能を追加する
アプリでレコードの要約、リクエストの分類、返信の下書き、アプリユーザーからの質問への回答が必要な場合は、AIを追加します。
「サポートチケット用のAI返信アシスタントを追加して」や「各フォーム送信を要約して」など、必要な内容をApp Builderへ伝えます。App Builderは**AIアクセス**を有効にし、その機能のコードを追加できます。
App BuilderがAI機能を追加すると、アプリのプレビューでは新しいバージョンが使用されます。公開済みアプリでは、再公開した後にのみ使用されます。
## コードをGitHubと同期する
CloudのBusinessプラン以上で利用できます。
プルリクエストでコードを確認する場合、Teable外部にコピーを保持する場合、ローカルエディターでアプリを操作する場合は、アプリを非公開GitHubリポジトリへリンクします。リンクすると、アプリとリポジトリが双方向に同期されます。新しいアプリバージョンはすべてGitHubへプッシュされ、GitHubへプッシュしたコミットは新しいアプリバージョンになります。
### アカウントを接続してリポジトリを作成する
最初にアプリを少なくとも1回生成してください。アプリにコードがない間、GitHubボタンには**GitHubへ接続するには、まずアプリを生成してください**と表示され、操作できません。
アプリのヘッダーにあるGitHubアイコンをクリックして、**GitHub同期**を開きます。アプリの編集権限が必要です。
**GitHubへ接続**をクリックし、ポップアップウィンドウでインストールを完了します。個人アカウントまたは自分が管理する組織を選択します。ブラウザーでウィンドウがブロックされた場合は、ポップアップを許可してください。
**GitHubアカウント**で接続済みアカウントを選択します。別のアカウントを接続するには\*\*+\*\*をクリックします。
**リポジトリ名**には、アプリ名から生成された値があらかじめ入力されています。名前には文字、数字、`.`、`-`、`_`を使用でき、最大100文字です。
**リポジトリを作成してリンク**をクリックします。個人アカウントの場合は、もう1つのポップアップで作成を許可するようGitHubから求められます。
Teableは新しい非公開リポジトリを作成し、現在のアプリコードを`main`ブランチへコミットします。アプリへのリンクと、両者が同期される仕組みを説明したREADMEも追加されます。アプリを既存のリポジトリへリンクすることはできません。
デフォルトでは、接続は作成者に属します。コラボレーターが同じ組織アカウントで構築できるようにするには、接続を選択し、**他のメンバーにこの接続の使用を許可**をオンにします。アプリの編集権限を持つ他のメンバーは、その組織内で自分のアプリ用リポジトリを作成できるようになります。GitHubではリポジトリの作成にアカウント所有者本人の許可が必要なため、個人の接続は共有できません。
### 同期の仕組み
| 方向 | 実行内容 |
| ------------ | ------------------------------------------------------------------------------------------ |
| アプリ → GitHub | 新しいアプリバージョンが作成されるたびに、リポジトリの`main`ブランチへプッシュされます。 |
| GitHub → アプリ | `main`へプッシュされたコミットが、新しいアプリバージョンになります。チャットパネルのメッセージに同期内容が表示され、開いているプレビューには新しいコードが再読み込みされます。 |
環境ファイルがプッシュされることはありません。以下の**環境変数とローカル開発**をご覧ください。
パネルでは、リポジトリ名の横に現在の状態が表示されます。
| ステータス | 意味 | 対応方法 |
| -------- | ------------------------------------------------- | ------------------------------------------ |
| **同期済み** | リポジトリが最新のアプリバージョンと一致しています。 | 対応は不要です。 |
| **同期中** | プッシュが進行中です。 | 待機してください。パネルは自動的に更新されます。 |
| **競合** | `main`ブランチにTeableが作成していないコミットがあり、自動的に結合できません。 | GitHubで`teable-sync`ブランチをマージします。以下をご覧ください。 |
| **一時停止** | GitHub Appがアンインストールまたは一時停止されたため、Teableが同期を停止しました。 | パネルに理由が表示されます。一時停止を解除すると、同期が自動的に再開されます。 |
| **エラー** | 最後の同期試行に失敗しました。 | パネルで理由を確認し、**再試行**をクリックします。 |
### 競合を解決する
Teableがブランチを強制プッシュすることはありません。履歴が分岐すると、最新のアプリバージョンを`teable-sync`という名前のブランチへ移し、リンクを**競合**としてマークします。GitHubで`teable-sync`を`main`へマージしてください。マージ内容が新しいアプリバージョンとして反映され、リンクは**同期済み**へ戻ります。競合中も、それ以降のアプリバージョンによって`teable-sync`ブランチが更新され続けるため、マージ時には常に最新の作業が取り込まれます。
### 環境変数とローカル開発
リポジトリにはソースだけが保存されます。Teableは、プロジェクトのルート、サブフォルダー、コミット履歴のいずれにある場合でも、名前が`.env`で始まるファイルを決してプッシュしません。環境変数の値はアプリの**シークレット**に保存され、gitへ追加されることはありません。リポジトリの`.gitignore`にはすでに`.env*`が記載されているため、ローカルのクローンから誤ってコミットされることもありません。
自分のコンピューターでアプリを実行するには、次の手順を行います。
リポジトリをクローンし、`pnpm install`を実行します。
GitHubパネルで**ローカル環境変数をコピー**をクリックし、クリップボードの内容をプロジェクトのルートにある`.env`ファイルへ貼り付けます。
`pnpm dev`を実行します。
コピーされる内容は、Teable独自のサンドボックスでアプリが受け取る内容と同じです。シークレットに加え、アプリのAPIエンドポイント、アクセストークン、AIアクセス用としてプラットフォームから注入される変数が含まれます。
そのファイル内の`TEABLE_APP_TOKEN`行はアプリのデータへのアクセス権を付与します。そのため、アプリの編集権限を持つメンバーだけがコピーできます。ファイルをコミットしたり、課題やプルリクエストへ貼り付けたりしないでください。
シークレットを追加または変更するには、ローカルファイルではなく、Teableの**シークレット**を編集します。GitHubへコミットした`.env`からシークレットが作成または更新されることはありません。シークレットを変更した後は、変数をもう一度コピーして、ローカルの`.env`を更新します。
### リポジトリのリンクを解除する
リポジトリ名の横にある削除アイコンをクリックし、確定します。同期は停止しますが、リポジトリとそのコードはGitHubに残ります。後から同じアプリを再度リンクすると、古いリポジトリへ再接続せず、新しいリポジトリが作成されます。
## 公開と管理
### アプリを公開する
アプリの準備ができたら、右上の**公開**ボタン（矢印アイコン）をクリックします。
* **公開URL**: Teableが、アプリ用の安全で一般公開されるURLを生成します。
* **カスタムドメイン**: 独自ドメインをアプリへ割り当てます。
* **ブランド表示**: **公開**メニューの**ブランドを表示**を使用して、公開済みアプリに**Teableで構築**バッジを表示するかどうかを制御します。公開後にこの設定を変更した場合は、**再デプロイ**をクリックして適用します。
* **公開停止**: 公開済みアプリでは、公開メニューの**公開停止**を使用して公開リンクをオフラインにします。
* **アプリ設定の変更**: 公開メニューに**ランタイム設定が変更されました。公開中のアプリへ適用するには再デプロイしてください**または**ブランド設定が変更されました。公開中のアプリへ適用するには再デプロイしてください**と表示されたら、**再デプロイ**をクリックします。
* **公開済みアプリを開く**: アプリを公開すると、**公開**の横にあるアイコンから、公開中のアプリを新しいタブで開けます。
**Teableで構築**バッジを非表示にするには、Businessプラン以上が必要です。
### アプリの公開を停止する
公開済みアプリをオフラインにするには、**公開**メニューを開いて**公開停止**をクリックします。確定すると、公開アプリのURLへアクセスできなくなります。
公開を停止しても、アプリや編集履歴は削除されません。アプリの編集を続け、後から再公開できます。
### カスタムドメイン
カスタムドメインにはBusinessプラン以上が必要です。
**カスタムドメイン**を使用して、公開済みアプリへドメインを関連付けます。`app.yourdomain.com`などのサブドメインを推奨します。ドメインを入力すると、追加するDNSレコードがTeableに表示されます。DNSプロバイダーでレコードを追加し、反映を待ってからTeableでドメインを確認します。
`teable.app`配下で利用可能なサブドメインを使用し、`teable.app`の接頭辞を編集することもできます。例: `your-name.teable.app`
### カスタムサイト情報
**公開**メニューの**カスタムサイト情報**を使用して、公開済みアプリのブラウザータブアイコン、ページタイトル、説明を設定します。ダイアログには、編集時にそれらを組み合わせた外観がプレビュー表示されます。
| 設定 | 制御する内容 |
| --------- | ------------------------------------------------------------------------------------------------------------------- |
| **ファビコン** | ブラウザータブに表示されるアイコン。5MB以下のPNG、JPEG、WebP、SVG、ICOファイルをアップロードします。推奨サイズは32×32です。アップロードしたファイルを削除すると、デフォルトのTeableアイコンへ戻ります。 |
| **タイトル** | 最大120文字のページタイトル。 |
| **説明** | ページのメタデータに含まれる、最大500文字のサイト説明。 |
フィールドを空のままにすると、App Builderが記述した値を維持します。保存すると変更がアプリのプレビュー環境へ適用され、公開済みアプリでは再公開した後にのみ使用されます。
### アプリへのログイン
アプリを使用する前に訪問者のサインインを必須にするには、アプリのヘッダーで**ログインを追加**をクリックします。ログインを設定すると、ボタンが**ログイン設定**へ変わります。
ログインを有効にする場合:
1. アプリユーザーの保存場所を選択します。**ユーザー**テーブルを作成するか、メールフィールドを持つ既存のテーブルを再利用できます。サインインした各ユーザーは1件のレコードとして保存され、同じユーザーテーブルを複数のアプリで再利用できます。
2. **メールOTP**、**Google**、**Teable**など、1つ以上のサインイン方法を選択します。利用可能な方法は、インスタンスの認証設定によって異なります。
3. アクセスポリシーとして、**誰でも登録可能**、**許可するメールドメイン**、**招待のみ**のいずれかを選択します。
再読み込み後、ログインの変更がアプリのプレビュー環境へ表示されます。変更を公開済みアプリへ適用するには、アプリを再公開してください。
### バージョン履歴とロールバック
Teableは、すべてのデプロイを自動的に追跡します。
* **履歴**ボタン（時計アイコン）をクリックし、デプロイ済みのすべてのバージョンを一覧表示します。
* **ワンクリックロールバック**: 新しい更新によって問題が発生した場合、公開中のアプリを以前の安定版へすぐに戻せます。
### 自動修正
カスタムコードの変更によってビルドエラーが発生すると、デプロイは失敗します。
* Teableは、エラーログの横に**自動修正**ボタンを表示します。
* クリックすると、AIがコンパイルエラーを分析し、問題を解決するためにコードを自動修正します。
### アプリを削除する
アプリを削除するには、ヘッダーの**設定**ボタン（歯車アイコン）をクリックし、**削除**を選択します。
## ベストプラクティス
プロンプトのパターン、構築のヒント、ロールバックに関する助言、一般的なトラブルシューティングについては、[App Builder実践ガイド](/ja/basic/ai/app-builder-practical-guide)をご覧ください。
## よくある質問
いいえ。会話を消去しても、現在のアプリの会話にあるチャット履歴だけが削除されます。アプリ自体は削除されません。会話が本題から外れ、最初からやり直したい場合に使用します。
エディターの**コード**タブへ切り替え、タブバーの\*\*`...`**メニューをクリックして、**コードをダウンロード**または**コードをインポート**を選択します。インポートするZIPファイルは最大20MBで、既存のプロジェクトを置き換えます。保持するすべてのソースファイルを含めてください。インポートするプロジェクトには、ルートの`package.json`が必要です。ルートの`.env`ファイルは、アプリの**シークレット\*\*へインポートされます。
再読み込み後、ログイン設定がアプリのプレビュー環境へ表示されます。変更を公開済みアプリへ適用するには、アプリを再公開してください。
返信アシスタント、送信内容の要約、リクエスト分類など、必要なAI機能をApp Builderへ伝えます。App Builderは**AIアクセス**を有効にし、その機能のコードを追加できます。App Builderが変更を完了すると、アプリのプレビューで新しいバージョンが使用されます。公開済みアプリでは、再公開した後にのみ使用されます。このアプリ経由のAI呼び出しは、クレジット使用量の詳細に**アプリAI**として表示されます。
**組み込みAI**には、AIフィールド生成、AIチャット、IMボット、App Builderなど、Teableで直接利用できるAI機能が含まれます。現在、これらの機能では大幅に割引されたレートでクレジットが使用されます。
**アプリ内AI**は、App Builderで作成したアプリ内で使用されるAI機能を指します。使用量は選択したモデルプロバイダーの[公式API料金](https://vercel.com/ai-gateway/models)で課金され、上乗せや割引はありません。API使用量1米ドルは100クレジットに相当します。
**履歴**ボタン（時計アイコン）をクリックしてデプロイ済みバージョンを表示し、公開中のアプリを以前の安定版へ戻します。
各ユーザーは、AIチャットとApp Builderを含め、同時に最大3つのエージェントを実行できます。App Builderでエージェントが別の会話で処理中と表示された場合、別のタスクがまだ実行中です。前のタスクが完了するまで待ってから続行してください。
App Builderの1回の実行には、複数の処理ステップが含まれることがあります。会話ページと請求ページの両方に、その実行の合計クレジットが表示されます。Cuppyがすでに完了して保存した作業は、引き続き利用できます。予期しないエラーによって最後のステップが中断された場合、その中断されたステップのクレジットは自動的に返還されます。同じアプリの会話で作業を続けられます。
Teableをセルフホストで実行している場合は、[AI設定](/ja/basic/admin-panel/ai-setting)ページの手順に従ってください。App Builderで独自キー（BYOK）を使用する場合、チャットモデルは**OpenAI Compatible**または**Anthropic**プロバイダーから選択する必要があります。デプロイのサポートについては、**[support@teable.ai](mailto:support@teable.ai)**までお問い合わせください。
**デプロイエンジン**で**Vercel**を選択する場合は、Teableインスタンスとオブジェクトストレージ（MinIO / S3）の両方が一般公開でアクセスできることを確認してから、[AI設定](/ja/basic/admin-panel/ai-setting)ページの**公開アクセスをテスト**を使用します。**Teable Infra**を選択した場合、この確認は不要です。