App Builder

Teable App Builderを使用すると、コードを書かずに、プロジェクトを完全に機能するカスタマイズ済みWebアプリケーションへ変換できます。データ構造の力とAIによる設計を組み合わせることで、社内ツール、顧客ポータル、データダッシュボードを数分で公開できます。

​

概要

App Builderは、「プロンプトからアプリへ」というワークフローに従います。必要なものを説明すると、AIがアプリケーションの構造、ページ、ロジックを構築します。その後、ビジュアルエディターまたはコードを使用して、細部を調整できます。

​

アプリを作成する

アプリを作成する主な方法は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ファイルを選びます。

​

認証情報と設定

APIキー、認証情報、アプリの実行に必要な設定値は、ソースコードへ直接書かないでください。アプリが使うのはあなたの認証情報、つまりOAuthの接続か、あなたが保存したシークレットです。App Builderのチャットパネルで**+** → もっと → 認証情報と設定を開き、認証情報をアプリへ付与します。 付与の追加や解除、認証情報の値の変更を行うと、アプリのプレビュー環境は新しい値を使います。公開済みのアプリは、再公開後に新しい値を使います。 アプリをコピーしても認証情報はコピーされません。パネルには未バインドのプレースホルダーが残るため、自分のをバインドで自分の認証情報を割り当てます。認証情報の管理と使用状況については、認証情報と連携を参照してください。

​

アプリファイルを管理する

App Builderは、アップロードファイル、生成された出力、ランタイムファイルをアプリのサンドボックスへ保存します。チャットパネルで**+** → その他 → ファイルを管理を開いて確認します。対応しているファイル形式はプレビューで開けます。ファイルのダウンロードや、不要になったファイルとフォルダーの削除も可能です。

​

アプリへAI機能を追加する

アプリでレコードの要約、リクエストの分類、返信の下書き、アプリユーザーからの質問への回答が必要な場合は、AIを追加します。 「サポートチケット用のAI返信アシスタントを追加して」や「各フォーム送信を要約して」など、必要な内容をApp Builderへ伝えます。App BuilderはAIアクセスを有効にし、その機能のコードを追加できます。

​

コードをGitHubと同期する

プルリクエストでコードを確認する場合、Teable外部にコピーを保持する場合、ローカルエディターでアプリを操作する場合は、アプリを非公開GitHubリポジトリへリンクします。リンクすると、アプリとリポジトリが双方向に同期されます。新しいアプリバージョンはすべてGitHubへプッシュされ、GitHubへプッシュしたコミットは新しいアプリバージョンになります。

​

アカウントを接続してリポジトリを作成する

最初にアプリを少なくとも1回生成してください。アプリにコードがない間、GitHubボタンにはGitHubへ接続するには、まずアプリを生成してくださいと表示され、操作できません。 Teableは新しい非公開リポジトリを作成し、現在のアプリコードをmainブランチへコミットします。アプリへのリンクと、両者が同期される仕組みを説明したREADMEも追加されます。アプリを既存のリポジトリへリンクすることはできません。 デフォルトでは、接続は作成者に属します。コラボレーターが同じ組織アカウントで構築できるようにするには、接続を選択し、他のメンバーにこの接続の使用を許可をオンにします。アプリの編集権限を持つ他のメンバーは、その組織内で自分のアプリ用リポジトリを作成できるようになります。GitHubではリポジトリの作成にアカウント所有者本人の許可が必要なため、個人の接続は共有できません。

​

同期の仕組み

環境ファイルがプッシュされることはありません。以下の環境変数とローカル開発をご覧ください。 パネルでは、リポジトリ名の横に現在の状態が表示されます。

​

競合を解決する

Teableがブランチを強制プッシュすることはありません。履歴が分岐すると、最新のアプリバージョンをteable-syncという名前のブランチへ移し、リンクを競合としてマークします。GitHubでteable-syncをmainへマージしてください。マージ内容が新しいアプリバージョンとして反映され、リンクは同期済みへ戻ります。競合中も、それ以降のアプリバージョンによってteable-syncブランチが更新され続けるため、マージ時には常に最新の作業が取り込まれます。

​

環境変数とローカル開発

リポジトリにはソースだけが保存されます。Teableは、プロジェクトのルート、サブフォルダー、コミット履歴のいずれにある場合でも、名前が.envで始まるファイルを決してプッシュしません。環境変数の値はアプリへ付与された認証情報に由来し、認証情報と設定に保存され、gitへ追加されることはありません。リポジトリの.gitignoreにはすでに.env*が記載されているため、ローカルのクローンから誤ってコミットされることもありません。 自分のコンピューターでアプリを実行するには、次の手順を行います。 コピーされるのはプラットフォームが注入するランタイム変数だけで、APIエンドポイント、アクセストークン、AIアクセス用の変数が含まれます。ボタンの下にもプラットフォームが注入するランタイム変数のみ。付与された認証情報は含まれませんと表示されます。アプリへ付与された認証情報はTeableの外に出ないため、ローカル実行で必要な場合は自分で.envに値を追加してください。 アプリが本番で使用する認証情報は、ローカルファイルではなくTeableの認証情報と設定で追加・変更します。ローカルファイルの編集も、GitHubへコミットした.envも反映されません。アクセストークンの再生成などでプラットフォーム変数が変わったときは、変数をもう一度コピーしてローカルの.envを更新します。

​

リポジトリのリンクを解除する

