github-actions[bot]
cdeebb1a18
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
60 lines
5.7 KiB
Plaintext
60 lines
5.7 KiB
Plaintext
---
|
|
title: 概要
|
|
description: Twenty の UI 内にアプリを配置します — サイドバー項目、保存済みビュー、レコードページのタブ、およびサンドボックス化された React コンポーネント。
|
|
icon: table-columns
|
|
---
|
|
|
|
Twenty アプリの **レイアウトレイヤー** とは、ユーザーに見えるすべての要素を指します。アプリがサイドバーのどこに表示されるか、どのリストビューを提供するか、レコード詳細ページがどのように構成されるか、そしてそれらのページ内でどのカスタム React コンポーネントがレンダリングされるかなどです。
|
|
|
|
```text
|
|
Sidebar Record list Record detail page
|
|
─────── ─────────── ──────────────────
|
|
[📋 My View] ────▶ ┌──────────┐ ┌─────────────────────┐
|
|
[📋 Drafts ] │ Companies│ │ Tabs: [Overview ] │
|
|
[📋 Inbox ] │ ──────── │ │ [Notes ] │
|
|
▲ │ Apple │ │ [Hello ]◀──── definePageLayoutTab
|
|
│ │ Acme │ │ │ adds a tab...
|
|
└ defineNavi- │ … │ │ ┌────────────────┐ │
|
|
gationMenu- └────▲─────┘ │ │ │ │
|
|
Item points │ │ │ React UI │◀── …with a
|
|
to a defineView │ │ │ (sandboxed in │ │ defineFrontComponent
|
|
└ defineView │ │ a Worker) │ │ widget inside
|
|
picks columns │ └────────────────┘ │
|
|
and filters └─────────────────────┘
|
|
```
|
|
|
|
## このセクションについて
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="ビュー" icon="list" href="/l/ja/developers/extend/apps/layout/views">
|
|
`defineView` — 表示カラム、フィルター、グループなどを含む、保存済みリスト構成。
|
|
</Card>
|
|
<Card title="ナビゲーションメニュー項目" icon="bars" href="/l/ja/developers/extend/apps/layout/navigation-menu-items">
|
|
`defineNavigationMenuItem` — ビューまたは外部 URL を指すサイドバー項目。
|
|
</Card>
|
|
<Card title="ページレイアウト" icon="table-columns" href="/l/ja/developers/extend/apps/layout/page-layouts">
|
|
`definePageLayout` および `definePageLayoutTab` — レコード詳細ページ上のタブとウィジェット。
|
|
</Card>
|
|
<Card title="フロントコンポーネント" icon="window-maximize" href="/l/ja/developers/extend/apps/layout/front-components">
|
|
`defineFrontComponent` — Twenty 内でレンダリングされる、サンドボックス化された React コンポーネント。
|
|
</Card>
|
|
<Card title="コマンドメニュー項目" icon="terminal" href="/l/ja/developers/extend/apps/layout/command-menu-items">
|
|
`defineCommandMenuItem` — フロントコンポーネントを Cmd+K の項目およびクイックアクションとして登録します。
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## アプリが表示される場所
|
|
|
|
| 表示場所 | 制御内容 | エンティティ |
|
|
| -------------------- | ------------------------------------------------ | ----------------------------------------- |
|
|
| **サイドバー** | 保存済みビューまたは外部 URL へリンクするカスタム項目 | `defineNavigationMenuItem` |
|
|
| **レコードリスト** | オブジェクト向けの保存済み構成 — 表示カラム、順序、フィルター、グループ | `defineView` |
|
|
| **レコード詳細ページ** | レコードページ上のタブおよびウィジェット（独自オブジェクトのもの、または標準オブジェクトのもの） | `definePageLayout`, `definePageLayoutTab` |
|
|
| **上記いずれかの内部** | カスタム React ウィジェット — ボタン、フォーム、ダッシュボード、連携機能 | `defineFrontComponent` |
|
|
| **アプリ設定** | アプリの「設定」タブ内にある、デフォルトの変数 UI に代わるカスタム設定セクション | `defineSettingsFrontComponent` |
|
|
| **コマンドメニュー (Cmd+K)** | ピン留めされたクイックアクションまたは非表示コマンド | `defineCommandMenuItem` |
|
|
|
|
フロントコンポーネントは Remote DOM を使用して、分離された Web Worker 内で実行されます。ページ内に *ネイティブに*（iframe 内ではなく）レンダリングされますが、ホストページや DOM へ直接アクセスすることはできません。 Twenty との通信は、メッセージパッシング型のホスト API を通じて行われます。
|
|
|
|
これらは依然として積極的に開発中です。サンドボックスは DOM を部分的にのみ実装しているため、高度な利用方法では失敗する場合があります。 [現在の制限](/l/ja/developers/extend/apps/layout/front-components#current-limitations) を参照してください。
|