マルチページアプリケーション
各ページが異なる機能を提供し、カスタムナビゲーションで構成された、複数ページのインターフェースを作成します。
ドラッグ&ドロップキャンバス
AI、データ、アクション、コンテンツのウィジェットライブラリを使用した12カラムグリッドでページを構築します。
カスタムブランディング
ロゴ、カラー、ナビゲーションレイアウト、favicon、CSS をブランドに合わせてカスタマイズします。
公開と共有
パブリック URL 経由でインターフェースを公開し、メンバーのアクセスを管理します。
主要コンセプト
インターフェース
インターフェース
インターフェースは、プロジェクトの完全なユーザーエクスペリエンスを構成するページのコレクションです。各プロジェクトは複数のインターフェースを持っています。
ページ
ページ
ページは、インターフェース内の単一の画面です。各ページには名前、アイコン、ナビゲーション内の位置があります。ページはウィジェットをキャンバスにドラッグして構築し、事前ビルドされたテンプレートから作成することもできます。
ウィジェット
ウィジェット
ウィジェットは、ページの構成要素であり、12カラムのドラッグ&ドロップグリッドに配置されます。完全な一覧については、下記のウィジェットライブラリセクションを参照してください。
ウィジェットライブラリ
- AI
- Data
- Actions
- Content
はじめに
インターフェースの作成
1
Interfaces に移動する
プロジェクトサイドバーで Interfaces をクリックします。
2
新しいインターフェースを作成する
- まだインターフェースが存在しない場合は、ページ中央の + Create Your First Interface をクリックします。
- 既にインターフェースが存在する場合は、右上の + New Interface をクリックします。
3
インターフェースに名前を付ける
New Interface モーダルが表示されます。名前を入力し、Create をクリックします。Interface Builder に移動します。
Interface Builder のレイアウト
Interface Builder 内では、3つの主要なエリアが表示されます:
トップバーには、以下のコントロールがあります:
元に戻す / やり直す
変更を段階的に遡行または先行します。
レスポンシブビュー
デスクトップ、タブレット、モバイルのプレビューを切り替えます。
編集 / プレビュー
編集モードとビルダー内プレビューを切り替えます。
フルプレビュー
エンドユーザーが表示するのと同じ形式で、新しいタブでインターフェースを開きます。
コマンドパレット (⌘K)
キーボードでビルダーアクションに素早くアクセスします。
公開 / 保存
作業を保存するか、インターフェースをパブリック URL に公開します。
ページの構築
ページの追加
1
新規ページモーダルを開く
左サイドバーの PAGES の横にある + をクリックします。
2
テンプレートを選択する
カテゴリでフィルター(All Templates、Start、Starter、Advanced)し、利用可能なテンプレートから1つ選択します。
Blank Page
空のキャンバスからゼロから始めます。
Analytics Dashboard
KPI カード、チャート、および最近のアクティビティテーブル。
Action Form
アクションをトリガーする中央揃えフォーム。
Table View
ヘッダー付きのフル幅データテーブル。
Chat Workspace
サイドバーコンテキスト付きの埋め込みチャット。
Agents Hub
ヘッダーとフィルター付きのエージェントカードグリッド。
Actions Panel
利用可能なすべてのアクションの検索可能なグリッド。
Chat + Table
サイドバイサイドのチャットとデータビュー。
3
ページに名前を付ける
モーダルの下部にページ名を入力します(デフォルトではテンプレート名になります)。
4
ページを作成する
Create Page をクリックします。ページがインターフェースに追加され、キャンバスで開かれます。
ウィジェットの追加
1
ウィジェットを見つける
左側の Widgets パネルで、カテゴリ別に閲覧するか、検索バーを使用します。
2
キャンバスに追加する
ウィジェットをキャンバスにドラッグするか、クリックして自動的に配置します。
3
配置とリサイズ
12カラムグリッド上でウィジェットを移動およびリサイズし、目的のレイアウトを実現します。
4
ウィジェットを設定する
ウィジェットを選択すると、右パネルで設定が開かれます。
ページの管理
ページオプションにアクセスするには、サイドバーのページにカーソルを合わせ、表示される ⋯(3点メニュー)をクリックします。これにより、以下のオプションが利用できます:名前の変更
名前の変更
Rename をクリックすると、ページ名がサイドバー内でインライン編集可能なテキストフィールドに変わります。新しい名前を入力して確定します。
アイコンの変更
アイコンの変更
Change icon をクリックすると、ページ名の下にアイコンピッカーが開きます。アイコンをクリックすると即座に適用されます — 保存ステップは不要です。
グループに追加
グループに追加
Add to group をクリックすると、テキスト入力付きのインラインパネルが開きます。グループ名(例:「Admin」、「Reports」)を入力し、Save をクリックすると、ナビゲーション内でページをラベル付きグループに整理できます。ページをグループから削除するには、フィールドを空のまま Save をクリックします。
ページの並べ替え
ページの並べ替え
ページリストのページをクリックしてドラッグし、並べ替えます。この順序は、公開されたインターフェースのナビゲーション順序を決定します。
削除
削除
Delete をクリックすると、ブラウザの確認ダイアログが表示されます:「Delete this page? This cannot be undone.」OK をクリックして確認するか、Cancel をクリックして中止します。インターフェースには常に少なくとも1つのページが必要です。
インターフェースのプレビュー
- 編集 / プレビュー切り替え
- フルプレビュー
トップバーの Edit / Preview トグルを使用して、編集モードと現在のページのビルダー内プレビューを切り替えます。これは、ビルダーを離れることなく、構築中のレイアウトを確認するのに便利です。
インターフェースブランディング
トップバーのインターフェース名の横にあるパレットアイコンをクリックすると、Interface Branding モーダルが開きます。- General
- Colors
- Advanced
公開
1
公開モーダルを開く
Interface Builder の右上の Publish をクリックします。
2
パブリック URL を設定する
インターフェースの URL スラッグを入力します。小文字の英数字とハイフンのみ使用できます。
3
メンバーのアクセスを管理する
Manage Member Access の下で、このインターフェースへのアクセス権を持つユーザーを確認または追加します。
4
Web に公開する
Publish to web をクリックします。インターフェースが公開され、パブリック URL からアクセスできるようになります。
コマンドパレット
⌘K(Mac)または Ctrl+K(Windows)を押すか、トップバーの ⌘K ボタンをクリックして、コマンドパレットを開きます。利用可能なコマンド
利用可能なコマンド
コマンド、ページ名、またはウィジェット名を入力して検索します。Esc で閉じます。
ユースケース
カスタマーサポート
Chat Workspace — エージェントコンテキスト付きのサポートチャットKnowledge Base — ヘルプ記事とドキュメントAction Form — チケットまたはリクエストの送信
データ管理
Analytics Dashboard — KPI カードとチャートTable View — レコードレビューフルデータテーブルCustom Page — レポート用チャートと KPI ウィジェット
ワークフロー自動化
Actions Panel — ワークフローの閲覧と実行Workflow Runs — 実行ステータスと履歴の追跡Analytics Dashboard — 主要指標と実行履歴
トラブルシューティング
インターフェースが表示されない
インターフェースが表示されない
考えられる原因:
- インターフェースがまだ公開されていない
- 異なるプロジェクトを表示している
- 必要な権限がない
ページが読み込まれない
ページが読み込まれない
考えられる原因:
- ウィジェットの設定が間違っている
- 参照されているリソース(エージェント、テーブル、アクションなど)が存在しない、またはアクセスできない
未保存の変更の警告
未保存の変更の警告
保留中の変更があると、トップバーに未保存の変更インジケータが表示され、Save ボタンがオレンジ色に変わります。プレビューまたは公開する前に Save をクリックし、最新の変更が適用されるようにしてください。
公開モーダルの警告バナー
公開モーダルの警告バナー
未保存の変更を公開しようとした場合に表示されます。モーダルを閉じ、Save をクリックし、再度公開モーダルを開いて続行してください。
次のステップ
Agents
Chat ウィジェットを駆動するエージェントを設定します。
Smart Tables
データウィジェットやダッシュボード用の Smart Table を設定します。
Workflows
Action ウィジェットで使用するワークフローを構築します。
Knowledge Base
KB ウィジェット用のナレッジベースを管理します。