リポジトリ名の横にある削除アイコンをクリックし、確定します。同期は停止しますが、リポジトリとそのコードはGitHubに残ります。後から同じアプリを再度リンクすると、古いリポジトリへ再接続せず、新しいリポジトリが作成されます。

​

公開と管理

​

アプリを公開する

アプリの準備ができたら、右上の公開ボタン（矢印アイコン）をクリックします。

• 公開URL: Teableが、アプリ用の安全で一般公開されるURLを生成します。
• カスタムドメイン：独自ドメインをアプリへ割り当てます。
• ブランド表示：公開メニューのブランドを表示を使用して、公開済みアプリにTeableで構築バッジを表示するかどうかを制御します。公開後にこの設定を変更した場合は、再デプロイをクリックして適用します。
• 公開停止：公開済みアプリでは、公開メニューの公開停止を使用して公開リンクをオフラインにします。
• アプリ設定の変更：公開メニューにランタイム設定が変更されました。公開中のアプリへ適用するには再デプロイしてくださいまたはブランド設定が変更されました。公開中のアプリへ適用するには再デプロイしてくださいと表示されたら、再デプロイをクリックします。
• 公開済みアプリを開く：アプリを公開すると、公開の横にあるアイコンから、公開中のアプリを新しいタブで開けます。

​

アプリの公開を停止する

公開済みアプリをオフラインにするには、公開メニューを開いて公開停止をクリックします。確定すると、公開アプリのURLへアクセスできなくなります。 公開を停止しても、アプリや編集履歴は削除されません。アプリの編集を続け、後から再公開できます。

​

カスタムドメイン

カスタムドメインを使用して、公開済みアプリへドメインを関連付けます。app.yourdomain.comなどのサブドメインを推奨します。ドメインを入力すると、追加するDNSレコードがTeableに表示されます。DNSプロバイダーでレコードを追加し、反映を待ってからTeableでドメインを確認します。 teable.app配下で利用可能なサブドメインを使用し、teable.appの接頭辞を編集することもできます。例：your-name.teable.app スペースのBusinessプランが期限切れになると、Teableはカスタムドメインがまもなく名前解決されなくなることをスペースの所有者に通知します。それまでに更新すれば、ドメインを維持できます。更新しなかった場合、カスタムドメインは名前解決されなくなり、アプリの公開リンクはTeableの既定のアドレスに戻ります。その後Businessプランに再度アップグレードした場合は、カスタムドメインを手動で関連付け直す必要があります。

​

カスタムサイト情報

公開メニューのカスタムサイト情報を使用して、公開済みアプリのブラウザータブアイコン、ページタイトル、説明を設定します。ダイアログには、編集時にそれらを組み合わせた外観がプレビュー表示されます。 フィールドを空のままにすると、App Builderが記述した値を維持します。保存すると変更がアプリのプレビュー環境へ適用され、公開済みアプリでは再公開した後にのみ使用されます。

​

アプリへのログイン

アプリを使用する前に訪問者のサインインを必須にするには、アプリのヘッダーでログインを追加をクリックします。ログインを設定すると、ボタンがログイン設定へ変わります。 ログインを有効にする場合：

1. アプリユーザーの保存場所を選択します。ユーザーテーブルを作成するか、メールフィールドを持つ既存のテーブルを再利用できます。サインインした各ユーザーは1件のレコードとして保存され、同じユーザーテーブルを複数のアプリで再利用できます。
2. メールOTP、Google、Teableなど、1つ以上のサインイン方法を選択します。利用可能な方法は、インスタンスの認証設定によって異なります。
3. アクセスポリシーとして、誰でも登録可能、許可するメールドメイン、招待のみのいずれかを選択します。

再読み込み後、ログインの変更がアプリのプレビュー環境へ表示されます。変更を公開済みアプリへ適用するには、アプリを再公開してください。

​

バージョン履歴とロールバック

Teableは、すべてのデプロイを自動的に追跡します。

• 履歴ボタン（時計アイコン）をクリックし、デプロイ済みのすべてのバージョンを一覧表示します。
• ワンクリックロールバック：新しい更新によって問題が発生した場合、公開中のアプリを以前の安定版へすぐに戻せます。

App Builderは、各ターンの変更を新しいバージョンとして保存します。保存に失敗すると、チャットにカードが表示されます。

• バージョンの保存に失敗しました：このバージョンは保存されていません。App Builderにそのまま作業を続けさせれば、次に保存が成功したときにこれらの変更も一緒に保存されます。
• 変更サイズが大きすぎて保存できません：このターンの変更が保存サイズの上限を超えています。カードのAI に送信をクリックすると、App Builderが大きすぎるテスト成果物、デバッグファイル、添付ファイルを調べて整理し、あらためて保存します。こうしたファイルは未保存のコミット履歴に入っていることがあり、ファイルを削除するだけでは足りない場合があるため、履歴の整理もApp Builderに任せてください。

​

自動修正

カスタムコードの変更によってビルドエラーが発生すると、デプロイは失敗します。

• Teableは、エラーログの横に自動修正ボタンを表示します。
• クリックすると、AIがコンパイルエラーを分析し、問題を解決するためにコードを自動修正します。

​

アプリを削除する

アプリを削除するには、ヘッダーの設定ボタン（歯車アイコン）をクリックし、削除を選択します。

​

ベストプラクティス

プロンプトのパターン、構築のヒント、ロールバックに関する助言、一般的なトラブルシューティングについては、App Builder実践ガイドをご覧ください。

​

よくある質問