i18n - docs translations (#17434)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
2353bc62cc
commit
e0d4492013
+168
-168
File diff suppressed because it is too large
Load Diff
+11
-11
@@ -1,22 +1,22 @@
|
||||
---
|
||||
title: Best Practices
|
||||
title: ベストプラクティス',
|
||||
---
|
||||
|
||||
This document outlines the best practices you should follow when working on the backend.
|
||||
この文書は、バックエンドで作業する際に従うべきベストプラクティスを概説しています。
|
||||
|
||||
## Follow a modular approach
|
||||
## モジュール化アプローチを採用する
|
||||
|
||||
The backend follows a modular approach, which is a fundamental principle when working with NestJS. Make sure you break down your code into reusable modules to maintain a clean and organized codebase.
|
||||
Each module should encapsulate a particular feature or functionality and have a well-defined scope. This modular approach enables clear separation of concerns and removes unnecessary complexities.
|
||||
バックエンドは、NestJSを使用する際の基本原則であるモジュラーアプローチを採用しています。 コードを再利用可能なモジュールに分割し、クリーンで整理されたコードベースを維持してください。
|
||||
各モジュールは特定の機能や機能性をカプセル化し、明確なスコープを持つべきです。 このモジュラーアプローチにより、関心事を明確に分離し、不要な複雑さを排除します。
|
||||
|
||||
## Expose services to use in modules
|
||||
## モジュールで使用するサービスを公開する
|
||||
|
||||
Always create services that have a clear and single responsibility, which enhances code readability and maintainability. Name the services descriptively and consistently.
|
||||
常に、明確で単一の責務を持つサービスを作成してください。これにより、コードの可読性と保守性が向上します。 サービスには意味のある一貫した名前を付けてください。
|
||||
|
||||
You should also expose services that you want to use in other modules. Exposing services to other modules is possible through NestJS's powerful dependency injection system, and promotes loose coupling between components.
|
||||
他のモジュールで使用したいサービスを公開する必要があります。 サービスを他のモジュールへ公開することは、NestJS の強力な依存性注入システムによって可能であり、コンポーネント間の疎結合を促進します。
|
||||
|
||||
## Avoid using `any` type
|
||||
## `any` 型の使用を避ける
|
||||
|
||||
When you declare a variable as `any`, TypeScript's type checker doesn't perform any type checking, making it possible to assign any type of values to the variable. TypeScript uses type inference to determine the type of variable based on the value. By declaring it as `any`, TypeScript can no longer infer the type. This makes it hard to catch type-related errors during development, leading to runtime errors and makes the code less maintainable, less reliable, and harder to understand for others.
|
||||
変数を `any` として宣言すると、TypeScript の型チェッカーは型チェックを行わなくなり、その変数にはあらゆる型の値を割り当てられるようになります。 TypeScript は、値に基づいて変数の型を決定するために型推論を使用します。 `any` として宣言すると、TypeScript は型を推論できなくなります。 これにより、開発中に型に関連したエラーを捕捉しにくくなり、実行時エラーを引き起こし、コードのメンテナンス性、信頼性が低下し、他の人が理解しづらくなります。
|
||||
|
||||
This is why everything should have a type. So if you create a new object with a first name and last name, you should create an interface or type that contains a first name and last name that defines the shape of the object you are manipulating.
|
||||
これがすべてに型を持たせるべき理由です。 したがって、名と姓を持つ新しいオブジェクトを作成する場合は、操作しているオブジェクトの構造を定義する、名と姓を含むインターフェースまたは型を作成する必要があります。
|
||||
|
||||
+15
-15
@@ -1,39 +1,39 @@
|
||||
---
|
||||
title: Custom Objects
|
||||
title: カスタムオブジェクト
|
||||
---
|
||||
|
||||
Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
|
||||
オブジェクトは、組織独自のデータ（記録、属性、値）を保存するための構造です。 Twenty provides both standard and custom objects. Twenty は標準オブジェクトとカスタムオブジェクトの両方を提供します。
|
||||
|
||||
Standard objects are in-built objects with a set of attributes available for all users. Examples of standard objects in Twenty include Company and Person. Standard objects have standard fields that are also available for all Twenty users, like Company.displayName.
|
||||
標準オブジェクトは、すべてのユーザーが利用可能な一連の属性を備えた組み込みのオブジェクトです。 標準オブジェクトは、すべてのユーザーが利用可能な一連の属性を備えた組み込みのオブジェクトです。 Examples of standard objects in Twenty include Company and Person. 標準オブジェクトは、すべてのユーザーが利用可能な一連の属性を備えた組み込みのオブジェクトです。 Examples of standard objects in Twenty include Company and Person. 標準オブジェクトには、Twenty のすべてのユーザーが利用できる標準フィールドがあり、例えば Company.displayName があります。
|
||||
|
||||
Custom objects are objects that you can create to store information that is unique to your organization. They are not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for.
|
||||
カスタムオブジェクトは、組織に固有の情報を保存するために作成できるオブジェクトです。 カスタムオブジェクトは、組織に固有の情報を保存するために作成できるオブジェクトです。 カスタムオブジェクトは、組織に固有の情報を保存するために作成できるオブジェクトです。 組み込みではないため、ワークスペースメンバーは、標準オブジェクトに適さない情報を保持するためにカスタムオブジェクトを作成およびカスタマイズできます。
|
||||
|
||||
## High-level schema
|
||||
## 上位スキーマ
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="High level schema" />
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="上位スキーマ" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
## How it works
|
||||
## 仕組み
|
||||
|
||||
Custom objects come from metadata tables that determine the shape, name, and type of the objects. All this information is present in the metadata schema database, consisting of tables:
|
||||
カスタムオブジェクトは、オブジェクトの形状、名前、およびタイプを決定するメタデータテーブルから来ます。 このすべての情報は、テーブルで構成されるメタデータスキーマデータベースに存在します： このすべての情報は、テーブルで構成されるメタデータスキーマデータベースに存在します： このすべての情報は、テーブルで構成されるメタデータスキーマデータベースに存在します：
|
||||
|
||||
* **DataSource**: Details where the data is present.
|
||||
* **Object**: Describes the object and links to a DataSource.
|
||||
* **Field**: Outlines an Object's fields and connects to the Object.
|
||||
* **DataSource**: データの存在場所を示します。
|
||||
* **オブジェクト**: オブジェクトを説明し、DataSourceにリンクします。
|
||||
* **フィールド**: オブジェクトのフィールドを概説し、オブジェクトに接続します。
|
||||
|
||||
To add a custom object, the workspaceMember will query the /metadata API. This updates the metadata accordingly and computes a GraphQL schema based on the metadata, storing it in a GQL cache for later use.
|
||||
カスタムオブジェクトを追加するには、workspaceMemberが/metadata APIをクエリします。 これにより、メタデータが適切に更新され、メタデータに基づいてGraphQLスキーマが計算され、後で使用するためにGQLキャッシュに保存されます。 これにより、メタデータが適切に更新され、メタデータに基づいてGraphQLスキーマが計算され、後で使用するためにGQLキャッシュに保存されます。 これにより、メタデータが適切に更新され、メタデータに基づいてGraphQLスキーマが計算され、後で使用するためにGQLキャッシュに保存されます。
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/add-custom-objects.jpeg" alt="Query the /metadata API to add custom objects" />
|
||||
<img src="/images/docs/server/add-custom-objects.jpeg" alt="カスタムオブジェクトを追加するために/metadata APIをクエリ" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
To fetch data, the process involves making queries through the /graphql endpoint and passing them through the Query Resolver.
|
||||
データを取得するには、/graphqlエンドポイントを介してクエリを行い、Query Resolverを通過させるプロセスが必要です。
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="Query the /graphql endpoint to fetch data" />
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="データを取得するために/graphqlエンドポイントをクエリします" />
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -1,12 +1,12 @@
|
||||
---
|
||||
title: Feature Flags
|
||||
title: 機能フラグ
|
||||
---
|
||||
|
||||
Feature flags are used to hide experimental features. For Twenty, they are set on workspace level and not on a user level.
|
||||
機能フラグは試験的な機能を隠すために使用されます。 機能フラグは試験的な機能を隠すために使用されます。 Twentyでは、それらはワークスペースレベルで設定されており、ユーザーレベルではありません。 機能フラグは試験的な機能を隠すために使用されます。 Twentyでは、それらはワークスペースレベルで設定されており、ユーザーレベルではありません。
|
||||
|
||||
## Adding a new feature flag
|
||||
## 新しい機能フラグの追加
|
||||
|
||||
In `FeatureFlagKey.ts` add the feature flag:
|
||||
`FeatureFlagKey.ts`に機能フラグを追加します:
|
||||
|
||||
```ts
|
||||
type FeatureFlagKey =
|
||||
@@ -14,7 +14,7 @@ type FeatureFlagKey =
|
||||
| ...;
|
||||
```
|
||||
|
||||
Also add it to the enum in `feature-flag.entity.ts`:
|
||||
また、`feature-flag.entity.ts`の列挙型にも追加します:
|
||||
|
||||
```ts
|
||||
enum FeatureFlagKeys {
|
||||
@@ -23,7 +23,7 @@ enum FeatureFlagKeys {
|
||||
}
|
||||
```
|
||||
|
||||
To apply a feature flag on a **backend** feature use:
|
||||
**バックエンド**機能に機能フラグを適用するには、次を使用します:
|
||||
|
||||
```ts
|
||||
@Gate({
|
||||
@@ -31,16 +31,16 @@ To apply a feature flag on a **backend** feature use:
|
||||
})
|
||||
```
|
||||
|
||||
To apply a feature flag on a **frontend** feature use:
|
||||
**フロントエンド**機能に機能フラグを適用するには、次を使用します:
|
||||
|
||||
```ts
|
||||
const isFeatureNameEnabled = useIsFeatureEnabled('IS_FEATURENAME_ENABLED');
|
||||
```
|
||||
|
||||
## Configure feature flags for the deployment
|
||||
## デプロイメント用の機能フラグを設定する
|
||||
|
||||
Change the corresponding record in the Table `core.featureFlag`:
|
||||
Table `core.featureFlag` 内の対応するレコードを変更します:
|
||||
|
||||
| id | key | workspaceId | value |
|
||||
| ------ | ------------------------ | ----------- | ------ |
|
||||
| Random | `IS_FEATURENAME_ENABLED` | WorkspaceID | `true` |
|
||||
| id | キー | workspaceId | 値 |
|
||||
| ---- | ------------------------ | ----------- | --- |
|
||||
| ランダム | `IS_FEATURENAME_ENABLED` | WorkspaceID | `真` |
|
||||
|
||||
+40
-40
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Folder Architecture
|
||||
info: A detailed look into our server folder architecture
|
||||
title: フォルダ構成
|
||||
info: 当社のサーバーフォルダ構造の詳細な観察
|
||||
---
|
||||
|
||||
The backend directory structure is as follows:
|
||||
バックエンドのディレクトリ構造は以下の通りです:
|
||||
|
||||
```
|
||||
server
|
||||
@@ -21,37 +21,37 @@ server
|
||||
└───utils
|
||||
```
|
||||
|
||||
## Ability
|
||||
## 能力
|
||||
|
||||
Defines permissions and includes handlers for each entity.
|
||||
各エンティティの権限を定義し、ハンドラーを含みます。
|
||||
|
||||
## Decorators
|
||||
## デコレータ
|
||||
|
||||
Defines custom decorators in NestJS for added functionality.
|
||||
NestJS で機能を拡張するためのカスタムデコレーターを定義します。
|
||||
|
||||
See [custom decorators](https://docs.nestjs.com/custom-decorators) for more details.
|
||||
詳細については、[カスタムデコレータ](https://docs.nestjs.com/custom-decorators) を参照してください。
|
||||
|
||||
## Filters
|
||||
## フィルター
|
||||
|
||||
Includes exception filters to handle exceptions that might occur in GraphQL endpoints.
|
||||
GraphQLエンドポイントで発生する可能性のある例外を処理するための例外フィルターを含みます。
|
||||
|
||||
## Guards
|
||||
## ガード
|
||||
|
||||
See [guards](https://docs.nestjs.com/guards) for more details.
|
||||
詳細については、[ガード](https://docs.nestjs.com/guards) を参照してください。
|
||||
|
||||
## Health
|
||||
## ヘルス
|
||||
|
||||
Includes a publicly available REST API (healthz) that returns a JSON to confirm whether the database is working as expected.
|
||||
データベースが期待通りに動作しているかを確認するためのJSONを返す公開されたREST API (healthz) を含みます。
|
||||
|
||||
## Metadata
|
||||
## メタデータ
|
||||
|
||||
Defines custom objects and makes available a GraphQL API (graphql/metadata).
|
||||
カスタムオブジェクトを定義し、GraphQL API (graphql/metadata) を利用可能にします。
|
||||
|
||||
## Workspace
|
||||
## ワークスペース
|
||||
|
||||
Generates and serves custom GraphQL schema based on the metadata.
|
||||
メタデータに基づいてカスタムGraphQLスキーマを生成し、提供します。
|
||||
|
||||
### Workspace Directory Structure
|
||||
### ワークスペースディレクトリ構造
|
||||
|
||||
```
|
||||
workspace
|
||||
@@ -83,43 +83,43 @@ workspace
|
||||
└───workspace.factory.ts
|
||||
```
|
||||
|
||||
The root of the workspace directory includes the `workspace.factory.ts`, a file containing the `createGraphQLSchema` function. This function generates workspace-specific schema by using the metadata to tailor a schema for individual workspaces. By separating the schema and resolver construction, we use the `makeExecutableSchema` function, which combines these discrete elements.
|
||||
ワークスペースディレクトリのルートには、`workspace.factory.ts` が含まれ、`createGraphQLSchema` 関数が含まれています。 この関数は、メタデータを使用して、個々のワークスペース用のスキーマを調整し、ワークスペース固有のスキーマを生成します。 スキーマとリゾルバーの構築を分離することで、`makeExecutableSchema` 関数を使用し、これらの個別要素を組み合わせます。 この関数は、メタデータを使用して、個々のワークスペース用のスキーマを調整し、ワークスペース固有のスキーマを生成します。 スキーマとリゾルバーの構築を分離することで、`makeExecutableSchema` 関数を使用し、これらの個別要素を組み合わせます。 この関数は、メタデータを使用して、個々のワークスペース用のスキーマを調整し、ワークスペース固有のスキーマを生成します。 スキーマとリゾルバーの構築を分離することで、`makeExecutableSchema` 関数を使用し、これらの個別要素を組み合わせます。
|
||||
|
||||
This strategy is not just about organization, but also helps with optimization, such as caching generated type definitions to enhance performance and scalability.
|
||||
この戦略は、組織化だけでなく、パフォーマンスやスケーラビリティを向上させるための型定義のキャッシングのような最適化にも役立ちます。
|
||||
|
||||
### Workspace Schema builder
|
||||
### ワークスペーススキーマビルダー
|
||||
|
||||
Generates the GraphQL schema, and includes:
|
||||
GraphQLスキーマを生成し、含まれるもの:
|
||||
|
||||
#### Factories:
|
||||
#### ファクトリー:
|
||||
|
||||
Specialised constructors to generate GraphQL-related constructs.
|
||||
GraphQL関連の構造を生成するための専門的なコンストラクター。
|
||||
|
||||
* The type.factory translates field metadata into GraphQL types using `TypeMapperService`.
|
||||
* The type-definition.factory creates GraphQL input or output objects derived from `objectMetadata`.
|
||||
* type.factoryは、フィールドメタデータを`TypeMapperService`を使用してGraphQLタイプに変換します。
|
||||
* type-definition.factoryは、`objectMetadata`から導出されるGraphQLの入力または出力オブジェクトを作成します。
|
||||
|
||||
#### GraphQL Types
|
||||
#### GraphQLタイプ
|
||||
|
||||
Includes enumerations, inputs, objects, and scalars, and serves as the building blocks for the schema construction.
|
||||
列挙型、入力、オブジェクト、スカラーを含み、スキーマ構築の基礎となります。
|
||||
|
||||
#### Interfaces and Object Definitions
|
||||
#### インターフェースとオブジェクト定義
|
||||
|
||||
Contains the blueprints for GraphQL entities, and includes both predefined and custom types like `MONEY` or `URL`.
|
||||
GraphQLエンティティの設計図を含み、`MONEY`や`URL`のような定義済みおよびカスタムタイプが含まれます。
|
||||
|
||||
#### Services
|
||||
#### サービス
|
||||
|
||||
Contains the service responsible for associating FieldMetadataType with its appropriate GraphQL scalar or query modifiers.
|
||||
FieldMetadataTypeに対応するGraphQLスカラーまたはクエリ修飾子を関連付けるためのサービスを含みます。
|
||||
|
||||
#### Storage
|
||||
#### ストレージ
|
||||
|
||||
Includes the `TypeDefinitionsStorage` class that contains reusable type definitions, preventing duplication of GraphQL types.
|
||||
GraphQLタイプの重複を防ぐための再利用可能な型定義を含む`TypeDefinitionsStorage`クラスを含みます。
|
||||
|
||||
### Workspace Resolver Builder
|
||||
### ワークスペースリゾルバービルダー
|
||||
|
||||
Creates resolver functions for querying and mutating the GraphQL schema.
|
||||
GraphQLスキーマのクエリおよび変更を行うリゾルバー関数を作成します。
|
||||
|
||||
Each factory in this directory is responsible for producing a distinct resolver type, such as the `FindManyResolverFactory`, designed for adaptable application across various tables.
|
||||
このディレクトリ内の各ファクトリーは、様々なテーブルに適用可能な`FindManyResolverFactory`のように、異なるリゾルバータイプを生成する役割を果たします。
|
||||
|
||||
### Workspace Query Runner
|
||||
### ワークスペースクエリランナー
|
||||
|
||||
Runs the generated queries on the database and parses the result.
|
||||
データベースで生成されたクエリを実行し、その結果を解析します。
|
||||
|
||||
+10
-10
@@ -1,20 +1,20 @@
|
||||
---
|
||||
title: Message Queue
|
||||
title: メッセージキュー
|
||||
---
|
||||
|
||||
Queues facilitate async operations to be performed. They can be used for performing background tasks such as sending a welcome email on register.
|
||||
Each use case will have its own queue class extended from `MessageQueueServiceBase`.
|
||||
キューは非同期処理を実行するための手段を提供します。 それらは、登録時にウェルカムメールを送信するなどのバックグラウンドタスクを実行するために使用できます。
|
||||
各ユースケースには `MessageQueueServiceBase` から拡張された独自のキュークラスが必要です。
|
||||
|
||||
Currently, we only support `bull-mq`[bull-mq](https://bullmq.io/) as the queue driver.
|
||||
現在のところ、キュードライバとして `bull-mq`[bull-mq](https://bullmq.io/) のみをサポートしています。
|
||||
|
||||
## Steps to create and use a new queue
|
||||
## 新しいキューを作成して使用する手順
|
||||
|
||||
1. Add a queue name for your new queue under enum `MESSAGE_QUEUES`.
|
||||
2. Provide the factory implementation of the queue with the queue name as the dependency token.
|
||||
3. Inject the queue that you created in the required module/service with the queue name as the dependency token.
|
||||
4. Add worker class with token based injection just like producer.
|
||||
1. enum `MESSAGE_QUEUES` に、新しいキュー用のキュー名を追加します。
|
||||
2. 依存トークンとしてキュー名を持つキューのファクトリ実装を提供します。
|
||||
3. 依存性トークンとしてキュー名を使用して、作成したキューを必要なモジュール/サービスにインジェクトします。
|
||||
4. トークンベースのインジェクションを用いたワーカークラスをプロデューサーと同様に追加します。
|
||||
|
||||
### Example usage
|
||||
### 使用例
|
||||
|
||||
```ts
|
||||
class Resolver {
|
||||
|
||||
+32
-27
@@ -1,19 +1,24 @@
|
||||
---
|
||||
title: Backend Commands
|
||||
title: バックエンドコマンド
|
||||
---
|
||||
|
||||
## Useful commands
|
||||
## 便利なコマンド
|
||||
|
||||
These commands should be executed from packages/twenty-server folder.
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
これらのコマンドは packages/twenty-server フォルダから実行してください。
|
||||
From any other folder you can run `npx nx {command} twenty-server` (or `npx nx run twenty-server:{command}`).
|
||||
|
||||
### First time setup
|
||||
### 初期設定
|
||||
|
||||
```
|
||||
npx nx database:reset twenty-server # setup the database with dev seeds
|
||||
```
|
||||
|
||||
### Starting the server
|
||||
### サーバーの起動
|
||||
|
||||
```
|
||||
npx nx run twenty-server:start
|
||||
@@ -25,77 +30,77 @@ npx nx run twenty-server:start
|
||||
npx nx run twenty-server:lint # pass --fix to fix lint errors
|
||||
```
|
||||
|
||||
### Test
|
||||
### テスト
|
||||
|
||||
```
|
||||
npx nx run twenty-server:test:unit # run unit tests
|
||||
npx nx run twenty-server:test:integration # run integration tests
|
||||
```
|
||||
|
||||
Note: you can run `npx nx run twenty-server:test:integration:with-db-reset` in case you need to reset the database before running the integration tests.
|
||||
注: 統合テストを実行する前にデータベースをリセットする必要がある場合、 `npx nx run twenty-server:test:integration:with-db-reset` を実行できます。
|
||||
|
||||
### Resetting the database
|
||||
### データベースのリセット
|
||||
|
||||
If you want to reset and seed the database, you can run the following command:
|
||||
データベースをリセットおよびシードしたい場合は、次のコマンドを実行してください:
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:database:reset
|
||||
```
|
||||
|
||||
### Migrations
|
||||
### マイグレーション
|
||||
|
||||
#### For objects in Core/Metadata schemas (TypeORM)
|
||||
#### Core/Metadata スキーマ (TypeORM) のオブジェクトに対して
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:typeorm migration:generate src/database/typeorm/core/migrations/nameOfYourMigration -d src/database/typeorm/core/core.datasource.ts
|
||||
```
|
||||
|
||||
#### For Workspace objects
|
||||
#### ワークスペースオブジェクトに対して
|
||||
|
||||
There are no migrations files, migration are generated automatically for each workspace,
|
||||
stored in the database, and applied with this command
|
||||
マイグレーションファイルはなく、それぞれのワークスペースに対して自動的に生成され、
|
||||
データベースに保存され、このコマンドで適用されます。
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:command workspace:sync-metadata -f
|
||||
```
|
||||
|
||||
<Warning>
|
||||
This will drop the database and re-run the migrations and seed.
|
||||
これによりデータベースが削除され、マイグレーションとシードが再実行されます。
|
||||
|
||||
Make sure to back up any data you want to keep before running this command.
|
||||
このコマンドを実行する前に、保持したいデータをバックアップしてください。
|
||||
</Warning>
|
||||
|
||||
## Tech Stack
|
||||
## 技術スタック
|
||||
|
||||
Twenty primarily uses NestJS for the backend.
|
||||
Twenty は主にバックエンドに NestJS を使用しています。
|
||||
|
||||
Prisma was the first ORM we used. But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. The project now uses TypeORM.
|
||||
最初に使用した ORM は Prisma でした。 最初に使用した ORM は Prisma でした。 But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. 最初に使用した ORM は Prisma でした。 But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. 現在のプロジェクトでは TypeORM を使用しています。
|
||||
|
||||
Here's what the tech stack now looks like.
|
||||
現在の技術スタックは次のようになっています。
|
||||
|
||||
**Core**
|
||||
**コア**
|
||||
|
||||
* [NestJS](https://nestjs.com/)
|
||||
* [TypeORM](https://typeorm.io/)
|
||||
* [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
|
||||
|
||||
**Database**
|
||||
**データベース**
|
||||
|
||||
* [Postgres](https://www.postgresql.org/)
|
||||
|
||||
**Third-party integrations**
|
||||
**サードパーティ統合**
|
||||
|
||||
* [Sentry](https://sentry.io/welcome/) for tracking bugs
|
||||
* [Sentry](https://sentry.io/welcome/) バグトラッキング用
|
||||
|
||||
**Testing**
|
||||
**テスト**
|
||||
|
||||
* [Jest](https://jestjs.io/)
|
||||
|
||||
**Tooling**
|
||||
**ツール**
|
||||
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
* [ESLint](https://eslint.org/)
|
||||
|
||||
**Development**
|
||||
**開発**
|
||||
|
||||
* [AWS EKS](https://aws.amazon.com/eks/)
|
||||
|
||||
+20
-20
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Zapier App
|
||||
title: Zapierアプリ
|
||||
---
|
||||
|
||||
Effortlessly sync Twenty with 3000+ apps using [Zapier](https://zapier.com/). Automate tasks, boost productivity, and supercharge your customer relationships!
|
||||
[Zapier](https://zapier.com/) を使って、3000以上のアプリと Twenty を簡単に同期できます。 タスクを自動化し、生産性を高め、顧客関係を強化しよう！
|
||||
|
||||
## About Zapier
|
||||
## Zapierについて
|
||||
|
||||
Zapier is a tool that allows you to automate workflows by connecting the apps that your team uses every day. The fundamental concept of Zapier is automation workflows, called Zaps, and include triggers and actions.
|
||||
Zapierは、チームが毎日使用するアプリを連携させてワークフローを自動化するツールです。 Zapierの基本的な概念は、Zapsと呼ばれる自動化ワークフローであり、トリガーとアクションを含みます。 Zapierは、チームが毎日使用するアプリを連携させてワークフローを自動化するツールです。 Zapierの基本的な概念は、Zapsと呼ばれる自動化ワークフローであり、トリガーとアクションを含みます。 Zapierの基本的な概念は、Zapsと呼ばれる自動化ワークフローであり、トリガーとアクションを含みます。
|
||||
|
||||
You can learn more about how Zapier works [here](https://zapier.com/how-it-works).
|
||||
Zapierの仕組みについてもっと知りたい方は[こちら](https://zapier.com/how-it-works)をご覧ください。
|
||||
|
||||
## Setup
|
||||
## セットアップ
|
||||
|
||||
### Step 1: Install Zapier packages
|
||||
### ステップ 1: Zapier パッケージをインストール
|
||||
|
||||
```bash
|
||||
cd packages/twenty-zapier
|
||||
@@ -20,33 +20,33 @@ cd packages/twenty-zapier
|
||||
yarn
|
||||
```
|
||||
|
||||
### Step 2: Login with the CLI
|
||||
### ステップ 2: CLI でログイン
|
||||
|
||||
Use your Zapier credentials to log in using the CLI:
|
||||
Zapierの資格情報を使用してCLIでログインしてください。
|
||||
|
||||
```bash
|
||||
zapier login
|
||||
```
|
||||
|
||||
### Step 3: Set environment variables
|
||||
### ステップ3：環境変数をセットアップします
|
||||
|
||||
From the `packages/twenty-zapier` folder, run:
|
||||
`packages/twenty-zapier`フォルダーから実行します。
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Run the application locally, go to [http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks), and generate an API key.
|
||||
アプリケーションをローカルで実行し、[http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks)にアクセスしてAPIキーを生成してください。
|
||||
|
||||
Replace the **YOUR_API_KEY** value in the `.env` file with the API key you just generated.
|
||||
.envファイルの**YOUR_API_KEY**値を生成したAPIキーで置き換えてください。
|
||||
|
||||
## Development
|
||||
## 開発
|
||||
|
||||
<Warning>
|
||||
Make sure to run `yarn build` before any `zapier` command.
|
||||
`zapier`コマンドを実行する前に`yarn build`を実行してください。
|
||||
</Warning>
|
||||
|
||||
### Test
|
||||
### テスト
|
||||
|
||||
```bash
|
||||
yarn test
|
||||
@@ -58,25 +58,25 @@ yarn test
|
||||
yarn format
|
||||
```
|
||||
|
||||
### Watch and compile as you edit code
|
||||
### コードを編集しながら監視＆コンパイル
|
||||
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
### Validate your Zapier app
|
||||
### Zapierアプリを検証
|
||||
|
||||
```bash
|
||||
yarn validate
|
||||
```
|
||||
|
||||
### Deploy your Zapier app
|
||||
### Zapierアプリをデプロイ
|
||||
|
||||
```bash
|
||||
yarn deploy
|
||||
```
|
||||
|
||||
### List all Zapier CLI commands
|
||||
### すべてのZapier CLIコマンドを列挙
|
||||
|
||||
```bash
|
||||
zapier
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
---
|
||||
title: Bugs, Requests & Pull Requests
|
||||
info: Report issues, request features, and contribute code
|
||||
title: バグ報告、要望、プルリクエスト
|
||||
info: Issue を報告し、機能を要望し、コードで貢献する
|
||||
---
|
||||
|
||||
## Reporting Bugs
|
||||
## バグの報告
|
||||
|
||||
To report a bug, please [create an issue on GitHub](https://github.com/twentyhq/twenty/issues/new).
|
||||
バグを報告するには、[GitHubで問題を作成](https://github.com/twentyhq/twenty/issues/new)してください。
|
||||
|
||||
You can also ask for help on [Discord](https://discord.gg/cx5n4Jzs57).
|
||||
[Discord](https://discord.gg/cx5n4Jzs57)でヘルプを求めることもできます。
|
||||
|
||||
## Feature Requests
|
||||
## 機能リクエスト
|
||||
|
||||
If you're not sure if it's a bug, and you feel it's closer to a feature request, then you should probably [open a discussion instead](https://github.com/twentyhq/twenty/discussions/new).
|
||||
バグかどうか不明で、機能リクエストに近いと感じる場合は、代わりに[ディスカッションを開く](https://github.com/twentyhq/twenty/discussions/new)べきです。
|
||||
|
||||
## Submit a Pull Request
|
||||
## プルリクエストを提出する
|
||||
|
||||
Contributing code to Twenty starts with a pull request (PR).
|
||||
Twentyへのコード貢献は、プルリクエスト（PR）から始まります。
|
||||
|
||||
### Before You Start
|
||||
### 始める前に
|
||||
|
||||
1. Check [existing issues](https://github.com/twentyhq/twenty/issues) for related work
|
||||
2. For new features, open an issue first to discuss
|
||||
3. Review our [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/CODE_OF_CONDUCT.md)
|
||||
1. 関連する作業がないか[既存の Issue](https://github.com/twentyhq/twenty/issues)を確認してください
|
||||
2. 新機能については、まず Issue を作成して議論してください
|
||||
3. プロジェクトの[行動規範](https://github.com/twentyhq/twenty/blob/main/CODE_OF_CONDUCT.md)を確認してください
|
||||
|
||||
### Fork and Clone
|
||||
### フォークとクローン
|
||||
|
||||
1. Fork the repository on GitHub
|
||||
2. Clone your fork:
|
||||
1. GitHubでリポジトリをフォークする
|
||||
2. フォークをクローンする:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/twenty.git
|
||||
cd twenty
|
||||
```
|
||||
|
||||
3. Add upstream remote:
|
||||
3. upstream リモートを追加する:
|
||||
|
||||
```bash
|
||||
git remote add upstream https://github.com/twentyhq/twenty.git
|
||||
```
|
||||
|
||||
### Create a Branch
|
||||
### ブランチを作成する
|
||||
|
||||
```bash
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
|
||||
Use descriptive branch names:
|
||||
説明的なブランチ名を使用する:
|
||||
|
||||
* `feature/add-export-button`
|
||||
* `fix/login-redirect-issue`
|
||||
* `docs/update-api-guide`
|
||||
|
||||
### Make Your Changes
|
||||
### 変更を加える
|
||||
|
||||
1. Write clean, well-documented code
|
||||
2. Follow existing code style
|
||||
3. Add tests for new functionality
|
||||
4. Update documentation if needed
|
||||
1. クリーンで適切にドキュメント化されたコードを書く
|
||||
2. 既存のコードスタイルに従う
|
||||
3. 新しい機能にはテストを追加する
|
||||
4. 必要に応じてドキュメントを更新する
|
||||
|
||||
### Submit Your PR
|
||||
### プルリクエストを提出する
|
||||
|
||||
1. Push your branch:
|
||||
1. ブランチをプッシュする:
|
||||
|
||||
```bash
|
||||
git push origin feature/your-feature-name
|
||||
```
|
||||
|
||||
2. Open a PR on GitHub
|
||||
3. Fill in the PR template
|
||||
4. Link related issues
|
||||
2. GitHubでプルリクエストを作成する
|
||||
3. PR テンプレートに記入する
|
||||
4. 関連する Issue をリンクする
|
||||
|
||||
### PR Checklist
|
||||
### PR チェックリスト
|
||||
|
||||
* [ ] Code follows project style guidelines
|
||||
* [ ] Tests pass locally
|
||||
* [ ] Documentation is updated
|
||||
* [ ] PR description explains the changes
|
||||
* [ ] コードがプロジェクトのスタイルガイドに準拠している
|
||||
* [ ] ローカルでテストが通っている
|
||||
* [ ] ドキュメントが更新されている
|
||||
* [ ] PR の説明に変更内容が記載されている
|
||||
|
||||
+81
-81
@@ -1,19 +1,19 @@
|
||||
---
|
||||
title: Best Practices
|
||||
title: ベストプラクティス',
|
||||
---
|
||||
|
||||
This document outlines the best practices you should follow when working on the frontend.
|
||||
このドキュメントでは、フロントエンド作業におけるベストプラクティスを概要化しています。
|
||||
|
||||
## State management
|
||||
## 状態管理
|
||||
|
||||
React and Recoil handle state management in the codebase.
|
||||
React と Recoil はコードベース内の状態管理を行います。
|
||||
|
||||
### Use `useRecoilState` to store state
|
||||
### 状態を保存するために `useRecoilState` を使用する
|
||||
|
||||
It's good practice to create as many atoms as you need to store your state.
|
||||
状態を保存するために必要なだけ多くのアトムを作成するのがよいです。
|
||||
|
||||
<Warning>
|
||||
It's better to use extra atoms than trying to be too concise with props drilling.
|
||||
プロップドリリングを必要以上に控えるより、追加のアトムを使用する方が良いです。
|
||||
</Warning>
|
||||
|
||||
```tsx
|
||||
@@ -36,29 +36,29 @@ export const MyComponent = () => {
|
||||
}
|
||||
```
|
||||
|
||||
### Do not use `useRef` to store state
|
||||
### 状態を保存するために `useRef` を使用しないでください
|
||||
|
||||
Avoid using `useRef` to store state.
|
||||
状態の保存に `useRef` を使用するのは避けてください。
|
||||
|
||||
If you want to store state, you should use `useState` or `useRecoilState`.
|
||||
|
||||
See [how to manage re-renders](#managing-re-renders) if you feel like you need `useRef` to prevent some re-renders from happening.
|
||||
いくつかの再レンダリングを防ぐために `useRef` が必要だと感じた場合は、[再レンダリングの管理方法](#managing-re-renders)を参照してください。
|
||||
|
||||
## Managing re-renders
|
||||
## 再レンダリングの管理
|
||||
|
||||
Re-renders can be hard to manage in React.
|
||||
React で再レンダリングを管理するのは難しいことがあります。
|
||||
|
||||
Here are some rules to follow to avoid unnecessary re-renders.
|
||||
不必要な再レンダリングを避けるためのいくつかのルールをご紹介します。
|
||||
|
||||
Keep in mind that you can **always** avoid re-renders by understanding their cause.
|
||||
再レンダリングの原因を理解することで、常に再レンダリングを避けることができることを念頭に置いてください。
|
||||
|
||||
### Work at the root level
|
||||
### ルートレベルで作業する
|
||||
|
||||
Avoiding re-renders in new features is now made easy by eliminating them at the root level.
|
||||
新機能での再レンダリングをルートレベルで排除することで、簡単に避けることができるようになりました。
|
||||
|
||||
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
|
||||
|
||||
That way you know that there's just one place that can trigger a re-render.
|
||||
その方法で、再レンダリングを引き起こす場所が 1 つだけあることを認識できます。
|
||||
|
||||
### Always think twice before adding `useEffect` in your codebase
|
||||
|
||||
@@ -68,17 +68,17 @@ You should think whether you need `useEffect`, or if you can move the logic in a
|
||||
|
||||
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
|
||||
|
||||
You can also find them in libraries like Apollo: `onCompleted`, `onError`, etc.
|
||||
Apollo などのライブラリで `onCompleted`、`onError` などとしても見つかることがあります。
|
||||
|
||||
### Use a sibling component to extract `useEffect` or data fetching logic
|
||||
|
||||
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
|
||||
|
||||
You can apply the same for data fetching logic, with Apollo hooks.
|
||||
Apollo フックを使用してデータ取得ロジックにも同じことを適用できます。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, will cause re-renders even if data is not changing,
|
||||
// because useEffect needs to be re-evaluated
|
||||
// ❌ 悪い例: データが変化していなくても再レンダーを引き起こす
|
||||
// useEffect を再評価する必要があるため
|
||||
export const PageComponent = () => {
|
||||
const [data, setData] = useRecoilState(dataState);
|
||||
const [someDependency] = useRecoilState(someDependencyState);
|
||||
@@ -100,8 +100,8 @@ export const App = () => (
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, will not cause re-renders if data is not changing,
|
||||
// because useEffect is re-evaluated in another sibling component
|
||||
// ✅ 良い例: データが変化していなければ再レンダーは発生しない
|
||||
// useEffect が別の兄弟コンポーネントで再評価されるため
|
||||
export const PageComponent = () => {
|
||||
const [data, setData] = useRecoilState(dataState);
|
||||
|
||||
@@ -129,84 +129,84 @@ export const App = () => (
|
||||
);
|
||||
```
|
||||
|
||||
### Use recoil family states and recoil family selectors
|
||||
### Recoilファミリー状態とファミリーセレクターを使用する
|
||||
|
||||
Recoil family states and selectors are a great way to avoid re-renders.
|
||||
Recoil ファミリー状態とセレクターは、再レンダリングを回避するための優れた方法です。
|
||||
|
||||
They are useful when you need to store a list of items.
|
||||
アイテムのリストを保存する必要があるときに有用です。
|
||||
|
||||
### You shouldn't use `React.memo(MyComponent)`
|
||||
### `React.memo(MyComponent)` を使用してはいけません
|
||||
|
||||
Avoid using `React.memo()` because it does not solve the cause of the re-render, but instead breaks the re-render chain, which can lead to unexpected behavior and make the code very hard to refactor.
|
||||
`React.memo()` の使用を避けてください。それは再レンダリングの原因を解決するのではなく、再レンダリングの連鎖を破り、予期しない動作を引き起こす可能性があり、コードのリファクタリングが非常に困難になります。
|
||||
|
||||
### Limit `useCallback` or `useMemo` usage
|
||||
### `useCallback` または `useMemo` の使用を制限する
|
||||
|
||||
They are often not necessary and will make the code harder to read and maintain for a gain of performance that is unnoticeable.
|
||||
それらは通常必要ではなく、気付かない程度のパフォーマンス向上のためにコードの可読性と保守性を低下させます。
|
||||
|
||||
## Console.logs
|
||||
## コンソールログ
|
||||
|
||||
`console.log` statements are valuable during development, offering real-time insights into variable values and code flow. But, leaving them in production code can lead to several issues:
|
||||
`console.log` は開発中において、変数の値やコードの流れについてリアルタイムの洞察を提供するために有効です。 しかし、これをプロダクションコードに残すと、いくつかの問題を引き起こす可能性があります。 しかし、これをプロダクションコードに残すと、いくつかの問題を引き起こす可能性があります。
|
||||
|
||||
1. **Performance**: Excessive logging can affect the runtime performance, especially on client-side applications.
|
||||
1. **パフォーマンス**: 過剰なログはクライアントサイドアプリケーションのランタイムパフォーマンスに影響を与える可能性があります。
|
||||
|
||||
2. **Security**: Logging sensitive data can expose critical information to anyone who inspects the browser's console.
|
||||
2. **セキュリティ**: センシティブなデータをログに記録すると、ブラウザのコンソールを確認するだけで重要な情報が露見する恐れがあります。
|
||||
|
||||
3. **Cleanliness**: Filling up the console with logs can obscure important warnings or errors that developers or tools need to see.
|
||||
3. **清潔性**: コンソールにログが溢れると、開発者やツールが見るべき重要な警告やエラーが不明瞭になる可能性があります。
|
||||
|
||||
4. **Professionalism**: End users or clients checking the console and seeing a myriad of log statements might question the code's quality and polish.
|
||||
4. **プロフェッショナリズム**: エンドユーザーやクライアントがコンソールを確認したときに、多くのログが表示されると、そのコードの品質や仕上がりを疑問視されることがあります。
|
||||
|
||||
Make sure you remove all `console.logs` before pushing the code to production.
|
||||
`console.logs` はすべて削除してからコードをプロダクションにプッシュしてください。
|
||||
|
||||
## Naming
|
||||
## 命名について
|
||||
|
||||
### Variable Naming
|
||||
### 変数の命名
|
||||
|
||||
Variable names ought to precisely depict the purpose or function of the variable.
|
||||
変数名は、その変数の目的や機能を正確に描写する必要があります。
|
||||
|
||||
#### The issue with generic names
|
||||
#### 汎用的な名前の問題
|
||||
|
||||
Generic names in programming are not ideal because they lack specificity, leading to ambiguity and reduced code readability. Such names fail to convey the variable or function's purpose, making it challenging for developers to understand the code's intent without deeper investigation. This can result in increased debugging time, higher susceptibility to errors, and difficulties in maintenance and collaboration. Meanwhile, descriptive naming makes the code self-explanatory and easier to navigate, enhancing code quality and developer productivity.
|
||||
プログラミングにおいて汎用的な名前は理想的ではありません。なぜなら、それらは特異性に欠け、曖昧さをもたらし、コードの可読性を低下させるからです。 そのような名前は変数や関数の目的を伝えず、開発者がコードの意図を深く探らない限り理解を困難にします。 これにより、デバッグ時間が増加し、エラーの発生率が高まり、メンテナンスやコラボレーションが難しくなります。 一方で、説明的な命名はコードを自己説明的にし、ナビゲートしやすくし、コードの品質と開発者の生産性を向上させます。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, uses a generic name that doesn't communicate its
|
||||
// purpose or content clearly
|
||||
// ❌ 悪い例: 目的や内容が
|
||||
// 明確に伝わらない汎用的な名前を使用している
|
||||
const [value, setValue] = useState('');
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, uses a descriptive name
|
||||
// ✅ 良い例: 説明的な名前を使用している
|
||||
const [email, setEmail] = useState('');
|
||||
```
|
||||
|
||||
#### Some words to avoid in variable names
|
||||
#### 変数名で避けるべき言葉のいくつか
|
||||
|
||||
* dummy
|
||||
* ダミー
|
||||
|
||||
### Event handlers
|
||||
### イベントハンドラー
|
||||
|
||||
Event handler names should start with `handle`, while `on` is a prefix used to name events in components props.
|
||||
イベントハンドラの名前は `handle` で始めるべきであり、`on` はコンポーネントのプロップ内のイベントを命名するためのプレフィックスとして使用されます。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
// ❌ 悪い例
|
||||
const onEmailChange = (val: string) => {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good
|
||||
// ✅ 良い例
|
||||
const handleEmailChange = (val: string) => {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## Optional Props
|
||||
## オプショナルプロップ
|
||||
|
||||
Avoid passing the default value for an optional prop.
|
||||
オプショナルプロップにデフォルト値を渡すことは避けてください。
|
||||
|
||||
**EXAMPLE**
|
||||
**例**
|
||||
|
||||
Take the`EmailField` component defined below:
|
||||
以下に定義された `EmailField` コンポーネントを取る:
|
||||
|
||||
```tsx
|
||||
type EmailFieldProps = {
|
||||
@@ -219,28 +219,28 @@ const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
|
||||
);
|
||||
```
|
||||
|
||||
**Usage**
|
||||
**使用方法**
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, passing in the same value as the default value adds no value
|
||||
// ❌ 悪い例: デフォルト値と同じ値を渡しても意味がない
|
||||
const Form = () => <EmailField value="username@email.com" disabled={false} />;
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, assumes the default value
|
||||
// ✅ 良い例: デフォルト値に任せる
|
||||
const Form = () => <EmailField value="username@email.com" />;
|
||||
```
|
||||
|
||||
## Component as props
|
||||
## プロップとしてのコンポーネント
|
||||
|
||||
Try as much as possible to pass uninstantiated components as props, so children can decide on their own of what props they need to pass.
|
||||
可能な限り、未初期化のコンポーネントをプロップとして渡してください。子コンポーネントが必要なプロップを自分で決定できるようにします。
|
||||
|
||||
The most common example for that is icon components:
|
||||
そのための最も一般的な例はアイコンコンポーネントです。
|
||||
|
||||
```tsx
|
||||
const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
|
||||
|
||||
// In MyComponent
|
||||
// MyComponent 内
|
||||
const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
@@ -252,25 +252,25 @@ const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
|
||||
};
|
||||
```
|
||||
|
||||
For React to understand that the component is a component, you need to use PascalCase, to later instantiate it with `<MyIcon>`
|
||||
Reactがコンポーネントを認識するためには、PascalCaseを使用し、その後に`<MyIcon>`でインスタンス化する必要があります。
|
||||
|
||||
## Prop Drilling: Keep It Minimal
|
||||
## プロップのドリリングを最小限に抑える
|
||||
|
||||
Prop drilling, in the React context, refers to the practice of passing state variables and their setters through many component layers, even if intermediary components don't use them. While sometimes necessary, excessive prop drilling can lead to:
|
||||
Reactのコンテキストでのプロップドリリングとは、多くのコンポーネントレイヤーを通じて状態変数やそのセットを渡すことを意味します。中間のコンポーネントがそれを使用していない場合であってもです。 時には必要ですが、過度のプロップドリリングは次の結果を導きかねません。 時には必要ですが、過度のプロップドリリングは次の結果を導きかねません。 時には必要ですが、過度のプロップドリリングは次の結果を導きかねません。
|
||||
|
||||
1. **Decreased Readability**: Tracing where a prop originates or where it's utilized can become convoluted in a deeply nested component structure.
|
||||
1. **可読性の低下**：プロップがどこから始まり、どこで使われているかを追跡するのが、深くネストされたコンポーネント構造では複雑になり得ます。
|
||||
|
||||
2. **Maintenance Challenges**: Changes in one component's prop structure might require adjustments in several components, even if they don't directly use the prop.
|
||||
2. **メンテナンスの難しさ**：あるコンポーネントのプロップ構造に変更があると、他のコンポーネントに変更が必要になる場合があります。それが直接プロップを使用していなくても。
|
||||
|
||||
3. **Reduced Component Reusability**: A component receiving a lot of props solely for passing them down becomes less general-purpose and harder to reuse in different contexts.
|
||||
3. **コンポーネントの再利用性の低下**：多くのプロップを単に下位に渡すコンポーネントは、汎用性が低くなり、異なるコンテキストでの再利用が難しくなります。
|
||||
|
||||
If you feel that you are using excessive prop drilling, see [state management best practices](#state-management).
|
||||
もし過度のプロップドリリングをしていると感じた場合は、[状態管理のベストプラクティス](#state-management)を参照してください。
|
||||
|
||||
## Imports
|
||||
## インポート
|
||||
|
||||
When importing, opt for the designated aliases rather than specifying complete or relative paths.
|
||||
インポート時は、完全なパスや相対パスを指定するのではなく、指定されたエイリアスを選択してください。
|
||||
|
||||
**The Aliases**
|
||||
**ハンドルの別名**
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -282,10 +282,10 @@ When importing, opt for the designated aliases rather than specifying complete o
|
||||
}
|
||||
```
|
||||
|
||||
**Usage**
|
||||
**使用方法**
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, specifies the entire relative path
|
||||
// ❌ 悪い例: 相対パス全体を指定している
|
||||
import {
|
||||
CatalogDecorator
|
||||
} from '../../../../../testing/decorators/CatalogDecorator';
|
||||
@@ -295,14 +295,14 @@ import {
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, utilises the designated aliases
|
||||
// ✅ 良い例: 指定したエイリアスを利用している
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from 'twenty-ui/testing';
|
||||
```
|
||||
|
||||
## Schema Validation
|
||||
## スキーマ検証
|
||||
|
||||
[Zod](https://github.com/colinhacks/zod) is the schema validator for untyped objects:
|
||||
[Zod](https://github.com/colinhacks/zod)は型未定義オブジェクトのスキーマバリデーターです。
|
||||
|
||||
```js
|
||||
const validationSchema = z
|
||||
@@ -310,16 +310,16 @@ const validationSchema = z
|
||||
exist: z.boolean(),
|
||||
email: z
|
||||
.string()
|
||||
.email('Email must be a valid email'),
|
||||
.email('メールアドレスは有効な形式である必要があります'),
|
||||
password: z
|
||||
.string()
|
||||
.regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
|
||||
.regex(PASSWORD_REGEX, 'パスワードは8文字以上である必要があります'),
|
||||
})
|
||||
.required();
|
||||
|
||||
type Form = z.infer<typeof validationSchema>;
|
||||
```
|
||||
|
||||
## Breaking Changes
|
||||
## 重大な変更
|
||||
|
||||
Always perform thorough manual testing before proceeding to guarantee that modifications haven’t caused disruptions elsewhere, given that tests have not yet been extensively integrated.
|
||||
変更が他の部分に影響を及ぼしていないことを確実にするために、進む前に徹底的な手動テストを行ってください。テストがまだ広範囲に統合されていないためです。
|
||||
|
||||
+36
-36
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Folder Architecture
|
||||
info: A detailed look into our folder architecture
|
||||
title: フォルダ構成
|
||||
info: 当社のフォルダ構造の詳細な解説
|
||||
---
|
||||
|
||||
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
|
||||
このガイドでは、プロジェクトのディレクトリ構成の詳細と、それが Twenty の整理と保守性にどのように寄与するかを解説します。
|
||||
|
||||
By following this folder architecture convention, it's easier to find the files related to specific features and ensure that the application is scalable and maintainable.
|
||||
このフォルダ構成の規約に従うことで、特定の機能に関連するファイルを見つけやすくなり、アプリケーションのスケーラビリティと保守性を確保できます。
|
||||
|
||||
```
|
||||
front
|
||||
@@ -22,14 +22,14 @@ front
|
||||
└───...
|
||||
```
|
||||
|
||||
## Pages
|
||||
## ページ
|
||||
|
||||
Includes the top-level components defined by the application routes. They import more low-level components from the modules folder (more details below).
|
||||
アプリケーションのルートで定義されたトップレベルのコンポーネントを含みます。 それらは、modules フォルダからより低レベルのコンポーネントをインポートします（詳細は下記を参照）。
|
||||
|
||||
## Modules
|
||||
## モジュール
|
||||
|
||||
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
|
||||
They should all follow the structure below. You can nest modules within modules (referred to as submodules) and the same rules will apply.
|
||||
各モジュールは、単一の機能または機能のグループを表し、それぞれ固有のコンポーネント、状態、動作ロジックで構成されています。
|
||||
以下の構造に従う必要があります。 モジュール内にモジュール（サブモジュール）をネストでき、同じルールが適用されます。
|
||||
|
||||
```
|
||||
module1
|
||||
@@ -50,60 +50,60 @@ module1
|
||||
└───utils
|
||||
```
|
||||
|
||||
### Contexts
|
||||
### コンテキスト
|
||||
|
||||
A context is a way to pass data through the component tree without having to pass props down manually at every level.
|
||||
コンテキストは、各レベルでプロップスを手動で渡すことなく、コンポーネントツリーを通じてデータを渡す方法です。
|
||||
|
||||
See [React Context](https://react.dev/reference/react#context-hooks) for more details.
|
||||
詳細は[Reactコンテキスト](https://react.dev/reference/react#context-hooks)を参照してください。
|
||||
|
||||
### GraphQL
|
||||
|
||||
Includes fragments, queries, and mutations.
|
||||
フラグメント、クエリ、ミューテーションを含みます。
|
||||
|
||||
See [GraphQL](https://graphql.org/learn/) for more details.
|
||||
詳細は[GraphQL](https://graphql.org/learn/)を参照してください。
|
||||
|
||||
* Fragments
|
||||
* フラグメント
|
||||
|
||||
A fragment is a reusable piece of a query, which you can use in different places. By using fragments, it's easier to avoid duplicating code.
|
||||
フラグメントはクエリの再利用可能な一部分で、さまざまな箇所で使用できます。 フラグメントを使用することで、コードを重複させることを避けやすくなります。
|
||||
|
||||
See [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) for more details.
|
||||
詳細は[GraphQLフラグメント](https://graphql.org/learn/queries/#fragments)を参照してください。
|
||||
|
||||
* Queries
|
||||
* クエリ
|
||||
|
||||
See [GraphQL Queries](https://graphql.org/learn/queries/) for more details.
|
||||
詳細は[GraphQLクエリ](https://graphql.org/learn/queries/)を参照してください。
|
||||
|
||||
* Mutations
|
||||
* ミューテーション
|
||||
|
||||
See [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) for more details.
|
||||
詳細は[GraphQLミューテーション](https://graphql.org/learn/queries/#mutations)を参照してください。
|
||||
|
||||
### Hooks
|
||||
### フック
|
||||
|
||||
See [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for more details.
|
||||
詳細は[フック](https://react.dev/learn/reusing-logic-with-custom-hooks)を参照してください。
|
||||
|
||||
### States
|
||||
### ステート
|
||||
|
||||
Contains the state management logic. [RecoilJS](https://recoiljs.org) handles this.
|
||||
ステート管理のロジックを含みます。 [RecoilJS](https://recoiljs.org) がこれを管理します。
|
||||
|
||||
* Selectors: See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
|
||||
* セレクター: 詳細は[RecoilJSセレクター](https://recoiljs.org/docs/basic-tutorial/selectors)を参照してください。
|
||||
|
||||
React's built-in state management still handles state within a component.
|
||||
Reactの組み込みステート管理は依然としてコンポーネント内のステートを処理します。
|
||||
|
||||
### Utils
|
||||
### ユーティリティ
|
||||
|
||||
Should just contain reusable pure functions. Otherwise, create custom hooks in the `hooks` folder.
|
||||
再利用可能な純粋関数のみを含むべきです。 それ以外の場合は、`hooks`フォルダにカスタムフックを作成します。
|
||||
|
||||
## UI
|
||||
|
||||
Contains all the reusable UI components used in the application.
|
||||
アプリケーションで使用される再利用可能なUIコンポーネントをすべて含みます。
|
||||
|
||||
This folder can contain sub-folders, like `data`, `display`, `feedback`, and `input` for specific types of components. Each component should be self-contained and reusable, so that you can use it in different parts of the application.
|
||||
このフォルダには、特定の種類のコンポーネント用に `data`、`display`、`feedback`、`input` といったサブフォルダを含めることができます。 各コンポーネントは自己完結型で再利用可能でなければならず、アプリケーションのさまざまな部分で使用できます。
|
||||
|
||||
By separating the UI components from the other components in the `modules` folder, it's easier to maintain a consistent design and to make changes to the UI without affecting other parts (business logic) of the codebase.
|
||||
UIコンポーネントを`modules`フォルダ内の他のコンポーネントから分離することで、一貫したデザインを維持し、UIの変更がコードベースの他の部分（ビジネスロジック）に影響を与えないようにするのが容易になります。
|
||||
|
||||
## Interface and dependencies
|
||||
## インターフェースと依存関係
|
||||
|
||||
You can import other module code from any module except for the `ui` folder. This will keep its code easy to test.
|
||||
`ui` フォルダを除く任意のモジュールから、他のモジュールのコードをインポートできます。 これにより、そのコードは簡単にテストできます。
|
||||
|
||||
### Internal
|
||||
### 内部
|
||||
|
||||
Each part (hooks, states, ...) of a module can have an `internal` folder, which contains parts that are just used within the module.
|
||||
各部分（フック、ステート、...） は、モジュール内でのみ使用される部分を含む `internal` フォルダを持つことができます。
|
||||
|
||||
+23
-23
@@ -1,41 +1,41 @@
|
||||
---
|
||||
title: Frontend Commands
|
||||
title: フロントエンドコマンド
|
||||
---
|
||||
|
||||
## Useful commands
|
||||
## 便利なコマンド
|
||||
|
||||
### Starting the app
|
||||
### アプリの開始
|
||||
|
||||
```bash
|
||||
npx nx start twenty-front
|
||||
```
|
||||
|
||||
### Regenerate graphql schema based on API graphql schema
|
||||
### APIのGraphQLスキーマに基づいてGraphQLスキーマを再生成する
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:graphql:generate --configuration=metadata
|
||||
```
|
||||
|
||||
OR
|
||||
または
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:graphql:generate
|
||||
```
|
||||
|
||||
### Lint
|
||||
### リント
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:lint # pass --fix to fix lint errors
|
||||
```
|
||||
|
||||
## Translations
|
||||
## 翻訳
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:lingui:extract
|
||||
npx nx run twenty-front:lingui:compile
|
||||
```
|
||||
|
||||
### Test
|
||||
### テスト
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:test # run jest tests
|
||||
@@ -44,11 +44,11 @@ npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve
|
||||
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
## 技術スタック
|
||||
|
||||
The project has a clean and simple stack, with minimal boilerplate code.
|
||||
プロジェクトは、最小限のボイラープレートコードを持つシンプルでクリーンなスタックを持っています。
|
||||
|
||||
**App**
|
||||
**アプリ**
|
||||
|
||||
* [React](https://react.dev/)
|
||||
* [Apollo](https://www.apollographql.com/docs/)
|
||||
@@ -56,35 +56,35 @@ The project has a clean and simple stack, with minimal boilerplate code.
|
||||
* [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
|
||||
* [TypeScript](https://www.typescriptlang.org/)
|
||||
|
||||
**Testing**
|
||||
**テスト**
|
||||
|
||||
* [Jest](https://jestjs.io/)
|
||||
* [Storybook](https://storybook.js.org/)
|
||||
|
||||
**Tooling**
|
||||
**ツール**
|
||||
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
* [Craco](https://craco.js.org/docs/)
|
||||
* [ESLint](https://eslint.org/)
|
||||
|
||||
## Architecture
|
||||
## アーキテクチャ
|
||||
|
||||
### Routing
|
||||
### ルーティング
|
||||
|
||||
[React Router](https://reactrouter.com/) handles the routing.
|
||||
[React Router](https://reactrouter.com/)はルーティングを処理します。
|
||||
|
||||
To avoid unnecessary [re-renders](/l/ja/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
|
||||
|
||||
### State Management
|
||||
### 状態管理
|
||||
|
||||
[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
|
||||
[Recoil](https://recoiljs.org/docs/introduction/core-concepts)は状態管理を処理します。
|
||||
|
||||
See [best practices](/l/ja/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) for more information on state management.
|
||||
状態管理に関する詳細な情報は[ベストプラクティス](/l/ja/developers/contribute/capabilities/frontend-development/best-practices-front#state-management)を参照してください。
|
||||
|
||||
## Testing
|
||||
## テスト
|
||||
|
||||
[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
|
||||
[Jest](https://jestjs.io/)はユニットテストのツールであり、[Storybook](https://storybook.js.org/)はコンポーネントテスト用です。
|
||||
|
||||
Jest is mainly for testing utility functions, and not components themselves.
|
||||
Jestは主にユーティリティ関数のテスト用で、コンポーネントのテスト自体ではありません。
|
||||
|
||||
Storybook is for testing the behavior of isolated components, as well as displaying the design system.
|
||||
Storybookは、独立したコンポーネントの挙動をテストし、デザインシステムを表示するためのものです。
|
||||
|
||||
+34
-34
@@ -1,42 +1,42 @@
|
||||
---
|
||||
title: Hotkeys
|
||||
title: ホットキー
|
||||
---
|
||||
|
||||
## Introduction
|
||||
## イントロダクション
|
||||
|
||||
When you need to listen to a hotkey, you would normally use the `onKeyDown` event listener.
|
||||
ホットキーをリッスンする必要がある場合、通常は `onKeyDown` イベントリスナーを使用します。
|
||||
|
||||
In `twenty-front` however, you might have conflicts between same hotkeys that are used in different components, mounted at the same time.
|
||||
しかし、`twenty-front` では、同時にマウントされている異なるコンポーネントで使用される同じホットキーの間で競合が生じることがあります。
|
||||
|
||||
For example, if you have a page that listens for the Enter key, and a modal that listens for the Enter key, with a Select component inside that modal that listens for the Enter key, you might have a conflict when all are mounted at the same time.
|
||||
例えば、Enterキーをリッスンするページと、Enterキーをリッスンするモーダル、さらにそのモーダル内のSelectコンポーネントもEnterキーをリッスンしている場合、全てが同時にマウントされると競合が生じる可能性があります。
|
||||
|
||||
## The `useScopedHotkeys` hook
|
||||
## `useScopedHotkeys` フック
|
||||
|
||||
To handle this problem, we have a custom hook that makes it possible to listen to hotkeys without any conflict.
|
||||
この問題を解決するために、どのような競合もなくホットキーをリッスンすることを可能にするカスタムフックがあります。
|
||||
|
||||
You place it in a component, and it will listen to the hotkeys only when the component is mounted AND when the specified **hotkey scope** is active.
|
||||
コンポーネント内に配置すると、コンポーネントがマウントされ、指定された**ホットキースコープ**がアクティブなときだけホットキーをリッスンします。
|
||||
|
||||
## How to listen for hotkeys in practice?
|
||||
## 実際にホットキーをリッスンする方法は？
|
||||
|
||||
There are two steps involved in setting up hotkey listening :
|
||||
ホットキーをリッスンするための設定には2つのステップがあります：
|
||||
|
||||
1. Set the [hotkey scope](#what-is-a-hotkey-scope-) that will listen to hotkeys
|
||||
2. Use the `useScopedHotkeys` hook to listen to hotkeys
|
||||
1. ホットキーをリッスンする[ホットキースコープ](#what-is-a-hotkey-scope-)を設定します
|
||||
2. ホットキーをリッスンするために `useScopedHotkeys` フックを使用します
|
||||
|
||||
Setting up hotkey scopes is required even in simple pages, because other UI elements like left menu or command menu might also listen to hotkeys.
|
||||
他のUI要素（例：左側のメニューやコマンドメニュー）もホットキーをリッスンする可能性があるため、ホットキースコープの設定は単純なページでも必要です。
|
||||
|
||||
## Use cases for hotkeys
|
||||
## ホットキーのユースケース
|
||||
|
||||
In general, you'll have two use cases that require hotkeys :
|
||||
一般的に、ホットキーが必要となる動作は2つあります：
|
||||
|
||||
1. In a page or a component mounted in a page
|
||||
2. In a modal-type component that takes the focus due to a user action
|
||||
1. ページにマウントされたコンポーネントで
|
||||
2. ユーザーのアクションでフォーカスをとるモーダルタイプのコンポーネントで
|
||||
|
||||
The second use case can happen recursively : a dropdown in a modal for example.
|
||||
2番目のユースケースは再帰的に発生します：例えばモーダル内のドロップダウン。
|
||||
|
||||
### Listening to hotkeys in a page
|
||||
### ページ内でホットキーをリッスン
|
||||
|
||||
Example :
|
||||
例：
|
||||
|
||||
```tsx
|
||||
const PageListeningEnter = () => {
|
||||
@@ -71,11 +71,11 @@ const PageListeningEnter = () => {
|
||||
};
|
||||
```
|
||||
|
||||
### Listening to hotkeys in a modal-type component
|
||||
### モーダルタイプのコンポーネントでホットキーをリッスン
|
||||
|
||||
For this example we'll use a modal component that listens for the Escape key to tell its parent to close it.
|
||||
この例では、親にモーダルを閉じるように指示するためにEscapeキーをリッスンするモーダルコンポーネントを使用します。
|
||||
|
||||
Here the user interaction is changing the scope.
|
||||
ここで、ユーザーの操作がスコープを変更します。
|
||||
|
||||
```tsx
|
||||
const ExamplePageWithModal = () => {
|
||||
@@ -108,7 +108,7 @@ const ExamplePageWithModal = () => {
|
||||
};
|
||||
```
|
||||
|
||||
Then in the modal component :
|
||||
その後、モーダルコンポーネント内で：
|
||||
|
||||
```tsx
|
||||
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
|
||||
@@ -131,15 +131,15 @@ It's important to use this pattern when you're not sure that just using a useEff
|
||||
|
||||
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
|
||||
|
||||
## What is a hotkey scope?
|
||||
## ホットキースコープとは？
|
||||
|
||||
A hotkey scope is a string that represents a context in which the hotkeys are active. It is generally encoded as an enum.
|
||||
ホットキースコープは、ホットキーがアクティブなコンテキストを表す文字列です。 通常、enumとしてエンコードされます。 通常、enumとしてエンコードされます。 通常、enumとしてエンコードされます。
|
||||
|
||||
When you change the hotkey scope, the hotkeys that are listening to this scope will be enabled and the hotkeys that are listening to other scopes will be disabled.
|
||||
ホットキースコープを変更すると、このスコープをリッスンしているホットキーが有効になり、他のスコープをリッスンしているホットキーが無効になります。
|
||||
|
||||
You can set only one scope at a time.
|
||||
一度に1つのスコープしか設定できません。
|
||||
|
||||
As an example, the hotkey scopes for each page are defined in the `PageHotkeyScope` enum:
|
||||
例として、各ページのホットキースコープは`PageHotkeyScope` enumで定義されています：
|
||||
|
||||
```tsx
|
||||
export enum PageHotkeyScope {
|
||||
@@ -160,7 +160,7 @@ export enum PageHotkeyScope {
|
||||
}
|
||||
```
|
||||
|
||||
Internally, the currently selected scope is stored in a Recoil state that is shared across the application :
|
||||
内部的には、現在選択されているスコープはアプリケーション全体で共有されるRecoilステートに格納されています：
|
||||
|
||||
```tsx
|
||||
export const currentHotkeyScopeState = createState<HotkeyScope>({
|
||||
@@ -169,10 +169,10 @@ export const currentHotkeyScopeState = createState<HotkeyScope>({
|
||||
});
|
||||
```
|
||||
|
||||
But this Recoil state should never be handled manually ! We'll see how to use it in the next section.
|
||||
しかし、このRecoilステートは手動で処理しないでください！ 次のセクションでその使用方法を見ていきます。 次のセクションでその使用方法を見ていきます。 次のセクションでその使用方法を見ていきます。
|
||||
|
||||
## How is it working internally?
|
||||
## 内部的にはどう機能しているのか？
|
||||
|
||||
We made a thin wrapper on top of [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) that makes it more performant and avoids unnecessary re-renders.
|
||||
[react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro)の上に薄いラッパーを作成し、より効率的にし、不必要な再レンダリングを避けます。
|
||||
|
||||
We also create a Recoil state to handle the hotkey scope state and make it available everywhere in the application.
|
||||
また、ホットキースコープの状態を処理し、アプリケーション全体で利用できるRecoilステートを作成しました。
|
||||
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Storybook
|
||||
description: Browse Twenty's UI component library
|
||||
title: ストーリーブック
|
||||
description: TwentyのUIコンポーネントライブラリを閲覧
|
||||
---
|
||||
|
||||
View our complete component library and documentation in Storybook.
|
||||
ストーリーブックで私たちの完全なコンポーネントライブラリおよびドキュメントを参照してください。
|
||||
|
||||
[Open Storybook →](https://storybook.twenty.com)
|
||||
[ストーリーブックを開く →](https://storybook.twenty.com)
|
||||
|
||||
+58
-58
@@ -1,24 +1,24 @@
|
||||
---
|
||||
title: Style Guide
|
||||
title: スタイルガイド
|
||||
---
|
||||
|
||||
This document includes the rules to follow when writing code.
|
||||
このドキュメントには、コードを書く際に従うべきルールが含まれています。
|
||||
|
||||
The goal here is to have a consistent codebase, which is easy to read and easy to maintain.
|
||||
ここでの目標は、一貫性があり、読みやすく、メンテナンスしやすいコードベースにすることです。
|
||||
|
||||
For this, it's better to be a bit more verbose than to be too concise.
|
||||
そのためには、簡潔すぎるよりも少し冗長な方が良いです。
|
||||
|
||||
Always keep in mind that people read code more often than they write it, specially on an open source project, where anyone can contribute.
|
||||
常に念頭に置いておくべきは、コードは書くより読む方が多いということ、特にオープンソースプロジェクトでは、誰でも貢献できるためです。
|
||||
|
||||
There are a lot of rules that are not defined here, but that are automatically checked by linters.
|
||||
ここでは定義されていない、多くの規則がありますが、リンターにより自動的にチェックされます。
|
||||
|
||||
## React
|
||||
|
||||
### Use functional components
|
||||
### 関数コンポーネントを使用する
|
||||
|
||||
Always use TSX functional components.
|
||||
常にTSXの関数コンポーネントを使用してください。
|
||||
|
||||
Do not use default `import` with `const`, because it's harder to read and harder to import with code completion.
|
||||
`const`を使ったデフォルトの`import`は避けてください。読むことや、コード補完でのインポートが難しくなるからです。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, harder to read, harder to import with code completion
|
||||
@@ -34,11 +34,11 @@ export function MyComponent() {
|
||||
};
|
||||
```
|
||||
|
||||
### Props
|
||||
### プロパティ
|
||||
|
||||
Create the type of the props and call it `(ComponentName)Props` if there's no need to export it.
|
||||
プロップスの型を作成し、エクスポートの必要がない場合にはそれを`(ComponentName)Props`と呼んでください。
|
||||
|
||||
Use props destructuring.
|
||||
プロップスの分割代入を使用する。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, no type
|
||||
@@ -52,7 +52,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
#### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types
|
||||
#### プロップス型の定義に`React.FC`または`React.FunctionComponent`を使用しない
|
||||
|
||||
```tsx
|
||||
/* ❌ - Bad, defines the component type annotations with `FC`
|
||||
@@ -67,10 +67,10 @@ const EmailField: React.FC<{
|
||||
```
|
||||
|
||||
```tsx
|
||||
/* ✅ - Good, a separate type (OwnProps) is explicitly defined for the
|
||||
* component's props
|
||||
* - This method doesn't automatically include the children prop. If
|
||||
* you want to include it, you have to specify it in OwnProps.
|
||||
/* ✅ - 良い例: プロップス用に別個のタイプ（OwnProps）を明示的に
|
||||
* 定義する
|
||||
* - この方法は、デフォルトでchildrenプロップを含まないため、
|
||||
* 必要な場合にOwnPropsに指定する必要があります。
|
||||
*/
|
||||
type EmailFieldProps = {
|
||||
value: string;
|
||||
@@ -81,9 +81,9 @@ const EmailField = ({ value }: EmailFieldProps) => (
|
||||
);
|
||||
```
|
||||
|
||||
#### No Single Variable Prop Spreading in JSX Elements
|
||||
#### JSX要素内で単一の変数プロップスプレーディングを使用しない
|
||||
|
||||
Avoid using single variable prop spreading in JSX elements, like `{...props}`. This practice often results in code that is less readable and harder to maintain because it's unclear which props the component is receiving.
|
||||
`{...props}`のようにJSX要素内で単一の変数プロップスプレーディングを避けてください。 この方法は、コンポーネントが受け取るプロップスを不明確にするため、コードの可読性が低下し、メンテナンスが困難になります。 この方法は、コンポーネントが受け取るプロップスを不明確にするため、コードの可読性が低下し、メンテナンスが困難になります。 この方法は、コンポーネントが受け取るプロップスを不明確にするため、コードの可読性が低下し、メンテナンスが困難になります。
|
||||
|
||||
```tsx
|
||||
/* ❌ - Bad, spreads a single variable prop into the underlying component
|
||||
@@ -94,23 +94,23 @@ const MyComponent = (props: OwnProps) => {
|
||||
```
|
||||
|
||||
```tsx
|
||||
/* ✅ - Good, Explicitly lists all props
|
||||
* - Enhances readability and maintainability
|
||||
/* ✅ - 良い例: すべてのプロップスを明示的にリストする
|
||||
* - 可読性と維持性を高める
|
||||
*/
|
||||
const MyComponent = ({ prop1, prop2, prop3 }: MyComponentProps) => {
|
||||
return <OtherComponent {...{ prop1, prop2, prop3 }} />;
|
||||
};
|
||||
```
|
||||
|
||||
Rationale:
|
||||
根拠:
|
||||
|
||||
* At a glance, it's clearer which props the code passes down, making it easier to understand and maintain.
|
||||
* It helps to prevent tight coupling between components via their props.
|
||||
* Linting tools make it easier to identify misspelled or unused props when you list props explicitly.
|
||||
* ひと目で、コードがどのプロップスを渡しているかが明確になり、理解とメンテナンスが容易になります。
|
||||
* これにより、コンポーネント間のプロップスによる密結合を防ぐのに役立ちます。
|
||||
* プロップスを明示的にリストすれば、lintingツールが綴り間違いや未使用のプロップスを特定しやすくなります。
|
||||
|
||||
## JavaScript
|
||||
|
||||
### Use nullish-coalescing operator `??`
|
||||
### `??`（ヌリッシュ合体演算子）を使う
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, can return 'default' even if value is 0 or ''
|
||||
@@ -120,21 +120,21 @@ const value = process.env.MY_VALUE || 'default';
|
||||
const value = process.env.MY_VALUE ?? 'default';
|
||||
```
|
||||
|
||||
### Use optional chaining `?.`
|
||||
### `?.`（オプショナルチェイニング）を使う
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
// ❌ 悪い例
|
||||
onClick && onClick();
|
||||
|
||||
// ✅ Good
|
||||
// ✅ 良い例
|
||||
onClick?.();
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
|
||||
### Use `type` instead of `interface`
|
||||
### `type`を使い、常に`interface`の代わりにする
|
||||
|
||||
Always use `type` instead of `interface`, because they almost always overlap, and `type` is more flexible.
|
||||
`type`は多くの場合、`interface`と重複し、`type`の方が柔軟性が高いため、常に`type`を使用してください。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -148,11 +148,11 @@ type MyType = {
|
||||
};
|
||||
```
|
||||
|
||||
### Use string literals instead of enums
|
||||
### 列挙型の代わりに文字列リテラルを使う
|
||||
|
||||
[String literals](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) are the go-to way to handle enum-like values in TypeScript. They are easier to extend with Pick and Omit, and offer a better developer experience, specially with code completion.
|
||||
[文字列リテラル](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) は、TypeScriptで列挙型のような値を扱うための推奨方法です。 それらはPickやOmitで拡張するのが簡単で、特にコード補完を伴う開発者の体験を向上させます。 それらはPickやOmitで拡張するのが簡単で、特にコード補完を伴う開発者の体験を向上させます。 それらはPickやOmitで拡張するのが簡単で、特にコード補完を伴う開発者の体験を向上させます。
|
||||
|
||||
You can see why TypeScript recommends avoiding enums [here](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).
|
||||
なぜTypeScriptが列挙型を避けることを推奨しているかは[ここ](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums)をご覧ください。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, utilizes an enum
|
||||
@@ -171,13 +171,13 @@ let color = Color.Red;
|
||||
let color: "red" | "green" | "blue" = "red";
|
||||
```
|
||||
|
||||
#### GraphQL and internal libraries
|
||||
#### GraphQLと内部ライブラリ
|
||||
|
||||
You should use enums that GraphQL codegen generates.
|
||||
GraphQLのcodegenが生成する列挙型を使用する必要があります。
|
||||
|
||||
It's also better to use an enum when using an internal library, so the internal library doesn't have to expose a string literal type that is not related to the internal API.
|
||||
内部ライブラリを使用する際にも列挙型を使用する方が良いので、内部ライブラリが内部APIに関連しない文字列リテラル型を公開する必要がなくなります。
|
||||
|
||||
Example:
|
||||
例:
|
||||
|
||||
```TSX
|
||||
const {
|
||||
@@ -190,11 +190,11 @@ setHotkeyScopeAndMemorizePreviousScope(
|
||||
);
|
||||
```
|
||||
|
||||
## Styling
|
||||
## スタイリング
|
||||
|
||||
### Use StyledComponents
|
||||
### StyledComponentsを使用する
|
||||
|
||||
Style the components with [styled-components](https://emotion.sh/docs/styled).
|
||||
コンポーネントを[styled-components](https://emotion.sh/docs/styled)でスタイル設定する。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -208,7 +208,7 @@ const StyledTitle = styled.div`
|
||||
`;
|
||||
```
|
||||
|
||||
Prefix styled components with "Styled" to differentiate them from "real" components.
|
||||
スタイル付きコンポーネントを"Styled"で接頭辞にして、"本物の"コンポーネントと区別する。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -224,17 +224,17 @@ const StyledTitle = styled.div`
|
||||
`;
|
||||
```
|
||||
|
||||
### Theming
|
||||
### テーマ
|
||||
|
||||
Utilizing the theme for the majority of component styling is the preferred approach.
|
||||
大部分のコンポーネントのスタイルをテーマに基づかせるのが推奨される手法です。
|
||||
|
||||
#### Units of measurement
|
||||
#### 測定の単位
|
||||
|
||||
Avoid using `px` or `rem` values directly within the styled components. The necessary values are generally already defined in the theme, so it’s recommended to make use of the theme for these purposes.
|
||||
Styledコンポーネント内で`px`または`rem`値を直接使用しない 必要な値は一般的にテーマに既に定義されているため、これらの目的でテーマを利用することが推奨されます。 必要な値は一般的にテーマに既に定義されているため、これらの目的でテーマを利用することが推奨されます。 必要な値は一般的にテーマに既に定義されているため、これらの目的でテーマを利用することが推奨されます。
|
||||
|
||||
#### Colors
|
||||
#### カラー
|
||||
|
||||
Refrain from introducing new colors; instead, use the existing palette from the theme. Should there be a situation where the palette does not align, please leave a comment so that the team can rectify it.
|
||||
新しい色を追加するのではなく、テーマから既存のパレットを使用してください。 パレットが適合しない場合には、コメントを残してチームがそれを修正できるようにしてください。 パレットが適合しない場合には、コメントを残してチームがそれを修正できるようにしてください。 パレットが適合しない場合には、コメントを残してチームがそれを修正できるようにしてください。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, directly specifies style values without utilizing the theme
|
||||
@@ -258,9 +258,9 @@ const StyledButton = styled.button`
|
||||
`;
|
||||
```
|
||||
|
||||
## Enforcing No-Type Imports
|
||||
## タイプ無しのインポートの強制
|
||||
|
||||
Avoid type imports. To enforce this standard, an ESLint rule checks for and reports any type imports. This helps maintain consistency and readability in the TypeScript code.
|
||||
タイプインポートを避けてください。 タイプインポートを避けてください。 この標準を強制するために、ESLintルールがどのタイプのインポートもチェックして報告します。 これにより、TypeScriptコードの一貫性と可読性が維持されます。 これにより、TypeScriptコードの一貫性と可読性が維持されます。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -273,18 +273,18 @@ import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
```
|
||||
|
||||
### Why No-Type Imports
|
||||
### なぜタイプなしインポートなのか
|
||||
|
||||
* **Consistency**: By avoiding type imports and using a single approach for both type and value imports, the codebase remains consistent in its module import style.
|
||||
* **一貫性**: 型インポートを避け、型と値の両方に単一のアプローチを使用することで、モジュールインポートスタイルの一貫性が保たれます。
|
||||
|
||||
* **Readability**: No-type imports improve code readability by making it clear when you're importing values or types. This reduces ambiguity and makes it easier to understand the purpose of imported symbols.
|
||||
* **可読性**: 型専用インポートは、値をインポートしているのか型をインポートしているのかを明確にすることで、コードの可読性を高めます。 これにより曖昧さが減り、インポートされたシンボルの目的を理解しやすくなります。
|
||||
|
||||
* **Maintainability**: It enhances codebase maintainability because developers can identify and locate type-only imports when reviewing or modifying code.
|
||||
* **維持性**: コードベースの維持性を向上させます。開発者がコードを確認/変更する際に、タイプのみのインポートを特定して見つけることができるからです。
|
||||
|
||||
### ESLint Rule
|
||||
### ESLintルール
|
||||
|
||||
An ESLint rule, `@typescript-eslint/consistent-type-imports`, enforces the no-type import standard. This rule will generate errors or warnings for any type import violations.
|
||||
ESLint のルール `@typescript-eslint/consistent-type-imports` は、型専用インポートの標準を強制します。 このルールは、タイプインポート違反のエラーや警告を生成します。
|
||||
|
||||
Please note that this rule specifically addresses rare edge cases where unintentional type imports occur. TypeScript itself discourages this practice, as mentioned in the [TypeScript 3.8 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html). In most situations, you should not need to use type-only imports.
|
||||
このルールは、意図せず型をインポートしてしまう稀なエッジケースに特化して対処することに留意してください。 TypeScript自体、[TypeScript 3.8 リリースノート](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html)でこのプラクティスを避けています。 ほとんどの状況で、タイプのみのインポートを使用する必要はありません。 ほとんどの状況で、タイプのみのインポートを使用する必要はありません。 ほとんどの状況で、タイプのみのインポートを使用する必要はありません。
|
||||
|
||||
To ensure your code complies with this rule, make sure to run ESLint as part of your development workflow.
|
||||
コードがこのルールに準拠していることを確実にするため、開発ワークフローの一環として ESLint を実行してください。
|
||||
|
||||
+110
-33
@@ -1,59 +1,136 @@
|
||||
---
|
||||
title: Work with Figma
|
||||
info: Learn how you can collaborate with Twenty's Figma
|
||||
title: Figma で作業する
|
||||
info: Twenty の Figma を使用した共同作業方法を学ぶ
|
||||
---
|
||||
|
||||
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
|
||||
This guide explains how you can collaborate with Figma.
|
||||
Figma は、デザイナーと開発者の間のコミュニケーションの壁を埋めるのを助ける協働インターフェース設計ツールです。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
このガイドは、Figma を使って共同作業する方法を説明します。
|
||||
|
||||
## Access
|
||||
## アクセス
|
||||
|
||||
1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
||||
2. **Sign in:** If you're not already signed in, Figma will prompt you to do so.
|
||||
Key features are only available to logged-in users, such as the developer mode and the ability to select a dedicated frame.
|
||||
1. **共有リンクにアクセスする:** プロジェクトの Figma ファイルは [ここ](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty) からアクセスできます。
|
||||
2. **サインイン:** まだサインインしていない場合、Figma はサインインを促します。
|
||||
開発者モードや専用のフレーム選択など、キー機能はサインインしたユーザーのみが利用できます。
|
||||
|
||||
<Warning>
|
||||
You will not be able to collaborate effectively without an account.
|
||||
アカウントがないと効果的に協力することはできません。
|
||||
</Warning>
|
||||
|
||||
## Figma structure
|
||||
## Figma 構造
|
||||
|
||||
On the left sidebar, you can access the different pages of Twenty's Figma. This is how they're organized:
|
||||
左側のサイドバーで、Twenty の Figma の異なるページにアクセスできます。 それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています:
|
||||
|
||||
* **Components page:** This is the first page. The designer uses it to create and organize the reusable design elements used throughout the design file. For example, buttons, icons, symbols, or any other reusable components. It serves to maintain consistency across the design.
|
||||
* **Main page:** The second page is the main page, which shows the complete user interface of the project. You can press ***Play*** to use the full app prototype.
|
||||
* **Features pages:** The other pages are typically dedicated to features in progress. They contain the design of specific features or modules of the application or website. They are typically still in progress.
|
||||
* **コンポーネントページ:** これは最初のページです。 デザイナーはこれを使用して、デザインファイル全体で使用される再利用可能なデザイン要素を作成および整理します。 例えば、ボタン、アイコン、シンボル、またはその他の再利用可能なコンポーネントとして使用されます。 これにより、デザイン全体で一貫性を保つことができます。
|
||||
* **メインページ:** 2 番目のページはメインページで、プロジェクトの完全なユーザーインターフェースを示しています。 ***再生*** を押すことで、アプリプロトタイプを完全に使用できます。 **メインページ:** 2 番目のページはメインページで、プロジェクトの完全なユーザーインターフェースを示しています。 ***再生*** を押すことで、アプリプロトタイプを完全に使用できます。 ***再生*** を押すことで、アプリプロトタイプを完全に使用できます。
|
||||
* **特徴ページ:** その他のページは、通常、進行中の機能に専念しています。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。
|
||||
|
||||
## Useful Tips
|
||||
## 役立つヒント
|
||||
|
||||
With read-only access, you can't edit the design, but you can access all features that will be useful to convert the designs into code.
|
||||
閲覧専用アクセスでは、デザインの編集はできませんが、デザインをコードに変換する際に役立つすべての機能にアクセスできます。
|
||||
|
||||
### Use the Dev mode
|
||||
### 開発者モードを使用する
|
||||
|
||||
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. You can learn more about Dev Mode [here](https://www.figma.com/dev-mode/).
|
||||
Figma の Dev モードは、デザインナビゲーションの容易化、効果的なアセット管理、効率的な通信ツール、ツールボックス統合、迅速なコードスニペット、主要レイヤー情報の提供により、開発者の生産性を向上させ、デザインと開発の間のギャップを埋めます。 Dev Mode についての詳細は [こちら](https://www.figma.com/dev-mode/) で確認できます。
|
||||
|
||||
Switch to the "Developer" mode in the right part of the toolbar to see design specs, copy CSS, and access assets.
|
||||
ツールバーの右部分で「開発者」モードに切り替えることで、デザインスペックの確認、CSS のコピー、アセットへのアクセスが可能です。
|
||||
|
||||
### Use the Prototype
|
||||
### プロトタイプを使用する
|
||||
|
||||
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. Prototype mode allows you to interact with the design as if it were the final product. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
|
||||
キャンバス上の任意の要素をクリックし、インターフェースの右上隅にある「再生」ボタンを押してプロトタイプビューにアクセスします。 プロトタイプモードでは、あたかも最終製品であるかのようにデザインに触れることができます。 画面間のフローや、ボタン、リンク、メニューなどのインターフェース要素が操作時にどのように動作するかを示します。
|
||||
|
||||
1. **Understanding transitions and animations:** In the Prototype mode, you can view any transitions or animations added by a designer between screens or UI elements, providing clear visual instructions to developers on the intended behavior and style.
|
||||
2. **Implementation clarification:** A prototype can also help reduce ambiguities. Developers can interact with it to gain a better understanding of the functionality or appearance of particular elements.
|
||||
1. **トランジションとアニメーションの理解:** プロトタイプモードでは、デザイナーによって画面や UI 要素間に追加されたトランジションやアニメーションを表示でき、開発者に意図された動作やスタイルを視覚的に明確に指示します。
|
||||
2. **実装の明確化:** プロトタイプは曖昧さを減らすのにも役立ちます。 開発者はそれを操作することで、特定の要素の機能や外観をより良く理解することができます。
|
||||
|
||||
For more comprehensive details and guidance on learning the Figma platform, you can visit the official [Figma Documentation](https://help.figma.com/hc/en-us).
|
||||
Figma プラットフォームの学習に関するより包括的な詳細とガイダンスについては、公式の [Figma ドキュメント](https://help.figma.com/hc/en-us) を訪れることができます。
|
||||
|
||||
### Measure distances
|
||||
### 距離を測定する
|
||||
|
||||
Select an element, hold `Option` key (Mac) or `Alt` key (Windows), then hover over another element to see the distance between them.
|
||||
要素を選択し、`Option` キー（Mac）または `Alt` キー（Windows）を押したまま、別の要素の上にカーソルを合わせると、それらの間の距離が表示されます。
|
||||
|
||||
### Figma extension for VSCode (Recommended)
|
||||
### VSCode 用 Figma 拡張機能（推奨）
|
||||
|
||||
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
||||
lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor.
|
||||
It's part of our recommended extensions.
|
||||
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) を使用すると、デザインファイルのナビゲート、検査、デザイナーとのコラボレーション、変更の追跡、実装の促進ができます - すべてをテキストエディターから離れることなく行えます。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
これは推奨拡張機能の一部です。
|
||||
|
||||
## Collaboration
|
||||
## コラボレーション
|
||||
|
||||
1. **Using Comments:** You are welcome to use the comment feature by clicking on the bubble icon in the left part of the toolbar.
|
||||
2. **Cursor chat:** A nice feature of Figma is the Cursor chat. Just press `;` on Mac and `/` on Windows to send a message if you see someone else using Figma as the same time as you.
|
||||
1. **コメントの使用:** ツールバーの左側にあるバブルアイコンをクリックしてコメント機能を使用できます。
|
||||
2. **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Local Setup
|
||||
description: The guide for contributors (or curious developers) who want to run Twenty locally.
|
||||
title: ローカルセットアップ
|
||||
description: 寄稿者（または好奇心旺盛な開発者）のためのガイドで、ローカルにTwentyを実行したい人向けです。
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
## 前提条件
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux and MacOS">
|
||||
Before you can install and use Twenty, make sure you install the following on your computer:
|
||||
<Tab title="LinuxとMacOS">
|
||||
Twentyをインストールして使用する前に、以下をコンピュータにインストールしてください。
|
||||
|
||||
* [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||
* [Node v24.5.0](https://nodejs.org/en/download)
|
||||
@@ -15,25 +15,31 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
* [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
|
||||
|
||||
<Warning>
|
||||
`npm` won't work, you should use `yarn` instead. Yarn is now shipped with Node.js, so you don't need to install it separately.
|
||||
You only have to run `corepack enable` to enable Yarn if you haven't done it yet.
|
||||
`npm`は使えません。代わりに`yarn`を使用してください。
|
||||
`npm`は使えません。代わりに`yarn`を使用してください。 Yarnは今Node.jsに同梱されているので、別途インストールする必要はありません。
|
||||
Yarnを有効にするには、まだしていない場合は`corepack enable`を実行するだけです。
|
||||
`npm`は使えません。代わりに`yarn`を使用してください。 Yarnは今Node.jsに同梱されているので、別途インストールする必要はありません。
|
||||
Yarnを有効にするには、まだしていない場合は`corepack enable`を実行するだけです。Yarnを有効にするには、まだしていない場合は`corepack enable`を実行するだけです。
|
||||
</Warning>
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
1. Install WSL
|
||||
Open PowerShell as Administrator and run:
|
||||
<Tab title="Windows（WSL）">
|
||||
1. WSLをインストール
|
||||
管理者としてPowerShellを開き、次のコマンドを実行します。
|
||||
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
|
||||
You should now see a prompt to restart your computer. If not, restart it manually.
|
||||
コンピュータを再起動するプロンプトが表示されるはずです。 表示されなければ、手動で再起動してください。 表示されなければ、手動で再起動してください。 表示されなければ、手動で再起動してください。
|
||||
|
||||
Upon restart, a powershell window will open and install Ubuntu. This may take up some time.
|
||||
You'll see a prompt to create a username and password for your Ubuntu installation.
|
||||
再起動後、PowerShellウィンドウが開き、Ubuntuをインストールします。 これには少し時間がかかるかもしれません。
|
||||
再起動後、PowerShellウィンドウが開き、Ubuntuをインストールします。 これには少し時間がかかるかもしれません。
|
||||
Ubuntuインストールのためにユーザー名とパスワードを設定するプロンプトが表示されます。 これには少し時間がかかるかもしれません。
|
||||
再起動後、PowerShellウィンドウが開き、Ubuntuをインストールします。 これには少し時間がかかるかもしれません。
|
||||
Ubuntuインストールのためにユーザー名とパスワードを設定するプロンプトが表示されます。
|
||||
|
||||
2. Install and configure git
|
||||
2. gitをインストールして設定する
|
||||
|
||||
```bash
|
||||
sudo apt-get install git
|
||||
@@ -43,10 +49,11 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
git config --global user.email "youremail@domain.com"
|
||||
```
|
||||
|
||||
3. Install nvm, node.js and yarn
|
||||
3. nvm、node.js、yarnをインストールする
|
||||
|
||||
<Warning>
|
||||
Use `nvm` to install the correct `node` version. The `.nvmrc` ensures all contributors use the same version.
|
||||
`nvm`を使用して正しい`node`バージョンをインストールします。 `.nvmrc`は、すべての寄稿者が同じバージョンを使用することを保証します。
|
||||
`.nvmrc`は、すべての寄稿者が同じバージョンを使用することを保証します。
|
||||
</Warning>
|
||||
|
||||
```bash
|
||||
@@ -55,7 +62,7 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
|
||||
```
|
||||
|
||||
Close and reopen your terminal to use nvm. Then run the following commands.
|
||||
nvmを使用できるようにするには、ターミナルを閉じて再度開いてください。 次のコマンドを実行します。 次のコマンドを実行します。 次のコマンドを実行します。
|
||||
|
||||
```bash
|
||||
|
||||
@@ -70,13 +77,15 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Git Clone
|
||||
## ステップ1：Gitクローン
|
||||
|
||||
In your terminal, run the following command.
|
||||
ターミナルで次のコマンドを実行します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="SSH (Recommended)">
|
||||
If you haven't already set up SSH keys, you can learn how to do so [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
<Tab title="SSH（推奨）">
|
||||
SSHキーの設定をまだ行っていない場合は、[こちら](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh)で学べます。```bash
|
||||
git clone git@github.com:twentyhq/twenty.git
|
||||
```
|
||||
|
||||
```bash
|
||||
git clone git@github.com:twentyhq/twenty.git
|
||||
@@ -90,36 +99,36 @@ In your terminal, run the following command.
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Step 2: Position yourself at the root
|
||||
## ステップ 2: ルートディレクトリに移動する
|
||||
|
||||
```bash
|
||||
cd twenty
|
||||
```
|
||||
|
||||
You should run all commands in the following steps from the root of the project.
|
||||
プロジェクトのルートで次のステップのすべてのコマンドを実行する必要があります。
|
||||
|
||||
## Step 3: Set up a PostgreSQL Database
|
||||
## ステップ3：PostgreSQLデータベースをセットアップします
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**Option 1 (preferred):** To provision your database locally:
|
||||
Use the following link to install Postgresql on your Linux machine: [Postgresql Installation](https://www.postgresql.org/download/linux/)
|
||||
**オプション1（推奨）：** データベースをローカルにプロビジョニングするには：
|
||||
LinuxマシンにPostgresqlをインストールするには、次のリンクを使用してください：[Postgresqlインストール](https://www.postgresql.org/download/linux/)
|
||||
|
||||
```bash
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
Note: You might need to add `sudo -u postgres` to the command before `psql` to avoid permission errors.
|
||||
注意：`psql`の前に`sudo -u postgres`を追加して、パーミッションエラーを避ける必要があるかもしれません。
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
**Option 1 (preferred):** To provision your database locally with `brew`:
|
||||
**オプション1（推奨）：** `brew`でローカルにデータベースをプロビジョニングするには：
|
||||
|
||||
```bash
|
||||
brew install postgresql@16
|
||||
@@ -128,16 +137,14 @@ You should run all commands in the following steps from the root of the project.
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
You can verify if the PostgreSQL server is running by executing:
|
||||
PostgreSQLサーバーが稼働しているかどうかを確認するには、以下を実行してください。
|
||||
|
||||
```bash
|
||||
brew services list
|
||||
```
|
||||
|
||||
The installer might not create the `postgres` user by default when installing
|
||||
via Homebrew on MacOS. Instead, it creates a PostgreSQL role that matches your macOS
|
||||
username (e.g., "john").
|
||||
To check and create the `postgres` user if necessary, follow these steps:
|
||||
インストーラーは、デフォルトでHomebrew経由でMacOSにインストールする際に`postgres`ユーザーを作成しないかもしれません。 代わりに、macOSのユーザー名（例：「john」）と一致するPostgreSQLロールを作成します。
|
||||
必要に応じて、`postgres`ユーザーを確認して作成するには、次の手順を実行してください。
|
||||
|
||||
```bash
|
||||
# Connect to PostgreSQL
|
||||
@@ -146,14 +153,14 @@ You should run all commands in the following steps from the root of the project.
|
||||
psql -U $(whoami) -d postgres
|
||||
```
|
||||
|
||||
Once at the psql prompt (postgres=#), run:
|
||||
psqlプロンプト（postgres=#）で次を実行します。
|
||||
|
||||
```bash
|
||||
# List existing PostgreSQL roles
|
||||
\du
|
||||
```
|
||||
|
||||
You'll see output similar to:
|
||||
以下のような出力が表示されます。
|
||||
|
||||
```bash
|
||||
Role name | Attributes | Member of
|
||||
@@ -161,98 +168,98 @@ You should run all commands in the following steps from the root of the project.
|
||||
john | Superuser | {}
|
||||
```
|
||||
|
||||
If you do not see a `postgres` role listed, proceed to the next step.
|
||||
Create the `postgres` role manually:
|
||||
`postgres`ロールがリストに表示されない場合は、次のステップに進んでください。
|
||||
`postgres`ロールを手動で作成します。
|
||||
|
||||
```bash
|
||||
CREATE ROLE postgres WITH SUPERUSER LOGIN;
|
||||
```
|
||||
|
||||
This creates a superuser role named `postgres` with login access.
|
||||
これにより、ログイン権限を持つ `postgres` というスーパーユーザーロールが作成されます。
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
All the following steps are to be run in the WSL terminal (within your virtual machine)
|
||||
<Tab title="Windows（WSL）">
|
||||
以下のすべてのステップは、WSLターミナル（仮想マシン内）で実行されます。
|
||||
|
||||
**Option 1:** To provision your Postgresql locally:
|
||||
Use the following link to install Postgresql on your Linux virtual machine: [Postgresql Installation](https://www.postgresql.org/download/linux/)
|
||||
**オプション1：** PostgreSQLをローカルでプロビジョニングするには：
|
||||
Linux仮想マシンにPostgresqlをインストールするには、次のリンクを使用してください：[Postgresqlインストール](https://www.postgresql.org/download/linux/)
|
||||
|
||||
```bash
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
Note: You might need to add `sudo -u postgres` to the command before `psql` to avoid permission errors.
|
||||
注意：`psql`の前に`sudo -u postgres`を追加して、パーミッションエラーを避ける必要があるかもしれません。
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
Running Docker on WSL adds an extra layer of complexity.
|
||||
Only use this option if you are comfortable with the extra steps involved, including turning on [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
WSLでDockerを実行すると、手順が少し複雑になります。
|
||||
追加の手順を含む[Docker Desktop WSL2](https://docs.docker.com/desktop/wsl)の有効化などの追加の手順に精通している場合にのみこのオプションを使用してください。
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
You can now access the database at [localhost:5432](localhost:5432), with user `postgres` and password `postgres` .
|
||||
データベースに[localhost:5432](localhost:5432)でアクセスできるようになりました。ユーザーは`postgres`、パスワードは`postgres`です。
|
||||
|
||||
## Step 4: Set up a Redis Database (cache)
|
||||
## ステップ4：Redisデータベース（キャッシュ）をセットアップ
|
||||
|
||||
Twenty requires a redis cache to provide the best performance
|
||||
Twentyは、最良のパフォーマンスを提供するためにredisキャッシュを必要とします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**Option 1:** To provision your Redis locally:
|
||||
Use the following link to install Redis on your Linux machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
**オプション1：** Redisをローカルでプロビジョニングするには：
|
||||
LinuxマシンにRedisをインストールするには、次のリンクを使用してください：[Redisインストール](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
**Option 1 (preferred):** To provision your Redis locally with `brew`:
|
||||
**オプション1（推奨）：** `brew`でredisをローカルプロビジョニングするには：
|
||||
|
||||
```bash
|
||||
brew install redis
|
||||
```
|
||||
|
||||
Start your redis server:
|
||||
Redisサーバーを開始します：
|
||||
`brew services start redis`
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
**Option 1:** To provision your Redis locally:
|
||||
Use the following link to install Redis on your Linux virtual machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
<Tab title="Windows（WSL）">
|
||||
**オプション1：** Redisをローカルでプロビジョニングするには：
|
||||
Linux仮想マシンにRedisをインストールするには、次のリンクを使用してください：[Redisインストール](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**オプション2：** dockerをインストールしている場合：
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
If you need a Client GUI, we recommend [redis insight](https://redis.io/insight/) (free version available)
|
||||
クライアントGUIが必要な場合は、[redis insight](https://redis.io/insight/)（無料版利用可能）をお勧めします。
|
||||
|
||||
## Step 5: Setup environment variables
|
||||
## ステップ5：環境変数をセットアップします
|
||||
|
||||
Use environment variables or `.env` files to configure your project. More info [here](/l/ja/developers/self-host/capabilities/setup)
|
||||
環境変数や`.env`ファイルを使ってプロジェクトを設定します。 詳細は[こちら](https://docs.twenty.com/l/ja/developers/self-hosting/setup)。 詳細は[こちら](/l/ja/developers/self-host/capabilities/setup)。
|
||||
|
||||
Copy the `.env.example` files in `/front` and `/server`:
|
||||
`/front`と`/server`内の`.env.example`ファイルをコピーします：
|
||||
|
||||
```bash
|
||||
cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env
|
||||
@@ -260,48 +267,48 @@ cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
|
||||
```
|
||||
|
||||
<Info>
|
||||
**Multi-Workspace Mode:** By default, Twenty runs in single-workspace mode where only one workspace can be created. To enable multi-workspace support (useful for testing subdomain-based features), set `IS_MULTIWORKSPACE_ENABLED=true` in your server `.env` file. See [Multi-Workspace Mode](/l/ja/developers/self-host/capabilities/setup#multi-workspace-mode) for details.
|
||||
**マルチワークスペースモード:** デフォルトでは、Twenty は単一ワークスペースモードで動作し、ワークスペースは 1 つだけ作成できます。 マルチワークスペース対応を有効にするには（サブドメインベースの機能のテストに有用）、サーバーの `.env` ファイルで `IS_MULTIWORKSPACE_ENABLED=true` を設定してください。 詳細は[マルチワークスペースモード](/l/ja/developers/self-host/capabilities/setup#multi-workspace-mode)を参照してください。
|
||||
</Info>
|
||||
|
||||
## Step 6: Installing dependencies
|
||||
## ステップ6：依存関係をインストールします
|
||||
|
||||
To build Twenty server and seed some data into your database, run the following command:
|
||||
Twentyサーバーを構築し、データベースにデータをシードするには、以下のコマンドを実行します：
|
||||
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
Note that `npm` or `pnpm` won't work
|
||||
`npm`または`pnpm`は使えません
|
||||
|
||||
## Step 7: Running the project
|
||||
## ステップ7：プロジェクトを実行する
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
Depending on your Linux distribution, Redis server might be started automatically.
|
||||
If not, check the [Redis installation guide](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) for your distro.
|
||||
Linuxディストリビューションによっては、Redisサーバーが自動的に開始されるかもしれません。
|
||||
そうでない場合は、[Redisインストールガイド](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/)を参照し、お使いのディストリビューションに合わせて確認してください。
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
Redis should already be running. If not, run:
|
||||
Redisはすでに稼働しているはずです。 稼働していなかった場合は、以下を実行してください：
|
||||
|
||||
```bash
|
||||
brew services start redis
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
Depending on your Linux distribution, Redis server might be started automatically.
|
||||
If not, check the [Redis installation guide](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) for your distro.
|
||||
<Tab title="Windows（WSL）">
|
||||
Linuxディストリビューションによっては、Redisサーバーが自動的に開始されるかもしれません。
|
||||
そうでない場合は、[Redisインストールガイド](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/)を参照し、お使いのディストリビューションに合わせて確認してください。
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
Set up your database with the following command:
|
||||
次のコマンドでデータベースをセットアップします:
|
||||
|
||||
```bash
|
||||
npx nx database:reset twenty-server
|
||||
```
|
||||
|
||||
Start the server, the worker and the frontend services:
|
||||
サーバー、ワーカー、フロントエンドサービスを開始します:
|
||||
|
||||
```bash
|
||||
npx nx start twenty-server
|
||||
@@ -309,25 +316,25 @@ npx nx worker twenty-server
|
||||
npx nx start twenty-front
|
||||
```
|
||||
|
||||
Alternatively, you can start all services at once:
|
||||
または、すべてのサービスを一度に開始することができます:
|
||||
|
||||
```bash
|
||||
npx nx start
|
||||
```
|
||||
|
||||
## Step 8: Use Twenty
|
||||
## ステップ 8: Twentyを使用する
|
||||
|
||||
**Frontend**
|
||||
**フロントエンド**
|
||||
|
||||
Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001).
|
||||
You can log in using the default demo account: `tim@apple.dev` (password: `tim@apple.dev`)
|
||||
Twentyのフロントエンドは[http://localhost:3001](http://localhost:3001)で稼働しています。
|
||||
デフォルトのデモアカウントを使用してログインできます: `tim@apple.dev` (パスワード: `tim@apple.dev`)
|
||||
|
||||
**Backend**
|
||||
**バックエンド**
|
||||
|
||||
* Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000)
|
||||
* The GraphQL API can be accessed at [http://localhost:3000/graphql](http://localhost:3000/graphql)
|
||||
* The REST API can be reached at [http://localhost:3000/rest](http://localhost:3000/rest)
|
||||
* Twentyのサーバーは[http://localhost:3000](http://localhost:3000)で稼働しています
|
||||
* GraphQL API は [http://localhost:3000/graphql](http://localhost:3000/graphql) でアクセスできます
|
||||
* REST API は [http://localhost:3000/rest](http://localhost:3000/rest) でアクセスできます
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
If you encounter any problem, check [Troubleshooting](/l/ja/developers/self-host/capabilities/troubleshooting) for solutions.
|
||||
問題が発生した場合は、[トラブルシューティング](/l/ja/developers/self-host/capabilities/troubleshooting)を確認して解決策を見つけてください。
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Contribute
|
||||
description: Contribute to Twenty's open-source development.
|
||||
title: 貢献
|
||||
description: Twentyのオープンソース開発に貢献しましょう。
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="AI" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty is open-source and welcomes contributions from the community. Whether you're fixing bugs, adding features, or improving documentation, your contributions help make Twenty better for everyone.
|
||||
Twentyはオープンソースであり、コミュニティからの貢献を歓迎しています。 バグを修正したり、機能を追加したり、ドキュメントを改善したりするなど、あなたの貢献は、Twentyをすべての人にとってより良いものにする助けになります。
|
||||
|
||||
## Ways to Contribute
|
||||
## 貢献する方法
|
||||
|
||||
* **Report bugs**: Help identify and document issues
|
||||
* **Submit features**: Propose and implement new functionality
|
||||
* **Improve documentation**: Make our docs clearer and more helpful
|
||||
* **Frontend development**: Work on the React-based UI
|
||||
* **Backend development**: Contribute to the NestJS server
|
||||
* **バグを報告**: 問題の特定と記録に協力する
|
||||
* **機能の提案**: 新しい機能を提案して実装する
|
||||
* **ドキュメントを改善**: ドキュメントをより分かりやすく役立つものにする
|
||||
* **フロントエンド開発**: ReactベースのUIに取り組む
|
||||
* **バックエンド開発**: NestJSサーバーに貢献する
|
||||
|
||||
## Getting Started
|
||||
## 始めに
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Bug Reports & Requests" icon="bug" href="/l/ja/developers/contribute/capabilities/bug-and-requests">
|
||||
Report issues or request features
|
||||
<Card title="バグ報告と要望" icon="bug" href="/l/ja/developers/contribute/capabilities/bug-and-requests">
|
||||
問題を報告する、または機能を要望する
|
||||
</Card>
|
||||
|
||||
<Card title="Frontend Development" icon="browser" href="/l/ja/developers/contribute/capabilities/frontend-development">
|
||||
Contribute to the UI
|
||||
<Card title="フロントエンド開発" icon="browser" href="/l/ja/developers/contribute/capabilities/frontend-development">
|
||||
UIに貢献する
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,147 +1,147 @@
|
||||
---
|
||||
title: APIs
|
||||
description: Query and modify your CRM data programmatically using REST or GraphQL.
|
||||
title: API
|
||||
description: REST または GraphQL を使用して、プログラムから CRM データをクエリおよび変更します。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Twenty was built to be developer-friendly, offering powerful APIs that adapt to your custom data model. We provide four distinct API types to meet different integration needs.
|
||||
Twentyは開発者に優しい設計で、強力なAPIを提供し、カスタムデータモデルに適応します。 異なる統合ニーズに対応する4つの異なるAPIタイプを提供します。 異なる統合ニーズに対応する4つの異なるAPIタイプを提供します。 異なる統合ニーズに対応する4つの異なるAPIタイプを提供します。
|
||||
|
||||
## Developer-First Approach
|
||||
## 開発者優先アプローチ
|
||||
|
||||
Twenty generates APIs specifically for your data model:
|
||||
Twenty は、お使いのデータモデルに特化した API を生成します:
|
||||
|
||||
* **No long IDs required**: Use your object and field names directly in endpoints
|
||||
* **Standard and custom objects treated equally**: Your custom objects get the same API treatment as built-in ones
|
||||
* **Dedicated endpoints**: Each object and field gets its own API endpoint
|
||||
* **Custom documentation**: Generated specifically for your workspace's data model
|
||||
* **長いIDが不要**：オブジェクトとフィールド名をエンドポイントに直接使用
|
||||
* **標準とカスタムオブジェクトを同等に扱う**：カスタムオブジェクトも組み込みのものと同じAPI処理を受ける
|
||||
* **専用エンドポイント**：各オブジェクトとフィールドに固有のAPIエンドポイントが設けられる
|
||||
* **カスタムドキュメント**：ワークスペースのデータモデルに特化して生成
|
||||
|
||||
<Note>
|
||||
Your personalized API documentation is available under **Settings → API & Webhooks** after creating an API key. Since Twenty generates APIs that match your custom data model, the documentation is unique to your workspace.
|
||||
API キー作成後、**Settings → API & Webhooks** でパーソナライズされた API ドキュメントを利用できます。 Twenty はカスタムデータモデルに合致する API を生成するため、ドキュメントはお使いのワークスペース専用です。
|
||||
</Note>
|
||||
|
||||
## The Two API Types
|
||||
## 2 つの API タイプ
|
||||
|
||||
### Core API
|
||||
### コアAPI
|
||||
|
||||
Accessed on `/rest/` or `/graphql/`
|
||||
`/rest/` または `/graphql/` でアクセスできます。
|
||||
|
||||
Work with your actual **records** (the data):
|
||||
実際の **レコード**（データ）を扱います:
|
||||
|
||||
* Create, read, update, delete People, Companies, Opportunities, etc.
|
||||
* Query and filter data
|
||||
* Manage record relationships
|
||||
* People、Companies、Opportunities などを作成・読み取り・更新・削除。
|
||||
* データのクエリとフィルター
|
||||
* レコードの関係管理
|
||||
|
||||
### Metadata API
|
||||
### メタデータAPI
|
||||
|
||||
Accessed on `/rest/metadata/` or `/metadata/`
|
||||
`/rest/metadata/` または `/metadata/` でアクセスできます。
|
||||
|
||||
Manage your **workspace and data model**:
|
||||
**ワークスペースとデータモデル**を管理:
|
||||
|
||||
* Create, modify, or delete objects and fields
|
||||
* Configure workspace settings
|
||||
* Define relationships between objects
|
||||
* オブジェクトやフィールドの作成、変更、削除
|
||||
* ワークスペース設定の構成
|
||||
* オブジェクト間のリレーションシップを定義
|
||||
|
||||
## REST vs GraphQL
|
||||
## REST と GraphQL の比較
|
||||
|
||||
Both Core and Metadata APIs are available in REST and GraphQL formats:
|
||||
Core と Metadata の両 API は、REST と GraphQL の形式で利用可能です:
|
||||
|
||||
| Format | Available Operations |
|
||||
| ----------- | ---------------------------------------------------------- |
|
||||
| **REST** | CRUD, batch operations, upserts |
|
||||
| **GraphQL** | Same + **batch upserts**, relationship queries in one call |
|
||||
| 形式 | 利用可能な操作 |
|
||||
| ----------- | ---------------------------------------- |
|
||||
| **REST** | CRUD、バッチ操作、アップサート |
|
||||
| **GraphQL** | 同様に、**バッチアップサート**、1 回の呼び出しでのリレーションシップクエリ |
|
||||
|
||||
Choose based on your needs — both formats access the same data.
|
||||
ニーズに合わせて選択してください—どちらの形式でも同じデータにアクセスできます。
|
||||
|
||||
## API Endpoints
|
||||
## APIエンドポイント
|
||||
|
||||
| Environment | Base URL |
|
||||
| --------------- | ------------------------- |
|
||||
| **Cloud** | `https://api.twenty.com/` |
|
||||
| **Self-Hosted** | `https://{your-domain}/` |
|
||||
| 環境 | ベース URL |
|
||||
| ---------- | ------------------------- |
|
||||
| **クラウド** | `https://api.twenty.com/` |
|
||||
| **セルフホスト** | `https://{your-domain}/` |
|
||||
|
||||
## Authentication
|
||||
## 認証
|
||||
|
||||
Every API request requires an API key in the header:
|
||||
すべての API リクエストにはヘッダーに API キーが必要です:
|
||||
|
||||
```
|
||||
Authorization: Bearer YOUR_API_KEY
|
||||
```
|
||||
|
||||
### Create an API Key
|
||||
### APIキーを作成
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks**
|
||||
2. Click **+ Create key**
|
||||
3. Configure:
|
||||
* **Name**: Descriptive name for the key
|
||||
* **Expiration Date**: When the key expires
|
||||
4. Click **Save**
|
||||
5. **Copy immediately** — the key is only shown once
|
||||
1. **Settings → APIs & Webhooks**に移動
|
||||
2. **+ Create key** をクリック
|
||||
3. 設定:
|
||||
* **Name**: キーのわかりやすい名前
|
||||
* **Expiration Date**: キーの有効期限
|
||||
4. **保存**をクリック
|
||||
5. **すぐにコピー** — キーは一度しか表示されません
|
||||
|
||||
<VimeoEmbed videoId="928786722" title="Creating API key" />
|
||||
<VimeoEmbed videoId="928786722" title="API キーの作成" />
|
||||
|
||||
<Warning>
|
||||
Your API key grants access to sensitive data. Don't share it with untrusted services. If compromised, disable it immediately and generate a new one.
|
||||
API キーは機密データへのアクセスを許可します。 信頼できないサービスと共有しないでください。 漏洩した場合は、直ちに無効化して新しいものを生成してください。
|
||||
</Warning>
|
||||
|
||||
### Assign a Role to an API Key
|
||||
### API キーにロールを割り当てる
|
||||
|
||||
For better security, assign a specific role to limit access:
|
||||
セキュリティを高めるため、アクセスを制限する特定のロールを割り当ててください:
|
||||
|
||||
1. Go to **Settings → Roles**
|
||||
2. Click on the role to assign
|
||||
3. Open the **Assignment** tab
|
||||
4. Under **API Keys**, click **+ Assign to API key**
|
||||
5. Select the API key
|
||||
1. **設定 → 役割** に移動
|
||||
2. 割り当てるロールをクリック
|
||||
3. **割り当て** タブを開く
|
||||
4. **API Keys** の下で、**+ Assign to API key** をクリック
|
||||
5. API キーを選択
|
||||
|
||||
The key will inherit that role's permissions. See [Permissions](/l/ja/user-guide/permissions-access/capabilities/permissions) for details.
|
||||
キーはそのロールの権限を継承します。 詳細は[権限](/l/ja/user-guide/permissions-access/capabilities/permissions)を参照してください。
|
||||
|
||||
### Manage API Keys
|
||||
### APIキーの管理
|
||||
|
||||
**Regenerate**: Settings → APIs & Webhooks → Click key → **Regenerate**
|
||||
**Regenerate**: Settings → APIs & Webhooks → キーをクリック → **Regenerate**
|
||||
|
||||
**Delete**: Settings → APIs & Webhooks → Click key → **Delete**
|
||||
**Delete**: Settings → APIs & Webhooks → キーをクリック → **Delete**
|
||||
|
||||
## API Playground
|
||||
## API プレイグラウンド
|
||||
|
||||
Test your APIs directly in the browser with our built-in playground — available for both **REST** and **GraphQL**.
|
||||
組み込みのプレイグラウンドでブラウザから直接 API をテストできます—**REST** と **GraphQL** の両方で利用可能です。
|
||||
|
||||
### Access the Playground
|
||||
### プレイグラウンドにアクセス
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks**
|
||||
2. Create an API key (required)
|
||||
3. Click on **REST API** or **GraphQL API** to open the playground
|
||||
1. **Settings → APIs & Webhooks**に移動
|
||||
2. API キーを作成（必須）
|
||||
3. プレイグラウンドを開くには **REST API** または **GraphQL API** をクリック
|
||||
|
||||
### What You Get
|
||||
### 提供内容
|
||||
|
||||
* **Interactive documentation**: Generated for your specific data model
|
||||
* **Live testing**: Execute real API calls against your workspace
|
||||
* **Schema explorer**: Browse available objects, fields, and relationships
|
||||
* **Request builder**: Construct queries with autocomplete
|
||||
* **インタラクティブなドキュメント**: お使いの特定のデータモデル向けに生成
|
||||
* **ライブテスト**: ワークスペースに対して実際の API 呼び出しを実行
|
||||
* **スキーマエクスプローラー**: 利用可能なオブジェクト、フィールド、リレーションシップを閲覧
|
||||
* **リクエストビルダー**: オートコンプリートでクエリを構築
|
||||
|
||||
The playground reflects your custom objects and fields, so documentation is always accurate for your workspace.
|
||||
プレイグラウンドはカスタムのオブジェクトとフィールドを反映するため、ドキュメントは常にお使いのワークスペースに対して正確です。
|
||||
|
||||
## Batch Operations
|
||||
## バッチ操作
|
||||
|
||||
Both REST and GraphQL support batch operations:
|
||||
REST と GraphQL の両方がバッチ操作をサポートしています:
|
||||
|
||||
* **Batch size**: Up to 60 records per request
|
||||
* **Operations**: Create, update, delete multiple records
|
||||
* **バッチサイズ**：リクエストあたり最大60記録
|
||||
* **操作**: 複数のレコードの作成、更新、削除
|
||||
|
||||
**GraphQL-only features:**
|
||||
**GraphQL のみの機能:**
|
||||
|
||||
* **Batch Upsert**: Create or update in one call
|
||||
* Use plural object names (e.g., `CreateCompanies` instead of `CreateCompany`)
|
||||
* **バッチアップサート**: 1 回の呼び出しで作成または更新
|
||||
* 複数形のオブジェクト名を使用（例：`CreateCompany` ではなく `CreateCompanies`）
|
||||
|
||||
## Rate Limits
|
||||
## API レートリミット
|
||||
|
||||
API requests are throttled to ensure platform stability:
|
||||
プラットフォームの安定性を確保するため、API リクエストはレート制限されています:
|
||||
|
||||
| Limit | Value |
|
||||
| -------------- | -------------------- |
|
||||
| **Requests** | 100 calls per minute |
|
||||
| **Batch size** | 60 records per call |
|
||||
| 制限 | 値 |
|
||||
| ---------- | ------------------- |
|
||||
| **リクエスト** | 1 分あたり 100 回の呼び出し |
|
||||
| **バッチサイズ** | 1 回の呼び出しあたり 60 レコード |
|
||||
|
||||
<Tip>
|
||||
Use batch operations to maximize throughput — process up to 60 records in a single API call instead of making individual requests.
|
||||
バッチ操作を使用してスループットを最大化しましょう—個別のリクエストではなく、1 回の API 呼び出しで最大 60 レコードを処理できます。
|
||||
</Tip>
|
||||
|
||||
@@ -1,81 +1,88 @@
|
||||
---
|
||||
title: Twenty Apps
|
||||
description: Build and manage Twenty customizations as code.
|
||||
title: Twenty アプリ
|
||||
description: Twenty のカスタマイズをコードとして構築・管理します。
|
||||
---
|
||||
|
||||
<Warning>
|
||||
Apps are currently in alpha testing. The feature is functional but still evolving.
|
||||
アプリは現在アルファテスト中です。 この機能は動作しますが、まだ進化の途上です。
|
||||
</Warning>
|
||||
|
||||
## What Are Apps?
|
||||
## Apps とは？
|
||||
|
||||
Apps let you build and manage Twenty customizations **as code**. Instead of configuring everything through the UI, you define your data model and serverless functions in code — making it faster to build, maintain, and roll out to multiple workspaces.
|
||||
Apps を使うと、Twenty のカスタマイズを**コードとして**構築・管理できます。 すべてを UI から設定する代わりに、データモデルやサーバーレス関数をコードで定義できます。これにより、構築と保守が高速になり、複数のワークスペースへの展開も容易になります。
|
||||
|
||||
**What you can do today:**
|
||||
**現在できること:**
|
||||
|
||||
* Define custom objects and fields as code (managed data model)
|
||||
* Build serverless functions with custom triggers
|
||||
* Deploy the same app across multiple workspaces
|
||||
* カスタムオブジェクトとフィールドをコードとして定義（管理されたデータモデル）
|
||||
* カスタムトリガー付きのサーバーレス関数を作成
|
||||
* 同じアプリを複数のワークスペースにデプロイ
|
||||
|
||||
**Coming soon:**
|
||||
**近日公開:**
|
||||
|
||||
* Custom UI layouts and components
|
||||
* カスタム UI レイアウトとコンポーネント
|
||||
|
||||
## Prerequisites
|
||||
## 前提条件
|
||||
|
||||
* Node.js 24+ and Yarn 4
|
||||
* A Twenty workspace and an API key (create one at https://app.twenty.com/settings/api-webhooks)
|
||||
* Node.js 24+ と Yarn 4
|
||||
* Twenty のワークスペースと API キー（https://app.twenty.com/settings/api-webhooks で作成）
|
||||
|
||||
## Getting Started
|
||||
## 始めに
|
||||
|
||||
Create a new app using the official scaffolder, then authenticate and start developing:
|
||||
公式スキャフォルダーで新しいアプリを作成し、認証して開発を開始します：
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Scaffold a new app
|
||||
# 新しいアプリのひな型を作成
|
||||
npx create-twenty-app@latest my-twenty-app
|
||||
cd my-twenty-app
|
||||
|
||||
# Authenticate using your API key (you'll be prompted)
|
||||
yarn auth
|
||||
# yarn@4 を使用していない場合
|
||||
corepack enable
|
||||
yarn install
|
||||
|
||||
# Start dev mode: automatically syncs local changes to your workspace
|
||||
yarn dev
|
||||
# API キーで認証（プロンプトが表示されます）
|
||||
yarn auth:login
|
||||
|
||||
# 開発モードを開始：ローカルの変更がワークスペースに自動同期されます
|
||||
yarn app:dev
|
||||
```
|
||||
|
||||
From here you can:
|
||||
そこで次のことができます：
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Add a new entity to your application (guided)
|
||||
yarn create-entity
|
||||
# アプリケーションに新しいエンティティを追加（ガイド付き）
|
||||
yarn app:create-entity
|
||||
|
||||
# Generate a typed Twenty client and workspace entity types
|
||||
yarn generate
|
||||
# 型付きの Twenty クライアントとワークスペースのエンティティ型を生成
|
||||
yarn app:generate
|
||||
|
||||
# Run a one‑time sync (instead of watch mode)
|
||||
yarn sync
|
||||
# 1回限りの同期を実行（ウォッチモードの代わり）
|
||||
yarn app:sync
|
||||
|
||||
# Watch your application's functions logs
|
||||
yarn logs
|
||||
# アプリケーションの関数のログを監視
|
||||
yarn function:logs
|
||||
|
||||
# Uninstall the application from the current workspace
|
||||
yarn uninstall
|
||||
# 名前で関数を実行
|
||||
yarn function:execute -n my-function -p '{\"name\": \"test\"}'
|
||||
|
||||
# Display commands' help
|
||||
yarn help
|
||||
# 現在のワークスペースからアプリケーションをアンインストール
|
||||
yarn app:uninstall
|
||||
|
||||
# コマンドのヘルプを表示
|
||||
yarn app:help
|
||||
```
|
||||
|
||||
See also: the CLI reference pages for [create-twenty-app](https://www.npmjs.com/package/create-twenty-app) and [twenty-sdk CLI](https://www.npmjs.com/package/twenty-sdk).
|
||||
参考: [create-twenty-app](https://www.npmjs.com/package/create-twenty-app) および [twenty-sdk CLI](https://www.npmjs.com/package/twenty-sdk) の CLI リファレンスページをご覧ください。
|
||||
|
||||
## Project structure (scaffolded)
|
||||
## プロジェクト構成（スキャフォルド作成）
|
||||
|
||||
When you run `npx create-twenty-app@latest my-twenty-app`, the scaffolder:
|
||||
`npx create-twenty-app@latest my-twenty-app` を実行すると、スキャフォルダーは次を行います：
|
||||
|
||||
* Copies a minimal base application into `my-twenty-app/`
|
||||
* Adds a local `twenty-sdk` dependency and Yarn 4 configuration
|
||||
* Creates config files and scripts wired to the `twenty` CLI
|
||||
* Generates a default application config and a default function role
|
||||
* 最小限のベースアプリケーションを `my-twenty-app/` にコピーします
|
||||
* ローカルの `twenty-sdk` 依存関係と Yarn 4 の設定を追加します
|
||||
* `twenty` CLI と連携する設定ファイルとスクリプトを作成します
|
||||
* デフォルトのアプリケーション設定とデフォルトの関数ロールを生成します
|
||||
|
||||
A freshly scaffolded app looks like this:
|
||||
スキャフォルド直後のアプリは次のようになります：
|
||||
|
||||
```text filename="my-twenty-app/"
|
||||
my-twenty-app/
|
||||
@@ -85,79 +92,144 @@ my-twenty-app/
|
||||
.nvmrc
|
||||
.yarnrc.yml
|
||||
.yarn/
|
||||
releases/
|
||||
yarn-4.9.2.cjs
|
||||
install-state.gz
|
||||
eslint.config.mjs
|
||||
tsconfig.json
|
||||
README.md
|
||||
src/
|
||||
application.config.ts
|
||||
role.config.ts
|
||||
// your entities, actions, and other app files
|
||||
app/
|
||||
application.config.ts # Required - main application configuration
|
||||
default-function.role.ts # Default role for serverless functions
|
||||
// your entities (*.object.ts, *.function.ts, *.role.ts)
|
||||
utils/ # Optional - handler implementations & utilities
|
||||
```
|
||||
|
||||
At a high level:
|
||||
### コンベンション優先
|
||||
|
||||
* **package.json**: Declares the app name, version, engines (Node 24+, Yarn 4), and adds `twenty-sdk` plus scripts like `dev`, `sync`, `generate`, `create-entity`, `logs`, `uninstall`, and `auth` that delegate to the local `twenty` CLI.
|
||||
* **.gitignore**: Ignores common artifacts such as `node_modules`, `.yarn`, `generated/` (typed client), `dist/`, `build/`, coverage folders, log files, and `.env*` files.
|
||||
* **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Lock and configure the Yarn 4 toolchain used by the project.
|
||||
* **.nvmrc**: Pins the Node.js version expected by the project.
|
||||
* **eslint.config.mjs** and **tsconfig.json**: Provide linting and TypeScript configuration for your app’s TypeScript sources.
|
||||
* **README.md**: A short README in the app root with basic instructions.
|
||||
* **src/**: The main place where you define your application-as-code:
|
||||
* `application.config.ts`: Global configuration for your app (metadata and runtime wiring). See “Application config” below.
|
||||
* `role.config.ts`: Default function role used by your serverless functions. See “Default function role” below.
|
||||
* Future entities, actions/functions, and any supporting code you add.
|
||||
アプリケーションは **コンベンション優先（設定より規約）** のアプローチを採用し、エンティティはファイルのサフィックスで検出されます。 これにより、`src/app/` フォルダー内を柔軟に構成できます：
|
||||
|
||||
Later commands will add more files and folders:
|
||||
| ファイルサフィックス | エンティティタイプ |
|
||||
| --------------- | ------------- |
|
||||
| `*.object.ts` | カスタムオブジェクトの定義 |
|
||||
| `*.function.ts` | サーバーレス関数の定義 |
|
||||
| `*.role.ts` | ロールの定義 |
|
||||
|
||||
* `yarn generate` will create a `generated/` folder (typed Twenty client + workspace types).
|
||||
* `yarn create-entity` will add entity definition files under `src/` for your custom objects.
|
||||
### サポートされるフォルダー構成
|
||||
|
||||
## Authentication
|
||||
エンティティは次のいずれのパターンでも構成できます：
|
||||
|
||||
The first time you run `yarn auth`, you'll be prompted for:
|
||||
**従来型（タイプ別）:**
|
||||
|
||||
* API URL (defaults to http://localhost:3000 or your current workspace profile)
|
||||
* API key
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
├── objects/
|
||||
│ └── postCard.object.ts
|
||||
├── functions/
|
||||
│ └── createPostCard.function.ts
|
||||
└── roles/
|
||||
└── admin.role.ts
|
||||
```
|
||||
|
||||
Your credentials are stored per-user in `~/.twenty/config.json`. You can maintain multiple profiles and switch using `--workspace <name>`.
|
||||
**機能単位:**
|
||||
|
||||
Examples:
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
└── post-card/
|
||||
├── postCard.object.ts
|
||||
├── createPostCard.function.ts
|
||||
└── postCardAdmin.role.ts
|
||||
```
|
||||
|
||||
**フラット:**
|
||||
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
├── postCard.object.ts
|
||||
├── createPostCard.function.ts
|
||||
└── admin.role.ts
|
||||
```
|
||||
|
||||
概要：
|
||||
|
||||
* **package.json**: アプリ名、バージョン、エンジン（Node 24+、Yarn 4）を宣言し、`twenty-sdk` と、`dev`、`sync`、`generate`、`create-entity`、`logs`、`uninstall`、`auth` などのスクリプトを追加します。これらはローカルの `twenty` CLI に委譲されます。
|
||||
* **.gitignore**: `node_modules`、`.yarn`、`generated/`（型付きクライアント）、`dist/`、`build/`、カバレッジ用フォルダー、ログファイル、`.env*` ファイルなどの一般的な生成物を無視します。
|
||||
* **yarn.lock**、**.yarnrc.yml**、**.yarn/**: プロジェクトで使用する Yarn 4 ツールチェーンをロックおよび構成します。
|
||||
* **.nvmrc**: プロジェクトで想定する Node.js バージョンを固定します。
|
||||
* **eslint.config.mjs** と **tsconfig.json**: アプリの TypeScript ソース向けの Lint と TypeScript 設定を提供します。
|
||||
* **README.md**: アプリのルートにある、基本的な手順を記した短い README。
|
||||
* **src/app/**: アプリケーションをコードとして定義する主な場所：
|
||||
* `application.config.ts`: アプリのグローバル設定（メタデータとランタイムの接続）。 「アプリケーション設定」を参照してください。
|
||||
* `*.role.ts`: サーバーレス関数で使用するロール定義。 「デフォルトの関数ロール」を参照してください。
|
||||
* `*.object.ts`: カスタムオブジェクトの定義。
|
||||
* `*.function.ts`: サーバーレス関数の定義。
|
||||
* **src/utils/**: ハンドラーの実装やユーティリティ用の任意フォルダー。
|
||||
|
||||
後続のコマンドにより、さらにファイルやフォルダーが追加されます：
|
||||
|
||||
* `yarn app:generate` は `generated/` フォルダー（型付きの Twenty クライアント + ワークスペースの型）を作成します。
|
||||
* `yarn app:create-entity` は、カスタムオブジェクト、関数、ロール用のエンティティ定義ファイルを `src/app/` 配下に追加します。
|
||||
l
|
||||
|
||||
## 認証
|
||||
|
||||
初めて `yarn auth:login` を実行すると、次が求められます：
|
||||
|
||||
* API URL（デフォルトは http://localhost:3000 または現在のワークスペースプロファイル）
|
||||
* API キー
|
||||
|
||||
認証情報はユーザーごとに `~/.twenty/config.json` に保存されます。 複数のプロファイルを管理し、相互に切り替えることができます。
|
||||
|
||||
### ワークスペースの管理
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Login interactively (recommended)
|
||||
yarn auth
|
||||
# 対話的にログイン（推奨）
|
||||
yarn auth:login
|
||||
|
||||
# Use a specific workspace profile
|
||||
yarn auth --workspace my-custom-workspace
|
||||
# 特定のワークスペースプロファイルにログイン
|
||||
yarn auth:login --workspace my-custom-workspace
|
||||
|
||||
# 設定済みのワークスペースをすべて一覧表示
|
||||
yarn auth:list
|
||||
|
||||
# デフォルトのワークスペースを切り替え（対話的）
|
||||
yarn auth:switch
|
||||
|
||||
# 特定のワークスペースに切り替え
|
||||
yarn auth:switch production
|
||||
|
||||
# 現在の認証状態を確認
|
||||
yarn auth:status
|
||||
```
|
||||
|
||||
## Use the SDK resources (types & config)
|
||||
一度 `auth:switch` でワークスペースを切り替えると、その後のすべてのコマンドはデフォルトでそのワークスペースを使用します。 一時的に `--workspace <name>` で上書きできます。
|
||||
|
||||
The twenty-sdk provides typed building blocks you use inside your app. Below are the key pieces you'll touch most often.
|
||||
## SDK リソース（型と設定）を使う
|
||||
|
||||
### Defining objects
|
||||
twenty-sdk は、アプリ内で使用する型付きのビルディングブロックとヘルパー関数を提供します。 以下は、最も頻繁に扱う主要な構成要素です。
|
||||
|
||||
Custom objects are regular TypeScript classes annotated with decorators from `twenty-sdk`. They live under `src/objects/` in your app and describe both schema and behavior for records in your workspace.
|
||||
### ヘルパー関数
|
||||
|
||||
Here is an example `postCard` object from the Hello World app:
|
||||
この SDK は、アプリのエンティティを定義するための組み込み検証付きヘルパー関数を 4 つ提供します：
|
||||
|
||||
| 関数 | 目的 |
|
||||
| ------------------ | --------------------- |
|
||||
| `defineApp()` | アプリケーションのメタデータを構成 |
|
||||
| `defineObject()` | フィールド付きのカスタムオブジェクトを定義 |
|
||||
| `defineFunction()` | ハンドラー付きのサーバーレス関数を定義 |
|
||||
| `defineRole()` | ロールの権限とオブジェクトアクセスを構成 |
|
||||
|
||||
これらの関数は実行時に設定を検証し、IDE の補完と型安全性を向上させます。
|
||||
|
||||
### オブジェクトの定義
|
||||
|
||||
カスタムオブジェクトは、ワークスペース内のレコードのスキーマと挙動の両方を表します。 組み込み検証付きでオブジェクトを定義するには `defineObject()` を使用します：
|
||||
|
||||
```typescript
|
||||
import { type Note } from '../../generated';
|
||||
|
||||
import {
|
||||
type AddressField,
|
||||
Field,
|
||||
FieldType,
|
||||
type FullNameField,
|
||||
Object,
|
||||
OnDeleteAction,
|
||||
Relation,
|
||||
RelationType,
|
||||
STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
|
||||
} from 'twenty-sdk';
|
||||
// src/app/postCard.object.ts
|
||||
import { defineObject, FieldType } from 'twenty-sdk';
|
||||
|
||||
enum PostCardStatus {
|
||||
DRAFT = 'DRAFT',
|
||||
@@ -166,176 +238,186 @@ enum PostCardStatus {
|
||||
RETURNED = 'RETURNED',
|
||||
}
|
||||
|
||||
@Object({
|
||||
export default defineObject({
|
||||
universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
|
||||
nameSingular: 'postCard',
|
||||
namePlural: 'postCards',
|
||||
labelSingular: 'Post card',
|
||||
labelPlural: 'Post cards',
|
||||
description: ' A post card object',
|
||||
labelSingular: 'Post Card',
|
||||
labelPlural: 'Post Cards',
|
||||
description: 'A post card object',
|
||||
icon: 'IconMail',
|
||||
})
|
||||
export class PostCard {
|
||||
@Field({
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
})
|
||||
content: string;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
|
||||
type: FieldType.FULL_NAME,
|
||||
label: 'Recipient name',
|
||||
icon: 'IconUser',
|
||||
})
|
||||
recipientName: FullNameField;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
|
||||
type: FieldType.ADDRESS,
|
||||
label: 'Recipient address',
|
||||
icon: 'IconHome',
|
||||
})
|
||||
recipientAddress: AddressField;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
|
||||
type: FieldType.SELECT,
|
||||
label: 'Status',
|
||||
icon: 'IconSend',
|
||||
defaultValue: `'${PostCardStatus.DRAFT}'`,
|
||||
options: [
|
||||
{ value: PostCardStatus.DRAFT, label: 'Draft', position: 0, color: 'gray' },
|
||||
{ value: PostCardStatus.SENT, label: 'Sent', position: 1, color: 'orange' },
|
||||
{ value: PostCardStatus.DELIVERED, label: 'Delivered', position: 2, color: 'green' },
|
||||
{ value: PostCardStatus.RETURNED, label: 'Returned', position: 3, color: 'orange' },
|
||||
],
|
||||
})
|
||||
status: PostCardStatus;
|
||||
|
||||
@Relation({
|
||||
universalIdentifier: 'c9e2b4f4-b9ad-4427-9b42-9971b785edfe',
|
||||
type: RelationType.ONE_TO_MANY,
|
||||
label: 'Notes',
|
||||
icon: 'IconComment',
|
||||
inverseSideTargetUniversalIdentifier: STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.note,
|
||||
onDelete: OnDeleteAction.CASCADE,
|
||||
})
|
||||
notes: Note[];
|
||||
|
||||
@Field({
|
||||
universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
|
||||
type: FieldType.DATE_TIME,
|
||||
label: 'Delivered at',
|
||||
icon: 'IconCheck',
|
||||
isNullable: true,
|
||||
defaultValue: null,
|
||||
})
|
||||
deliveredAt?: Date;
|
||||
}
|
||||
fields: [
|
||||
{
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
name: 'content',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
|
||||
name: 'recipientName',
|
||||
type: FieldType.FULL_NAME,
|
||||
label: 'Recipient name',
|
||||
icon: 'IconUser',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
|
||||
name: 'recipientAddress',
|
||||
type: FieldType.ADDRESS,
|
||||
label: 'Recipient address',
|
||||
icon: 'IconHome',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
|
||||
name: 'status',
|
||||
type: FieldType.SELECT,
|
||||
label: 'Status',
|
||||
icon: 'IconSend',
|
||||
defaultValue: `'${PostCardStatus.DRAFT}'`,
|
||||
options: [
|
||||
{ value: PostCardStatus.DRAFT, label: 'Draft', position: 0, color: 'gray' },
|
||||
{ value: PostCardStatus.SENT, label: 'Sent', position: 1, color: 'orange' },
|
||||
{ value: PostCardStatus.DELIVERED, label: 'Delivered', position: 2, color: 'green' },
|
||||
{ value: PostCardStatus.RETURNED, label: 'Returned', position: 3, color: 'orange' },
|
||||
],
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
|
||||
name: 'deliveredAt',
|
||||
type: FieldType.DATE_TIME,
|
||||
label: 'Delivered at',
|
||||
icon: 'IconCheck',
|
||||
isNullable: true,
|
||||
defaultValue: null,
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
Key points:
|
||||
主要ポイント：
|
||||
|
||||
* The `@Object` decorator defines the object identity and labels used across the workspace; its `universalIdentifier` must be unique and stable across deployments.
|
||||
* Each `@Field` decorator defines a field on the object with a type, label, and its own stable `universalIdentifier`.
|
||||
* `@Relation` wires this object to other objects (standard or custom) and controls cascade behavior with `onDelete`.
|
||||
* You can scaffold new objects using `yarn create-entity`, which guides you through naming, fields, and relationships, then generates object files similar to the `postCard` example.
|
||||
* 組み込み検証と優れた IDE サポートのために `defineObject()` を使用します。
|
||||
* `universalIdentifier` は、デプロイをまたいで一意かつ安定している必要があります。
|
||||
* 各フィールドには、`name`、`type`、`label`、および自身の安定した `universalIdentifier` が必要です。
|
||||
* `fields` 配列は任意です。カスタムフィールドなしでオブジェクトを定義できます。
|
||||
* `yarn app:create-entity` を使用すれば、新しいオブジェクトをスキャフォルドできます。名前、フィールド、リレーションシップの設定がガイドされます。
|
||||
|
||||
### Application config (application.config.ts)
|
||||
<Note>
|
||||
**ベースフィールドは自動作成されます。** カスタムオブジェクトを定義すると、Twenty は `name`、`createdAt`、`updatedAt`、`createdBy`、`position`、`deletedAt` などの標準フィールドを自動的に追加します。 これらを `fields` 配列で定義する必要はありません。カスタムフィールドのみを追加してください。
|
||||
</Note>
|
||||
|
||||
Every app has a single `application.config.ts` file that describes:
|
||||
<Accordion title="代替: デコレーター ベースの構文">
|
||||
TypeScript のデコレーターを使ってオブジェクトを定義することもできます。 この方法では、`@Object`、`@Field`、`@Relation` デコレーターを用いたクラスベースの構文を使用します：
|
||||
|
||||
* **Who the app is**: identifiers, display name, and description.
|
||||
* **How its functions run**: which role they use for permissions.
|
||||
* **(Optional) variables**: key–value pairs exposed to your functions as environment variables.
|
||||
```typescript
|
||||
import {
|
||||
type AddressField,
|
||||
Field,
|
||||
FieldType,
|
||||
type FullNameField,
|
||||
Object,
|
||||
OnDeleteAction,
|
||||
Relation,
|
||||
RelationType,
|
||||
STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
|
||||
} from 'twenty-sdk';
|
||||
import { type Note } from '../../generated';
|
||||
|
||||
When you scaffold a new app, you start with a minimal config:
|
||||
@Object({
|
||||
universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
|
||||
nameSingular: 'postCard',
|
||||
namePlural: 'postCards',
|
||||
labelSingular: 'Post card',
|
||||
labelPlural: 'Post cards',
|
||||
description: 'A post card object',
|
||||
icon: 'IconMail',
|
||||
})
|
||||
export class PostCard {
|
||||
@Field({
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
})
|
||||
content: string;
|
||||
|
||||
@Relation({
|
||||
universalIdentifier: 'c9e2b4f4-b9ad-4427-9b42-9971b785edfe',
|
||||
type: RelationType.ONE_TO_MANY,
|
||||
label: 'Notes',
|
||||
icon: 'IconComment',
|
||||
inverseSideTargetUniversalIdentifier: STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.note,
|
||||
onDelete: OnDeleteAction.CASCADE,
|
||||
})
|
||||
notes: Note[];
|
||||
}
|
||||
```
|
||||
|
||||
注記: デコレーター方式では、TypeScript 設定で `experimentalDecorators` が必要です。
|
||||
</Accordion>
|
||||
|
||||
### アプリケーション設定（application.config.ts）
|
||||
|
||||
すべてのアプリには、次の内容を記述する単一の `application.config.ts` ファイルがあります：
|
||||
|
||||
* **アプリの概要**: 識別子、表示名、説明。
|
||||
* **関数の実行方法**: 権限に使用するロール。
|
||||
* **（任意）変数**: 関数に環境変数として公開されるキーと値のペア。
|
||||
|
||||
アプリケーション設定を定義するには `defineApp()` を使用します：
|
||||
|
||||
```typescript
|
||||
import { type ApplicationConfig } from 'twenty-sdk';
|
||||
// src/app/application.config.ts
|
||||
import { defineApp } from 'twenty-sdk';
|
||||
import { DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
|
||||
|
||||
const config: ApplicationConfig = {
|
||||
universalIdentifier: '<generated-app-uuid>',
|
||||
export default defineApp({
|
||||
universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
|
||||
displayName: 'My Twenty App',
|
||||
description: 'My first Twenty app',
|
||||
functionRoleUniversalIdentifier: '<generated-role-uuid>',
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
|
||||
You can gradually extend this file as your app grows. For example, you can add an icon and application-scoped variables:
|
||||
|
||||
```typescript
|
||||
import { type ApplicationConfig } from 'twenty-sdk';
|
||||
|
||||
const config: ApplicationConfig = {
|
||||
universalIdentifier: '<your-app-uuid>',
|
||||
displayName: 'My App',
|
||||
description: 'What your app does',
|
||||
icon: 'IconWorld', // Choose an icon by name
|
||||
icon: 'IconWorld',
|
||||
applicationVariables: {
|
||||
DEFAULT_RECIPIENT_NAME: {
|
||||
universalIdentifier: '<uuid>',
|
||||
description: 'Default recipient used by functions',
|
||||
universalIdentifier: '19e94e59-d4fe-4251-8981-b96d0a9f74de',
|
||||
description: 'Default recipient name for postcards',
|
||||
value: 'Jane Doe',
|
||||
isSecret: false,
|
||||
},
|
||||
},
|
||||
functionRoleUniversalIdentifier: '<your-role-uuid>',
|
||||
};
|
||||
|
||||
export default config;
|
||||
functionRoleUniversalIdentifier: DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
});
|
||||
```
|
||||
|
||||
Notes:
|
||||
注記：
|
||||
|
||||
* `universalIdentifier` fields are deterministic IDs you own; generate them once and keep them stable across syncs.
|
||||
* `applicationVariables` become environment variables for your functions (for example, `DEFAULT_RECIPIENT_NAME` is available as `process.env.DEFAULT_RECIPIENT_NAME`).
|
||||
* `functionRoleUniversalIdentifier` must match the role you define in `role.config.ts` (see below).
|
||||
* `universalIdentifier` フィールドは、あなたが管理する決定的な ID です。一度生成し、同期をまたいで安定したままにしてください。
|
||||
* `applicationVariables` は関数の環境変数になります（例：`DEFAULT_RECIPIENT_NAME` は `process.env.DEFAULT_RECIPIENT_NAME` として利用可能）。
|
||||
* `functionRoleUniversalIdentifier` は、`*.role.ts` ファイルで定義するロールと一致している必要があります（下記参照）。
|
||||
|
||||
#### Roles and permissions
|
||||
#### ロールと権限
|
||||
|
||||
Applications can define roles that encapsulate permissions on your workspace’s objects and actions. The field `functionRoleUniversalIdentifier` in `application.config.ts` designates the default role used by your app’s serverless functions.
|
||||
アプリケーションは、ワークスペース内のオブジェクトやアクションに対する権限をカプセル化するロールを定義できます。 `application.config.ts` の `functionRoleUniversalIdentifier` フィールドは、アプリのサーバーレス関数で使用されるデフォルトのロールを指定します。
|
||||
|
||||
* The runtime API key injected as `TWENTY_API_KEY` is derived from this default function role.
|
||||
* The typed client will be restricted to the permissions granted to that role.
|
||||
* Follow least‑privilege: create a dedicated role with only the permissions your functions need, then reference its universal identifier.
|
||||
* `TWENTY_API_KEY` として注入される実行時の API キーは、このデフォルトの関数ロールから派生します。
|
||||
* 型付きクライアントの権限は、そのロールに付与された権限に制限されます。
|
||||
* 最小権限の原則に従い、関数に必要な権限のみに限定した専用ロールを作成し、そのユニバーサル識別子を参照してください。
|
||||
|
||||
##### Default function role (role.config.ts)
|
||||
##### デフォルトの関数ロール（\*.role.ts）
|
||||
|
||||
When you scaffold a new app, the CLI also creates `src/role.config.ts`. This file exports the default role your serverless functions will use at runtime:
|
||||
新しいアプリをスキャフォルドすると、CLI はデフォルトのロールファイルも作成します。 組み込み検証付きでロールを定義するには `defineRole()` を使用します：
|
||||
|
||||
```typescript
|
||||
import { PermissionFlag, type RoleConfig } from 'twenty-sdk';
|
||||
// src/app/default-function.role.ts
|
||||
import { defineRole, PermissionFlag } from 'twenty-sdk';
|
||||
|
||||
export const functionRole: RoleConfig = {
|
||||
universalIdentifier: '<generated-role-uuid>',
|
||||
label: 'My Twenty App default function role',
|
||||
description: 'My Twenty App default function role',
|
||||
canReadAllObjectRecords: true,
|
||||
canUpdateAllObjectRecords: true,
|
||||
canSoftDeleteAllObjectRecords: true,
|
||||
canDestroyAllObjectRecords: false,
|
||||
};
|
||||
```
|
||||
export const DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER =
|
||||
'b648f87b-1d26-4961-b974-0908fd991061';
|
||||
|
||||
The `universalIdentifier` of this role is automatically wired into `application.config.ts` as `functionRoleUniversalIdentifier`. In other words:
|
||||
|
||||
* **role.config.ts** defines what the default function role can do.
|
||||
* **application.config.ts** points to that role so your functions inherit its permissions.
|
||||
|
||||
As you move beyond the initial scaffold, you should tighten this role and make it explicit about what it can access. A more production-ready role might look closer to:
|
||||
|
||||
```typescript
|
||||
import { PermissionFlag, type RoleConfig } from 'twenty-sdk';
|
||||
|
||||
export const functionRole: RoleConfig = {
|
||||
universalIdentifier: '<your-role-uuid>',
|
||||
export default defineRole({
|
||||
universalIdentifier: DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
label: 'Default function role',
|
||||
description: 'Default role for function Twenty client',
|
||||
canReadAllObjectRecords: false,
|
||||
@@ -363,41 +445,41 @@ export const functionRole: RoleConfig = {
|
||||
canUpdateFieldValue: false,
|
||||
},
|
||||
],
|
||||
permissionFlags: ['APPLICATIONS'],
|
||||
};
|
||||
permissionFlags: [PermissionFlag.APPLICATIONS],
|
||||
});
|
||||
```
|
||||
|
||||
Notes:
|
||||
このロールの `universalIdentifier` は、`application.config.ts` で `functionRoleUniversalIdentifier` として参照されます。 言い換えると：
|
||||
|
||||
* Start from the scaffolded role, then progressively restrict it following least‑privilege.
|
||||
* Replace the `objectPermissions` and `fieldPermissions` with the objects/fields your functions need.
|
||||
* `permissionFlags` control access to platform-level capabilities. Keep them minimal; add only what you need.
|
||||
* See a working example in the Hello World app: [`packages/twenty-apps/hello-world/src/roles/function-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts).
|
||||
* **\*.role.ts** は、デフォルトの関数ロールで可能な操作を定義します。
|
||||
* **application.config.ts** でそのロールを指定することで、関数はその権限を継承します。
|
||||
|
||||
### Serverless function config and entrypoint
|
||||
注記：
|
||||
|
||||
Each function exports a main handler and a config describing its triggers. You can mix multiple trigger types.
|
||||
* スキャフォルドされたロールから開始し、最小権限の原則に従って段階的に制限してください。
|
||||
* `objectPermissions` と `fieldPermissions` を、関数に必要なオブジェクト／フィールドに置き換えてください。
|
||||
* `permissionFlags` はプラットフォームレベルの機能へのアクセスを制御します。 最小限に保ち、必要なものだけを追加してください。
|
||||
* 動作例は Hello World アプリにあります: [packages/twenty-apps/hello-world/src/roles/function-role.ts](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts)。
|
||||
|
||||
### サーバーレス関数の設定とエントリポイント
|
||||
|
||||
各関数ファイルは、ハンドラーと任意のトリガーを含む設定を `defineFunction()` でエクスポートします。 自動検出のために `*.function.ts` のファイルサフィックスを使用します。
|
||||
|
||||
```typescript
|
||||
// src/actions/create-new-post-card.ts
|
||||
import type {
|
||||
FunctionConfig,
|
||||
DatabaseEventPayload,
|
||||
ObjectRecordCreateEvent,
|
||||
CronPayload,
|
||||
} from 'twenty-sdk';
|
||||
import Twenty, { type Person } from '../generated';
|
||||
// src/app/createPostCard.function.ts
|
||||
import { defineFunction } from 'twenty-sdk';
|
||||
import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
|
||||
import Twenty, { type Person } from '../../generated';
|
||||
|
||||
// main handler can accept parameters from route, cron, or database events
|
||||
export const main = async (
|
||||
const handler = async (
|
||||
params:
|
||||
| { name?: string }
|
||||
| RoutePayload
|
||||
| DatabaseEventPayload<ObjectRecordCreateEvent<Person>>
|
||||
| CronPayload,
|
||||
) => {
|
||||
const client = new Twenty(); // generated typed client
|
||||
const name = 'name' in params
|
||||
? params.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
|
||||
const name = 'name' in params.queryStringParameters
|
||||
? params.queryStringParameters.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
|
||||
: 'Hello world';
|
||||
|
||||
const result = await client.mutation({
|
||||
@@ -410,14 +492,15 @@ export const main = async (
|
||||
return result;
|
||||
};
|
||||
|
||||
export const config: FunctionConfig = {
|
||||
universalIdentifier: '<function-uuid>',
|
||||
export default defineFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'create-new-post-card',
|
||||
timeoutSeconds: 2,
|
||||
handler,
|
||||
triggers: [
|
||||
// Public HTTP route trigger '/s/post-card/create'
|
||||
{
|
||||
universalIdentifier: '<route-trigger-uuid>',
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/post-card/create',
|
||||
httpMethod: 'GET',
|
||||
@@ -425,39 +508,137 @@ export const config: FunctionConfig = {
|
||||
},
|
||||
// Cron trigger (CRON pattern)
|
||||
{
|
||||
universalIdentifier: '<cron-trigger-uuid>',
|
||||
universalIdentifier: 'dd802808-0695-49e1-98c9-d5c9e2704ce2',
|
||||
type: 'cron',
|
||||
pattern: '0 0 1 1 *',
|
||||
},
|
||||
// Database event trigger
|
||||
{
|
||||
universalIdentifier: '<db-trigger-uuid>',
|
||||
universalIdentifier: '203f1df3-4a82-4d06-a001-b8cf22a31156',
|
||||
type: 'databaseEvent',
|
||||
eventName: 'person.created',
|
||||
eventName: 'person.updated',
|
||||
updatedFields: ['name'],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
一般的なトリガーの種類：
|
||||
|
||||
* **route**: `/s/` エンドポイント配下で、HTTP パスとメソッドで関数を公開します：
|
||||
|
||||
> 例: `path: '/post-card/create',` -> `<APP_URL>/s/post-card/create` で呼び出し
|
||||
|
||||
* **cron**: CRON 式を使用してスケジュールで関数を実行します。
|
||||
* **databaseEvent**: ワークスペースのオブジェクトのライフサイクルイベントで実行されます。 イベント操作が `updated` の場合、監視する特定のフィールドを `updatedFields` 配列で指定できます。 未定義または空のままにすると、任意の更新でも関数がトリガーされます。
|
||||
|
||||
> 例: `person.updated`
|
||||
|
||||
注記：
|
||||
|
||||
* `triggers` 配列は任意です。 トリガーのない関数は、他の関数から呼び出されるユーティリティ関数として使用できます。
|
||||
* 1 つの関数で複数のトリガータイプを組み合わせることができます。
|
||||
|
||||
### ルートトリガーのペイロード
|
||||
|
||||
<Warning>
|
||||
**破壊的変更（v1.16、2026年1月）：** ルートトリガーのペイロード形式が変更されました。 v1.16 以前は、クエリパラメーター、パスパラメーター、および body がペイロードとして直接送信されていました。 v1.16 以降は、それらは構造化された `RoutePayload` オブジェクト内にネストされます。
|
||||
|
||||
**v1.16 以前:**
|
||||
|
||||
```typescript
|
||||
const handler = async (params) => {
|
||||
const { param1, param2 } = params; // Direct access
|
||||
};
|
||||
```
|
||||
|
||||
**v1.16 以降:**
|
||||
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const { param1, param2 } = event.body; // Access via .body
|
||||
const { queryParam } = event.queryStringParameters;
|
||||
const { id } = event.pathParameters;
|
||||
};
|
||||
```
|
||||
|
||||
**既存の関数を移行するには：** ハンドラーで、params オブジェクトから直接ではなく、`event.body`、`event.queryStringParameters`、または `event.pathParameters` から分割代入するように更新してください。
|
||||
</Warning>
|
||||
|
||||
ルートトリガーが関数を呼び出すと、AWS HTTP API v2 形式に準拠した `RoutePayload` オブジェクトを受け取ります。 型を `twenty-sdk` からインポートします:
|
||||
|
||||
```typescript
|
||||
import { defineFunction, type RoutePayload } from 'twenty-sdk';
|
||||
|
||||
const handler = async (event: RoutePayload) => {
|
||||
// Access request data
|
||||
const { headers, queryStringParameters, pathParameters, body } = event;
|
||||
|
||||
// HTTP method and path are available in requestContext
|
||||
const { method, path } = event.requestContext.http;
|
||||
|
||||
return { message: 'Success' };
|
||||
};
|
||||
```
|
||||
|
||||
Common trigger types:
|
||||
`RoutePayload` 型は次の構造になっています:
|
||||
|
||||
* route: Exposes your function on an HTTP path and method **under the `/s/` endpoint**:
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ---------------------------- | ------------------------------------- | ---------------------------------------------------------- |
|
||||
| `headers` | `Record<string, string \| undefined>` | HTTP ヘッダー (`forwardedRequestHeaders` に列挙されたもののみ) |
|
||||
| `queryStringParameters` | `Record<string, string \| undefined>` | クエリ文字列パラメーター (複数の値はカンマで連結) |
|
||||
| `pathParameters` | `Record<string, string \| undefined>` | ルートパターンから抽出されたパスパラメーター (例: `/users/:id` → `{ id: '123' }`) |
|
||||
| `本文` | `object \| null` | 解析済みのリクエストボディ (JSON) |
|
||||
| `isBase64Encoded` | `ブール型` | body が base64 エンコードされているかどうか |
|
||||
| `requestContext.http.method` | `string` | HTTP メソッド (GET, POST, PUT, PATCH, DELETE) |
|
||||
| `requestContext.http.path` | `string` | 生のリクエストパス |
|
||||
|
||||
> e.g. `path: '/post-card/create',` -> call on `<APP_URL>/s/post-card/create`
|
||||
### HTTP ヘッダーの転送
|
||||
|
||||
* cron: Runs your function on a schedule using a CRON expression.
|
||||
* databaseEvent: Runs on workspace object lifecycle events
|
||||
デフォルトでは、セキュリティ上の理由から、受信リクエストの HTTP ヘッダーはサーバーレス関数に**渡されません**。 特定のヘッダーにアクセスするには、`forwardedRequestHeaders` 配列に明示的に列挙してください:
|
||||
|
||||
> e.g. `person.created`
|
||||
```typescript
|
||||
export default defineFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'webhook-handler',
|
||||
handler,
|
||||
triggers: [
|
||||
{
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/webhook',
|
||||
httpMethod: 'POST',
|
||||
isAuthRequired: false,
|
||||
forwardedRequestHeaders: ['x-webhook-signature', 'content-type'],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
You can create new functions in two ways:
|
||||
ハンドラー内で、これらのヘッダーにアクセスできます:
|
||||
|
||||
* **Scaffolded**: Run `yarn create-entity --path <custom-path>` and choose the option to add a new function. This generates a starter file under `<custom-path>` with a `main` handler and a `config` block similar to the example above.
|
||||
* **Manual**: Create a new file and export `main` and `config` yourself, following the same pattern.
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const signature = event.headers['x-webhook-signature'];
|
||||
const contentType = event.headers['content-type'];
|
||||
|
||||
### Generated typed client
|
||||
// Validate webhook signature...
|
||||
return { received: true };
|
||||
};
|
||||
```
|
||||
|
||||
Run yarn generate to create a local typed client in generated/ based on your workspace schema. Use it in your functions:
|
||||
<Note>
|
||||
ヘッダー名は小文字に正規化されます。 小文字のキーを使用してアクセスしてください (例: `event.headers['content-type']`)。
|
||||
</Note>
|
||||
|
||||
新しい関数は次の 2 通りで作成できます：
|
||||
|
||||
* **スキャフォルド**: `yarn app:create-entity` を実行し、新しい関数を追加するオプションを選択します。 これにより、ハンドラーと設定を備えたスターターファイルが生成されます。
|
||||
* **手動**: 新しい `*.function.ts` ファイルを作成し、同じパターンで `defineFunction()` を使用します。
|
||||
|
||||
### 生成された型付きクライアント
|
||||
|
||||
ワークスペースのスキーマに基づき、generated/ にローカルの型付きクライアントを作成するには yarn app:generate を実行します。 関数内で使用します：
|
||||
|
||||
```typescript
|
||||
import Twenty from './generated';
|
||||
@@ -466,34 +647,34 @@ const client = new Twenty();
|
||||
const { me } = await client.query({ me: { id: true, displayName: true } });
|
||||
```
|
||||
|
||||
The client is re-generated by `yarn generate`. Re-run after changing your objects and `yarn sync` or when onboarding to a new workspace.
|
||||
このクライアントは `yarn app:generate` によって再生成されます。 オブジェクトを変更して `yarn app:sync` した後、または新しいワークスペースにオンボードする際には再実行してください。
|
||||
|
||||
#### Runtime credentials in serverless functions
|
||||
#### サーバーレス関数における実行時認証情報
|
||||
|
||||
When your function runs on Twenty, the platform injects credentials as environment variables before your code executes:
|
||||
関数が Twenty 上で実行されると、コードが実行される前に、プラットフォームが認証情報を環境変数として注入します：
|
||||
|
||||
* `TWENTY_API_URL`: Base URL of the Twenty API your app targets.
|
||||
* `TWENTY_API_KEY`: Short‑lived key scoped to your application’s default function role.
|
||||
* `TWENTY_API_URL`: アプリが対象とする Twenty API のベース URL。
|
||||
* `TWENTY_API_KEY`: アプリケーションのデフォルト関数ロールにスコープされた短命のキー。
|
||||
|
||||
Notes:
|
||||
ノート:
|
||||
|
||||
* You do not need to pass URL or API key to the generated client. It reads `TWENTY_API_URL` and `TWENTY_API_KEY` from process.env at runtime.
|
||||
* The API key’s permissions are determined by the role referenced in your `application.config.ts` via `functionRoleUniversalIdentifier`. This is the default role used by serverless functions of your application.
|
||||
* Applications can define roles to follow least‑privilege. Grant only the permissions your functions need, then point `functionRoleUniversalIdentifier` to that role’s universal identifier.
|
||||
* 生成されたクライアントに URL や API キーを渡す必要はありません。 実行時に process.env から `TWENTY_API_URL` と `TWENTY_API_KEY` を読み取ります。
|
||||
* API キーの権限は、`application.config.ts` で `functionRoleUniversalIdentifier` によって参照されるロールによって決まります。 これは、アプリケーションのサーバーレス関数で使用されるデフォルトのロールです。
|
||||
* アプリケーションは、最小権限の原則に従うロールを定義できます。 関数に必要な権限のみを付与し、`functionRoleUniversalIdentifier` をそのロールのユニバーサル識別子に指定してください。
|
||||
|
||||
### Hello World example
|
||||
### Hello World の例
|
||||
|
||||
Explore a minimal, end-to-end example that demonstrates objects, functions, and multiple triggers [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
|
||||
オブジェクト、関数、複数のトリガーを示す最小のエンドツーエンド例は[こちら](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world)をご覧ください。
|
||||
|
||||
## Manual setup (without the scaffolder)
|
||||
## 手動セットアップ（スキャフォルダーなし）
|
||||
|
||||
While we recommend using `create-twenty-app` for the best getting-started experience, you can also set up a project manually. Do not install the CLI globally. Instead, add `twenty-sdk` as a local dependency and wire scripts in your package.json:
|
||||
最適な導入体験のために `create-twenty-app` の使用を推奨しますが、手動でプロジェクトをセットアップすることもできます。 CLI をグローバルにインストールしないでください。 代わりに、`twenty-sdk` をローカル依存関係として追加し、package.json にスクリプトを設定します：
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn add -D twenty-sdk
|
||||
```
|
||||
|
||||
Then add scripts like these:
|
||||
次のようなスクリプトを追加します：
|
||||
|
||||
```json filename="package.json"
|
||||
{
|
||||
@@ -510,13 +691,13 @@ Then add scripts like these:
|
||||
}
|
||||
```
|
||||
|
||||
Now you can run the same commands via Yarn, e.g. `yarn dev`, `yarn sync`, etc.
|
||||
これで Yarn 経由で同じコマンド（例：`yarn app:dev`、`yarn app:sync` など）を実行できます。
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
* Authentication errors: run `yarn auth` and ensure your API key has the required permissions.
|
||||
* Cannot connect to server: verify the API URL and that the Twenty server is reachable.
|
||||
* Types or client missing/outdated: run `yarn generate` and then `yarn dev`.
|
||||
* Dev mode not syncing: ensure `yarn dev` is running and that changes are not ignored by your environment.
|
||||
* 認証エラー: `yarn auth:login` を実行し、API キーに必要な権限があることを確認してください。
|
||||
* サーバーに接続できません: API URL と、Twenty サーバーに到達可能であることを確認してください。
|
||||
* 型やクライアントがない／古い: `yarn app:generate` を実行してから `yarn app:dev` を実行してください。
|
||||
* 開発モードで同期されない: `yarn app:dev` が実行中であり、環境によって変更が無視されていないことを確認してください。
|
||||
|
||||
Discord Help Channel: https://discord.com/channels/1130383047699738754/1130386664812982322
|
||||
Discord ヘルプチャンネル: https://discord.com/channels/1130383047699738754/1130386664812982322
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
---
|
||||
title: Webhooks
|
||||
description: Receive real-time notifications when events occur in your CRM.
|
||||
description: CRM でイベントが発生したときにリアルタイム通知を受信します。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Webhooks push data to your systems in real-time when events occur in Twenty — no polling required. Use them to keep external systems in sync, trigger automations, or send alerts.
|
||||
ウェブフックは、Twenty でイベントが発生したときに、ポーリング不要でリアルタイムにお使いのシステムへデータをプッシュします。 外部システムとの同期を保ち、オートメーションをトリガーしたり、アラートを送信したりするために使用できます。
|
||||
|
||||
## Create a Webhook
|
||||
## Webhookを作成
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks → Webhooks**
|
||||
2. Click **+ Create webhook**
|
||||
3. Enter your webhook URL (must be publicly accessible)
|
||||
4. Click **Save**
|
||||
1. **Settings → APIs & Webhooks → Webhooks**に移動
|
||||
2. **+ Webhookを作成**をクリック
|
||||
3. ウェブフックの URL を入力（外部からアクセス可能である必要があります）
|
||||
4. **保存**をクリック
|
||||
|
||||
The webhook activates immediately and starts sending notifications.
|
||||
ウェブフックは直ちに有効化され、通知の送信を開始します。
|
||||
|
||||
<VimeoEmbed videoId="928786708" title="Creating a webhook" />
|
||||
<VimeoEmbed videoId="928786708" title="ウェブフックの作成" />
|
||||
|
||||
### Manage Webhooks
|
||||
### Webhookを管理
|
||||
|
||||
**Edit**: Click the webhook → Update URL → **Save**
|
||||
**編集**: ウェブフックをクリック → URL を更新 → **保存**
|
||||
|
||||
**Delete**: Click the webhook → **Delete** → Confirm
|
||||
**削除**: ウェブフックをクリック → **削除** → 確認
|
||||
|
||||
## Events
|
||||
## イベント
|
||||
|
||||
Twenty sends webhooks for these event types:
|
||||
Twenty は次のイベントタイプに対してウェブフックを送信します。
|
||||
|
||||
| Event | Example |
|
||||
| ------------------ | ---------------------------------------------------------- |
|
||||
| **Record Created** | `person.created`, `company.created`, `note.created` |
|
||||
| **Record Updated** | `person.updated`, `company.updated`, `opportunity.updated` |
|
||||
| **Record Deleted** | `person.deleted`, `company.deleted` |
|
||||
| イベント | 例 |
|
||||
| ----------- | ---------------------------------------------------------- |
|
||||
| **レコードの作成** | `person.created`, `company.created`, `note.created` |
|
||||
| **レコードの更新** | `person.updated`, `company.updated`, `opportunity.updated` |
|
||||
| **レコードの削除** | `person.deleted`, `company.deleted` |
|
||||
|
||||
All event types are sent to your webhook URL. Event filtering may be added in future releases.
|
||||
すべてのイベントタイプはウェブフックの URL に送信されます。 イベントのフィルタリングは将来のリリースで追加される可能性があります。
|
||||
|
||||
## Payload Format
|
||||
## ペイロード形式
|
||||
|
||||
Each webhook sends an HTTP POST with a JSON body:
|
||||
各ウェブフックは JSON ボディを含む HTTP POST を送信します。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -55,35 +55,35 @@ Each webhook sends an HTTP POST with a JSON body:
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Description |
|
||||
| ----------- | ------------------------------------------------ |
|
||||
| `event` | What happened (e.g., `person.created`) |
|
||||
| `data` | The full record that was created/updated/deleted |
|
||||
| `timestamp` | When the event occurred (UTC) |
|
||||
| フィールド | 説明 |
|
||||
| --------- | --------------------------- |
|
||||
| `イベント` | 何が起きたか（例: `person.created`） |
|
||||
| `データ` | 作成／更新／削除された完全なレコード |
|
||||
| `タイムスタンプ` | イベントが発生した時刻（UTC） |
|
||||
|
||||
<Note>
|
||||
Respond with a **2xx HTTP status** (200-299) to acknowledge receipt. Non-2xx responses are logged as delivery failures.
|
||||
受信を確認するために、**2xx HTTP ステータス**（200～299）で応答してください。 2xx 以外の応答は配信失敗として記録されます。
|
||||
</Note>
|
||||
|
||||
## Webhook Validation
|
||||
## ウェブフックの検証
|
||||
|
||||
Twenty signs each webhook request for security. Validate signatures to ensure requests are authentic.
|
||||
Twenty はセキュリティのために各ウェブフックリクエストに署名します。 リクエストが正当であることを確認するために署名を検証してください。
|
||||
|
||||
### Headers
|
||||
### ヘッダー
|
||||
|
||||
| Header | Description |
|
||||
| ---------------------------- | --------------------- |
|
||||
| `X-Twenty-Webhook-Signature` | HMAC SHA256 signature |
|
||||
| `X-Twenty-Webhook-Timestamp` | Request timestamp |
|
||||
| ヘッダー | 説明 |
|
||||
| ---------------------------- | -------------- |
|
||||
| `X-Twenty-Webhook-Signature` | HMAC SHA256 署名 |
|
||||
| `X-Twenty-Webhook-Timestamp` | リクエストのタイムスタンプ |
|
||||
|
||||
### Validation Steps
|
||||
### 検証手順
|
||||
|
||||
1. Get the timestamp from `X-Twenty-Webhook-Timestamp`
|
||||
2. Create the string: `{timestamp}:{JSON payload}`
|
||||
3. Compute HMAC SHA256 using your webhook secret
|
||||
4. Compare with `X-Twenty-Webhook-Signature`
|
||||
1. `X-Twenty-Webhook-Timestamp` からタイムスタンプを取得
|
||||
2. 次の文字列を作成: `{timestamp}:{JSON payload}`
|
||||
3. ウェブフックシークレットを使用して HMAC SHA256 を計算
|
||||
4. `X-Twenty-Webhook-Signature` と比較
|
||||
|
||||
### Example (Node.js)
|
||||
### 例（Node.js）
|
||||
|
||||
```javascript
|
||||
const crypto = require("crypto");
|
||||
@@ -101,12 +101,12 @@ const expectedSignature = crypto
|
||||
const isValid = expectedSignature === req.headers["x-twenty-webhook-signature"];
|
||||
```
|
||||
|
||||
## Webhooks vs Workflows
|
||||
## ウェブフック vs ワークフロー
|
||||
|
||||
| Method | Direction | Use Case |
|
||||
| ---------------------------- | --------- | ---------------------------------------------------------- |
|
||||
| **Webhooks** | OUT | Automatically notify external systems of any record change |
|
||||
| **Workflow + HTTP Request** | OUT | Send data out with custom logic (filters, transformations) |
|
||||
| **Workflow Webhook Trigger** | IN | Receive data into Twenty from external systems |
|
||||
| メソッド | 方向 | ユースケース |
|
||||
| ----------------------- | --- | --------------------------- |
|
||||
| **ウェブフック** | OUT | あらゆるレコード変更を外部システムへ自動通知 |
|
||||
| **ワークフロー + HTTP リクエスト** | OUT | カスタムロジック（フィルター、変換）でデータを外部送信 |
|
||||
| **ワークフローのウェブフックトリガー** | IN | 外部システムから Twenty にデータを受信 |
|
||||
|
||||
For receiving external data, see [Set Up a Webhook Trigger](/l/ja/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger).
|
||||
外部データの受信については、[Webhook トリガーを設定](/l/ja/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger)を参照してください。
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: Extend
|
||||
description: Extend Twenty's functionality with APIs, webhooks, and custom apps.
|
||||
title: 拡張
|
||||
description: API、Webhook、カスタムアプリで Twenty の機能を拡張できます。
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/integrations/plug.png" alt="AI" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty is designed to be extensible. Use our APIs, webhooks, and app framework to integrate with your existing tools and build custom functionality.
|
||||
Twenty は拡張性を念頭に設計されています。 当社の API、Webhook、アプリフレームワークを使用して既存のツールと統合し、カスタム機能を構築できます。
|
||||
|
||||
## What You Can Do
|
||||
## 現在できること
|
||||
|
||||
* **APIs**: Query and modify your CRM data programmatically using REST or GraphQL
|
||||
* **Webhooks**: Receive real-time notifications when events occur in Twenty
|
||||
* **Apps**: Build custom applications that extend Twenty's capabilities - Coming soon!
|
||||
* **API**: REST または GraphQL を使用して、プログラムから CRM データをクエリおよび変更します。
|
||||
* **ウェブフック**: Twenty でイベントが発生したときにリアルタイム通知を受信します。
|
||||
* **アプリ**: Twenty の機能を拡張するカスタムアプリケーションを構築 - 近日公開！
|
||||
|
||||
## Getting Started
|
||||
## 始めに
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="APIs" icon="code" href="/l/ja/developers/extend/capabilities/apis">
|
||||
Connect to Twenty programmatically
|
||||
<Card title="API" icon="コード" href="/l/ja/developers/extend/capabilities/apis">
|
||||
プログラムから Twenty に接続
|
||||
</Card>
|
||||
|
||||
<Card title="Webhooks" icon="bell" href="/l/ja/developers/extend/capabilities/webhooks">
|
||||
Get notified of events in real-time
|
||||
<Card title="ウェブフック" icon="bell" href="/l/ja/developers/extend/capabilities/webhooks">
|
||||
イベントの通知をリアルタイムで受け取る
|
||||
</Card>
|
||||
|
||||
<Card title="Apps" icon="puzzle-piece" href="/l/ja/developers/extend/capabilities/apps">
|
||||
Build customizations as code (Alpha)
|
||||
<Card title="アプリ" icon="puzzle-piece" href="/l/ja/developers/extend/capabilities/apps">
|
||||
カスタマイズをコードとして構築（アルファ版）
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Getting Started
|
||||
title: 始めに
|
||||
description: Welcome to Twenty Developer Documentation, your resources for extending, self-hosting, and contributing to Twenty.
|
||||
---
|
||||
|
||||
|
||||
@@ -1,45 +1,46 @@
|
||||
---
|
||||
title: Other methods
|
||||
title: その他の方法
|
||||
---
|
||||
|
||||
<Warning>
|
||||
This document is maintained by the community. It might contain issues.
|
||||
このドキュメントはコミュニティによって管理されています。 問題を含む可能性があります。
|
||||
問題を含む可能性があります。
|
||||
</Warning>
|
||||
|
||||
## Kubernetes via Terraform and Manifests
|
||||
## Terraformとマニフェストを通したKubernetes
|
||||
|
||||
Community-led documentation for Kubernetes deployment is available [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s)
|
||||
Kubernetesデプロイメントに関するコミュニティ主導のドキュメントは[こちら](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s)です。
|
||||
|
||||
### Coolify
|
||||
|
||||
Deploy Twenty on servers using Coolify. (official image on Coolify will be available soon)
|
||||
Coolifyを使用してサーバーにTwentyをデプロイします。 (Coolify上の公式イメージは近日公開予定です) (Coolify上の公式イメージは近日公開予定です)
|
||||
|
||||
[Coolify documentation](https://coolify.io/docs/get-started/introduction)
|
||||
[Coolifyのドキュメント](https://coolify.io/docs/get-started/introduction)
|
||||
|
||||
### EasyPanel
|
||||
|
||||
Deploy Twenty on EasyPanel with the community maintained template below.
|
||||
以下のコミュニティ維持テンプレートを使用して、EasyPanelにTwentyをデプロイします。
|
||||
|
||||
[Deploy on EasyPanel](https://easypanel.io/docs/templates/twenty)
|
||||
以下のコミュニティ維持テンプレートを使用して、EasyPanelにTwentyをデプロイします。
|
||||
|
||||
### Elest.io
|
||||
|
||||
Deploy Twenty on servers with Elest.io using link below.
|
||||
以下のリンクを使用して、Elest.ioにTwentyをサーバー上にデプロイします。
|
||||
|
||||
[Deploy on Elest.io](https://elest.io/open-source/twenty)
|
||||
[Elest.ioにデプロイする](https://elest.io/open-source/twenty)
|
||||
|
||||
### Twenty on Railway
|
||||
### Railway上のTwenty
|
||||
|
||||
Deploy Twenty on Railway with the community maintained template below.
|
||||
以下のコミュニティ維持テンプレートを使用して、RailwayにTwentyをデプロイします。
|
||||
|
||||
[](https://railway.com/deploy/nAL3hA)
|
||||
[](https://railway.com/deploy/nAL3hA)
|
||||
|
||||
### Twenty on Sealos
|
||||
### Sealos上のTwenty
|
||||
|
||||
Deploy Twenty on Sealos with the community maintained template below.
|
||||
以下のコミュニティがメンテナンスしているテンプレートを使用して、SealosにTwentyをデプロイします。
|
||||
|
||||
[](https://sealos.io/products/app-store/twenty)
|
||||
[](https://sealos.io/products/app-store/twenty)
|
||||
|
||||
## Others
|
||||
## その他
|
||||
|
||||
Please feel free to Open a PR to add more Cloud Provider options.
|
||||
もっと多くのクラウドプロバイダーオプションを追加するために、PRを自由に作成してください。
|
||||
|
||||
@@ -1,253 +1,253 @@
|
||||
---
|
||||
title: 1-Click w/ Docker Compose
|
||||
title: 1-クリック w/ Docker Compose
|
||||
---
|
||||
|
||||
<Warning>
|
||||
Docker containers are for production hosting or self-hosting, for the contribution please check the [Local Setup](/l/ja/developers/contribute/capabilities/local-setup).
|
||||
Dockerコンテナは本番ホスティングまたはセルフホスティング用です。貢献するには、[ローカルセットアップ](/l/ja/developers/contribute/capabilities/local-setup)を確認してください。
|
||||
</Warning>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide provides step-by-step instructions to install and configure the Twenty application using Docker Compose. The aim is to make the process straightforward and prevent common pitfalls that could break your setup.
|
||||
このガイドは、Docker Composeを使用してTwentyアプリケーションをインストールおよび構成するためのステップバイステップの手順を提供します。 プロセスを簡単にし、設定を破壊する可能性のある一般的な落とし穴を防止することが目的です。 プロセスを簡単にし、設定を破壊する可能性のある一般的な落とし穴を防止することが目的です。 プロセスを簡単にし、設定を破壊する可能性のある一般的な落とし穴を防止することが目的です。 プロセスを簡単にし、設定を破壊する可能性のある一般的な落とし穴を防止することが目的です。
|
||||
|
||||
**Important:** Only modify settings explicitly mentioned in this guide. Altering other configurations may lead to issues.
|
||||
**重要:** このガイドで明示的に言及されている設定のみを変更してください。 他の構成を変更すると、問題が発生する可能性があります。 他の構成を変更すると、問題が発生する可能性があります。 他の構成を変更すると、問題が発生する可能性があります。
|
||||
|
||||
See docs [Setup Environment Variables](/l/ja/developers/self-host/capabilities/setup) for advanced configuration. All environment variables must be declared in the docker-compose.yml file at the server and / or worker level depending on the variable.
|
||||
高度な構成については、[環境変数の設定](/l/ja/developers/self-host/capabilities/setup)を参照してください。 高度な構成については、[環境変数の設定](https://docs.twenty.com/l/ja/developers/self-hosting/setup)を参照してください。 高度な構成については、[環境変数の設定](https://docs.twenty.com/l/ja/developers/self-hosting/setup)を参照してください。 すべての環境変数は、サーバーレベルまたはワーカーレベルでdocker-compose.ymlファイルに宣言する必要があります。
|
||||
|
||||
## System Requirements
|
||||
## システム要件
|
||||
|
||||
* RAM: Ensure your environment has at least 2GB of RAM. Insufficient memory can cause processes to crash.
|
||||
* Docker & Docker Compose: Make sure both are installed and up-to-date.
|
||||
* RAM: 環境に最低2GBのRAMがあることを確認してください。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。 メモリが不足するとプロセスがクラッシュすることがあります。
|
||||
* Docker & Docker Compose: 両方がインストールされ、最新であることを確認してください。
|
||||
|
||||
## Option 1: One-line script
|
||||
## オプション 1: ワンラインスクリプト
|
||||
|
||||
Install the latest stable version of Twenty with a single command:
|
||||
単一のコマンドで最新版のTwentyをインストールします:
|
||||
|
||||
```bash
|
||||
bash <(curl -sL https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/scripts/install.sh)
|
||||
```
|
||||
|
||||
To install a specific version or branch:
|
||||
特定のバージョンまたはブランチをインストールするには:
|
||||
|
||||
```bash
|
||||
VERSION=vx.y.z BRANCH=branch-name bash <(curl -sL https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/scripts/install.sh)
|
||||
```
|
||||
|
||||
* Replace x.y.z with the desired version number.
|
||||
* Replace branch-name with the name of the branch you want to install.
|
||||
* x.y.zを希望するバージョン番号に置き換えます。
|
||||
* branch-nameをインストールしたいブランチの名前に置き換えます。
|
||||
|
||||
## Option 2: Manual steps
|
||||
## オプション 2: 手動の手順
|
||||
|
||||
Follow these steps for a manual setup.
|
||||
マニュアルセットアップには、これらの手順に従ってください。
|
||||
|
||||
### Step 1: Set Up the Environment File
|
||||
### ステップ 1: 環境ファイルを設定
|
||||
|
||||
1. **Create the .env File**
|
||||
1. **.env ファイルを作成**
|
||||
|
||||
Copy the example environment file to a new .env file in your working directory:
|
||||
例の環境ファイルを作業ディレクトリに新しい.envファイルとしてコピーします:
|
||||
|
||||
```bash
|
||||
curl -o .env https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/.env.example
|
||||
```
|
||||
|
||||
2. **Generate Secret Tokens**
|
||||
2. **シークレットトークンを生成**
|
||||
|
||||
Run the following command to generate a unique random string:
|
||||
ユニークなランダム文字列を生成するには、次のコマンドを実行します:
|
||||
|
||||
```bash
|
||||
openssl rand -base64 32
|
||||
```
|
||||
|
||||
**Important:** Keep this value secret / do not share it.
|
||||
**重要:** この値を秘密にしてください/共有しないでください。
|
||||
|
||||
3. **Update the `.env`**
|
||||
3. **`.env`を更新**
|
||||
|
||||
Replace the placeholder value in your .env file with the generated token:
|
||||
生成したトークンで.envファイルのプレースホルダー値を置き換えます:
|
||||
|
||||
```ini
|
||||
APP_SECRET=first_random_string
|
||||
```
|
||||
|
||||
4. **Set the Postgres Password**
|
||||
4. **Postgres パスワードを設定**
|
||||
|
||||
Update the `PG_DATABASE_PASSWORD` value in the .env file with a strong password without special characters.
|
||||
特殊文字を含まない強力なパスワードで、.envファイルの`PG_DATABASE_PASSWORD`値を更新します。
|
||||
|
||||
```ini
|
||||
PG_DATABASE_PASSWORD=my_strong_password
|
||||
```
|
||||
|
||||
### Step 2: Obtain the Docker Compose File
|
||||
### ステップ 2: Docker Compose ファイルを取得
|
||||
|
||||
Download the `docker-compose.yml` file to your working directory:
|
||||
作業ディレクトリに`docker-compose.yml`ファイルをダウンロードします:
|
||||
|
||||
```bash
|
||||
curl -o docker-compose.yml https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/docker-compose.yml
|
||||
```
|
||||
|
||||
### Step 3: Launch the Application
|
||||
### ステップ 3: アプリケーションを起動
|
||||
|
||||
Start the Docker containers:
|
||||
Dockerコンテナを開始します:
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### Step 4: Access the Application
|
||||
### ステップ 4: アプリケーションにアクセス
|
||||
|
||||
If you host twentyCRM on your own computer, open your browser and navigate to [http://localhost:3000](http://localhost:3000).
|
||||
自分のコンピュータでtwentyCRMをホストしている場合は、ブラウザを開いて[http://localhost:3000](http://localhost:3000)にアクセスします。
|
||||
|
||||
If you host it on a server, check that the server is running and that everything is ok with
|
||||
サーバーでホストしている場合、サーバーが稼働していてすべてが正常であるかを確認してください
|
||||
|
||||
```bash
|
||||
curl http://localhost:3000
|
||||
```
|
||||
|
||||
## Configuration
|
||||
## 構成
|
||||
|
||||
### Expose Twenty to External Access
|
||||
### Twentyを外部アクセスに公開
|
||||
|
||||
By default, Twenty runs on `localhost` at port `3000`. To access it via an external domain or IP address, you need to configure the `SERVER_URL` in your `.env` file.
|
||||
デフォルトでは、Twentyはポート`3000`で`localhost`上で動作します。 外部ドメインまたはIPアドレス経由でアクセスするには、`.env`ファイルで`SERVER_URL`を構成する必要があります。 外部ドメインまたはIPアドレス経由でアクセスするには、`.env`ファイルで`SERVER_URL`を構成する必要があります。
|
||||
|
||||
#### Understanding `SERVER_URL`
|
||||
#### `SERVER_URL`の理解
|
||||
|
||||
* **Protocol:** Use `http` or `https` depending on your setup.
|
||||
* Use `http` if you haven't set up SSL.
|
||||
* Use `https` if you have SSL configured.
|
||||
* **Domain/IP:** This is the domain name or IP address where your application is accessible.
|
||||
* **Port:** Include the port number if you're not using the default ports (`80` for `http`, `443` for `https`).
|
||||
* **プロトコル:** 設定に応じて`http`または`https`を使用します。
|
||||
* SSLを設定していない場合は`http`を使用します。
|
||||
* SSLを構成済みの場合は`https`を使用します。
|
||||
* **ドメイン/IP:** これは、アプリケーションがアクセス可能なドメイン名またはIPアドレスです。
|
||||
* **ポート:** デフォルトのポート（`http`は`80`、`https`は`443`）以外を使用している場合、ポート番号を含めます。
|
||||
|
||||
### SSL Requirements
|
||||
### SSL 要件
|
||||
|
||||
SSL (HTTPS) is required for certain browser features to work properly. While these features might work during local development (as browsers treat localhost differently), a proper SSL setup is needed when hosting Twenty on a regular domain.
|
||||
SSL（HTTPS）は、特定のブラウザ機能が正しく動作するために必要です。 SSL（HTTPS）は、特定のブラウザ機能が正しく動作するために必要です。 SSL（HTTPS）は、特定のブラウザ機能が正しく動作するために必要です。 これらの機能は、ローカル開発中に動作するかもしれませんが（ブラウザがlocalhostを異なる扱い方をするため）、Twentyを通常のドメインでホスティングする場合、適切なSSLの設定が必要です。
|
||||
|
||||
For example, the clipboard API might require a secure context - some features like copy buttons throughout the application might not work without HTTPS enabled.
|
||||
たとえば、クリップボードAPIは安全なコンテキストが必要かもしれません - アプリケーション全体でのコピー ボタンのような機能は、HTTPSが有効でないと動作しないかもしれません。
|
||||
|
||||
We strongly recommend setting up Twenty behind a reverse proxy with SSL termination for optimal security and functionality.
|
||||
最適なセキュリティと機能のために、SSL終了を備えたリバースプロキシの背後にTwentyを設定することを強くお勧めします。
|
||||
|
||||
#### Configuring `SERVER_URL`
|
||||
#### `SERVER_URL`の構成
|
||||
|
||||
1. **Determine Your Access URL**
|
||||
* **Without Reverse Proxy (Direct Access):**
|
||||
1. **アクセスURLを特定する**
|
||||
* **リバースプロキシがない場合（直接アクセス）:**
|
||||
|
||||
If you're accessing the application directly without a reverse proxy:
|
||||
リバースプロキシなしでアプリケーションに直接アクセスする場合:
|
||||
|
||||
```ini
|
||||
SERVER_URL=http://your-domain-or-ip:3000
|
||||
```
|
||||
|
||||
* **With Reverse Proxy (Standard Ports):**
|
||||
* **リバースプロキシを使用する場合（標準ポート）:**
|
||||
|
||||
If you're using a reverse proxy like Nginx or Traefik and have SSL configured:
|
||||
NginxやTraefikのようなリバースプロキシを使用し、SSLを構成している場合:
|
||||
|
||||
```ini
|
||||
SERVER_URL=https://your-domain-or-ip
|
||||
```
|
||||
|
||||
* **With Reverse Proxy (Custom Ports):**
|
||||
* **リバースプロキシを使用する場合（カスタムポート）:**
|
||||
|
||||
If you're using non-standard ports:
|
||||
標準以外のポートを使用している場合:
|
||||
|
||||
```ini
|
||||
SERVER_URL=https://your-domain-or-ip:custom-port
|
||||
```
|
||||
|
||||
2. **Update the `.env` File**
|
||||
2. **.env ファイルを更新**
|
||||
|
||||
Open your `.env` file and update the `SERVER_URL`:
|
||||
.env`ファイルを開き、`SERVER_URL\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\`を更新します:
|
||||
|
||||
```ini
|
||||
SERVER_URL=http(s)://your-domain-or-ip:your-port
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
**例:**
|
||||
|
||||
* Direct access without SSL:
|
||||
* SSLなしの直接アクセス:
|
||||
```ini
|
||||
SERVER_URL=http://123.45.67.89:3000
|
||||
```
|
||||
* Access via domain with SSL:
|
||||
* ドメイン経由でSSLを使用してアクセス:
|
||||
```ini
|
||||
SERVER_URL=https://mytwentyapp.com
|
||||
```
|
||||
|
||||
3. **Restart the Application**
|
||||
3. **アプリケーションを再起動**
|
||||
|
||||
For changes to take effect, restart the Docker containers:
|
||||
変更を反映するために、Dockerコンテナを再起動します:
|
||||
|
||||
```bash
|
||||
docker compose down
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
#### Considerations
|
||||
#### 考慮事項
|
||||
|
||||
* **Reverse Proxy Configuration:**
|
||||
* **リバースプロキシ構成:**
|
||||
|
||||
Ensure your reverse proxy forwards requests to the correct internal port (`3000` by default). Configure SSL termination and any necessary headers.
|
||||
リバースプロキシが正しい内部ポート（デフォルトでは`3000`）にリクエストを転送することを確認してください。 SSL終端と必要なヘッダーを設定します。 SSL終端と必要なヘッダーを設定します。 SSL終端と必要なヘッダーを設定します。
|
||||
|
||||
* **Firewall Settings:**
|
||||
* **ファイアウォール設定:**
|
||||
|
||||
Open necessary ports in your firewall to allow external access.
|
||||
外部アクセスを許可するためにファイアウォールで必要なポートを開けます。
|
||||
|
||||
* **Consistency:**
|
||||
* **一貫性:**
|
||||
|
||||
The `SERVER_URL` must match how users access your application in their browsers.
|
||||
`SERVER_URL`は、ユーザーがブラウザでアプリケーションにアクセスする方法と一致する必要があります。
|
||||
|
||||
#### Persistence
|
||||
#### 永続性
|
||||
|
||||
* **Data Volumes:**
|
||||
* **データボリューム:**
|
||||
|
||||
The Docker Compose configuration uses volumes to persist data for the database and server storage.
|
||||
Docker Compose 構成では、データベースとサーバーストレージのデータを永続化するためにボリュームを使用します。
|
||||
|
||||
* **Stateless Environments:**
|
||||
* **ステートレス環境:**
|
||||
|
||||
If deploying to a stateless environment (e.g., certain cloud services), configure external storage to persist data.
|
||||
ステートレス環境（例: 一部のクラウドサービス）に展開する場合、データを永続化するために外部ストレージを設定します。
|
||||
|
||||
## Backup and Restore
|
||||
## バックアップと復元
|
||||
|
||||
Regular backups protect your CRM data from loss.
|
||||
定期的なバックアップは、CRM データを損失から保護します。
|
||||
|
||||
### Create a Database Backup
|
||||
### データベースのバックアップを作成
|
||||
|
||||
```bash
|
||||
docker exec twenty-postgres pg_dump -U postgres twenty > backup_$(date +%Y%m%d).sql
|
||||
```
|
||||
|
||||
### Automate Daily Backups
|
||||
### 日次バックアップを自動化
|
||||
|
||||
Add to your crontab (`crontab -e`):
|
||||
crontab に追加 (`crontab -e`):
|
||||
|
||||
```bash
|
||||
0 2 * * * docker exec twenty-postgres pg_dump -U postgres twenty > /backups/twenty_$(date +\%Y\%m\%d).sql
|
||||
```
|
||||
|
||||
### Restore from Backup
|
||||
### バックアップから復元
|
||||
|
||||
1. Stop the application:
|
||||
1. アプリケーションを停止します:
|
||||
|
||||
```bash
|
||||
docker compose stop twenty-server twenty-front
|
||||
```
|
||||
|
||||
2. Restore the database:
|
||||
2. データベースを復元します:
|
||||
|
||||
```bash
|
||||
docker exec -i twenty-postgres psql -U postgres twenty < backup_20240115.sql
|
||||
```
|
||||
|
||||
3. Restart services:
|
||||
3. サービスの再起動:
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### Backup Best Practices
|
||||
### バックアップのベストプラクティス
|
||||
|
||||
* **Test restores regularly** — verify backups actually work
|
||||
* **Store backups off-site** — use cloud storage (S3, GCS, etc.)
|
||||
* **Encrypt sensitive data** — protect backups with encryption
|
||||
* **Retain multiple copies** — keep daily, weekly, and monthly backups
|
||||
* **復元を定期的にテスト** — バックアップが実際に機能することを確認
|
||||
* **バックアップをオフサイトに保管** — クラウドストレージ (S3, GCS など) を使用
|
||||
* **機密データを暗号化** — バックアップを暗号化で保護
|
||||
* **複数のコピーを保持** — 日次・週次・月次のバックアップを保持
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
If you encounter any problem, check [Troubleshooting](/l/ja/developers/self-host/capabilities/troubleshooting) for solutions.
|
||||
問題が発生した場合は、[トラブルシューティング](/l/ja/developers/self-host/capabilities/troubleshooting)を確認して解決策を見つけてください。
|
||||
|
||||
@@ -1,146 +1,148 @@
|
||||
---
|
||||
title: Setup
|
||||
title: セットアップ
|
||||
---
|
||||
|
||||
# Configuration Management
|
||||
# 構成管理
|
||||
|
||||
<Warning>
|
||||
**First time installing?** Follow the [Docker Compose installation guide](/l/ja/developers/self-host/capabilities/docker-compose) to get Twenty running, then return here for configuration.
|
||||
**初めてインストールしますか？** [Docker Compose インストールガイド](/l/ja/developers/self-host/capabilities/docker-compose)に従ってTwentyを起動し、その後はここに戻り構成してください。
|
||||
</Warning>
|
||||
|
||||
Twenty offers **two configuration modes** to suit different deployment needs:
|
||||
Twentyは、異なる展開ニーズに合わせて**2つの構成モード**を提供します:
|
||||
|
||||
**Admin panel access:** Only users with admin privileges (`canAccessFullAdminPanel: true`) can access the configuration interface.
|
||||
**管理パネルアクセス:** 管理者権限を持つユーザーだけが (`canAccessFullAdminPanel: true`) 構成インターフェースにアクセスできます。
|
||||
|
||||
## 1. Admin Panel Configuration (Default)
|
||||
## 1. 管理パネル構成（デフォルト）
|
||||
|
||||
```bash
|
||||
IS_CONFIG_VARIABLES_IN_DB_ENABLED=true # default
|
||||
```
|
||||
|
||||
**Most configuration happens through the UI** after installation:
|
||||
**ほとんどの構成は、インストール後にUIを通じて行われます。**
|
||||
|
||||
1. Access your Twenty instance (usually `http://localhost:3000`)
|
||||
2. Go to **Settings / Admin Panel / Configuration Variables**
|
||||
3. Configure integrations, email, storage, and more
|
||||
4. Changes take effect immediately (within 15 seconds for multi-container deployments)
|
||||
1. Twentyインスタンスにアクセスしてください (通常は `http://localhost:3000`)
|
||||
2. **設定 / 管理パネル / 構成変数**に移動
|
||||
3. 統合、メール、ストレージなどを構成します
|
||||
4. 変更はすぐに（マルチコンテナ展開の場合、15秒以内に）効果が出ます。
|
||||
|
||||
<Warning>
|
||||
**Multi-Container Deployments:** When using database configuration (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`), both server and worker containers read from the same database. Admin panel changes affect both automatically, eliminating the need to duplicate environment variables between containers (except for infrastructure variables).
|
||||
**マルチコンテナ展開:** データベース構成を使用する場合 (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`)、サーバーとワーカーコンテナの両方が同じデータベースから読み込みます。 管理パネルの変更は両方に自動的に影響し、コンテナ間で環境変数を重複させる必要がなくなります（インフラストラクチャの変数を除く）。
|
||||
管理パネルの変更は両方に自動的に影響し、コンテナ間で環境変数を重複させる必要がなくなります（インフラストラクチャの変数を除く）。
|
||||
</Warning>
|
||||
|
||||
**What you can configure through the admin panel:**
|
||||
**管理パネルを通じて構成できること:**
|
||||
|
||||
* **Authentication** - Google/Microsoft OAuth, password settings
|
||||
* **Email** - SMTP settings, templates, verification
|
||||
* **Storage** - S3 configuration, local storage paths
|
||||
* **Integrations** - Gmail, Google Calendar, Microsoft services
|
||||
* **Workflow & Rate Limiting** - Execution limits, API throttling
|
||||
* **And much more...**
|
||||
* **認証** - Google/Microsoft OAuth、パスワード設定
|
||||
* **メール** - SMTP設定、テンプレート、検証
|
||||
* **ストレージ** - S3構成、ローカルストレージパス
|
||||
* **統合** - Gmail、Googleカレンダー、Microsoftサービス
|
||||
* **ワークフローとレート制限** - 実行制限、APIスロットリング
|
||||
* **さらに多くのこと...**
|
||||
|
||||
|
||||
|
||||
|
||||
<Warning>
|
||||
Each variable is documented with descriptions in your admin panel at **Settings → Admin Panel → Configuration Variables**.
|
||||
Some infrastructure settings like database connections (`PG_DATABASE_URL`), server URLs (`SERVER_URL`), and app secrets (`APP_SECRET`) can only be configured via `.env` file.
|
||||
各変数は、**設定 → 管理パネル → 構成変数** で説明付きでドキュメント化されています。
|
||||
各変数は、**設定 → 管理パネル → 構成変数** で説明付きでドキュメント化されています。
|
||||
データベース接続 (`PG_DATABASE_URL`)、サーバーURL (`SERVER_URL`)、アプリの秘密キー (`APP_SECRET`) など、一部のインフラ設定は `.env` ファイルを介してのみ構成可能です。
|
||||
|
||||
[Complete technical reference →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
|
||||
[ 完全な技術リファレンス →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
|
||||
</Warning>
|
||||
|
||||
## 2. Environment-Only Configuration
|
||||
## 2. 環境のみの構成
|
||||
|
||||
```bash
|
||||
IS_CONFIG_VARIABLES_IN_DB_ENABLED=false
|
||||
```
|
||||
|
||||
**All configuration managed through `.env` files:**
|
||||
**すべての構成が `.env` ファイルで管理されます:**
|
||||
|
||||
1. Set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` in your `.env` file
|
||||
2. Add all configuration variables to your `.env` file
|
||||
3. Restart containers for changes to take effect
|
||||
4. Admin panel will show current values but cannot modify them
|
||||
1. `.env` ファイル内で `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` を設定
|
||||
2. すべての構成変数を `.env` ファイルに追加
|
||||
3. 変更を有効にするためにコンテナを再起動してください
|
||||
4. 管理パネルは現在の値を表示しますが、修正はできません
|
||||
|
||||
## Multi-Workspace Mode
|
||||
## マルチワークスペースモード
|
||||
|
||||
By default, Twenty runs in **single-workspace mode** — ideal for most self-hosted deployments where you need one CRM instance for your organization.
|
||||
デフォルトでは、Twenty は**シングルワークスペースモード**で動作します—組織向けに 1 つの CRM インスタンスが必要な多くのセルフホスト型デプロイメントに最適です。
|
||||
|
||||
### Single-Workspace Mode (Default)
|
||||
### シングルワークスペースモード（デフォルト）
|
||||
|
||||
```bash
|
||||
IS_MULTIWORKSPACE_ENABLED=false # default
|
||||
```
|
||||
|
||||
* One workspace per Twenty instance
|
||||
* First user automatically becomes admin with full privileges (`canImpersonate` and `canAccessFullAdminPanel`)
|
||||
* New signups are disabled after the first workspace is created
|
||||
* Simple URL structure: `https://your-domain.com`
|
||||
* Twenty の各インスタンスにつき 1 つのワークスペース
|
||||
* 最初のユーザーは自動的にフル権限の管理者になります（`canImpersonate` と `canAccessFullAdminPanel`）
|
||||
* 最初のワークスペース作成後は新規サインアップが無効になります
|
||||
* シンプルな URL 構造: `https://your-domain.com`
|
||||
|
||||
### Enabling Multi-Workspace Mode
|
||||
### マルチワークスペースモードの有効化
|
||||
|
||||
```bash
|
||||
IS_MULTIWORKSPACE_ENABLED=true
|
||||
DEFAULT_SUBDOMAIN=app # default value
|
||||
```
|
||||
|
||||
Enable multi-workspace mode for SaaS-like deployments where multiple independent teams need their own workspaces on the same Twenty instance.
|
||||
同一の Twenty インスタンス上で複数の独立したチームがそれぞれのワークスペースを必要とする、SaaS のようなデプロイメント向けにマルチワークスペースモードを有効にします。
|
||||
|
||||
**Key differences from single-workspace mode:**
|
||||
**シングルワークスペースモードとの主な違い:**
|
||||
|
||||
* Multiple workspaces can be created on the same instance
|
||||
* Each workspace gets its own subdomain (e.g., `sales.your-domain.com`, `marketing.your-domain.com`)
|
||||
* Users sign up and log in at `{DEFAULT_SUBDOMAIN}.your-domain.com` (e.g., `app.your-domain.com`)
|
||||
* No automatic admin privileges — first user in each workspace is a regular user
|
||||
* Workspace-specific settings like subdomain and custom domain become available in workspace settings
|
||||
* 同一インスタンス上に複数のワークスペースを作成できます
|
||||
* 各ワークスペースに専用のサブドメインが割り当てられます（例: `sales.your-domain.com`、`marketing.your-domain.com`）
|
||||
* ユーザーは `{DEFAULT_SUBDOMAIN}.your-domain.com` でサインアップおよびログインします（例: `app.your-domain.com`）
|
||||
* 管理者権限は自動付与されません—各ワークスペースの最初のユーザーは一般ユーザーです
|
||||
* サブドメインやカスタムドメインなどのワークスペース固有の設定がワークスペース設定で利用可能になります
|
||||
|
||||
<Warning>
|
||||
**Environment-only setting:** `IS_MULTIWORKSPACE_ENABLED` can only be configured via `.env` file and requires a restart. It cannot be changed through the admin panel.
|
||||
**環境専用の設定:** `IS_MULTIWORKSPACE_ENABLED` は `.env` ファイルでのみ設定でき、再起動が必要です。 管理パネルからは変更できません。
|
||||
</Warning>
|
||||
|
||||
### DNS Configuration for Multi-Workspace
|
||||
### マルチワークスペース向けの DNS 構成
|
||||
|
||||
When using multi-workspace mode, configure your DNS with a wildcard record to allow dynamic subdomain creation:
|
||||
マルチワークスペースモードを使用する場合、動的なサブドメイン作成を可能にするために、ワイルドカードレコードで DNS を構成してください:
|
||||
|
||||
```
|
||||
*.your-domain.com -> your-server-ip
|
||||
```
|
||||
|
||||
This enables automatic subdomain routing for new workspaces without manual DNS configuration.
|
||||
これにより、手動の DNS 構成なしで新規ワークスペースへのサブドメインルーティングが自動化されます。
|
||||
|
||||
### Restricting Workspace Creation
|
||||
### ワークスペース作成の制限
|
||||
|
||||
In multi-workspace mode, you may want to limit who can create new workspaces:
|
||||
マルチワークスペースモードでは、新しいワークスペースを作成できるユーザーを制限したい場合があります:
|
||||
|
||||
```bash
|
||||
IS_WORKSPACE_CREATION_LIMITED_TO_SERVER_ADMINS=true
|
||||
```
|
||||
|
||||
When enabled, only users with `canAccessFullAdminPanel` can create additional workspaces. Users can still create their first workspace during initial signup.
|
||||
有効にすると、`canAccessFullAdminPanel` を持つユーザーのみが追加のワークスペースを作成できます。 初回サインアップ時には、ユーザーは引き続き最初のワークスペースを作成できます。
|
||||
|
||||
## Gmail & Google Calendar Integration
|
||||
## Gmail & Googleカレンダー統合
|
||||
|
||||
### Create Google Cloud Project
|
||||
### Google Cloudプロジェクトを作成
|
||||
|
||||
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. Create a new project or select existing one
|
||||
3. Enable these APIs:
|
||||
1. [Google Cloud Console](https://console.cloud.google.com/) にアクセス
|
||||
2. 新しいプロジェクトを作成するか既存のプロジェクトを選択
|
||||
3. 以下のAPIを有効にします:
|
||||
|
||||
* [Gmail API](https://console.cloud.google.com/apis/library/gmail.googleapis.com)
|
||||
* [Google Calendar API](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com)
|
||||
* [GoogleカレンダーAPI](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com)
|
||||
* [People API](https://console.cloud.google.com/apis/library/people.googleapis.com)
|
||||
|
||||
### Configure OAuth
|
||||
### OAuthの構成
|
||||
|
||||
1. Go to [Credentials](https://console.cloud.google.com/apis/credentials)
|
||||
2. Create OAuth 2.0 Client ID
|
||||
3. Add these redirect URIs:
|
||||
* `https://{your-domain}/auth/google/redirect` (for SSO)
|
||||
* `https://{your-domain}/auth/google-apis/get-access-token` (for integrations)
|
||||
1. [資格情報](https://console.cloud.google.com/apis/credentials)にアクセス
|
||||
2. OAuth 2.0 クライアントIDを作成
|
||||
3. 次のリダイレクトURIを追加:
|
||||
* `https://{your-domain}/auth/google/redirect` (SSO用)
|
||||
* `https://{your-domain}/auth/google-apis/get-access-token` (統合用)
|
||||
|
||||
### Configure in Twenty
|
||||
### Twentyで構成
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Google Auth** section
|
||||
3. Set these variables:
|
||||
1. **設定 → 管理パネル → 構成変数** に移動
|
||||
2. **Google Auth** セクションを見つけます
|
||||
3. 次の変数を設定:
|
||||
* `MESSAGING_PROVIDER_GMAIL_ENABLED=true`
|
||||
* `CALENDAR_PROVIDER_GOOGLE_ENABLED=true`
|
||||
* `AUTH_GOOGLE_CLIENT_ID={client-id}`
|
||||
@@ -149,35 +151,35 @@ When enabled, only users with `canAccessFullAdminPanel` can create additional wo
|
||||
* `AUTH_GOOGLE_APIS_CALLBACK_URL=https://{your-domain}/auth/google-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**環境専用モード:** `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` を設定した場合、これらの変数を `.env` ファイルに追加してください。
|
||||
</Warning>
|
||||
|
||||
**Required scopes** (automatically configured):
|
||||
[See relevant source code](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-google-apis-oauth-scopes.ts#L4-L10)
|
||||
**必要なスコープ** (自動的に構成される):
|
||||
[関連ソースコードを見る](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-google-apis-oauth-scopes.ts#L4-L10)
|
||||
|
||||
* `https://www.googleapis.com/auth/calendar.events`
|
||||
* `https://www.googleapis.com/auth/gmail.readonly`
|
||||
* `https://www.googleapis.com/auth/profile.emails.read`
|
||||
|
||||
### If your app is in test mode
|
||||
### アプリがテストモードの場合
|
||||
|
||||
If your app is in test mode, you will need to add test users to your project.
|
||||
アプリがテストモードの場合、プロジェクトにテストユーザーを追加する必要があります。
|
||||
|
||||
Under [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent), add your test users to the "Test users" section.
|
||||
[OAuth 同意画面](https://console.cloud.google.com/apis/credentials/consent)で、「テストユーザー」セクションにテストユーザーを追加してください。
|
||||
|
||||
## Microsoft 365 Integration
|
||||
## Microsoft 365 統合
|
||||
|
||||
<Warning>
|
||||
Users must have a [Microsoft 365 Licence](https://admin.microsoft.com/Adminportal/Home) to be able to use the Calendar and Messaging API. They will not be able to sync their account on Twenty without one.
|
||||
カレンダーおよびメッセージングAPIを使用するためには、[Microsoft 365 ライセンス](https://admin.microsoft.com/Adminportal/Home)が必要です。 They will not be able to sync their account on Twenty without one. それがない場合、Twenty でアカウントを同期できません。
|
||||
</Warning>
|
||||
|
||||
### Create a project in Microsoft Azure
|
||||
### Microsoft Azureでプロジェクトを作成
|
||||
|
||||
You will need to create a project in [Microsoft Azure](https://portal.azure.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2) and get the credentials.
|
||||
[Microsoft Azure](https://portal.azure.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2)でプロジェクトを作成し、資格情報を取得してください。
|
||||
|
||||
### Enable APIs
|
||||
### APIを有効にする
|
||||
|
||||
On Microsoft Azure Console enable the following APIs in "Permissions":
|
||||
Microsoft Azureコンソールで"権限"の欄で以下のAPIを有効にします:
|
||||
|
||||
* Microsoft Graph: Mail.ReadWrite
|
||||
* Microsoft Graph: Mail.Send
|
||||
@@ -188,20 +190,20 @@ On Microsoft Azure Console enable the following APIs in "Permissions":
|
||||
* Microsoft Graph: profile
|
||||
* Microsoft Graph: offline_access
|
||||
|
||||
Note: "Mail.ReadWrite" and "Mail.Send" are only mandatory if you want to send emails using our workflow actions. You can use "Mail.Read" instead if you only want to receive emails.
|
||||
注: "Mail.ReadWrite" と "Mail.Send" は、ワークフローアクションを使用してメールを送信する場合に必須です。 メールを受信するだけの場合は、"Mail.Read"を使用できます。 メールを受信するだけの場合は、"Mail.Read"を使用できます。 メールを受信するだけの場合は、"Mail.Read"を使用できます。
|
||||
|
||||
### Authorized redirect URIs
|
||||
### 認証されたリダイレクトURI
|
||||
|
||||
You need to add the following redirect URIs to your project:
|
||||
プロジェクトに次のリダイレクトURIを追加する必要があります:
|
||||
|
||||
* `https://{your-domain}/auth/microsoft/redirect` if you want to use Microsoft SSO
|
||||
* `https://{your-domain}/auth/microsoft/redirect` マイクロソフトSSO を使用する場合
|
||||
* `https://{your-domain}/auth/microsoft-apis/get-access-token`
|
||||
|
||||
### Configure in Twenty
|
||||
### Twentyで構成
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Microsoft Auth** section
|
||||
3. Set these variables:
|
||||
1. **設定 → 管理パネル → 構成変数** に移動
|
||||
2. **Microsoft Auth** セクションを見つけます
|
||||
3. 次の変数を設定:
|
||||
* `MESSAGING_PROVIDER_MICROSOFT_ENABLED=true`
|
||||
* `CALENDAR_PROVIDER_MICROSOFT_ENABLED=true`
|
||||
* `AUTH_MICROSOFT_ENABLED=true`
|
||||
@@ -211,32 +213,32 @@ You need to add the following redirect URIs to your project:
|
||||
* `AUTH_MICROSOFT_APIS_CALLBACK_URL=https://{your-domain}/auth/microsoft-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**環境専用モード:** `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` を設定した場合、これらの変数を `.env` ファイルに追加してください。
|
||||
</Warning>
|
||||
|
||||
### Configure scopes
|
||||
### スコープを構成
|
||||
|
||||
[See relevant source code](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-microsoft-apis-oauth-scopes.ts#L2-L9)
|
||||
[関連ソースコードを見る](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-microsoft-apis-oauth-scopes.ts#L2-L9)
|
||||
|
||||
* 'openid'
|
||||
* 'email'
|
||||
* 'profile'
|
||||
* 'メール'
|
||||
* 'プロフィール'
|
||||
* 'offline_access'
|
||||
* 'Mail.ReadWrite'
|
||||
* 'Mail.Send'
|
||||
* 'Calendars.Read'
|
||||
|
||||
### If your app is in test mode
|
||||
### アプリがテストモードの場合
|
||||
|
||||
If your app is in test mode, you will need to add test users to your project.
|
||||
アプリがテストモードの場合、プロジェクトにテストユーザーを追加する必要があります。
|
||||
|
||||
Add your test users to the "Users and groups" section.
|
||||
「ユーザーとグループ」セクションにテストユーザーを追加してください。
|
||||
|
||||
## Background Jobs for Calendar & Messaging
|
||||
## カレンダーとメッセージングのバックグラウンドジョブ
|
||||
|
||||
After configuring Gmail, Google Calendar, or Microsoft 365 integrations, you need to start the background jobs that sync data.
|
||||
Gmail、Googleカレンダー、またはMicrosoft 365統合を構成した後、データを同期するバックグラウンドジョブを開始する必要があります。
|
||||
|
||||
Register the following recurring jobs in your worker container:
|
||||
次の定期ジョブをワーカーコンテナに登録してください:
|
||||
|
||||
```bash
|
||||
# from your worker container
|
||||
@@ -249,15 +251,15 @@ yarn command:prod cron:calendar:ongoing-stale
|
||||
yarn command:prod cron:workflow:automated-cron-trigger
|
||||
```
|
||||
|
||||
## Email Configuration
|
||||
## メール設定
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Email** section
|
||||
3. Configure your SMTP settings:
|
||||
1. **設定 → 管理パネル → 構成変数** に移動
|
||||
2. **メール** セクションを見つけます
|
||||
3. SMTP設定を構成:
|
||||
|
||||
<ArticleTabs label1="Gmail" label2="Office365" label3="Smtp4dev">
|
||||
<ArticleTab>
|
||||
You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
|
||||
[アプリパスワード](https://support.google.com/accounts/answer/185833)を準備する必要があります。
|
||||
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=smtp.gmail.com
|
||||
@@ -267,7 +269,7 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
|
||||
2FAを有効にしている場合、[アプリパスワード](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9)を準備する必要があります。
|
||||
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=smtp.office365.com
|
||||
@@ -277,11 +279,11 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
**smtp4dev** is a fake SMTP email server for development and testing.
|
||||
**smtp4dev** は開発とテストのためのフェイクSMTPメールサーバーです。
|
||||
|
||||
* Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
||||
* Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
|
||||
* Set the following variables:
|
||||
* smtp4devイメージを実行: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
||||
* smtp4dev UIにアクセス: [http://localhost:8090](http://localhost:8090)
|
||||
* 次の変数を設定:
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=localhost
|
||||
* EMAIL_SMTP_PORT=2525
|
||||
@@ -289,5 +291,49 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTabs>
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**環境専用モード:** `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` を設定した場合、これらの変数を `.env` ファイルに追加してください。
|
||||
</Warning>
|
||||
|
||||
## サーバーレス関数
|
||||
|
||||
Twenty は、ワークフローやカスタムロジックのためのサーバーレス関数をサポートします。 実行環境は、`SERVERLESS_TYPE` 環境変数で設定されます。
|
||||
|
||||
<Warning>
|
||||
**セキュリティに関する注意:** ローカルのサーバーレスドライバー（`SERVERLESS_TYPE=LOCAL`）は、ホスト上の Node.js プロセス内でサンドボックスなしにコードを直接実行します。 開発では、信頼できるコードにのみ使用してください。 信頼できないコードを扱う本番デプロイでは、`SERVERLESS_TYPE=LAMBDA` または `SERVERLESS_TYPE=DISABLED` の使用を強く推奨します。
|
||||
</Warning>
|
||||
|
||||
### 利用可能なドライバー
|
||||
|
||||
| ドライバー | 環境変数 | ユースケース | セキュリティレベル |
|
||||
| ------ | -------------------------- | ----------------- | --------------- |
|
||||
| 無効 | `SERVERLESS_TYPE=DISABLED` | サーバーレス関数を完全に無効化する | 該当なし |
|
||||
| ローカル | `SERVERLESS_TYPE=LOCAL` | 開発および信頼できる環境 | 低（サンドボックスなし） |
|
||||
| Lambda | `SERVERLESS_TYPE=LAMBDA` | 信頼できないコードを扱う本番環境 | 高（ハードウェアレベルの分離） |
|
||||
|
||||
### 推奨構成
|
||||
|
||||
**開発向け:**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=LOCAL # default
|
||||
```
|
||||
|
||||
**本番向け（AWS）:**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=LAMBDA
|
||||
SERVERLESS_LAMBDA_REGION=us-east-1
|
||||
SERVERLESS_LAMBDA_ROLE=arn:aws:iam::123456789:role/your-lambda-role
|
||||
SERVERLESS_LAMBDA_ACCESS_KEY_ID=your-access-key
|
||||
SERVERLESS_LAMBDA_SECRET_ACCESS_KEY=your-secret-key
|
||||
```
|
||||
|
||||
**サーバーレス関数を無効化するには:**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=DISABLED
|
||||
```
|
||||
|
||||
<Note>
|
||||
`SERVERLESS_TYPE=DISABLED` を使用している場合、サーバーレス関数を実行しようとするとエラーが返されます。 これは、サーバーレス関数の機能なしで Twenty を実行したい場合に便利です。
|
||||
</Note>
|
||||
|
||||
@@ -1,26 +1,27 @@
|
||||
---
|
||||
title: Troubleshooting
|
||||
title: トラブルシューティング
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
If you encounter any problem while setting up environment for development, upgrading your instance or self-hosting,
|
||||
here are some solutions for common problems.
|
||||
開発環境のセットアップ、バージョンアップまたはセルフホスティング中に問題が発生した場合、こちらによくある問題の解決策を示しています。
|
||||
|
||||
### Self-hosting
|
||||
### セルフホスティング
|
||||
|
||||
#### First install results in `password authentication failed for user "postgres"`
|
||||
#### 初回インストールに`ユーザー "postgres" のパスワード認証失敗`と表示される
|
||||
|
||||
🚨 **IMPORTANT: This solution is ONLY for fresh installations** 🚨
|
||||
If you have an existing Twenty instance with production data, **DO NOT** follow these steps as they will permanently delete your database!
|
||||
🚨 **重要: この解決策は新規インストールの場合のみ適用されます** 🚨
|
||||
すでに稼働中のTwentyインスタンスに本番データがある場合、これらの手順に従うとデータベースが完全に削除されますので、絶対に従わないでください。
|
||||
|
||||
While installing Twenty for the first time, you might want to change the default database password.
|
||||
The password you set during the first installation becomes permanently stored in the database volume. If you later try to change this password in your configuration without removing the old volume, you'll get authentication errors because the database is still using the original password.
|
||||
Twentyを初めてインストールする際には、デフォルトのデータベースパスワードを変更する必要があるかもしれません。
|
||||
初回インストール時に設定されたパスワードはデータベースボリュームに永久に保存されます。 後になってこのパスワードを構成で変更しようとしても、古いボリュームを削除しない限り認証エラーが発生します。データベースが元のパスワードを使用しているためです。
|
||||
初回インストール時に設定されたパスワードはデータベースボリュームに永久に保存されます。 後になってこのパスワードを構成で変更しようとしても、古いボリュームを削除しない限り認証エラーが発生します。データベースが元のパスワードを使用しているためです。
|
||||
初回インストール時に設定されたパスワードはデータベースボリュームに永久に保存されます。 後になってこのパスワードを構成で変更しようとしても、古いボリュームを削除しない限り認証エラーが発生します。データベースが元のパスワードを使用しているためです。
|
||||
|
||||
⚠️ WARNING: Following steps will PERMANENTLY DELETE all database data! ⚠️
|
||||
Only proceed if this is a fresh installation with no important data.
|
||||
⚠️ 警告: 以下のステップを実行すると、データベース内のすべてのデータが完全に削除されます! ⚠️
|
||||
これは重要なデータのない新規インストールの場合のみ進めてください。
|
||||
|
||||
In order to update the `PG_DATABASE_PASSWORD` you need to:
|
||||
`PG_DATABASE_PASSWORD`を更新するには、以下が必要です:
|
||||
|
||||
```sh
|
||||
# Update the PG_DATABASE_PASSWORD in .env
|
||||
@@ -28,33 +29,35 @@ docker compose down --volumes
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
#### CR line breaks found [Windows]
|
||||
#### CR行区切り[Windows]が見つかる
|
||||
|
||||
This is due to the line break characters of Windows and the git configuration. Try running:
|
||||
これはWindowsの改行文字とgit構成のためです。 次を実行してみてください: 次を実行してみてください: 次を実行してみてください:
|
||||
|
||||
```
|
||||
git config --global core.autocrlf false
|
||||
```
|
||||
|
||||
Then delete the repository and clone it again.
|
||||
その後、リポジトリを削除して再クローンします。
|
||||
|
||||
#### Missing metadata schema
|
||||
#### メタデータスキーマが見つかりません
|
||||
|
||||
During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
|
||||
If you're successful in running this provisioning, you should have `default` and `metadata` schemas in your database.
|
||||
If you don't, make sure you don't have more than one postgres instance running on your computer.
|
||||
Twentyのインストール中に、postgresデータベースを適切なスキーマ、拡張、およびユーザーで準備する必要があります。
|
||||
この準備がうまくいけば、あなたのデータベースに`default`と`metadata`スキーマがあるはずです。
|
||||
そうでない場合は、同じコンピュータ上で複数のpostgresインスタンスを実行していないことを確認してください。
|
||||
この準備がうまくいけば、あなたのデータベースに`default`と`metadata`スキーマがあるはずです。
|
||||
そうでない場合は、同じコンピュータ上で複数のpostgresインスタンスを実行していないことを確認してください。
|
||||
|
||||
#### Cannot find module 'twenty-emails' or its corresponding type declarations.
|
||||
#### モジュール'twenty-emails' またはその対応する型宣言が見つかりません。
|
||||
|
||||
You have to build the package `twenty-emails` before running the initialization of the database with `npx nx run twenty-emails:build`
|
||||
データベースの初期化を実行する前に`npx nx run twenty-emails:build`でtwenty-emailsパッケージをビルドする必要があります。
|
||||
|
||||
#### Missing twenty-x package
|
||||
#### twenty-xパッケージが見つかりません
|
||||
|
||||
Make sure to run yarn in the root directory and then run `npx nx server:dev twenty-server`. If this still doesn't work try building the missing package manually.
|
||||
ルートディレクトリでyarnを実行し、その後 `npx nx server:dev twenty-server`を実行してください。 それでも動作しない場合は、足りないパッケージを手動でビルドしてみてください。 それでも動作しない場合は、足りないパッケージを手動でビルドしてみてください。 それでも動作しない場合は、足りないパッケージを手動でビルドしてみてください。
|
||||
|
||||
#### Lint on Save not working
|
||||
#### 保存時のLintが機能しない
|
||||
|
||||
This should work out of the box with the eslint extension installed. If this doesn't work try adding this to your vscode setting (on the dev container scope):
|
||||
eslint拡張子がインストールされている場合、これは標準設定で動作するはずです。 eslint拡張子がインストールされている場合、これは標準設定で動作するはずです。 もしこれが機能しない場合、vscode設定で以下を追加してみてください（開発コンテナ範囲内で）。
|
||||
|
||||
```
|
||||
"editor.codeActionsOnSave": {
|
||||
@@ -64,85 +67,88 @@ This should work out of the box with the eslint extension installed. If this doe
|
||||
}
|
||||
```
|
||||
|
||||
#### While running `npx nx start` or `npx nx start twenty-front`, Out of memory error is thrown
|
||||
#### `npx nx start` または `npx nx start twenty-front` 実行中にメモリエラーが発生
|
||||
|
||||
In `packages/twenty-front/.env` uncomment `VITE_DISABLE_TYPESCRIPT_CHECKER=true` to disable background checks thus reducing amount of needed RAM.
|
||||
`packages/twenty-front/.env`で`VITE_DISABLE_TYPESCRIPT_CHECKER=true` と `VITE_DISABLE_ESLINT_CHECKER=true` をコメント解除して、バックグラウンドチェックを無効化し、必要なRAMの量を減らします。
|
||||
|
||||
**If it does not work:**
|
||||
Run only the services you need, instead of `npx nx start`. For instance, if you work on the server, run only `npx nx worker twenty-server`
|
||||
**うまくいかない場合:**
|
||||
`npx nx start` の代わりに、必要なサービスだけを実行してください。 例えば、サーバーで作業している場合は、`npx nx worker twenty-server` のみを実行してください。
|
||||
|
||||
**If it does not work:**
|
||||
If you tried to run only `npx nx run twenty-server:start` on WSL and it's failing with the below memory error:
|
||||
**うまくいかない場合:**
|
||||
WSL 上で `npx nx run twenty-server:start` だけを実行しようとして、以下のメモリエラーで失敗する場合:
|
||||
|
||||
`FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory`
|
||||
|
||||
Workaround is to execute below command in terminal or add it in .bashrc profile to get setup automatically:
|
||||
以下のコマンドをターミナルで実行するか、.bashrcプロファイルに追加して自動セットアップします:
|
||||
|
||||
`export NODE_OPTIONS="--max-old-space-size=8192"`
|
||||
|
||||
The --max-old-space-size=8192 flag sets an upper limit of 8GB for the Node.js heap; usage scales with application demand.
|
||||
Reference: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
\--max-old-space-size=8192 フラグはNode.jsヒープの上限を8GBに設定します; 使用量はアプリケーションの要求に応じてスケールします。
|
||||
参考: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
参考: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
参考: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
|
||||
**If it does not work:**
|
||||
Investigate which processes are taking you most of your machine RAM. At Twenty, we noticed that some VScode extensions were taking a lot of RAM so we temporarily disable them.
|
||||
**うまくいかない場合:**
|
||||
マシンの RAM を最も消費しているプロセスを調査してください。 **これが機能しない場合:**\
|
||||
あなたのマシンのRAMを最も使用しているプロセスを調査してください。 Twentyでは、一部のVScode拡張機能が多くのRAMを使用していることに気付き、一時的に無効化しました。
|
||||
|
||||
**If it does not work:**
|
||||
Restart your machine helps to clean up ghost processes.
|
||||
**うまくいかない場合:**
|
||||
マシンを再起動すると、ゴーストプロセスのクリーンアップに役立ちます。
|
||||
|
||||
#### While running `npx nx start` there are weird [0] and [1] in logs
|
||||
#### `npx nx start`を実行中にログに謎の[0]や[1]が表示される
|
||||
|
||||
That's expected as command `npx nx start` is running more commands under the hood
|
||||
`npx nx start`コマンドが複数のコマンドを裏で実行しているため、これは予想された挙動です。
|
||||
|
||||
#### No emails are sent
|
||||
#### メールが送信されない
|
||||
|
||||
Most of the time, it's because the `worker` is not running in the background. Try to run
|
||||
ほとんどの場合、バックグラウンドで`worker`が動作していないのが原因です。 実行してみてください 実行してみてください 実行してみてください
|
||||
|
||||
```
|
||||
npx nx worker twenty-server
|
||||
```
|
||||
|
||||
#### Cannot connect my Microsoft 365 account
|
||||
#### Microsoft 365アカウントに接続できない
|
||||
|
||||
Most of the time, it's because your admin has not enabled the Microsoft 365 Licence for your account. Check [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home).
|
||||
ほとんどの場合、管理者があなたのアカウントのMicrosoft 365ライセンスを有効化していないことが原因です。 [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home)を確認してください。 [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home)を確認してください。 [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home)を確認してください。
|
||||
|
||||
If you have an error code `AADSTS50020`, it probably means that you are using a personal Microsoft account. This is not supported yet. More info [here](https://learn.microsoft.com/fr-fr/troubleshoot/entra/entra-id/app-integration/error-code-aadsts50020-user-account-identity-provider-does-not-exist)
|
||||
エラーコード`AADSTS50020`を受け取った場合、おそらく個人のMicrosoftアカウントを使用しています。 これはまだサポートされていません。 エラーコード`AADSTS50020`を受け取った場合、おそらく個人のMicrosoftアカウントを使用しています。 これはまだサポートされていません。 エラーコード`AADSTS50020`を受け取った場合、おそらく個人のMicrosoftアカウントを使用しています。 これはまだサポートされていません。 詳細は[こちら](https://learn.microsoft.com/fr-fr/troubleshoot/entra/entra-id/app-integration/error-code-aadsts50020-user-account-identity-provider-does-not-exist)
|
||||
|
||||
#### While running `yarn` warnings appear in console
|
||||
#### `yarn`実行中の警告がコンソールに表示される
|
||||
|
||||
Warnings are informing about pulling additional dependencies which aren't explicitly stated in `package.json`, so as long as no breaking error appears, everything should work as expected.
|
||||
警告は、`package.json`に明示的に記載されていない追加依存関係の取得を伝えており、破損するエラーがない限り、すべてが期待通りに動作するはずです。
|
||||
|
||||
#### When user accesses login page, error about unauthorized user trying to access workspace appears in logs
|
||||
#### ログインページにアクセスした際、未認証ユーザーの作業スペースへのアクセスに関するエラーがログに表示される
|
||||
|
||||
That's expected as user is unauthorized when logged out since its identity is not verified.
|
||||
これは予想された挙動で、ログアウト中のユーザーはアイデンティティが確認されていないため未認証です。
|
||||
|
||||
#### How to check if your worker is running?
|
||||
#### ワーカーが稼働しているかどうかを確認するには?
|
||||
|
||||
* Go to [webhook-test.com](https://webhook-test.com/) and copy **Your Unique Webhook URL**.
|
||||
* [webhook-test.com](https://webhook-test.com/)にアクセスし、**Your Unique Webhook URL**をコピーします。
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test.jpg" alt="Webhook test" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test.jpg" alt="Webhookテスト" />
|
||||
</div>
|
||||
|
||||
* Open your Twenty app, navigate to `/settings`, and enable the **Advanced** toggle at the bottom left of the screen.
|
||||
* Create a new webhook.
|
||||
* Paste **Your Unique Webhook URL** in the **Endpoint Url** field in Twenty. Set the **Filters** to `Companies` and `Created`.
|
||||
* Twentyアプリを開き、`/settings`に移動し、画面左下の**Advanced**トグルを有効にします。
|
||||
* 新しいWebhookを作成します。
|
||||
* **Your Unique Webhook URL**をTwentyの**Endpoint Url**フィールドに貼り付けます。 **Filters**を`Companies`と`Created`に設定します。
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-settings.jpg" alt="Webhook settings" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-settings.jpg" alt="Webhook設定" />
|
||||
</div>
|
||||
|
||||
* Go to `/objects/companies` and create a new company record.
|
||||
* Return to [webhook-test.com](https://webhook-test.com/) and check if a new **POST request** has been received.
|
||||
* `/objects/companies`にアクセスし、新しい企業レコードを作成します。
|
||||
* [webhook-test.com](https://webhook-test.com/)に戻り、新しい**POSTリクエスト**が受信されたか確認します。
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test-result.jpg" alt="Webhook test result" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test-result.jpg" alt="Webhookテスト結果" />
|
||||
</div>
|
||||
|
||||
* If a **POST request** is received, your worker is running successfully. Otherwise, you need to troubleshoot your worker.
|
||||
* **POSTリクエスト**が受信された場合、あなたのワーカーは正常に稼働しています。 そうでない場合は、ワーカーのトラブルシューティングが必要です。
|
||||
|
||||
#### Front-end fails to start and returns error TS5042: Option 'project' cannot be mixed with source files on a command line
|
||||
#### フロントエンドが起動に失敗し、エラーTS5042: オプション'プロジェクト'はコマンドライン上でソースファイルと一緒に使用できません
|
||||
|
||||
Comment out checker plugin in `packages/twenty-ui/vite-config.ts` like in example below
|
||||
例のように`packages/twenty-ui/vite-config.ts`内のチェッカープラグインをコメントアウトします
|
||||
|
||||
```
|
||||
plugins: [
|
||||
@@ -166,62 +172,62 @@ plugins: [
|
||||
],
|
||||
```
|
||||
|
||||
#### Admin panel not accessible
|
||||
#### 管理パネルにアクセスできない
|
||||
|
||||
Run `UPDATE core."user" SET "canAccessFullAdminPanel" = TRUE WHERE email = 'you@yourdomain.com';` in database container to get access to admin panel.
|
||||
adminパネルにアクセスするには、データベースコンテナで`UPDATE core."user" SET "canAccessFullAdminPanel" = TRUE WHERE email = 'you@yourdomain.com';`を実行します。
|
||||
|
||||
### 1-click Docker compose
|
||||
### 1クリックでDocker構成
|
||||
|
||||
#### Unable to Log In
|
||||
#### ログインできない
|
||||
|
||||
If you can't log in after setup:
|
||||
セットアップ後にログインできない場合:
|
||||
|
||||
1. Run the following commands:
|
||||
1. 次のコマンドを実行してください:
|
||||
```bash
|
||||
docker exec -it twenty-server-1 yarn
|
||||
docker exec -it twenty-server-1 npx nx database:reset --configuration=no-seed
|
||||
```
|
||||
2. Restart the Docker containers:
|
||||
2. Dockerコンテナを再起動してください:
|
||||
```bash
|
||||
docker compose down
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
Note the database:reset command will completely erase your database and recreate it from scratch.
|
||||
database:resetコマンドはデータベースを完全に消去し、最初から再構築します。
|
||||
|
||||
#### Connection Issues Behind a Reverse Proxy
|
||||
#### リバースプロキシの背後での接続問題
|
||||
|
||||
If you're running Twenty behind a reverse proxy and experiencing connection issues:
|
||||
リバースプロキシの背後でTwentyを実行し、接続問題が発生している場合:
|
||||
|
||||
1. **Verify SERVER_URL:**
|
||||
1. **SERVER_URLの確認:**
|
||||
|
||||
Ensure `SERVER_URL` in your `.env` file matches your external access URL, including `https` if SSL is enabled.
|
||||
`.env`ファイルの`SERVER_URL`が外部アクセスURLと一致するようにし、SSLが有効なら`https`を含めます。
|
||||
|
||||
2. **Check Reverse Proxy Settings:**
|
||||
2. **リバースプロキシ設定の確認:**
|
||||
|
||||
* Confirm that your reverse proxy is correctly forwarding requests to the Twenty server.
|
||||
* Ensure headers like `X-Forwarded-For` and `X-Forwarded-Proto` are properly set.
|
||||
* リバースプロキシがTwentyサーバーへのリクエストを正しく転送していることを確認してください。
|
||||
* `X-Forwarded-For`や`X-Forwarded-Proto`といったヘッダーが正しく設定されていることを確認してください。
|
||||
|
||||
3. **Restart Services:**
|
||||
3. **サービスの再起動:**
|
||||
|
||||
After making changes, restart both the reverse proxy and Twenty containers.
|
||||
変更を行った後に、リバースプロキシとTwentyコンテナの両方を再起動します。
|
||||
|
||||
#### Error when uploading an image - permission denied
|
||||
#### 画像のアップロード時にエラー - アクセス許可が拒否されました
|
||||
|
||||
Switching the data folder ownership on the host from root to another user and group resolves this problem.
|
||||
ホストでのデータフォルダの所有権をrootから他のユーザーとグループに切り替えると、この問題が解決されます。
|
||||
|
||||
## Getting Help
|
||||
## サポートを受ける
|
||||
|
||||
If you encounter issues not covered in this guide:
|
||||
このガイドにカバーされていない問題がある場合:
|
||||
|
||||
* Check Logs:
|
||||
* ログを確認:
|
||||
|
||||
View container logs for error messages:
|
||||
コンテナログを表示してエラーメッセージを確認します:
|
||||
|
||||
```bash
|
||||
docker compose logs
|
||||
```
|
||||
|
||||
* Community Support:
|
||||
* コミュニティサポート:
|
||||
|
||||
Reach out to the [Twenty community](https://github.com/twentyhq/twenty/issues) or [support channels](https://discord.gg/cx5n4Jzs57) for assistance.
|
||||
[Twentyコミュニティ](https://github.com/twentyhq/twenty/issues)または[サポートチャンネル](https://discord.gg/cx5n4Jzs57)に連絡してサポートを受けてください。
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
---
|
||||
title: Upgrade guide
|
||||
title: アップグレードガイド
|
||||
---
|
||||
|
||||
## General guidelines
|
||||
## 一般ガイドライン
|
||||
|
||||
**Always make sure to back up your database before starting the upgrade process** by running `docker exec -it {db_container_name_or_id} pg_dumpall -U {postgres_user} > databases_backup.sql`.
|
||||
**アップグレードプロセスを開始する前に、必ずデータベースのバックアップを作成してください**。以下のコマンドを実行します：`docker exec -it {db_container_name_or_id} pg_dumpall -U {postgres_user} > databases_backup.sql`.
|
||||
|
||||
To restore backup, run `cat databases_backup.sql | docker exec -i {db_container_name_or_id} psql -U {postgres_user}`.
|
||||
バックアップを復元するには、次のコマンドを実行します：`cat databases_backup.sql | docker exec -i {db_container_name_or_id} psql -U {postgres_user}`.
|
||||
|
||||
If you used Docker Compose, follow these steps:
|
||||
Docker Composeを使用している場合、次の手順に従います：
|
||||
|
||||
1. In a terminal, on the host where Twenty is running, turn off Twenty: `docker compose down`
|
||||
1. Twentyを実行しているホスト上のターミナルで、Twentyを停止します：`docker compose down`
|
||||
|
||||
2. Upgrade the version by changing the `TAG` value in the .env file near your docker-compose. ( We recommend consuming `major.minor` version such as `v0.53` )
|
||||
2. docker-compose近くにある.envファイルの`TAG`値を変更してバージョンをアップグレードします。 ( `v0.53` のように `major.minor` バージョンを使用することをお勧めします ) ( `v0.53` のように `major.minor` バージョンを使用することをお勧めします ) ( `v0.53` のように `major.minor` バージョンを使用することをお勧めします )
|
||||
|
||||
3. Bring Twenty back online with `docker compose up -d`
|
||||
3. `docker compose up -d` でTwentyを再起動します。
|
||||
|
||||
If you want to upgrade your instance by few versions, e.g. from v0.33.0 to v0.35.0, you have to upgrade your instance sequentially, in this example from v0.33.0 to v0.34.0, then from v0.34.0 to v0.35.0.
|
||||
例えば、v0.33.0 から v0.35.0 に数バージョンアップグレードしたい場合は、インスタンスを順次アップグレードする必要があります。この例では、まず v0.33.0 から v0.34.0 、次に v0.34.0から v0.35.0 にアップグレードします。
|
||||
|
||||
**Make sure that after each upgraded version you have non-corrupted backup.**
|
||||
**各アップグレードしたバージョンの後に壊れていないバックアップを必ず確認してください。**
|
||||
|
||||
## Version-specific upgrade steps
|
||||
## バージョン固有のアップグレード手順
|
||||
|
||||
## v1.0
|
||||
|
||||
Hello Twenty v1.0! 🎉
|
||||
こんにちは、Twenty v1.0! 🎉
|
||||
|
||||
## v0.60
|
||||
|
||||
### Performance Enhancements
|
||||
### パフォーマンス向上
|
||||
|
||||
All interactions with the metadata API have been optimized for better performance, particularly for object metadata manipulation and workspace creation operations.
|
||||
メタデータ API とのすべてのやり取りは、特にオブジェクトのメタデータ操作およびワークスペース作成の処理において、パフォーマンス向上のために最適化されました。
|
||||
|
||||
We've refactored our caching strategy to prioritize cache hits over database queries when possible, significantly improving the performance of metadata API operations.
|
||||
キャッシング戦略を見直し、可能な場合はデータベースクエリよりもキャッシュヒットを優先するようにしました。これにより、メタデータAPIオペレーションのパフォーマンスが大幅に向上しました。
|
||||
|
||||
If you encounter any runtime issues after upgrading, you may need to flush your cache to ensure it's synchronized with the latest changes. Run this command in your twenty-server container:
|
||||
アップグレード後にランタイムの問題が発生した場合は、キャッシュをフラッシュして最新の変更と同期させる必要があるかもしれません。 twenty-serverコンテナ内で次のコマンドを実行します： twenty-serverコンテナ内で次のコマンドを実行します：
|
||||
|
||||
```bash
|
||||
yarn command:prod cache:flush
|
||||
@@ -42,113 +42,118 @@ yarn command:prod cache:flush
|
||||
|
||||
### v0.55
|
||||
|
||||
Upgrade your Twenty instance to use v0.55 image
|
||||
Twentyインスタンスをv0.55イメージにアップグレードします。
|
||||
|
||||
You don't need to run any command anymore, the new image will automatically care about running all required migrations.
|
||||
もうコマンドを実行する必要はありません。新しいイメージがすべての必要な移行を自動的に行います。
|
||||
|
||||
### `User does not have permission` error
|
||||
### `User does not have permission` エラー
|
||||
|
||||
If you encounter authorization errors on most requests after upgrading, you may need to flush your cache to recompute the latest permissions.
|
||||
アップグレード後にほとんどの要求で承認エラーが発生した場合は、キャッシュをフラッシュして最新の権限を再計算する必要があるかもしれません。
|
||||
|
||||
In your `twenty-server` container, run:
|
||||
あなたの `twenty-server` コンテナ内で次のコマンドを実行します：
|
||||
|
||||
```bash
|
||||
yarn command:prod cache:flush
|
||||
```
|
||||
|
||||
This issue is specific to this Twenty version and should not be required for future upgrades.
|
||||
この問題は特定のTwentyバージョンに固有であり、今後のアップグレードでは不要なはずです。
|
||||
|
||||
### v0.54
|
||||
|
||||
Since version `0.53`, no manual actions needed.
|
||||
バージョン `0.53` 以降、手動の操作は必要ありません。
|
||||
|
||||
#### Metadata schema deprecation
|
||||
#### メタデータスキーマ廃止
|
||||
|
||||
We've merged the `metadata` schema into the `core` one to simplify data retrieval from `TypeORM`.
|
||||
We have merged the `migrate` command step within the `upgrade` command. We do not recommend running `migrate` manually within any of your server/worker containers.
|
||||
データの取得を簡素化するために、`metadata` スキーマを `core` スキーマにマージしました。
|
||||
`upgrade` コマンド内の `migrate` コマンドステップを統合しました。 サーバーまたはワーカーコンテナ内で `migrate` を手動で実行することはお勧めしません。
|
||||
|
||||
### Since v0.53
|
||||
### v0.53以降
|
||||
|
||||
Starting from `0.53`, upgrade is programmatically done within the `DockerFile`, this means from now on, you shouldn't have to run any command manually anymore.
|
||||
`0.53` 以降、アップグレードは `DockerFile` 内でプログラム的に行われます。これはつまり、これ以降は手動でコマンドを実行する必要がないことを意味します。
|
||||
|
||||
Make sure to keep upgrading your instance sequentially, without skipping any major version (e.g. `0.43.3` to `0.44.0` is allowed, but `0.43.1` to `0.45.0` isn't), else could lead to workspace version desynchronization that could result in runtime error and missing functionality.
|
||||
メジャーバージョンを飛ばさずに順次インスタンスをアップグレードし続けることを確認してください（e.g. `0.43.3`から`0.44.0`へのアップグレードは許可されていますが、`0.43.1`から`0.45.0`へのアップグレードはできません）。そうしないと、ワークスペースのバージョンが同期しないことが原因でランタイムエラーや機能の欠如が発生する可能性があります。
|
||||
|
||||
To check if a workspace has been correctly migrated you can review its version in database in `core.workspace` table.
|
||||
ワークスペースが正しく移行されたかを確認するには、データベース内の `core.workspace` テーブル内でそのバージョンを確認できます。
|
||||
|
||||
It should always be in the range of your current Twenty's instance `major.minor` version, you can view your instance version in the admin panel (at `/settings/admin-panel`, accessible if your user has `canAccessFullAdminPanel` property set to true in the database) or by running `echo $APP_VERSION` in your `twenty-server` container.
|
||||
それは常にあなたの現在のTwentyのインスタンスの `major.minor` バージョンの範囲内である必要があります。あなたのインスタンスバージョンは、管理パネル（ `/settings/admin-panel` にあり、データベース内でユーザーが `canAccessFullAdminPanel` プロパティを持っている場合にアクセス可能）にまたは `twenty-server` コンテナ内で `echo $APP_VERSION` を実行することで確認できます。
|
||||
|
||||
To fix a desynchronized workspace version, you will have to upgrade from the corresponding twenty's version following related upgrade guide sequentially and so on until it reaches desired version.
|
||||
非同期化されたワークスペースバージョンを修正するには、対応するTwentyのバージョンから関連するアップグレードガイドに従って順次アップグレードし、それが目的のバージョンに到達するまで続ける必要があります。
|
||||
|
||||
#### `auditLog` removal
|
||||
#### `auditLog` の削除
|
||||
|
||||
We've removed the auditLog standard object, which means your backup size might be significantly reduced after this migration.
|
||||
監査ログ標準オブジェクトを削除しました。これにより、この移行後のバックアップサイズが大幅に縮小する可能性があります。
|
||||
|
||||
### v0.51 to v0.52
|
||||
### v0.51からv0.52
|
||||
|
||||
Upgrade your Twenty instance to use v0.52 image
|
||||
Twentyインスタンスをv0.52イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
#### I have a workspace blocked in version between `0.52.0` and `0.52.6`
|
||||
#### 私は `0.52.0` と `0.52.6` の間のバージョンでブロックされたワークスペースを持っています。
|
||||
|
||||
Unfortunately `0.52.0` and `0.52.6` have been completely removed from dockerHub.
|
||||
You will have to manually update your workspace version to `0.51.0` in database and upgrade using twenty version `0.52.11` following its just above upgrade guide.
|
||||
残念ながら、`0.52.0` と `0.52.6` はdockerHubから完全に削除されました。
|
||||
残念ながら、`0.52.0` と `0.52.6` はdockerHubから完全に削除されました。
|
||||
データベースでワークスペースバージョンを手動で `0.51.0` に更新し、twentyバージョン `0.52.11` を使用して、その直上のアップグレードガイドに従ってアップグレードする必要があります。
|
||||
残念ながら、`0.52.0` と `0.52.6` はdockerHubから完全に削除されました。
|
||||
データベースでワークスペースバージョンを手動で `0.51.0` に更新し、twentyバージョン `0.52.11` を使用して、その直上のアップグレードガイドに従ってアップグレードする必要があります。
|
||||
|
||||
### v0.50 to v0.51
|
||||
### v0.50からv0.51
|
||||
|
||||
Upgrade your Twenty instance to use v0.51 image
|
||||
Twentyインスタンスをv0.51イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
### v0.44.0 to v0.50.0
|
||||
### v0.44.0からv0.50.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.50.0 image
|
||||
Twentyインスタンスをv0.50.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
#### Docker-compose.yml mutation
|
||||
#### Docker-compose.ymlの変更
|
||||
|
||||
This version includes a `docker-compose.yml` mutation to give `worker` service access to the `server-local-data` volume.
|
||||
Please update your local `docker-compose.yml` with [v0.50.0 docker-compose.yml](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)
|
||||
このバージョンには、`worker` サービスが `server-local-data` ボリュームにアクセスできるようにするための `docker-compose.yml` の変更が含まれています。
|
||||
ローカルの `docker-compose.yml` を[v0.50.0 docker-compose.yml](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)に更新してください。
|
||||
ローカルの `docker-compose.yml` を[v0.50.0 docker-compose.yml](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)に更新してください。
|
||||
ローカルの `docker-compose.yml` を[v0.50.0 docker-compose.yml](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)に更新してください。
|
||||
|
||||
### v0.43.0 to v0.44.0
|
||||
### v0.43.0からv0.44.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.44.0 image
|
||||
Twentyインスタンスをv0.44.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
### v0.42.0 to v0.43.0
|
||||
### v0.42.0からv0.43.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.43.0 image
|
||||
Twentyインスタンスをv0.43.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
In this version, we have also switched to postgres:16 image in docker-compose.yml.
|
||||
本バージョンでは、`docker-compose.yml`において`postgres:16`イメージへの切り替えも行いました。
|
||||
|
||||
#### (Option 1) Database migration
|
||||
#### ( オプション 1 ) データベース移行
|
||||
|
||||
Keeping the existing postgres-spilo image is fine, but you will have to freeze the version in your docker-compose.yml to be 0.43.0.
|
||||
既存のpostgres-spiloイメージを保持するのは問題ありませんが、docker-compose.ymlでバージョンを0.43.0に固定する必要があります。
|
||||
|
||||
#### (Option 2) Database migration
|
||||
#### ( オプション 2 ) データベース移行
|
||||
|
||||
If you want to migrate your database to the new postgres:16 image, please follow these steps:
|
||||
データベースを新しいpostgres:16イメージに移行したい場合は、次の手順に従ってください：
|
||||
|
||||
1. Dump your database from the old postgres-spilo container
|
||||
1. 古いpostgres-spiloコンテナからデータベースをダンプします。
|
||||
|
||||
```
|
||||
docker exec -it twenty-db-1 sh
|
||||
@@ -157,11 +162,11 @@ exit
|
||||
docker cp twenty-db-1:/home/postgres/databases_backup.sql .
|
||||
```
|
||||
|
||||
Make sure your dump file is not empty.
|
||||
ダンプファイルが空でないことを確認してください。
|
||||
|
||||
2. Upgrade your docker-compose.yml to use postgres:16 image as in the [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml) file.
|
||||
2. docker-compose.ymlを、新しいpostgres:16イメージを使用するようにアップグレードします。[docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml)を参照してください。
|
||||
|
||||
3. Restore the database to the new postgres:16 container
|
||||
3. データベースを新しいpostgres:16コンテナへ復元します。
|
||||
|
||||
```
|
||||
docker cp databases_backup.sql twenty-db-1:/databases_backup.sql
|
||||
@@ -170,86 +175,90 @@ psql -U {YOUR_POSTGRES_USER} -d {YOUR_POSTGRES_DB} -f databases_backup.sql
|
||||
exit
|
||||
```
|
||||
|
||||
### v0.41.0 to v0.42.0
|
||||
### v0.41.0からv0.42.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.42.0 image
|
||||
Twentyインスタンスをv0.42.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.42
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
* Removed: `FRONT_PORT`, `FRONT_PROTOCOL`, `FRONT_DOMAIN`, `PORT`
|
||||
* Added: `FRONTEND_URL`, `NODE_PORT`, `MAX_NUMBER_OF_WORKSPACES_DELETED_PER_EXECUTION`, `MESSAGING_PROVIDER_MICROSOFT_ENABLED`, `CALENDAR_PROVIDER_MICROSOFT_ENABLED`, `IS_MICROSOFT_SYNC_ENABLED`
|
||||
* 削除: `FRONT_PORT`, `FRONT_PROTOCOL`, `FRONT_DOMAIN`, `PORT`
|
||||
* 追加: `FRONTEND_URL`, `NODE_PORT`, `MAX_NUMBER_OF_WORKSPACES_DELETED_PER_EXECUTION`, `MESSAGING_PROVIDER_MICROSOFT_ENABLED`, `CALENDAR_PROVIDER_MICROSOFT_ENABLED`, `IS_MICROSOFT_SYNC_ENABLED`
|
||||
|
||||
### v0.40.0 to v0.41.0
|
||||
### v0.40.0からv0.41.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.41.0 image
|
||||
Twentyインスタンスをv0.41.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.41
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
* Removed: `AUTH_MICROSOFT_TENANT_ID`
|
||||
* 削除: `AUTH_MICROSOFT_TENANT_ID`
|
||||
|
||||
### v0.35.0 to v0.40.0
|
||||
### v0.35.0からv0.40.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.40.0 image
|
||||
Twentyインスタンスをv0.40.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.40
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
* Added: `IS_EMAIL_VERIFICATION_REQUIRED`, `EMAIL_VERIFICATION_TOKEN_EXPIRES_IN`, `WORKFLOW_EXEC_THROTTLE_LIMIT`, `WORKFLOW_EXEC_THROTTLE_TTL`
|
||||
* 追加: `IS_EMAIL_VERIFICATION_REQUIRED`, `EMAIL_VERIFICATION_TOKEN_EXPIRES_IN`, `WORKFLOW_EXEC_THROTTLE_LIMIT`, `WORKFLOW_EXEC_THROTTLE_TTL`
|
||||
|
||||
### v0.34.0 to v0.35.0
|
||||
### v0.34.0からv0.35.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.35.0 image
|
||||
Twentyインスタンスをv0.35.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.35
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.35` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.35` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
* We replaced `ENABLE_DB_MIGRATIONS` with `DISABLE_DB_MIGRATIONS` (default value is now `false`, you probably don't have to set anything)
|
||||
* `ENABLE_DB_MIGRATIONS` を `DISABLE_DB_MIGRATIONS` に置き換えました（デフォルト値は`false`で、設定する必要はないと思われます）
|
||||
|
||||
### v0.33.0 to v0.34.0
|
||||
### v0.33.0からv0.34.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.34.0 image
|
||||
Twentyインスタンスをv0.34.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.34
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.34` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.34` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
* Removed: `FRONT_BASE_URL`
|
||||
* Added: `FRONT_DOMAIN`, `FRONT_PROTOCOL`, `FRONT_PORT`
|
||||
* 削除: `FRONT_BASE_URL`
|
||||
* 追加: `FRONT_DOMAIN`, `FRONT_PROTOCOL`, `FRONT_PORT`
|
||||
|
||||
We have updated the way we handle the frontend URL.
|
||||
You can now set the frontend URL using the `FRONT_DOMAIN`, `FRONT_PROTOCOL` and `FRONT_PORT` variables.
|
||||
If FRONT_DOMAIN is not set, the frontend URL will fall back to `SERVER_URL`.
|
||||
フロントエンドURLの取り扱いを更新しました。
|
||||
フロントエンドURLの取り扱いを更新しました。
|
||||
フロントエンドURLの取り扱いを更新しました。
|
||||
フロントエンドURLは、`FRONT_DOMAIN`、`FRONT_PROTOCOL`、`FRONT_PORT` 変数を使用して設定できます。
|
||||
FRONT_DOMAIN が設定されていない場合、フロントエンドURLは `SERVER_URL` に戻されます。
|
||||
FRONT_DOMAIN が設定されていない場合、フロントエンドURLは `SERVER_URL` に戻されます。
|
||||
FRONT_DOMAIN が設定されていない場合、フロントエンドURLは `SERVER_URL` に戻されます。
|
||||
|
||||
### v0.32.0 to v0.33.0
|
||||
### v0.32.0からv0.33.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.33.0 image
|
||||
Twentyインスタンスをv0.33.0イメージにアップグレードします。
|
||||
|
||||
```
|
||||
yarn command:prod cache:flush
|
||||
@@ -257,68 +266,75 @@ yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.33
|
||||
```
|
||||
|
||||
The `yarn command:prod cache:flush` command will flush the Redis cache.
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.33` takes care of the data migration of all workspaces.
|
||||
`yarn command:prod cache:flush` コマンドはRedisキャッシュをフラッシュします。
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.33` はすべてのワークスペースのデータ移行を行います。
|
||||
`yarn database:migrate:prod` コマンドはデータベースへの移行を適用します。
|
||||
"`yarn command:prod workspace:sync-metadata -f` コマンドは、標準オブジェクトの定義をメタデータテーブルに同期し、既存のワークスペースに必要な移行を適用します。"
|
||||
The `yarn command:prod upgrade-0.22` command will apply specific data transformations to adapt to the new object defaultRequestInstrumentationOptions.
|
||||
|
||||
Starting from this version, twenty-postgres image for DB became deprecated and twenty-postgres-spilo is used instead.
|
||||
If you want to keep using twenty-postgres image, simply replace `twentycrm/twenty-postgres:${TAG}` with `twentycrm/twenty-postgres` in docker-compose.yml.
|
||||
このバージョンから、DB用のtwenty-postgresイメージは廃止され、twenty-postgres-spiloが代わりに使用されるようになりました。
|
||||
このバージョンから、DB用のtwenty-postgresイメージは廃止され、twenty-postgres-spiloが代わりに使用されるようになりました。
|
||||
このバージョンから、DB用のtwenty-postgresイメージは廃止され、twenty-postgres-spiloが代わりに使用されるようになりました。
|
||||
twenty-postgresイメージを使い続けたい場合は、docker-compose.yml内の`twentycrm/twenty-postgres:${TAG}`を`twentycrm/twenty-postgres`に置き換えるだけで済みます。
|
||||
|
||||
### v0.31.0 to v0.32.0
|
||||
### v0.31.0からv0.32.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.32.0 image
|
||||
Twentyインスタンスをv0.32.0イメージにアップグレードします。
|
||||
|
||||
**Schema and data migration**
|
||||
**スキーマとデータ移行**
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.32
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.32` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.32` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
**Environment Variables**
|
||||
**環境変数**
|
||||
|
||||
We have updated the way we handle the Redis connection.
|
||||
Redis接続の取り扱いを更新しました。
|
||||
|
||||
* Removed: `REDIS_HOST`, `REDIS_PORT`, `REDIS_USERNAME`, `REDIS_PASSWORD`
|
||||
* Added: `REDIS_URL`
|
||||
* 削除: `REDIS_HOST`, `REDIS_PORT`, `REDIS_USERNAME`, `REDIS_PASSWORD`
|
||||
* 追加: `REDIS_URL`
|
||||
|
||||
Update your `.env` file to use the new `REDIS_URL` variable instead of the individual Redis connection parameters.
|
||||
個々のRedis接続パラメーターの代わりに、新しい `REDIS_URL` 変数を使用するように `.env` ファイルを更新してください。
|
||||
|
||||
We have also simplified the way we handle the JWT tokens.
|
||||
JWTトークンの取り扱いも簡素化しました。
|
||||
|
||||
* Removed: `ACCESS_TOKEN_SECRET`, `LOGIN_TOKEN_SECRET`, `REFRESH_TOKEN_SECRET`, `FILE_TOKEN_SECRET`
|
||||
* Added: `APP_SECRET`
|
||||
* 削除: `ACCESS_TOKEN_SECRET`, `LOGIN_TOKEN_SECRET`, `REFRESH_TOKEN_SECRET`, `FILE_TOKEN_SECRET`
|
||||
* 追加: `APP_SECRET`
|
||||
|
||||
Update your `.env` file to use the new `APP_SECRET` variable instead of the individual tokens secrets (you can use the same secret as before or generate a new random string)
|
||||
個々のトークンシークレットの代わりに、新しい `APP_SECRET` 変数を使用するように `.env` ファイルを更新してください（以前と同じシークレットを使用するか、新しいランダム文字列を生成して使用することができます）
|
||||
|
||||
**Connected Account**
|
||||
**接続アカウント**
|
||||
|
||||
If you are using connected account to synchronize your Google emails and calendars, you will need to activate the [People API](https://developers.google.com/people) on your Google Admin console.
|
||||
Googleメールとカレンダーを同期するために接続されたアカウントを使用する場合は、Google管理コンソールで[People API](https://developers.google.com/people)をアクティブにする必要があります。
|
||||
|
||||
### v0.30.0 to v0.31.0
|
||||
### v0.30.0からv0.31.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.31.0 image
|
||||
Twentyインスタンスをv0.31.0イメージにアップグレードします。
|
||||
|
||||
**Schema and data migration**:
|
||||
**スキーマとデータ移行**:
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.31
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.31` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.31` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
### v0.24.0 to v0.30.0
|
||||
### v0.24.0からv0.30.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.30.0 image
|
||||
Twentyインスタンスをv0.30.0イメージにアップグレードします。
|
||||
|
||||
**Breaking change**:
|
||||
To enhance performances, Twenty now requires redis cache to be configured. We have updated our [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml) to reflect this.
|
||||
Make sure to update your configuration and to update your environment variables accordingly:
|
||||
**破壊的な変更**:
|
||||
パフォーマンスを向上させるために、TwentyはRedisキャッシュの設定を必要とするようになりました。 これを反映した[docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml)を更新しました。
|
||||
構成を更新し、環境変数を適切に更新してください：
|
||||
構成を更新し、環境変数を適切に更新してください：
|
||||
構成を更新し、環境変数を適切に更新してください：
|
||||
|
||||
```
|
||||
REDIS_HOST={your-redis-host}
|
||||
@@ -326,49 +342,50 @@ REDIS_PORT={your-redis-port}
|
||||
CACHE_STORAGE_TYPE=redis
|
||||
```
|
||||
|
||||
**Schema and data migration**:
|
||||
**スキーマとデータ移行**:
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.30
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.30` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.30` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
### v0.23.0 to v0.24.0
|
||||
### v0.23.0からv0.24.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.24.0 image
|
||||
Twentyインスタンスをv0.24.0イメージにアップグレードします。
|
||||
|
||||
Run the following commands:
|
||||
次のコマンドを実行してください:
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.24
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.24` takes care of the data migration of all workspaces.
|
||||
`yarn database:migrate:prod` コマンドはデータベース構造（コアおよびメタデータスキーマ）の移行を適用します
|
||||
`yarn command:prod upgrade-0.24` はすべてのワークスペースのデータ移行を行います。
|
||||
|
||||
### v0.22.0 to v0.23.0
|
||||
### v0.22.0からv0.23.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.23.0 image
|
||||
Twentyインスタンスをv0.23.0イメージにアップグレードします。
|
||||
|
||||
Run the following commands:
|
||||
次のコマンドを実行してください:
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.23
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the Database.
|
||||
The `yarn command:prod upgrade-0.23` takes care of the data migration, including transferring activities to tasks/notes.
|
||||
`yarn database:migrate:prod` コマンドはデータベースへの移行を適用します。
|
||||
`yarn command:prod upgrade-0.23` は、アクティビティをタスク/ノートに移行するなど、データ移行を担当します。
|
||||
`yarn command:prod upgrade-0.23` は、アクティビティをタスク/ノートに移行するなど、データ移行を担当します。
|
||||
|
||||
### v0.21.0 to v0.22.0
|
||||
### v0.21.0からv0.22.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.22.0 image
|
||||
Twentyインスタンスをv0.22.0イメージにアップグレードします。
|
||||
|
||||
Run the following commands:
|
||||
次のコマンドを実行してください:
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
@@ -376,6 +393,7 @@ yarn command:prod workspace:sync-metadata -f
|
||||
yarn command:prod upgrade-0.22
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the Database.
|
||||
The `yarn command:prod workspace:sync-metadata -f` command will sync the definition of standard objects to the metadata tables and apply to required migrations to existing workspaces.
|
||||
The `yarn command:prod upgrade-0.22` command will apply specific data transformations to adapt to the new object defaultRequestInstrumentationOptions.
|
||||
`yarn database:migrate:prod` コマンドはデータベースへの移行を適用します。
|
||||
`yarn command:prod upgrade-0.23` は、アクティビティをタスク/ノートに移行するなど、データ移行を担当します。
|
||||
"`yarn command:prod workspace:sync-metadata -f` コマンドは、標準オブジェクトの定義をメタデータテーブルに同期し、既存のワークスペースに必要な移行を適用します。"
|
||||
`yarn command:prod upgrade-0.22` コマンドは、新しいオブジェクトの defaultRequestInstrumentationOptions に適合させるため、特定のデータ変換を適用します。
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
---
|
||||
title: Self-Host
|
||||
description: Deploy and manage Twenty on your own infrastructure.
|
||||
title: セルフホスト
|
||||
description: 独自のインフラで Twenty をデプロイして管理できます。
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="AI" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty can be self-hosted on your own infrastructure, giving you full control over your data and deployment.
|
||||
Twenty は独自のインフラでセルフホストでき、データとデプロイを完全に制御できます。
|
||||
|
||||
## Why Self-Host?
|
||||
## なぜセルフホスト？
|
||||
|
||||
* **Data ownership**: Keep all CRM data on your own servers
|
||||
* **Compliance**: Meet regulatory requirements for data residency
|
||||
* **Customization**: Full access to modify and extend the platform
|
||||
* **データの所有権**: すべての CRM データを自社サーバー上に保持
|
||||
* **コンプライアンス**: データ所在地に関する規制要件を満たす
|
||||
* **カスタマイズ**: プラットフォームの変更および拡張に対するフルアクセス
|
||||
|
||||
## Getting Started
|
||||
## 始めに
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Docker Compose" icon="docker" href="/l/ja/developers/self-host/capabilities/docker-compose">
|
||||
Quick setup with Docker
|
||||
Docker でのクイックセットアップ
|
||||
</Card>
|
||||
|
||||
<Card title="Cloud Providers" icon="cloud" href="/l/ja/developers/self-host/capabilities/cloud-providers">
|
||||
Deploy on AWS, GCP, or Azure
|
||||
<Card title="クラウドプロバイダー" icon="cloud" href="/l/ja/developers/self-host/capabilities/cloud-providers">
|
||||
AWS、GCP、または Azure にデプロイ
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
{
|
||||
"tabs": {
|
||||
"userGuide": {
|
||||
"label": "User Guide",
|
||||
"label": "ユーザーガイド",
|
||||
"groups": {
|
||||
"discoverTwenty": {
|
||||
"label": "Discover Twenty",
|
||||
"label": "Twenty を知る",
|
||||
"groups": {
|
||||
"gettingStartedCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"gettingStartedHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dataModel": {
|
||||
"label": "Data Model",
|
||||
"label": "データモデル",
|
||||
"groups": {
|
||||
"dataModelCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"dataModelHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dataMigration": {
|
||||
"label": "Data Migration",
|
||||
"label": "データ移行",
|
||||
"groups": {
|
||||
"dataMigrationCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"dataMigrationHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"calendarEmails": {
|
||||
"label": "Calendar & Emails",
|
||||
"label": "カレンダーとメール",
|
||||
"groups": {
|
||||
"calendarEmailsCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"calendarEmailsHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"workflows": {
|
||||
"label": "Workflows",
|
||||
"label": "ワークフロー",
|
||||
"groups": {
|
||||
"workflowsCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"workflowsHowTos": {
|
||||
"label": "How-Tos",
|
||||
"label": "ハウツー",
|
||||
"groups": {
|
||||
"crmAutomations": {
|
||||
"label": "CRM Automations"
|
||||
"label": "CRM の自動化"
|
||||
},
|
||||
"connectToOtherTools": {
|
||||
"label": "Connect to Other Tools"
|
||||
"label": "他のツールと連携"
|
||||
},
|
||||
"advancedConfigurations": {
|
||||
"label": "Advanced Configurations"
|
||||
"label": "高度な設定"
|
||||
},
|
||||
"needMoreHelp": {
|
||||
"label": "Need More Help"
|
||||
"label": "さらにヘルプが必要な場合"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -76,122 +76,122 @@
|
||||
"label": "AI",
|
||||
"groups": {
|
||||
"aiCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"aiHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"viewsPipelines": {
|
||||
"label": "Views & Pipelines",
|
||||
"label": "ビューとパイプライン",
|
||||
"groups": {
|
||||
"viewsPipelinesCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"viewsPipelinesHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dashboards": {
|
||||
"label": "Dashboards",
|
||||
"label": "ダッシュボード",
|
||||
"groups": {
|
||||
"dashboardsCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"dashboardsHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"permissionsAccess": {
|
||||
"label": "Permissions & Access",
|
||||
"label": "権限とアクセス",
|
||||
"groups": {
|
||||
"permissionsAccessCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"permissionsAccessHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"billing": {
|
||||
"label": "Billing",
|
||||
"label": "請求",
|
||||
"groups": {
|
||||
"billingCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"billingHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"label": "Settings",
|
||||
"label": "設定",
|
||||
"groups": {
|
||||
"settingsCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
},
|
||||
"settingsHowTos": {
|
||||
"label": "How-Tos"
|
||||
"label": "ハウツー"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"developers": {
|
||||
"label": "Developers",
|
||||
"label": "開発者",
|
||||
"groups": {
|
||||
"developersGroup": {
|
||||
"label": "Developers"
|
||||
"label": "開発者"
|
||||
},
|
||||
"extend": {
|
||||
"label": "Extend",
|
||||
"label": "拡張",
|
||||
"groups": {
|
||||
"extendCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
}
|
||||
}
|
||||
},
|
||||
"selfHost": {
|
||||
"label": "Self-Host",
|
||||
"label": "セルフホスト",
|
||||
"groups": {
|
||||
"selfHostCapabilities": {
|
||||
"label": "Capabilities"
|
||||
"label": "機能"
|
||||
}
|
||||
}
|
||||
},
|
||||
"contribute": {
|
||||
"label": "Contribute",
|
||||
"label": "貢献",
|
||||
"groups": {
|
||||
"contributeCapabilities": {
|
||||
"label": "Capabilities",
|
||||
"label": "機能",
|
||||
"groups": {
|
||||
"frontendDevelopment": {
|
||||
"label": "Frontend Development",
|
||||
"label": "フロントエンド開発",
|
||||
"groups": {
|
||||
"twentyUi": {
|
||||
"label": "Twenty UI",
|
||||
"groups": {
|
||||
"display": {
|
||||
"label": "Display"
|
||||
"label": "表示"
|
||||
},
|
||||
"feedback": {
|
||||
"label": "Feedback"
|
||||
"label": "フィードバック"
|
||||
},
|
||||
"input": {
|
||||
"label": "Input"
|
||||
"label": "入力"
|
||||
},
|
||||
"navigation": {
|
||||
"label": "Navigation"
|
||||
"label": "ナビゲーション"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"backendDevelopment": {
|
||||
"label": "Backend Development"
|
||||
"label": "バックエンド開発"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: App Tooltip
|
||||
title: アプリツールチップ
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A brief message that displays additional information when a user interacts with an element.
|
||||
ユーザーが要素とやり取りするときに追加情報を表示する短いメッセージ。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
@@ -37,27 +37,27 @@ A brief message that displays additional information when a user interacts with
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ---------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional CSS class for additional styling |
|
||||
| anchorSelect | CSS selector | Selector for the tooltip anchor (the element that triggers the tooltip) |
|
||||
| content | string | The content you want to display within the tooltip |
|
||||
| delayHide | number | The delay in seconds before hiding the tooltip after the cursor leaves the anchor |
|
||||
| offset | number | The offset in pixels for positioning the tooltip |
|
||||
| noArrow | boolean | If `true`, hides the arrow on the tooltip |
|
||||
| isOpen | boolean | If `true`, the tooltip is open by default |
|
||||
| place | `PlacesType` string from `react-tooltip` | Specifies the placement of the tooltip. Values include `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, and `left-end` |
|
||||
| positionStrategy | `PositionStrategy` string from `react-tooltip` | Position strategy for the tooltip. Has two values: `absolute` and `fixed` |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリング用のオプションのCSSクラス |
|
||||
| anchorSelect | CSSセレクタ | ツールチップのアンカー（ツールチップをトリガーする要素）のセレクタ |
|
||||
| content | string | ツールチップ内に表示したいコンテンツ |
|
||||
| delayHide | 数 | アンカーからカーソルが離れた後、ツールチップを非表示にする前の遅延（秒） |
|
||||
| offset | 数 | ツールチップの位置を決めるためのオフセット（ピクセル） |
|
||||
| noArrow | ブール型 | `true`の場合、ツールチップの矢印を非表示にします |
|
||||
| isOpen | ブール型 | `true`の場合、ツールチップはデフォルトで開かれています |
|
||||
| place | `react-tooltip`からの`PlacesType`文字列 | ツールチップの配置を指定します。 値は`bottom`、`left`、`right`、`top`、`top-start`、`top-end`、`right-start`、`right-end`、`bottom-start`、`bottom-end`、`left-start`、`left-end`などがあります |
|
||||
| positionStrategy | `react-tooltip`からの`PositionStrategy`文字列 | ツールチップの位置戦略。 2つの値があります: `absolute` と `fixed` |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Overflowing Text with Tooltip
|
||||
## ツールチップを伴うオーバーフローテキスト
|
||||
|
||||
Handles overflowing text and displays a tooltip when the text overflows.
|
||||
オーバーフローテキストを処理し、テキストがオーバーフローしたときにツールチップを表示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
||||
|
||||
@@ -70,9 +70,9 @@ Handles overflowing text and displays a tooltip when the text overflows.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----- | ------ | ------------------------------------------------------------ |
|
||||
| text | string | The content you want to display in the overflowing text area |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----- | ------ | -------------------------- |
|
||||
| テキスト | string | オーバーフローテキストエリア内に表示したいコンテンツ |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Checkmark
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
title: チェックマーク
|
||||
image: '""'
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
<img src="""" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Represents a successful or completed action.
|
||||
成功したまたは完了したアクションを示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Checkmark } from 'twenty-ui/display';
|
||||
|
||||
@@ -20,17 +20,17 @@ Represents a successful or completed action.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
Extends `React.ComponentPropsWithoutRef<'div'>` and accepts all the props of a regular `div` element.
|
||||
<Tab title="プロパティ">
|
||||
`div` 要素の全てのプロパティを受け取る他、`React.ComponentPropsWithoutRef<'div'>`を拡張します。
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Animated Checkmark
|
||||
## アニメーション付きチェックマーク
|
||||
|
||||
Represents a checkmark icon with the added feature of animation.
|
||||
アニメーション機能を追加したチェックマークアイコンを示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { AnimatedCheckmark } from 'twenty-ui/display';
|
||||
|
||||
@@ -47,12 +47,12 @@ Represents a checkmark icon with the added feature of animation.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| ----------- | ------- | ------------------------------------------- | ----------- |
|
||||
| isAnimating | boolean | Controls whether the checkmark is animating | false |
|
||||
| color | string | Color of the checkmark | |
|
||||
| duration | number | The duration of the animation in seconds | 0.5 seconds |
|
||||
| size | number | The size of the checkmark | 28 pixels |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ---------- | ------ | --------------------- | ------ |
|
||||
| アニメーションの有無 | ブール型 | チェックマークのアニメーションを制御します | 偽 |
|
||||
| カラー | string | チェックマークの色 | |
|
||||
| 継続時間 | 数 | アニメーションの持続時間（秒） | 0.5秒 |
|
||||
| サイズ | 数 | チェックマークのサイズ | 28ピクセル |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Chip
|
||||
title: チップ
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
<img src="/images/user-guide/github/github-header.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A visual element that you can use as a clickable or non-clickable container with a label, optional left and right components, and various styling options to display labels and tags.
|
||||
ラベル、オプションの左および右コンポーネント、さまざまなスタイルオプションを使用してラベルやタグを表示するクリック可能または非クリック可能なコンテナとして使用できるビジュアル要素。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
@@ -33,22 +33,22 @@ A visual element that you can use as a clickable or non-clickable container with
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------------ | ------------------------ | -------------------------------------------------------------------------------------------- |
|
||||
| linkToEntity | string | The link to the entity |
|
||||
| entityId | string | The unique identifier for the entity |
|
||||
| name | string | The name of the entity |
|
||||
| pictureUrl | string | s picture", |
|
||||
| avatarType | Avatar Type | The type of avatar you want to display. Has two options: `rounded` and `squared` |
|
||||
| variant | `EntityChipVariant` enum | Variant of the entity chip you want to display. Has two options: `regular` and `transparent` |
|
||||
| LeftIcon | IconComponent | A React component representing an icon. Displayed on the left side of the chip |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ----------------------- | -------------------------------------------------------- |
|
||||
| linkToEntity | string | エンティティへのリンク |
|
||||
| entityId | string | エンティティの一意識別子 |
|
||||
| 名前 | string | エンティティの名前 |
|
||||
| pictureUrl | string | 写真", |
|
||||
| avatarType | アバタータイプ | 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared` |
|
||||
| バリアント | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
|
||||
| 左アイコン | アイコンコンポーネント | アイコンを表す React コンポーネント。 チップの左側に表示されます |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Examples
|
||||
## 例
|
||||
|
||||
### Transparent Disabled Chip
|
||||
### 透明無効チップ
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
@@ -73,7 +73,7 @@ export const MyComponent = () => {
|
||||
|
||||
<br />
|
||||
|
||||
### Disabled Chip with Tooltip
|
||||
### ツールチップ付き無効チップ
|
||||
|
||||
```jsx
|
||||
import { Chip } from "twenty-ui/components";
|
||||
@@ -95,12 +95,12 @@ export const MyComponent = () => {
|
||||
};
|
||||
```
|
||||
|
||||
## Entity Chip
|
||||
## エンティティチップ
|
||||
|
||||
A Chip-like element to display information about an entity.
|
||||
エンティティに関する情報を表示するチップ風の要素。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
@@ -124,15 +124,15 @@ A Chip-like element to display information about an entity.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------------ | ------------------------ | -------------------------------------------------------------------------------------------- |
|
||||
| linkToEntity | string | The link to the entity |
|
||||
| entityId | string | The unique identifier for the entity |
|
||||
| name | string | The name of the entity |
|
||||
| pictureUrl | string | s picture", |
|
||||
| avatarType | Avatar Type | The type of avatar you want to display. Has two options: `rounded` and `squared` |
|
||||
| variant | `EntityChipVariant` enum | Variant of the entity chip you want to display. Has two options: `regular` and `transparent` |
|
||||
| LeftIcon | IconComponent | A React component representing an icon. Displayed on the left side of the chip |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ----------------------- | -------------------------------------------------------- |
|
||||
| linkToEntity | string | エンティティへのリンク |
|
||||
| entityId | string | エンティティの一意識別子 |
|
||||
| 名前 | string | エンティティの名前 |
|
||||
| pictureUrl | string | 写真", |
|
||||
| avatarType | アバタータイプ | 表示したいアバターのタイプ。 オプションは2つ：`rounded` と `squared` |
|
||||
| バリアント | `EntityChipVariant` 列挙型 | 表示したいエンティティチップのバリアント。 オプションは2つ：`regular` と `transparent` |
|
||||
| 左アイコン | アイコンコンポーネント | アイコンを表す React コンポーネント。 チップの左側に表示されます |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
---
|
||||
title: Icons
|
||||
title: アイコン
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
<img src="/images/user-guide/objects/objects.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A list of icons used throughout our app.
|
||||
アプリ全体で使用されるアイコンの一覧。
|
||||
|
||||
## Tabler Icons
|
||||
|
||||
We use Tabler icons for React throughout the app.
|
||||
アプリ全体で React 向けの Tabler Icons を使用しています。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Installation">
|
||||
<Tab title="インストール">
|
||||
<br />
|
||||
|
||||
```
|
||||
@@ -22,8 +22,8 @@ We use Tabler icons for React throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
You can import each icon as a component. Here's an example:
|
||||
<Tab title="プロパティ">
|
||||
各アイコンをコンポーネントとしてインポートできます。 例はこちら：
|
||||
|
||||
<br />
|
||||
|
||||
@@ -36,25 +36,25 @@ We use Tabler icons for React throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| ------ | ------ | ------------------------------------------ | ------------ |
|
||||
| size | number | The height and width of the icon in pixels | 24 |
|
||||
| color | string | The color of the icons | currentColor |
|
||||
| stroke | number | The stroke width of the icon in pixels | 2 |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ----- | ------ | ------------------- | ------------ |
|
||||
| サイズ | 数 | アイコンの高さと幅（ピクセル単位） | 24 |
|
||||
| カラー | string | アイコンの色 | currentColor |
|
||||
| ストローク | 数 | アイコンのストローク幅（ピクセル単位） | 2 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Custom Icons
|
||||
## カスタムアイコン
|
||||
|
||||
In addition to Tabler icons, the app also uses some custom icons.
|
||||
Tablerアイコンに加えて、アプリにはいくつかのカスタムアイコンも使用されています。
|
||||
|
||||
### Icon Address Book
|
||||
### アイコンアドレス帳
|
||||
|
||||
Displays an address book icon.
|
||||
アドレス帳のアイコンを表示します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconAddressBook } from 'twenty-ui/display';
|
||||
|
||||
@@ -64,10 +64,10 @@ Displays an address book icon.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| ------ | ------ | ------------------------------------------ | ------- |
|
||||
| size | number | The height and width of the icon in pixels | 24 |
|
||||
| stroke | number | The stroke width of the icon in pixels | 2 |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ----- | --- | ------------------- | ----- |
|
||||
| サイズ | 数 | アイコンの高さと幅（ピクセル単位） | 24 |
|
||||
| ストローク | 数 | アイコンのストローク幅（ピクセル単位） | 2 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -4,10 +4,10 @@ image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A small badge or "pill" to indicate something is coming soon.
|
||||
近日公開を示す小さなバッジ（ピル）です。
|
||||
|
||||
```jsx
|
||||
import { SoonPill } from "@/ui/display/pill/components/SoonPill";
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Tag
|
||||
title: タグ
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
<img src="/images/user-guide/table-views/table.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Component to visually categorize or label content.
|
||||
コンテンツを視覚的に分類またはラベル付けするためのコンポーネント。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Tag } from "@/ui/display/tag/components/Tag";
|
||||
|
||||
@@ -19,20 +19,20 @@ Component to visually categorize or label content.
|
||||
<Tag
|
||||
className
|
||||
color="red"
|
||||
text="Urgent"
|
||||
onClick={() => console.log("click")}
|
||||
text="緊急"
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| color | string | Color of the tag. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, `gray` |
|
||||
| text | string | The content of the tag |
|
||||
| onClick | function | Optional function called when a user clicks on the tag |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | ------------------------------------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのための任意の名前 |
|
||||
| カラー | string | タグの色。 オプションは次のとおりです: `緑`, `トルコ石`, `空`, `青`, `紫`, `ピンク`, `赤`, `オレンジ`, `黄`, `灰色` |
|
||||
| テキスト | string | タグの内容 |
|
||||
| onClick | 関数 | ユーザーがタグをクリックすると呼び出される任意の関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Input
|
||||
title: 入力
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Block Editor
|
||||
title: ブロックエディター
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
<img src="/images/user-guide/api/api.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org/) to allow users to edit and view blocks of content.
|
||||
ブロックベースのリッチテキストエディター[BlockNote](https://www.blocknotejs.org/)を使用して、ユーザーがコンテンツのブロックを編集および表示できるようにします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
@@ -23,9 +23,9 @@ Uses a block-based rich text editor from [BlockNote](https://www.blocknotejs.org
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------ | ----------------- | ------------------------------------------ |
|
||||
| editor | `BlockNoteEditor` | The block editor instance or configuration |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----- | ----------------- | -------------------- |
|
||||
| エディター | `BlockNoteEditor` | ブロックエディターインスタンスまたは構成 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Buttons
|
||||
title: ボタン
|
||||
image: /images/user-guide/views/filter.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
||||
<img src="/images/user-guide/views/filter.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A list of buttons and button groups used throughout the app.
|
||||
アプリ全体で使用されるボタンおよびボタングループの一覧。
|
||||
|
||||
## Button
|
||||
## ボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Button } from "@/ui/input/button/components/Button";
|
||||
|
||||
@@ -21,7 +21,7 @@ A list of buttons and button groups used throughout the app.
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Title"
|
||||
title="タイトル"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
@@ -30,35 +30,35 @@ A list of buttons and button groups used throughout the app.
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional class name for additional styling |
|
||||
| Icon | `React.ComponentType` | An optional icon component that's displayed within the button |
|
||||
| title | string | The text content of the button |
|
||||
| fullWidth | boolean | Defines whether the button should span the whole width of its container |
|
||||
| variant | string | The visual style variant of the button. Options include `primary`, `secondary`, and `tertiary` |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` |
|
||||
| position | string | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
|
||||
| accent | string | The accent color of the button. Options include: `default`, `blue`, and `danger` |
|
||||
| soon | boolean | Indicates if the button is marked as "soon" (such as for upcoming features) |
|
||||
| disabled | boolean | Specifies whether the button is disabled or not |
|
||||
| focus | boolean | Determines if the button has focus |
|
||||
| onClick | function | A callback function that triggers when the user clicks on the button |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | --------------------- | ------------------------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
||||
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
||||
| タイトル | string | ボタンのテキスト内容 |
|
||||
| fullWidth | ブール型 | ボタンがコンテナの全幅を占めるかどうかを定義します |
|
||||
| バリアント | string | ボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
||||
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
|
||||
| accent | string | ボタンのアクセント色。 オプションは `default`、`blue`、`danger` を含みます |
|
||||
| 間もなく | ブール型 | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。 |
|
||||
| disabled | ブール型 | ボタンが無効かどうかを指定します |
|
||||
| focus | ブール型 | ボタンにフォーカスがあるかどうかを決定します |
|
||||
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Button Group
|
||||
## ボタングループ
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Button } from "@/ui/input/button/components/Button";
|
||||
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
||||
@@ -69,7 +69,7 @@ A list of buttons and button groups used throughout the app.
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 1"
|
||||
title="ボタン 1"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
size="medium"
|
||||
@@ -78,12 +78,12 @@ A list of buttons and button groups used throughout the app.
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 2"
|
||||
title="ボタン 2"
|
||||
fullWidth={false}
|
||||
variant="secondary"
|
||||
size="medium"
|
||||
@@ -92,12 +92,12 @@ A list of buttons and button groups used throughout the app.
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
<Button
|
||||
className
|
||||
Icon={null}
|
||||
title="Button 3"
|
||||
title="ボタン 3"
|
||||
fullWidth={false}
|
||||
variant="tertiary"
|
||||
size="medium"
|
||||
@@ -106,7 +106,7 @@ A list of buttons and button groups used throughout the app.
|
||||
soon={false}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
@@ -115,21 +115,21 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
|
||||
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
|
||||
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
|
||||
| className | string | Optional class name for additional styling |
|
||||
| children | ReactNode | An array of React elements representing the individual buttons within the group |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | --------- | ---------------------------------------------------------------------- |
|
||||
| バリアント | string | グループ内のボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます |
|
||||
| サイズ | string | グループ内のボタンのサイズ。 オプションは2つ：`medium` と `small` |
|
||||
| accent | string | グループ内のボタンのアクセント色。 オプションは `default`、`blue`、 `danger` を含みます |
|
||||
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
||||
| children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Floating Button
|
||||
## 浮動ボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
@@ -139,7 +139,7 @@ A list of buttons and button groups used throughout the app.
|
||||
<FloatingButton
|
||||
className
|
||||
Icon={IconSearch}
|
||||
title="Title"
|
||||
title="タイトル"
|
||||
size="medium"
|
||||
position="standalone"
|
||||
applyShadow={true}
|
||||
@@ -152,25 +152,25 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| Icon | `React.ComponentType` | An optional icon component that's displayed within the button |
|
||||
| title | string | The text content of the button |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` |
|
||||
| position | string | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right` |
|
||||
| applyShadow | boolean | Determines whether to apply shadow to a button |
|
||||
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
|
||||
| disabled | boolean | Determines whether the button is disabled |
|
||||
| focus | boolean | Indicates if the button has focus |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----------- | --------------------- | ------------------------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
||||
| タイトル | string | ボタンのテキスト内容 |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
||||
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`middle`、 `right` を含みます |
|
||||
| applyShadow | ブール型 | ボタンにシャドウを適用するかどうかを決定します |
|
||||
| applyBlur | ブール型 | ボタンにぼかし効果を適用するかどうかを決定します |
|
||||
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
||||
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Floating Button Group
|
||||
## 浮動ボタングループ
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
||||
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
||||
@@ -206,18 +206,18 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| -------- | --------- | ------------------------------------------------------------------------------- | ------- |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` | small |
|
||||
| children | ReactNode | An array of React elements representing the individual buttons within the group | |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| -------- | --------- | ------------------------------------ | ----- |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` | small |
|
||||
| children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列 | |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Floating Icon Button
|
||||
## 浮動アイコンボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
@@ -233,7 +233,7 @@ A list of buttons and button groups used throughout the app.
|
||||
applyBlur={true}
|
||||
disabled={false}
|
||||
focus={false}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
isActive={true}
|
||||
/>
|
||||
);
|
||||
@@ -241,26 +241,26 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| Icon | `React.ComponentType` | An optional icon component that's displayed within the button |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` |
|
||||
| position | string | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
|
||||
| applyShadow | boolean | Determines whether to apply shadow to a button |
|
||||
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
|
||||
| disabled | boolean | Determines whether the button is disabled |
|
||||
| focus | boolean | Indicates if the button has focus |
|
||||
| onClick | function | A callback function that triggers when the user clicks on the button |
|
||||
| isActive | boolean | Determines if the button is in an active state |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----------- | --------------------- | ------------------------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
||||
| "位置" | string | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
|
||||
| applyShadow | ブール型 | ボタンにシャドウを適用するかどうかを決定します |
|
||||
| applyBlur | ブール型 | ボタンにぼかし効果を適用するかどうかを決定します |
|
||||
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
||||
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
||||
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
||||
| isActive | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Floating Icon Button Group
|
||||
## 浮動アイコンボタングループ
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
||||
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
||||
@@ -269,12 +269,12 @@ A list of buttons and button groups used throughout the app.
|
||||
const iconButtons = [
|
||||
{
|
||||
Icon: IconClipboardText,
|
||||
onClick: () => console.log("Button 1 clicked"),
|
||||
onClick: () => console.log("ボタン 1 がクリックされました"),
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
Icon: IconCheckbox,
|
||||
onClick: () => console.log("Button 2 clicked"),
|
||||
onClick: () => console.log("ボタン 2 がクリックされました"),
|
||||
isActive: true,
|
||||
},
|
||||
];
|
||||
@@ -290,19 +290,19 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` |
|
||||
| iconButtons | array | An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
||||
| iconButtons | array | グループ内のアイコンボタンをそれぞれ表すオブジェクトの配列。 各オブジェクトには、ボタンに表示したいアイコンコンポーネント、ユーザーがボタンをクリックした時に呼び出される関数、およびボタンをアクティブにするかどうかが含まれる必要があります。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Light Button
|
||||
## ライトボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { LightButton } from "@/ui/input/button/components/LightButton";
|
||||
|
||||
@@ -310,35 +310,35 @@ A list of buttons and button groups used throughout the app.
|
||||
return <LightButton
|
||||
className
|
||||
icon={null}
|
||||
title="Title"
|
||||
title="タイトル"
|
||||
accent="secondary"
|
||||
active={false}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={()=>console.log('click')}
|
||||
onClick={()=>console.log('クリック')}
|
||||
/>;
|
||||
};
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ----------------- | --------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| icon | `React.ReactNode` | The icon you want to display in the button |
|
||||
| title | string | The text content of the button |
|
||||
| accent | string | The accent color of the button. Options include: `secondary` and `tertiary` |
|
||||
| active | boolean | Determines if the button is in an active state |
|
||||
| disabled | boolean | Determines whether the button is disabled |
|
||||
| focus | boolean | Indicates if the button has focus |
|
||||
| onClick | function | A callback function that triggers when the user clicks on the button |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------------- | ------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| アイコン | `React.ReactNode` | ボタンに表示したいアイコン |
|
||||
| タイトル | string | ボタンのテキスト内容 |
|
||||
| accent | string | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
|
||||
| アクティブ | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
||||
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
||||
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
||||
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Light Icon Button
|
||||
## ライトアイコンボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
@@ -349,39 +349,39 @@ A list of buttons and button groups used throughout the app.
|
||||
className
|
||||
testId="test1"
|
||||
Icon={IconSearch}
|
||||
title="Title"
|
||||
title="タイトル"
|
||||
size="small"
|
||||
accent="secondary"
|
||||
active={true}
|
||||
disabled={false}
|
||||
focus={true}
|
||||
onClick={() => console.log("click")}
|
||||
onClick={() => console.log("クリック")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | --------------------- | --------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| testId | string | Test identifier for the button |
|
||||
| Icon | `React.ComponentType` | An optional icon component that's displayed within the button |
|
||||
| title | string | The text content of the button |
|
||||
| size | string | The size of the button. Has two options: `small` and `medium` |
|
||||
| accent | string | The accent color of the button. Options include: `secondary` and `tertiary` |
|
||||
| active | boolean | Determines if the button is in an active state |
|
||||
| disabled | boolean | Determines whether the button is disabled |
|
||||
| focus | boolean | Indicates if the button has focus |
|
||||
| onClick | function | A callback function that triggers when the user clicks on the button |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | --------------------- | ------------------------------------------------ |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| testId | string | ボタンのテスト識別子 |
|
||||
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
||||
| タイトル | string | ボタンのテキスト内容 |
|
||||
| サイズ | string | ボタンのサイズ。 オプションは2つ：`small` と `medium` |
|
||||
| accent | string | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
|
||||
| アクティブ | ブール型 | ボタンがアクティブな状態にあるかどうかを決定します |
|
||||
| disabled | ブール型 | ボタンが無効かどうかを決定します |
|
||||
| focus | ブール型 | ボタンにフォーカスがあるかどうかを示します |
|
||||
| onClick | function | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Main Button
|
||||
## メインボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { MainButton } from "@/ui/input/button/components/MainButton";
|
||||
import { IconCheckbox } from "@tabler/icons-react";
|
||||
@@ -389,7 +389,7 @@ A list of buttons and button groups used throughout the app.
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<MainButton
|
||||
title="Checkbox"
|
||||
title="チェックボックス"
|
||||
fullWidth={false}
|
||||
variant="primary"
|
||||
soon={false}
|
||||
@@ -400,22 +400,22 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------------- | -------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| title | string | The text content of the button |
|
||||
| fullWidth | boolean | Defines whether the button should span the whole width of its container |
|
||||
| variant | string | The visual style variant of the button. Options include `primary` and `secondary` |
|
||||
| soon | boolean | Indicates if the button is marked as "soon" (such as for upcoming features) |
|
||||
| Icon | `React.ComponentType` | An optional icon component that's displayed within the button |
|
||||
| React `button` props | `React.ComponentProps<'button'>` | All standard HTML button props are supported |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------------- | -------------------------------- | ------------------------------------------------------ |
|
||||
| タイトル | string | ボタンのテキスト内容 |
|
||||
| fullWidth | ブール型 | ボタンがコンテナの全幅を占めるかどうかを定義します |
|
||||
| バリアント | string | ボタンの視覚スタイルのバリアント。 オプションは `primary` と `secondary` を含みます |
|
||||
| 間もなく | ブール型 | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。 |
|
||||
| アイコン | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント |
|
||||
| React `button` props | `React.ComponentProps<'button'>` | 標準的なHTMLボタンのプロパティすべてがサポートされています |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Rounded Icon Button
|
||||
## 丸型アイコンボタン
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
@@ -430,10 +430,10 @@ A list of buttons and button groups used throughout the app.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------------- | ----------------------------------------------- | ----------- |
|
||||
| Icon | `React.ComponentType` | |
|
||||
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------------- | ----------------------------------------------- | -- |
|
||||
| アイコン | `React.ComponentType` | |
|
||||
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Checkbox
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
title: チェックボックス
|
||||
image: '""'
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
<img src="""" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Used when a user needs to select multiple values from several options.
|
||||
ユーザーが、複数のオプションから複数の値を選択する必要がある場合に使用されます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
@@ -30,15 +30,15 @@ Used when a user needs to select multiple values from several options.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------------- | -------- | -------------------------------------------------------------------------------------------- |
|
||||
| checked | boolean | Indicates whether the checkbox is checked |
|
||||
| indeterminate | boolean | Indicates whether the checkbox is in an indeterminate state (neither checked nor unchecked) |
|
||||
| onChange | function | The callback function you want to trigger when the checkbox state changes |
|
||||
| onCheckedChange | function | The callback function you want to trigger when the `checked` state changes |
|
||||
| variant | string | The visual style variant of the box. Options include: `primary`, `secondary`, and `tertiary` |
|
||||
| size | string | The size of the checkbox. Has two options: `small` and `large` |
|
||||
| shape | string | The shape of the checkbox. Has two options: `squared` and `rounded` |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------------- | ------ | ------------------------------------------------------------------------- |
|
||||
| checked | ブール型 | チェックボックスがチェックされているかどうかを示します |
|
||||
| 不確定 | ブール型 | チェックボックスが不確定な状態（チェック済みでも未チェックでもない）かどうかを示します |
|
||||
| onChange | 関数 | チェックボックスの状態が変化したときにトリガーされるコールバック関数 |
|
||||
| onCheckedChange | 関数 | `checked` 状態が変化したときにトリガーされるコールバック関数 |
|
||||
| バリアント | string | ボックスのビジュアルスタイルのバリエーション。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます |
|
||||
| サイズ | string | チェックボックスのサイズ。 オプションは2つ：`small` と `large` |
|
||||
| 形状 | string | チェックボックスの形状。 オプションは2つ：`squared` と `rounded` |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Color Scheme
|
||||
title: カラースキーム
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
<img src="/images/user-guide/fields/field.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
## Color Scheme Card
|
||||
## 配色カード
|
||||
|
||||
Represents different color schemes and is specially tailored for light and dark themes.
|
||||
異なる配色を表し、ライトおよびダークテーマに特化されています。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
@@ -27,21 +27,21 @@ Represents different color schemes and is specially tailored for light and dark
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| ---------------- | --------------------------------------- | ----------------------------------------------------------------------- | ------- |
|
||||
| variant | string | The color scheme variant. Options include `Dark`, `Light`, and `System` | light |
|
||||
| selected | boolean | If `true`, displays a checkmark to indicate the selected color scheme | |
|
||||
| additional props | `React.ComponentPropsWithoutRef<'div'>` | Standard HTML `div` element props | |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| -------- | --------------------------------------- | --------------------------------------------------- | ----- |
|
||||
| バリアント | string | 配色のバリエーション。 オプションには `ダーク`、`ライト`、および `システム` が含まれています | ライト |
|
||||
| 選択済み | ブール型 | `true` の場合、選択されているカラースキームを示すチェックマークを表示します | |
|
||||
| 追加のプロパティ | `React.ComponentPropsWithoutRef<'div'>` | 標準の HTML `div` エレメントのプロパティ | |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Color Scheme Picker
|
||||
## 配色ピッカー
|
||||
|
||||
Allows users to choose between different color schemes.
|
||||
ユーザーが異なる配色を選択できます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
@@ -54,10 +54,10 @@ Allows users to choose between different color schemes.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------- | -------------- | ---------------------------------------------------------------------------- |
|
||||
| value | `Color Scheme` | The currently selected color scheme |
|
||||
| onChange | function | The callback function you want to trigger when a user selects a color scheme |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | --------- | ------------------------------ |
|
||||
| 値 | `カラースキーム` | 現在選択されている配色 |
|
||||
| onChange | 関数 | ユーザーが配色を選択したときにトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Icon Picker
|
||||
title: アイコンピッカー
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
<img src="/images/user-guide/github/github-header.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A dropdown-based icon picker that allows users to select an icon from a list.
|
||||
ドロップダウンベースのアイコンピッカーで、ユーザーがリストからアイコンを選択できます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
@@ -38,15 +38,15 @@ A dropdown-based icon picker that allows users to select an icon from a list.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| disabled | boolean | Disables the icon picker if set to `true` |
|
||||
| onChange | function | The callback function triggered when the user selects an icon. It receives an object with `iconKey` and `Icon` properties |
|
||||
| selectedIconKey | string | The key of the initially selected icon |
|
||||
| onClickOutside | function | Callback function triggered when the user clicks outside the dropdown |
|
||||
| onClose | function | Callback function triggered when the dropdown is closed |
|
||||
| onOpen | function | Callback function triggered when the dropdown is opened |
|
||||
| variant | string | The visual style variant of the clickable icon. Options include: `primary`, `secondary`, and `tertiary` |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------------- | ------ | ------------------------------------------------------------------------------ |
|
||||
| 無効 | ブール型 | `true` に設定されるとアイコンピッカーは無効になります |
|
||||
| onChange | 関数 | ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは `iconKey` と `Icon` プロパティを持つオブジェクトを受け取ります |
|
||||
| selectedIconKey | string | 最初に選択されたアイコンのキー |
|
||||
| onClickOutside | 関数 | ユーザーがドロップダウン外をクリックしたときにトリガーされるコールバック関数 |
|
||||
| onClose | 関数 | ドロップダウンが閉じられたときにトリガーされるコールバック関数 |
|
||||
| onOpen | 関数 | ドロップダウンが開かれたときにトリガーされるコールバック関数 |
|
||||
| バリアント | string | クリック可能なアイコンのビジュアルスタイルバリアント。 オプションには `primary`、 `secondary`、 `tertiary` が含まれます |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Image Input
|
||||
title: 画像入力
|
||||
image: /images/user-guide/objects/objects.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||||
<img src="/images/user-guide/objects/objects.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Allows users to upload and remove an image.
|
||||
ユーザーが画像をアップロードおよび削除できるようにします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { ImageInput } from "@/ui/input/components/ImageInput";
|
||||
|
||||
@@ -20,15 +20,15 @@ Allows users to upload and remove an image.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------------ | -------- | ------------------------------------------------------------------------------------------------- |
|
||||
| picture | string | The image source URL |
|
||||
| onUpload | function | The function called when a user uploads a new image. It receives the `File` object as a parameter |
|
||||
| onRemove | function | The function called when the user clicks on the remove button |
|
||||
| onAbort | function | The function called when a user clicks on the abort button during image upload |
|
||||
| isUploading | boolean | Indicates whether an image is currently being uploaded |
|
||||
| errorMessage | string | An optional error message to display below the image input |
|
||||
| disabled | boolean | If `true`, the entire input is disabled, and the buttons are not clickable |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 写真 | string | 画像ソースURL |
|
||||
| onUpload | 関数 | 新しい画像がアップロードされたときに呼び出される関数。 新しい画像がアップロードされたときに呼び出される関数。 パラメーターとして `File` オブジェクトを受け取ります 新しい画像がアップロードされたときに呼び出される関数。 パラメーターとして `File` オブジェクトを受け取ります |
|
||||
| onRemove | 関数 | ユーザーが削除ボタンをクリックしたときに呼び出される関数 |
|
||||
| onAbort | 関数 | 画像のアップロード中に中止ボタンをクリックしたときに呼び出される関数 |
|
||||
| isUploading | ブール型 | 画像が現在アップロード中であるかどうかを示します |
|
||||
| errorMessage | string | 画像入力の下に表示されるオプションのエラーメッセージ |
|
||||
| disabled | ブール型 | `true` の場合、入力全体が無効化され、ボタンをクリックできなくなります。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Radio
|
||||
title: ラジオ
|
||||
image: /images/user-guide/create-workspace/workspace-cover.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Used when users may only choose one option from a series of options.
|
||||
ユーザーが一連の選択肢の中から 1 つのオプションのみを選ぶことができるときに使用されます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Radio } from "twenty-ui/display";
|
||||
|
||||
@@ -41,27 +41,27 @@ Used when users may only choose one option from a series of options.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------------- | ---------------------- | ------------------------------------------------------------------------------------------------ |
|
||||
| style | `React.CSS` properties | Additional inline styles for the component |
|
||||
| className | string | Optional CSS class for additional styling |
|
||||
| checked | boolean | Indicates whether the radio button is checked |
|
||||
| value | string | The label or text associated with the radio button |
|
||||
| onChange | function | The function called when the selected radio button is changed |
|
||||
| onCheckedChange | function | The function called when the `checked` state of the radio button changes |
|
||||
| size | string | The size of the radio button. Options include: `large` and `small` |
|
||||
| disabled | boolean | If `true`, the radio button is disabled and not clickable |
|
||||
| labelPosition | string | The position of the label text relative to the radio button. Has two options: `left` and `right` |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------------- | ----------------- | ------------------------------------------------ |
|
||||
| スタイル | `React.CSS` プロパティ | コンポーネントの追加インラインスタイル |
|
||||
| className | string | 追加のスタイリング用のオプションのCSSクラス |
|
||||
| checked | ブール型 | ラジオボタンが選択されているかどうかを示す |
|
||||
| 値 | string | ラジオボタンに関連付けられたラベルまたはテキスト |
|
||||
| onChange | 関数 | 選択したラジオボタンが変更されたときに呼ばれる関数 |
|
||||
| onCheckedChange | 関数 | ラジオボタンの「checked」状態が変更されたときに呼び出される関数 |
|
||||
| サイズ | string | ラジオボタンのサイズ。 オプションには、`large` と `small` があります |
|
||||
| disabled | ブール型 | 「true」の場合、ラジオボタンは無効になり、クリックできなくなります |
|
||||
| ラベルの位置 | string | ラジオボタンに対するラベルテキストの位置。 2 つのオプション：`left` と `right` |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Radio Group
|
||||
## ラジオグループ
|
||||
|
||||
Groups together related radio buttons.
|
||||
関連するラジオボタンをまとめます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import React, { useState } from "react";
|
||||
import { Radio, RadioGroup } from "twenty-ui/display";
|
||||
@@ -86,12 +86,12 @@ Groups together related radio buttons.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------- | ----------------- | ---------------------------------------------------------------------------------- |
|
||||
| value | string | The value of the currently selected radio button |
|
||||
| onChange | function | The callback function triggered when the radio button is changed |
|
||||
| onValueChange | function | The callback function triggered when the selected value in the group changes. |
|
||||
| 値 | string | 現在選択されているラジオボタンの値 |
|
||||
| onChange | 機能 | ラジオボタンが変更されたときにトリガーされるコールバック関数 |
|
||||
| onValueChange | 機能 | グループ内の選択された値が変更されたときにトリガーされるコールバック関数。 |
|
||||
| children | `React.ReactNode` | Allows you to pass React components (such as Radio) as children to the Radio Group |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Select
|
||||
title: 選択する
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Allows users to pick a value from a list of predefined options.
|
||||
ユーザーが事前定義されたオプションのリストから値を選択できるようにします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
@@ -38,14 +38,14 @@ Allows users to pick a value from a list of predefined options.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional CSS class for additional styling |
|
||||
| disabled | boolean | When set to `true`, disables user interaction with the component |
|
||||
| label | string | The label to describe the purpose of the `Select` component |
|
||||
| onChange | function | The function called when the selected values change |
|
||||
| options | array | Represents the options available for the `Selected` component. It's an array of objects where each object has a `value` (the unique identifier), `label` (the unique identifier), and an optional `Icon` |
|
||||
| value | string | Represents the currently selected value. It should match one of the `value` properties in the `options` array |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリング用のオプションのCSSクラス |
|
||||
| disabled | ブール型 | `true` に設定すると、コンポーネントとのユーザーインタラクションが無効になります。 |
|
||||
| ラベル | string | `選択` コンポーネントの目的を説明するラベル |
|
||||
| onChange | 関数 | 選択された値が変更されたときに呼び出される機能 |
|
||||
| オプション | 配列 | Represents the options available for the `Selected` component. 各オブジェクトが `value`（一意の識別子）、`label`（一意の識別子）、およびオプションの `アイコン` を持つオブジェクトの配列です。 |
|
||||
| 値 | string | 現在選択されている値を表します。 その `options` 配列の `value` プロパティのいずれかと一致する必要があります。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
---
|
||||
title: Text
|
||||
title: テキスト
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Header" />
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
## Text Input
|
||||
## テキスト入力
|
||||
|
||||
Allows users to enter and edit text.
|
||||
ユーザーがテキストを入力および編集できるようにします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
console.log("入力が変更されました：", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
console.log("キーが押されました：", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
label="ユーザー名"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
error="無効なユーザー名"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
@@ -45,28 +45,28 @@ Allows users to enter and edit text.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| label | string | Represents the label for the input |
|
||||
| onChange | function | The function called when the input value changes |
|
||||
| fullWidth | boolean | Indicates whether the input should take up 100% of the width |
|
||||
| disableHotkeys | boolean | Indicates whether hotkeys are enabled for the input |
|
||||
| error | string | Represents the error message to be displayed. When provided, it also adds an icon error on the right side of the input |
|
||||
| onKeyDown | function | Called when a key is pressed down while the input field is focused. Receives a `React.KeyboardEvent` as an argument |
|
||||
| RightIcon | IconComponent | An optional icon component displayed on the right side of the input |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
| ラベル | string | 入力のラベルを表します。 |
|
||||
| onChange | function | 入力値が変わるときに呼び出される関数 |
|
||||
| fullWidth | ブール型 | Indicates whether the input should take up 100% of the width |
|
||||
| disableHotkeys | ブール型 | Indicates whether hotkeys are enabled for the input |
|
||||
| エラー | string | 表示されるエラーメッセージを表します。 指定された場合、入力の右側にアイコンエラーも追加されます。 |
|
||||
| onKeyDown | 機能 | 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 入力フィールドにフォーカスがあるときにキーが押されたときに呼び出されます。 Receives a `React.KeyboardEvent` as an argument |
|
||||
| 右アイコン | アイコンコンポーネント | 入力の右側に表示されるオプションのアイコンコンポーネント |
|
||||
|
||||
The component also accepts other HTML input element props.
|
||||
コンポーネントは、他の HTML 入力要素のプロパティも受け入れます。
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Autosize Text Input
|
||||
## オートサイズテキスト入力
|
||||
|
||||
Text input component that automatically adjusts its height based on the content.
|
||||
コンテンツに基づいて高さを自動調整するテキスト入力コンポーネント。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
@@ -89,25 +89,25 @@ Text input component that automatically adjusts its height based on the content.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----------- | -------- | --------------------------------------------------------------------------- |
|
||||
| onValidate | function | The callback function you want to trigger when the user validates the input |
|
||||
| minRows | number | The minimum number of rows for the text area |
|
||||
| placeholder | string | The placeholder text you want to display when the text area is empty |
|
||||
| onFocus | function | The callback function you want to trigger when the text area gains focus |
|
||||
| variant | string | The variant of the input. Options include: `default`, `icon`, and `button` |
|
||||
| buttonTitle | string | The title for the button (only applicable for the button variant) |
|
||||
| value | string | The initial value for the text area |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ---------- | ------ | ------------------------------------------------------------------------ |
|
||||
| onValidate | 機能 | ユーザーが入力を検証するときにトリガーされるコールバック関数 |
|
||||
| 最小行数 | 数 | The minimum number of rows for the text area |
|
||||
| プレースホルダー | string | The placeholder text you want to display when the text area is empty |
|
||||
| onFocus | 機能 | テキストエリアにフォーカスが当たったときにトリガーされるコールバック関数 |
|
||||
| バリアント | string | The variant of the input. オプションには `default`、 `icon`、および `button` が含まれます。 |
|
||||
| ボタンタイトル | string | ボタンのタイトル（ボタンのバリアントの場合のみ適用可能） |
|
||||
| 値 | string | テキストエリアの初期値 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Text Area
|
||||
## テキストエリア
|
||||
|
||||
Allows you to create multi-line text inputs.
|
||||
複数行のテキスト入力を作成できます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
@@ -125,13 +125,13 @@ Allows you to create multi-line text inputs.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ----------- | -------- | -------------------------------------------------------------- |
|
||||
| disabled | boolean | Indicates whether the text area is disabled |
|
||||
| minRows | number | Minimum number of visible rows for the text area. |
|
||||
| onChange | function | Callback function triggered when the text area content changes |
|
||||
| placeholder | string | Placeholder text displayed when the text area is empty |
|
||||
| value | string | The current value of the text area |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | ------ | ---------------------------------- |
|
||||
| 無効 | ブール型 | テキストエリアが無効かどうかを示します |
|
||||
| 最小行数 | 数 | テキストエリアの最小可視行数。 |
|
||||
| onChange | 機能 | テキストエリアの内容が変更されたときにトリガーされるコールバック関数 |
|
||||
| プレースホルダー | string | テキストエリアが空のときに表示されるプレースホルダーテキスト |
|
||||
| 値 | string | テキストエリアの現在の値 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Toggle
|
||||
title: 切り替え
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
<img src="/images/user-guide/table-views/table.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { Toggle } from "twenty-ui/input";
|
||||
|
||||
@@ -25,12 +25,12 @@ image: /images/user-guide/table-views/table.png
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| ---------- | -------- | ------------------------------------------------------------------------------------------- | ------------ |
|
||||
| value | boolean | The current state of the toggle | `false` |
|
||||
| onChange | function | Callback function triggered when the toggle state changes | |
|
||||
| color | string | Color of the toggle when it\ | s blue color |
|
||||
| toggleSize | string | Size of the toggle, affecting both height and weight. Has two options: `small` and `medium` | medium |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| -------- | ------ | --------------------------------------------------------------------------- | ----- |
|
||||
| 値 | ブール型 | トグルの現在の状態 | `偽` |
|
||||
| onChange | 機能 | トグルスイッチの状態が変化した際にトリガーされるコールバック関数 | |
|
||||
| カラー | string | トグルの色\ | 青色 |
|
||||
| トグルサイズ | string | トグルのサイズは、高さと幅の両方に影響します。 トグルのサイズは、高さと幅の両方に影響します。 オプションは2つ：`small` と `medium` | 中 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
---
|
||||
title: Overview
|
||||
description: Component library for Twenty CRM
|
||||
title: 概要
|
||||
description: Twenty CRMのためのコンポーネントライブラリ
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
## Components
|
||||
## コンポーネント
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card href="/l/ja/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
||||
<CardTitle>Display</CardTitle>
|
||||
Display components for showing information visually
|
||||
<CardTitle>表示</CardTitle>
|
||||
視覚的に情報を表示するためのコンポーネント
|
||||
</Card>
|
||||
|
||||
<Card href="/l/ja/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
||||
<CardTitle>Feedback</CardTitle>
|
||||
Feedback components for user notifications
|
||||
<CardTitle>フィードバック</CardTitle>
|
||||
ユーザー通知のためのフィードバックコンポーネント
|
||||
</Card>
|
||||
|
||||
<Card href="/l/ja/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
||||
<CardTitle>Input</CardTitle>
|
||||
Input components for user interaction
|
||||
<CardTitle>入力</CardTitle>
|
||||
ユーザーとの対話のための入力コンポーネント
|
||||
</Card>
|
||||
|
||||
<Card href="/l/ja/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
||||
<CardTitle>Navigation</CardTitle>
|
||||
Navigation components for user interface
|
||||
<Card href="/l/ja/twenty-ui/navigation" img="""">
|
||||
<CardTitle>ナビゲーション</CardTitle>
|
||||
ユーザーインターフェースのためのナビゲーションコンポーネント
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Navigation
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
title: ナビゲーション
|
||||
image: '""'
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
<img src="""" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
title: ブレッドクラム
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
<img src="/images/user-guide/fields/field.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Renders a breadcrumb navigation bar.
|
||||
ブレッドクラムナビゲーションバーをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
@@ -32,10 +32,10 @@ Renders a breadcrumb navigation bar.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | Optional class name for additional styling |
|
||||
| links | array | An array of objects, each representing a breadcrumb link. Each object has a `children` property (the text content of the link) and an optional `href` property (the URL to navigate to when the link is clicked) |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプションクラス名 |
|
||||
| リンク | 配列 | 各オブジェクトはブレッドクラムリンクを表します。 各オブジェクトには `children` プロパティ（リンクのテキストコンテンツ）とオプションの `href` プロパティ（リンクをクリックしたときに移動するURL）が含まれています。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Links
|
||||
title: リンク
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
## Contact Link
|
||||
## 連絡先リンク
|
||||
|
||||
A stylized link component for displaying contact information.
|
||||
連絡先情報を表示するためのスタイライズされたリンクコンポーネントです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
@@ -38,22 +38,22 @@ A stylized link component for displaying contact information.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ----------------- | ---------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| href | string | The target URL or path for the link |
|
||||
| onClick | function | Callback function to be triggered when the link is clicked |
|
||||
| children | `React.ReactNode` | The content to be displayed inside the link |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------------- | ---------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| onClick | function | リンクがクリックされた際にトリガーされるコールバック関数 |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Raw Link
|
||||
## 生リンク
|
||||
|
||||
A stylized link component for displaying links.
|
||||
リンクを表示するためのスタイライズされたリンクコンポーネントです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RawLink } from "/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
@@ -75,22 +75,22 @@ A stylized link component for displaying links.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ----------------- | ---------------------------------------------------------- |
|
||||
| className | string | Optional name for additional styling |
|
||||
| href | string | The target URL or path for the link |
|
||||
| onClick | function | Callback function to be triggered when the link is clicked |
|
||||
| children | `React.ReactNode` | The content to be displayed inside the link |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------------- | ---------------------------- |
|
||||
| className | string | 追加のスタイリングのためのオプション名 |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| onClick | 機能 | リンクがクリックされた際にトリガーされるコールバック関数 |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Rounded Link
|
||||
## 丸リンク
|
||||
|
||||
A rounded-styled link with a Chip component for links.
|
||||
リンクのためのチップコンポーネントを備えた丸いスタイルのリンクです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { RoundedLink } from "/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
@@ -111,21 +111,21 @@ A rounded-styled link with a Chip component for links.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------- | ----------------- | ---------------------------------------------------------- |
|
||||
| href | string | The target URL or path for the link |
|
||||
| children | `React.ReactNode` | The content to be displayed inside the link |
|
||||
| onClick | function | Callback function to be triggered when the link is clicked |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | ----------------- | ---------------------------- |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
| onClick | 機能 | リンクがクリックされた際にトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Social Link
|
||||
## ソーシャルリンク
|
||||
|
||||
Stylized social links, with support for various social link types, such as URLs, LinkedIn, and X (or Twitter).
|
||||
URL、LinkedIn、X(またはTwitter)など、さまざまなソーシャルリンクタイプに対応したスタイライズされたソーシャルリンクです。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { SocialLink } from "twenty-ui/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
@@ -143,12 +143,12 @@ Stylized social links, with support for various social link types, such as URLs,
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------- | ----------------- | --------------------------------------------------------------------------- |
|
||||
| href | string | The target URL or path for the link |
|
||||
| children | `React.ReactNode` | The content to be displayed inside the link |
|
||||
| type | string | The type of social links. Options include: `url`, `LinkedIn`, and `Twitter` |
|
||||
| onClick | function | Callback function to be triggered when the link is clicked |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------- | ----------------- | ------------------------------------------------------- |
|
||||
| href | string | リンクのターゲットURLまたはパス |
|
||||
| children | `React.ReactNode` | リンク内に表示されるコンテンツ |
|
||||
| タイプ | string | ソーシャルリンクの種類です。 オプションには、`url`、`LinkedIn`、`Twitter`があります。 |
|
||||
| onClick | function | リンクがクリックされた際にトリガーされるコールバック関数 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Menu Item
|
||||
title: メニュー項目
|
||||
image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
A versatile menu item designed to be used in a menu or navigation list.
|
||||
メニューまたはナビゲーションリストで使用するために設計された汎用性の高いメニュー項目です。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
@@ -41,30 +41,30 @@ A versatile menu item designed to be used in a menu or navigation list.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| accent | string | Specifies the accent color of the menu item. Options include: `default`, `danger`, and `placeholder` |
|
||||
| text | string | The text content of the menu item |
|
||||
| iconButtons | array | An array of objects representing additional icon buttons associated with the menu item |
|
||||
| isTooltipOpen | boolean | Controls the visibility of the tooltip associated with the menu item |
|
||||
| testId | string | The data-testid attribute for testing purposes |
|
||||
| onClick | function | Callback function triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------- | ----------- | -------------------------------------------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| アクセント | string | メニュー項目のアクセントカラーを指定します。 オプションは `default`、`danger`、`placeholder` を含みます |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| アイコンボタン | 配列 | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列 |
|
||||
| ツールチップオープンフラグ | ブール型 | メニュー項目に関連するツールチップの表示状態を制御する |
|
||||
| テストID | string | テスト目的のためのdata-testid属性 |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Variants
|
||||
## バリエーション
|
||||
|
||||
The different variants of the menu item component include the following:
|
||||
メニュー項目コンポーネントの異なるバリエーションには以下が含まれます:
|
||||
|
||||
### Command
|
||||
### コマンド
|
||||
|
||||
A command-style menu item within a menu to indicate keyboard shortcuts.
|
||||
キーボードショートカットを示すためのメニュー内のコマンド形式のメニュー項目。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemCommand } from "twenty-ui/display";
|
||||
@@ -89,25 +89,25 @@ A command-style menu item within a menu to indicate keyboard shortcuts.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ------------ | ------------- | ---------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| firstHotKey | string | The first keyboard shortcut associated with the command |
|
||||
| secondHotKey | string | The second keyboard shortcut associated with the command |
|
||||
| isSelected | boolean | Indicates whether the menu item is selected or highlighted |
|
||||
| onClick | function | Callback function triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| ------------ | ----------- | -------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| firstHotKey | string | コマンドに関連する最初のキーボードショートカット |
|
||||
| secondHotKey | string | コマンドに関連する2番目のキーボードショートカット |
|
||||
| isSelected | ブール型 | メニュー項目が選択またはハイライトされているかどうかを示します |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Draggable
|
||||
### ドラッグ可能
|
||||
|
||||
A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.
|
||||
メニューまたはリスト内で項目をドラッグし、アイコンボタンを通じて追加のアクションを実行するために設計されたドラッグ可能なメニュー項目コンポーネント。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
@@ -134,26 +134,26 @@ A draggable menu item component designed to be used in a menu or list where item
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ------------- | ------------------------------------------------------------------------------------------ |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| accent | string | The accent color of the menu item. It can either be `default`, `placeholder`, and `danger` |
|
||||
| iconButtons | array | An array of objects representing additional icon buttons associated with the menu item |
|
||||
| isTooltipOpen | boolean | Controls the visibility of the tooltip associated with the menu item |
|
||||
| onClick | function | Callback function to be triggered when the link is clicked |
|
||||
| text | string | The text content of the menu item |
|
||||
| isDragDisabled | boolean | Indicates whether dragging is disabled |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ----------- | ------------------------------------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| アクセント | string | メニュー項目のアクセントカラー。 `default`、`placeholder`、および `danger` のいずれかです |
|
||||
| アイコンボタン | 配列 | メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列 |
|
||||
| ツールチップオープンフラグ | ブール型 | メニュー項目に関連するツールチップの表示状態を制御します |
|
||||
| onClick | 関数 | リンクがクリックされるとトリガーされるコールバック関数 |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| isDragDisabled | ブール型 | ドラッグが無効かどうかを示します |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Multi Select
|
||||
### マルチ選択
|
||||
|
||||
Provides a way to implement multi-select functionality with an associated checkbox.
|
||||
関連するチェックボックスを使用してマルチ選択機能を実装する方法を提供します。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemMultiSelect } from "twenty-ui/display";
|
||||
@@ -172,23 +172,23 @@ Provides a way to implement multi-select functionality with an associated checkb
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ------------- | ---------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| selected | boolean | Indicates whether the menu item is selected (checked) |
|
||||
| onSelectChange | function | Callback function triggered when the checkbox state changes |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ----------- | ----------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| selected | ブール型 | メニュー項目が選択されているかどうかを示します |
|
||||
| onSelectChange | 関数 | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Multi Select Avatar
|
||||
### マルチ選択アバター
|
||||
|
||||
A multi-select menu item with an avatar, a checkbox for selection, and textual content.
|
||||
選択用のチェックボックスとテキストコンテンツを備えたアバター付きのマルチ選択メニュー項目。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
@@ -208,23 +208,23 @@ A multi-select menu item with an avatar, a checkbox for selection, and textual c
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ----------- | -------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | The avatar or icon to be displayed on the left side of the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| selected | boolean | Indicates whether the menu item is selected (checked) |
|
||||
| onSelectChange | function | Callback function triggered when the checkbox state changes |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ----------- | ----------------------------------- |
|
||||
| avatar | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| selected | ブール型 | メニュー項目が選択されているかどうかを示します |
|
||||
| onSelectChange | 関数 | チェックボックスの状態が変更されたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Navigate
|
||||
### ナビゲート
|
||||
|
||||
A menu item featuring an optional left icon, textual content, and a right-chevron icon.
|
||||
オプションの左アイコン、テキストコンテンツ、および右のチューロマークを特徴とするメニュー項目。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemNavigate } from "twenty-ui/display";
|
||||
@@ -246,22 +246,22 @@ A menu item featuring an optional left icon, textual content, and a right-chevro
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ------------- | ---------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| onClick | function | Callback function to be triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------- | -------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Select
|
||||
### 選択
|
||||
|
||||
A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.
|
||||
オプションの左コンテンツ（アイコンとテキスト）と選択状態のインジケーター（チェックアイコン）を備えた選択可能なメニュー項目。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemSelect } from "twenty-ui/display";
|
||||
@@ -286,25 +286,25 @@ A selectable menu item, featuring optional left content (icon and text) and an i
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ------------- | ---------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| selected | boolean | Indicates whether the menu item is selected (checked) |
|
||||
| disabled | boolean | Indicates whether the menu item is disabled |
|
||||
| hovered | boolean | Indicates whether the menu item is currently being hovered over |
|
||||
| onClick | function | Callback function to be triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------- | -------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| selected | ブール型 | メニュー項目が選択されているかどうかを示します |
|
||||
| 無効 | ブール型 | メニュー項目が無効かどうかを示します |
|
||||
| hovered | ブール型 | メニュー項目が現在ホバーされているかどうかを示します |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Select Avatar
|
||||
### 選択アバター
|
||||
|
||||
A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.
|
||||
アバター付きの選択可能なメニュー項目、オプションの左コンテンツ（アバターとテキスト）および選択状態のためのインジケーター（チェックアイコン）。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { MenuItemSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
@@ -333,26 +333,26 @@ A selectable menu item with an avatar, featuring optional left content (avatar a
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | ----------- | -------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | The avatar or icon to be displayed on the left side of the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| selected | boolean | Indicates whether the menu item is selected (checked) |
|
||||
| disabled | boolean | Indicates whether the menu item is disabled |
|
||||
| hovered | boolean | Indicates whether the menu item is currently being hovered over |
|
||||
| testId | string | The data-testid attribute for testing purposes |
|
||||
| onClick | function | Callback function to be triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ----------- | -------------------------------- |
|
||||
| avatar | `ReactNode` | メニュー項目の左側に表示されるアバターまたはアイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| selected | ブール型 | メニュー項目が選択されているかどうかを示します |
|
||||
| 無効 | ブール型 | メニュー項目が無効かどうかを示します |
|
||||
| hovered | ブール型 | メニュー項目が現在ホバーされているかどうかを示します |
|
||||
| テストID | string | テスト目的のためのdata-testid属性 |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Select Color
|
||||
### 色を選択
|
||||
|
||||
A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.
|
||||
ユーザーがメニューから色を選択できるシナリオに使用するための、カラーパレットサンプルを備えた選択可能なメニュー項目。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { MenuItemSelectColor } from "twenty-ui/display";
|
||||
|
||||
@@ -376,25 +376,25 @@ A selectable menu item with a color sample for scenarios where you want users to
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| color | string | The theme color to be displayed as a sample in the menu item. Options include: `green`, `turquoise`, `sky`, `blue`, `purple`, `pink`, `red`, `orange`, `yellow`, and `gray` |
|
||||
| selected | boolean | Indicates whether the menu item is selected (checked) |
|
||||
| disabled | boolean | Indicates whether the menu item is disabled |
|
||||
| hovered | boolean | Indicates whether the menu item is currently being hovered over |
|
||||
| variant | string | The variant of the color sample. It can either be `default` or `pipeline` |
|
||||
| onClick | function | Callback function to be triggered when the menu item is clicked |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| カラー | string | メニュー項目にサンプルとして表示されるテーマカラー。 選択肢には、`green`、`turquoise`、`sky`、`blue`、`purple`、`pink`、`red`、`orange`、`yellow`、`gray`があります。 |
|
||||
| 選択済み | ブール型 | メニュー項目が選択されている（チェックされている）かどうかを示します |
|
||||
| 無効 | ブール型 | メニュー項目が無効かどうかを示します |
|
||||
| ホバー | ブール型 | メニュー項目が現在ホバーされているかどうかを示します |
|
||||
| バリアント | string | 色サンプルのバリアント。 `default` または `pipeline` のいずれかです。 |
|
||||
| onClick | 関数 | メニュー項目がクリックされたときにトリガーされるコールバック関数 |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Toggle
|
||||
### 切り替え
|
||||
|
||||
A menu item with an associated toggle switch to allow users to enable or disable a specific feature
|
||||
特定の機能を有効または無効にするためのトグルスイッチが付いたメニュー項目
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconBell } from '@tabler/icons-react';
|
||||
|
||||
@@ -415,14 +415,14 @@ A menu item with an associated toggle switch to allow users to enable or disable
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ------------- | ----------------------------------------------------------------- |
|
||||
| LeftIcon | IconComponent | An optional left icon displayed before the text in the menu item |
|
||||
| text | string | The text content of the menu item |
|
||||
| toggled | boolean | Indicates whether the toggle switch is in the "on" or "off" state |
|
||||
| onToggleChange | function | Callback function triggered when the toggle switch state changes |
|
||||
| toggleSize | string | The size of the toggle switch. It can be either \ |
|
||||
| className | string | Optional name for additional styling |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ----------- | -------------------------------- |
|
||||
| 左アイコン | アイコンコンポーネント | メニュー項目のテキストの前に表示されるオプションの左アイコン |
|
||||
| テキスト | string | メニュー項目のテキスト内容 |
|
||||
| 切り替え済み | ブール型 | トグルスイッチが「オン」または「オフ」かを示します |
|
||||
| onToggleChange | 関数 | トグルスイッチの状態が変化した際にトリガーされるコールバック関数 |
|
||||
| toggleSize | string | トグルスイッチのサイズです。 いずれかになります \ |
|
||||
| className | string | 追加スタイル用のオプション名 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Navigation Bar
|
||||
title: ナビゲーションバー
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
<img src="/images/user-guide/table-views/table.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Renders a navigation bar that contains multiple `NavigationBarItem` components.
|
||||
複数の`NavigationBarItem`コンポーネントを含むナビゲーションバーをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';
|
||||
import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar";
|
||||
@@ -40,10 +40,10 @@ Renders a navigation bar that contains multiple `NavigationBarItem` components.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | string | The name of the currently active navigation item |
|
||||
| items | array | An array of objects representing each navigation item. Each object contains the `name` of the item, the `Icon` component to display, and an `onClick` function to be called when the item is clicked |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| activeItemName | string | 現在アクティブなナビゲーション項目の名前 |
|
||||
| アイテム | 配列 | 各ナビゲーションアイテムを表すオブジェクトの配列。 各オブジェクトには、アイテムの `name`、表示する `Icon` コンポーネント、およびアイテムがクリックされたときに呼び出される `onClick` 関数が含まれています。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Step Bar
|
||||
title: ステップバー
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
<img src="/images/user-guide/api/api.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Displays progress through a sequence of numbered steps by highlighting the active step. It renders a container with steps, each represented by the `Step` component.
|
||||
アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 アクティブなステップをハイライトして、一連の番号付きステップの進行状況を表示します。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。 各 `Step` コンポーネントによって表されるステップを含むコンテナをレンダリングします。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
@@ -26,9 +26,9 @@ Displays progress through a sequence of numbered steps by highlighting the activ
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description |
|
||||
| ---------- | ------ | ------------------------------------------------------------------------------------------------- |
|
||||
| activeStep | number | The index of the currently active step. This determines which step should be visually highlighted |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 |
|
||||
| --------- | --- | ----------------------------------------------------- |
|
||||
| アクティブステップ | 数 | 現在アクティブなステップのインデックス。 これにより、どのステップを視覚的にハイライトするかが決まります。 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Feedback
|
||||
title: フィードバック
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="ヘッダー" />
|
||||
</Frame>
|
||||
|
||||
Indicates progress or countdown and moves from right to left.
|
||||
進捗やカウントダウンを示し、右から左に動きます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
@@ -29,24 +29,24 @@ Indicates progress or countdown and moves from right to left.
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| --------- | ------- | ------------------------------------------------------------------------------------ | --------- |
|
||||
| duration | number | The total duration of the progress bar animation in milliseconds | 3 |
|
||||
| delay | number | The delay in starting the progress bar animation in milliseconds | 0 |
|
||||
| easing | string | Easing function for the progress bar animation | easeInOut |
|
||||
| barHeight | number | The height of the bar in pixels | 24 |
|
||||
| barColor | string | The color of the bar | gray80 |
|
||||
| autoStart | boolean | If `true`, the progress bar animation starts automatically when the component mounts | `true` |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ----- | ------ | ------------------------------------------------------ | --------- |
|
||||
| 継続時間 | 数 | プログレスバーアニメーションの総デュレーション（ミリ秒） | 3 |
|
||||
| 遅延 | 数 | プログレスバーアニメーションの開始遅延時間（ミリ秒） | 0 |
|
||||
| イージング | string | プログレスバーアニメーションのイージング関数 | easeInOut |
|
||||
| バーの高さ | 数 | バーの高さ（ピクセル） | 24 |
|
||||
| バーの色 | string | バーの色 | グレー80 |
|
||||
| 自動開始 | ブール型 | `true`の場合、コンポーネントがマウントされたときにプログレスバーアニメーションが自動的に開始されます。 | `真` |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Circular Progress Bar
|
||||
## 円形プログレスバー
|
||||
|
||||
Indicates the progress of a task, often used in loading screens or areas where you want to communicate ongoing processes to the user.
|
||||
タスクの進捗を示し、ユーザーに進行中のプロセスを伝達したい場合に、ロード画面などでよく使用されます。
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
<Tab title="使用方法">
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
@@ -56,11 +56,11 @@ Indicates the progress of a task, often used in loading screens or areas where y
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
| Props | Type | Description | Default |
|
||||
| -------- | ------ | ------------------------------------- | ------------ |
|
||||
| size | number | The size of the circular progress bar | 50 |
|
||||
| barWidth | number | The width of the progress bar line | 5 |
|
||||
| barColor | string | The color of the progress bar | currentColor |
|
||||
<Tab title="プロパティ">
|
||||
| プロパティ | タイプ | 説明 | デフォルト |
|
||||
| ----- | ------ | ------------- | ----- |
|
||||
| サイズ | 数 | 円形プログレスバーのサイズ | 50 |
|
||||
| バーの幅 | 数 | プログレスバーのラインの幅 | 5 |
|
||||
| バーの色 | string | プログレスバーの色 | 現在の色 |
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: AI Agents
|
||||
description: Integrate AI capabilities directly into your automation workflows.
|
||||
title: AIエージェント
|
||||
description: AI機能を自動化ワークフローに直接統合します。
|
||||
---
|
||||
|
||||
<Note>
|
||||
This feature is in development and will be available in beta soon.
|
||||
この機能は開発中で、まもなくベータ版として利用可能になります。
|
||||
</Note>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Integrate AI capabilities directly into your automation workflows for intelligent data processing and decision-making.
|
||||
AI の機能を自動化ワークフローに直接統合し、インテリジェントなデータ処理と意思決定を実現します。
|
||||
|
||||
## Capabilities
|
||||
## 機能
|
||||
|
||||
| Feature | Description |
|
||||
| ------------------- | ------------------------------------------------ |
|
||||
| **AI actions** | Add AI-powered steps to any workflow |
|
||||
| **Data enrichment** | Automatically enhance records with external data |
|
||||
| **Classification** | Categorize records based on content analysis |
|
||||
| **Summarization** | Generate summaries from text fields |
|
||||
| **Custom prompts** | Define exactly how AI processes your data |
|
||||
| 機能 | 説明 |
|
||||
| ------------- | --------------------------- |
|
||||
| **AI アクション** | あらゆるワークフローに AI を活用したステップを追加 |
|
||||
| **データ強化** | 外部データでレコードを自動的に補完する |
|
||||
| **分類** | 内容分析に基づいてレコードを分類する |
|
||||
| **要約** | テキストフィールドから要約を生成する |
|
||||
| **カスタムプロンプト** | AI がデータをどのように処理するかを正確に定義する |
|
||||
|
||||
## Use Cases
|
||||
## ユースケース
|
||||
|
||||
* **Lead scoring**: Automatically score and prioritize inbound leads
|
||||
* **Data cleanup**: Standardize company names and contact information
|
||||
* **Email drafts**: Generate follow-up emails based on meeting notes
|
||||
* **Record routing**: Assign records to the right team member based on content
|
||||
* **リードスコアリング**: インバウンドリードに自動でスコアを付け、優先順位を付ける
|
||||
* **データクレンジング**: 企業名と連絡先情報を標準化する
|
||||
* **メールの下書き**: 議事録に基づいてフォローアップメールの下書きを生成する
|
||||
* **レコードのルーティング**: 内容に基づいて適切なチームメンバーにレコードを割り当てる
|
||||
|
||||
## Related
|
||||
## 関連
|
||||
|
||||
* [Workflows Overview](/l/ja/user-guide/workflows/overview) — automation basics
|
||||
* [AI Permissions](/l/ja/user-guide/ai/capabilities/permissions-access-control) — access control for AI agents
|
||||
* [ワークフローの概要](/l/ja/user-guide/workflows/overview) — 自動化の基本
|
||||
* [AI 権限](/l/ja/user-guide/ai/capabilities/permissions-access-control) — AI エージェントのアクセス制御
|
||||
|
||||
@@ -1,41 +1,41 @@
|
||||
---
|
||||
title: AI Chatbot
|
||||
description: An intelligent assistant that helps you interact with your CRM data using natural language.
|
||||
title: AI チャットボット
|
||||
description: 自然言語でCRMデータとやり取りできるインテリジェントなアシスタントです。
|
||||
---
|
||||
|
||||
<Note>
|
||||
This feature is in development and will be available in beta soon.
|
||||
この機能は開発中で、まもなくベータ版として利用可能になります。
|
||||
</Note>
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
An intelligent assistant that helps you interact with your CRM data using natural language.
|
||||
自然言語でCRMデータとやり取りできるインテリジェントなアシスタントです。
|
||||
|
||||
## Capabilities
|
||||
## 機能
|
||||
|
||||
| Feature | Description |
|
||||
| ---------------------------- | ------------------------------------------------------------------------- |
|
||||
| **Natural language queries** | Ask questions in plain English instead of building filters |
|
||||
| **Full data access** | Query records, relationships, and metrics across your workspace |
|
||||
| **Page context** | Reference "this company" or "this opportunity" based on your current view |
|
||||
| **Conversational** | Follow-up questions maintain context from previous queries |
|
||||
| 機能 | 説明 |
|
||||
| --------------- | ------------------------------------------------------ |
|
||||
| **自然言語クエリ** | フィルターを作成する代わりに、平易な英語で質問できます |
|
||||
| **データへのフルアクセス** | ワークスペース全体にわたり、レコード、リレーションシップ、指標に対してクエリを実行できます |
|
||||
| **ページコンテキスト** | 現在の表示に基づいて、"this company" や "this opportunity" を参照できます |
|
||||
| **会話型** | 追加の質問でも前のクエリのコンテキストを維持します |
|
||||
|
||||
## Example Interactions
|
||||
## 会話例
|
||||
|
||||
### Finding Records
|
||||
### レコードの検索
|
||||
|
||||
* "Show me all opportunities over $50,000"
|
||||
* "Find contacts I haven't emailed in 2 weeks"
|
||||
* "List companies in the healthcare industry"
|
||||
* "5万ドルを超える商談をすべて表示して"
|
||||
* "過去2週間メールしていない連絡先を検索して"
|
||||
* "ヘルスケア業界の企業を一覧表示して"
|
||||
|
||||
### Getting Insights
|
||||
### インサイトを得る
|
||||
|
||||
* "What's my total pipeline value?"
|
||||
* "How many deals closed last month?"
|
||||
* "Which stage has the most stuck opportunities?"
|
||||
* "パイプラインの合計金額は？"
|
||||
* "先月クローズした商談は何件？"
|
||||
* "どのステージで停滞している商談が最も多い？"
|
||||
|
||||
### Using Page Context
|
||||
### ページコンテキストを活用する
|
||||
|
||||
* "Summarize my interactions with this person" (on a contact page)
|
||||
* "What opportunities are linked to this company?" (on a company page)
|
||||
* "When was this deal last updated?" (on an opportunity page)
|
||||
* "この人とのやり取りを要約して" (連絡先ページで)
|
||||
* "どの商談がこの会社に関連付けられていますか？" (会社ページで)
|
||||
* "この商談の最終更新はいつ？" (商談ページで)
|
||||
|
||||
+22
-22
@@ -1,35 +1,35 @@
|
||||
---
|
||||
title: Permissions & Access Control
|
||||
description: Control what AI agents can access and modify in your workspace.
|
||||
title: 権限とアクセス制御
|
||||
description: AI エージェントがワークスペース内でアクセスおよび変更できる内容を制御します。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
AI agents respect your existing permission structure. This is particularly important for teams who want to control exactly what automated AI processes can access or modify in their workspace.
|
||||
AI エージェントは既存の権限構造に従います。 これは、ワークスペース内で自動化された AI プロセスがアクセスまたは変更できる範囲を厳密に管理したいチームにとって特に重要です。
|
||||
|
||||
## Assign a Role to an AI Agent
|
||||
## AI エージェントに役割を割り当てる
|
||||
|
||||
1. Go to **Settings → Roles**
|
||||
2. Click on the role you want to assign
|
||||
3. Open the **Assignment** tab
|
||||
4. Under **AI Agents**, click **+ Assign to AI agent**
|
||||
5. Select the AI agent from the list
|
||||
6. Confirm the assignment
|
||||
1. **設定 → 役割** に移動
|
||||
2. 割り当てたい役割をクリック
|
||||
3. **割り当て** タブを開く
|
||||
4. 「**AI Agents**」で、**+ Assign to AI agent** をクリックします
|
||||
5. リストから AI エージェントを選択
|
||||
6. 割り当てを確認する
|
||||
|
||||
## Why Assign Roles to AI Agents?
|
||||
## AI エージェントに役割を割り当てる理由
|
||||
|
||||
| Benefit | Description |
|
||||
| ---------------- | ------------------------------------------------- |
|
||||
| **Security** | Limit what data AI agents can access or modify |
|
||||
| **Compliance** | Ensure AI only processes the data it needs |
|
||||
| **Control** | Prevent unintended actions from AI automations |
|
||||
| **Auditability** | Track which actions were performed by which agent |
|
||||
| 利点 | 説明 |
|
||||
| ------------ | ------------------------------ |
|
||||
| **セキュリティ** | AI エージェントがアクセスまたは変更できるデータを制限する |
|
||||
| **コンプライアンス** | AI が必要なデータのみを処理するようにする |
|
||||
| **制御** | AI 自動化による意図しない操作を防止する |
|
||||
| **監査可能性** | どのエージェントがどの操作を実行したかを追跡する |
|
||||
|
||||
<Note>
|
||||
For AI agents running within workflows, role assignment ensures the agent cannot access or modify data outside its intended scope—even if the workflow has broader permissions.
|
||||
ワークフロー内で実行される AI エージェントの場合、役割の割り当てにより、ワークフローにより広い権限がある場合でも、エージェントが意図された範囲外のデータにアクセスしたり変更したりできないようにします。
|
||||
</Note>
|
||||
|
||||
## Related
|
||||
## 関連
|
||||
|
||||
* [Permissions](/l/ja/user-guide/permissions-access/capabilities/permissions) — detailed information on creating and managing roles
|
||||
* [AI Agents](/l/ja/user-guide/ai/capabilities/ai-agents) — AI capabilities in workflows
|
||||
* [権限](/l/ja/user-guide/permissions-access/capabilities/permissions) — 役割の作成と管理に関する詳細情報
|
||||
* [AI エージェント](/l/ja/user-guide/ai/capabilities/ai-agents) — ワークフローにおける AI 機能
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
---
|
||||
title: AI
|
||||
description: AI-powered features coming soon to Twenty.
|
||||
description: AI搭載機能がまもなく Twenty に登場します。
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/workflows/robot.png" alt="AI" />
|
||||
</Frame>
|
||||
|
||||
## What's Coming
|
||||
## 今後の展開
|
||||
|
||||
Twenty is building AI capabilities to help your team work smarter. We're focusing on two major areas:
|
||||
Twenty は、チームがよりスマートに働けるよう支援する AI 機能を構築しています。 私たちは、次の2つの主要分野に注力しています：
|
||||
|
||||
### 1. AI Chatbot
|
||||
### 1. AI チャットボット
|
||||
|
||||
A conversational assistant that understands your context and has access to all your Twenty data.
|
||||
コンテキストを理解し、Twenty のすべてのデータにアクセスできる会話型アシスタントです。
|
||||
|
||||
**Key capabilities:**
|
||||
**主な機能：**
|
||||
|
||||
* **Full data access**: Query any record, relationship, or metric in your workspace
|
||||
* **Page context awareness**: Reference "this company" or "this opportunity" based on where you are in Twenty
|
||||
* **Natural language**: Ask questions and get answers without navigating menus
|
||||
* **完全なデータアクセス**：ワークスペース内のあらゆるレコード、リレーションシップ、メトリクスをクエリできます
|
||||
* **ページコンテキストの認識**：Twenty 内の表示場所に基づいて "this company" や "this opportunity" を参照できます
|
||||
* **自然言語**：メニューを操作せずに質問し、回答を得られます
|
||||
|
||||
**Example prompts:**
|
||||
**プロンプト例：**
|
||||
|
||||
* "What opportunities are closing this month?"
|
||||
* "Which deals have been in Negotiation for more than 30 days?"
|
||||
* "Summarize my interactions with this person"
|
||||
* "今月クローズ予定の商談はどれですか？"
|
||||
* "「Negotiation」に30日以上留まっている商談はどれですか？"
|
||||
* "この人とのやり取りを要約して"
|
||||
|
||||
### 2. AI Agents in Workflows
|
||||
### 2. ワークフローにおける AI エージェント
|
||||
|
||||
Extend your workflows with AI-powered actions and autonomous agents.
|
||||
AI アクションと自律型エージェントでワークフローを拡張します。
|
||||
|
||||
**Key capabilities:**
|
||||
**主な機能：**
|
||||
|
||||
* **AI actions**: Use AI to enrich data, classify records, generate summaries, and more
|
||||
* **Autonomous agents**: Let agents execute multi-step tasks within a workflow
|
||||
* **Custom prompts**: Define exactly how AI should process your data
|
||||
* **AI アクション**：AI を使用してデータの充実化、レコードの分類、要約の生成などを行います
|
||||
* **自律型エージェント**：ワークフロー内で複数ステップのタスクをエージェントに実行させます
|
||||
* **カスタムプロンプト**：AI がデータをどのように処理すべきかを正確に定義します
|
||||
|
||||
**Use cases:**
|
||||
**ユースケース：**
|
||||
|
||||
* Automatically categorize inbound leads
|
||||
* Enrich company data from public sources
|
||||
* Generate follow-up email drafts based on meeting notes
|
||||
* Score opportunities based on engagement patterns
|
||||
* インバウンドリードを自動分類する
|
||||
* 公開情報から企業データを充実させる
|
||||
* 議事録に基づいてフォローアップメールの下書きを生成する
|
||||
* エンゲージメントのパターンに基づいて商談をスコアリングする
|
||||
|
||||
## Permissions and Access Control
|
||||
## 権限とアクセス制御
|
||||
|
||||
AI agents will be managed through the existing permissions system:
|
||||
AI エージェントは既存の権限システムを通じて管理されます：
|
||||
|
||||
1. Go to **Settings → Roles**
|
||||
2. Configure which data each AI agent can access
|
||||
3. Set read/write permissions per object
|
||||
1. **設定 → 役割** に移動
|
||||
2. 各 AI エージェントがアクセスできるデータを設定する
|
||||
3. オブジェクトごとに読み取り/書き込み権限を設定する
|
||||
|
||||
This ensures AI agents respect your data governance policies and only access what they need.
|
||||
これにより、AI エージェントがデータガバナンスポリシーを遵守し、必要なものにのみアクセスすることを保証します。
|
||||
|
||||
## Stay Updated
|
||||
## 最新情報を入手
|
||||
|
||||
We'll update this section as AI features become available. In the meantime:
|
||||
AI 機能が利用可能になり次第、このセクションを更新します。 それまでの間：
|
||||
|
||||
* Follow our [GitHub](https://github.com/twentyhq/twenty) for development updates
|
||||
* Join our [Discord](https://discord.gg/twenty) to share feedback and feature requests
|
||||
* 開発の最新情報は私たちの[GitHub](https://github.com/twentyhq/twenty)をフォローしてください
|
||||
* フィードバックや機能リクエストを共有するには、私たちの[Discord](https://discord.gg/twenty)に参加してください
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
---
|
||||
title: Pricing Plans
|
||||
description: Learn about Twenty's pricing plans and how to switch between them.
|
||||
title: 料金プラン
|
||||
description: Twenty の料金プランと切り替え方法について説明します。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty offers flexible pricing to fit teams of all sizes, whether you prefer cloud hosting or self-hosting.
|
||||
Twenty は、クラウドホスティングでもセルフホスティングでも、あらゆる規模のチームに適した柔軟な料金を提供します。
|
||||
|
||||
## Cloud Plans
|
||||
## クラウドプラン
|
||||
|
||||
### Pro (Cloud)
|
||||
### Pro（クラウド）
|
||||
|
||||
For teams ready to scale:
|
||||
スケールする準備ができているチーム向け：
|
||||
|
||||
* All core CRM features
|
||||
* Email and calendar sync
|
||||
* Workflows and automations
|
||||
* Standard support
|
||||
* すべてのコア CRM 機能
|
||||
* メールとカレンダーの同期
|
||||
* ワークフローと自動化
|
||||
* 標準サポート
|
||||
|
||||
<Note>
|
||||
Premium features (SSO and row-level permissions) are not included in the Pro plan.
|
||||
プレミアム機能（SSO と行レベル権限）は Pro プランには含まれません。
|
||||
</Note>
|
||||
|
||||
### Organization (Cloud)
|
||||
### Organization（クラウド）
|
||||
|
||||
For larger teams with advanced needs:
|
||||
より高度なニーズを持つ大規模チーム向け：
|
||||
|
||||
* Everything in Pro
|
||||
* **Premium features**: SSO integration and row-level permissions
|
||||
* Priority support
|
||||
* Pro のすべての内容
|
||||
* **プレミアム機能**：SSO 連携と行レベル権限
|
||||
* 優先サポート
|
||||
|
||||
## Self-Hosted Plans
|
||||
## セルフホスト型プラン
|
||||
|
||||
### Free (Self-Hosted)
|
||||
### Free（セルフホスト）
|
||||
|
||||
Host Twenty on your own infrastructure at no cost:
|
||||
自社インフラで Twenty を無料でホスト：
|
||||
|
||||
* All Pro features included
|
||||
* Community support via Discord
|
||||
* Full control over your data
|
||||
* Pro のすべての機能を含む
|
||||
* Discord でのコミュニティサポート
|
||||
* データの完全なコントロール
|
||||
|
||||
### Organization (Self-Hosted)
|
||||
### Organization（セルフホスト）
|
||||
|
||||
For teams who need premium features while self-hosting:
|
||||
セルフホストしながらプレミアム機能が必要なチーム向け：
|
||||
|
||||
* All Pro features
|
||||
* **Premium features**: SSO integration and row-level permissions
|
||||
* Twenty team support
|
||||
* No requirement to publish custom code as open-source before distributing
|
||||
* Pro のすべての機能
|
||||
* **プレミアム機能**：SSO 連携と行レベル権限
|
||||
* Twenty チームによるサポート
|
||||
* 配布前にカスタムコードをオープンソースとして公開する必要はありません
|
||||
|
||||
## Premium Features
|
||||
## プレミアム機能
|
||||
|
||||
Premium features are only available on the Organization plans (Cloud or Self-Hosted):
|
||||
プレミアム機能は Organization プラン（クラウド／セルフホスト）でのみ利用可能：
|
||||
|
||||
* **SSO integration**: Single Sign-On with your identity provider
|
||||
* **Row-level permissions**: Fine-grained access control at the record level
|
||||
* **SSO 連携**：ID プロバイダーによるシングルサインオン
|
||||
* **行レベル権限**：レコード単位のきめ細かなアクセス制御
|
||||
|
||||
## Switching Plans
|
||||
## プランの切り替え
|
||||
|
||||
### Upgrade to Organization
|
||||
### Organization にアップグレード
|
||||
|
||||
1. Go to **Settings → Billing**
|
||||
2. Click **Switch to Organization**
|
||||
3. Confirm your upgrade
|
||||
1. **設定 → 請求** へ移動
|
||||
2. 「**Switch to Organization**」をクリック
|
||||
3. アップグレードを確認する
|
||||
|
||||
### Downgrade to Pro
|
||||
### Pro にダウングレード
|
||||
|
||||
Contact support to downgrade your plan.
|
||||
プランのダウングレードはサポートにご連絡ください。
|
||||
|
||||
### Switch to Yearly Billing
|
||||
### 年払いに切り替える
|
||||
|
||||
1. Go to **Settings → Billing**
|
||||
2. Click **Switch to Yearly**
|
||||
3. Save with annual billing
|
||||
1. **設定 → 請求** へ移動
|
||||
2. 「**Switch to Yearly**」をクリック
|
||||
3. 年払いで節約
|
||||
|
||||
### Switch to Monthly Billing
|
||||
### 月額に切り替える
|
||||
|
||||
Contact support to switch back to monthly billing.
|
||||
月額請求に戻すにはサポートにご連絡ください。
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
---
|
||||
title: Workflow Credits
|
||||
description: Understanding workflow credits, consumption, and how to purchase more.
|
||||
title: ワークフロークレジット
|
||||
description: ワークフロークレジットの仕組み、消費、追加購入方法。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Credits power your workflow automations in Twenty. Every workflow action consumes credits based on its complexity.
|
||||
ワークフロークレジットは、Twentyでの自動化をサポートします。 各ワークフローアクションは、その複雑さに応じてクレジットを消費します。
|
||||
|
||||
## Credit Allocation
|
||||
## クレジット配分
|
||||
|
||||
Credits are based on your billing cycle, not your plan:
|
||||
クレジットはプランではなく、請求サイクルに基づきます。
|
||||
|
||||
| Billing Cycle | Credits |
|
||||
| ------------- | --------------- |
|
||||
| Monthly | 5 million/month |
|
||||
| Yearly | 50 million/year |
|
||||
| 請求サイクル | クレジット |
|
||||
| ------ | -------- |
|
||||
| 月払い | 500万/月 |
|
||||
| 年払い | 5,000万/年 |
|
||||
|
||||
<Note>
|
||||
The 5 million monthly credits are designed to empower you to run automations without worrying about costs. For most workflows using standard actions, this is more than enough. You'll only need additional credits when running advanced code nodes or AI-powered features.
|
||||
月間500万クレジットは、費用を気にせず自動化を実行できるように設計されています。 標準アクションを使用するほとんどのワークフローでは、これで十分以上です。 高度なコードノードやAI搭載機能を実行する場合にのみ、追加のクレジットが必要になります。
|
||||
</Note>
|
||||
|
||||
## Credit Consumption
|
||||
## クレジット消費
|
||||
|
||||
Different actions consume different amounts of credits:
|
||||
アクションの種類によって消費するクレジット量が異なります。
|
||||
|
||||
| Action Type | Credit Usage |
|
||||
| ------------------------------------------------------- | ----------------------- |
|
||||
| **Basic operations** (search, update, create records) | Minimal |
|
||||
| **Complex operations** (code nodes, external API calls) | More credits |
|
||||
| **AI prompts** (coming soon) | Variable based on usage |
|
||||
| アクションの種類 | クレジット使用量 |
|
||||
| --------------------------- | ------------- |
|
||||
| **基本操作**（検索、更新、レコードの作成） | 最小限 |
|
||||
| **複雑な操作**（コードノード、外部API呼び出し） | より多くのクレジットを消費 |
|
||||
| **AIプロンプト**（近日公開） | 利用状況に応じて変動 |
|
||||
|
||||
Credits are deducted in real-time when workflows execute.
|
||||
ワークフローが実行されるときにリアルタイムでクレジットが差し引かれます。
|
||||
|
||||
## Monitoring Usage
|
||||
## 使用状況の監視
|
||||
|
||||
Track your credit consumption:
|
||||
クレジット消費を追跡します。
|
||||
|
||||
1. Go to **Settings → Billing**
|
||||
2. View your current usage and remaining credits
|
||||
3. Monitor trends to plan for additional credits if needed
|
||||
1. **設定 → 請求** へ移動
|
||||
2. 現在の使用量と残りのクレジットを確認
|
||||
3. 傾向を監視し、必要に応じて追加クレジットを計画します
|
||||
|
||||
## Purchasing Additional Credits
|
||||
## 追加クレジットの購入
|
||||
|
||||
Need more credits?
|
||||
さらにクレジットが必要ですか？
|
||||
|
||||
1. Go to **Settings → Billing**
|
||||
2. Click on the option to purchase additional credit packs
|
||||
3. Select the amount you need
|
||||
1. **設定 → 請求** へ移動
|
||||
2. 追加クレジットパックを購入するオプションをクリックします
|
||||
3. 必要な量を選択します
|
||||
|
||||
@@ -3,11 +3,11 @@ title: Billing FAQ
|
||||
description: Frequently asked questions about Twenty pricing and billing.
|
||||
---
|
||||
|
||||
## Pricing
|
||||
## 料金
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Can I use Twenty for free while self-hosting?">
|
||||
Yes, you can use Twenty for free while self-hosting. You will get access to everything included in the Pro (Cloud) plan, except the support from our core-team. Support is accessible via our Discord community.
|
||||
<Accordion title="Twentyを自分でホストして無料で利用できますか？">
|
||||
はい、自分でホストしながら無料で利用できます。 You will get access to everything included in the Pro (Cloud) plan, except the support from our core-team. サポートはDiscordコミュニティを通じて利用可能です。
|
||||
|
||||
If you want to self-host and need the Premium features (SSO and row-level permissions), you can choose the paid Organization (Self-Hosted) license. This also includes support from the Twenty team and removes the requirement to publish custom code as open-source before distributing.
|
||||
</Accordion>
|
||||
@@ -19,68 +19,68 @@ description: Frequently asked questions about Twenty pricing and billing.
|
||||
* **Row-level permissions**: Fine-grained access control at the record level
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Do you offer free seats for view-only users?">
|
||||
We do not offer free seats. Pricing is per user and each user needs a licence to access Twenty.
|
||||
<Accordion title="ビュー専用ユーザーのための無料席を提供していますか？">
|
||||
無料の席は提供していません。 料金はユーザー毎に設定されており、各ユーザーはTwentyを利用するためにライセンスが必要です。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I switch my subscription to the Organization plan?">
|
||||
You can do so under `Settings → Billing`. Then click on `Switch to Organization`.
|
||||
<Accordion title="どこでサブスクリプションをOrganizationプランに切り替えられますか？">
|
||||
`設定 → 請求` で行います。 その後、`Organizationに切り替え` をクリックしてください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I switch my subscription to the Pro plan?">
|
||||
Please reach out to our team directly via the Support, there is no easy way to do this using the UI at the moment.
|
||||
<Accordion title="どこでサブスクリプションをProプランに切り替えられますか？">
|
||||
現在、UIを使用して簡単に行う方法がないので、サポートを通じて直接チームにお問い合わせください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I switch my subscription to Yearly?">
|
||||
You can do so under `Settings → Billing`. Then click on `Switch to Yearly`.
|
||||
<Accordion title="どこでサブスクリプションを年間プランに切り替えられますか？">
|
||||
`設定 → 請求` で行います。 その後、`年間プランに切り替え` をクリックしてください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I switch my subscription to Monthly?">
|
||||
Please reach out to our team directly via the Support, there is no easy way to do this using the UI at the moment.
|
||||
<Accordion title="どこでサブスクリプションを月間プランに切り替えられますか？">
|
||||
現在、UIを使用して簡単に行う方法がないので、サポートを通じて直接チームにお問い合わせください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I see my credit usage?">
|
||||
You will find this under `Settings → Billing`.
|
||||
<Accordion title="どこでクレジット使用量を見ることができますか？">
|
||||
`設定 → 請求` で見つけることができます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How many workflow credits do we have?">
|
||||
<Accordion title="ワークフロークレジットはいくつありますか？">
|
||||
The number of credits depends on your billing cycle, not your plan:
|
||||
|
||||
* **Monthly subscriptions**: 5 million credits per month
|
||||
* **Yearly subscriptions**: 50 million credits per year
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How does workflow credit consumption work?">
|
||||
Each workflow action consumes credits based on its complexity:
|
||||
<Accordion title="ワークフロークレジットの消費はどのように機能しますか？">
|
||||
各ワークフローアクションは、その複雑さに応じてクレジットを消費します。
|
||||
|
||||
* **Basic internal operations** (such as search, update, create records) consume very few credits
|
||||
* **More complex operations** like code nodes and requests to external services consume more credits
|
||||
* **AI prompts** (coming soon!) will also consume more credits based on usage
|
||||
* **基本的な内部操作**（検索、更新、レコード作成など）は、非常に少ないクレジットを消費します。
|
||||
* **より複雑な操作**（コードノードや外部サービスへのリクエストなど）は、より多くのクレジットを消費します。
|
||||
* **AIプロンプト**（近日公開） 使用量に応じてさらに多くのクレジットを消費します。
|
||||
|
||||
Credits are deducted in real-time when workflows execute. You can monitor your usage in **Settings → Billing** to track consumption and remaining credits.
|
||||
ワークフローが実行されるときにリアルタイムでクレジットが差し引かれます。 消費や残りクレジットを追跡するために **設定 → 請求** で使用状況を監視できます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I buy more workflow credits?">
|
||||
You can buy additional credits under `Settings → Billing`.
|
||||
<Accordion title="ワークフロークレジットを追加購入できますか？">
|
||||
`設定 → 請求` で追加クレジットを購入することができます。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Billing
|
||||
## 請求
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Where can I manage the Billing details?">
|
||||
You can do so under `Settings → Billing`.
|
||||
<Accordion title="請求の詳細はどこで管理できますか？">
|
||||
`設定 → 請求` で行います。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I update my payment method?">
|
||||
You can do so under `Settings → Billing`. Then click on `View billing details`. You'll be able to add a new payment method there.
|
||||
<Accordion title="支払い方法はどこで更新できますか？">
|
||||
`設定 → 請求` で行います。 その後、`請求の詳細を見る` をクリックしてください。 そこで新しい支払い方法を追加できます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I update my billing information?">
|
||||
You can do so under `Settings → Billing`. Then click on `View billing details`. You'll be able to edit the billing information there.
|
||||
<Accordion title="請求情報はどこで更新できますか？">
|
||||
`設定 → 請求` で行います。 その後、`請求の詳細を見る` をクリックしてください。 そこで請求情報を編集できます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Where can I access my invoices?">
|
||||
You can do so under `Settings → Billing`. Then click on `View billing details`. You'll see all your invoices at the bottom of the screen.
|
||||
<Accordion title="請求書はどこで入手できますか？">
|
||||
`設定 → 請求` で行います。 その後、`請求の詳細を見る` をクリックしてください。 画面の下部で、すべての請求書を確認することができます。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
---
|
||||
title: Billing
|
||||
description: Understand Twenty pricing and manage your subscription.
|
||||
title: 請求
|
||||
description: Twenty の料金を把握し、サブスクリプションを管理しましょう。
|
||||
image: /images/user-guide/setup/pricing.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/setup/pricing.png" alt="Billing" />
|
||||
<img src="/images/user-guide/setup/pricing.png" alt="請求" />
|
||||
</Frame>
|
||||
|
||||
Twenty offers flexible pricing plans to fit your team's needs. Manage your subscription, track workflow credits, and access invoices all from **Settings → Billing**.
|
||||
Twenty は、チームのニーズに合わせた柔軟な料金プランを提供します。 サブスクリプションの管理、ワークフロー クレジットの確認、請求書へのアクセスは、すべて **設定 → 請求** から行えます。
|
||||
|
||||
## What's in this section
|
||||
## このセクションの内容
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Pricing Plans" icon="tags" href="/l/ja/user-guide/billing/capabilities/pricing-plans">
|
||||
Learn about Twenty's pricing plans and what's included.
|
||||
<Card title="料金プラン" icon="tags" href="/l/ja/user-guide/billing/capabilities/pricing-plans">
|
||||
Twenty の料金プランと含まれる内容についてご確認ください。
|
||||
</Card>
|
||||
|
||||
<Card title="FAQ" icon="circle-question" href="/l/ja/user-guide/billing/how-tos/billing-faq">
|
||||
Frequently asked questions about pricing and billing.
|
||||
料金と請求に関するよくある質問。
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
## At a glance
|
||||
## 概要
|
||||
|
||||
| Plan | Key Features |
|
||||
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| **Free (Self-Hosted)** | All Pro features, community support |
|
||||
| **Pro (Cloud)** | Everything apart from the Premium features (SSO and row-level permissions), standard support |
|
||||
| **Organization (Cloud)** | All from Pro + the Premium features (SSO and row-level permissions), priority support |
|
||||
| **Organization (Self-Hosted)** | All from Pro + the Premium features (SSO, row-level permissions), Twenty team support, not required to publish your custom code as open-source before distributing |
|
||||
| プラン | 主な機能 |
|
||||
| -------------- | ----------------------------------------------------------------------------------- |
|
||||
| **無料（セルフホスト）** | すべての Pro 機能、コミュニティサポート |
|
||||
| **Pro（クラウド）** | プレミアム機能（SSO と行レベルの権限）を除くすべて、標準サポート |
|
||||
| **組織（クラウド）** | Pro のすべてに加え、プレミアム機能（SSO と行レベルの権限）、優先サポート |
|
||||
| **組織（セルフホスト）** | Pro のすべてに加え、プレミアム機能（SSO、行レベルの権限）、Twenty チームのサポート、配布前にカスタムコードをオープンソースとして公開する必要はありません |
|
||||
|
||||
## Quick answers
|
||||
## すぐにわかる回答
|
||||
|
||||
**Where do I manage billing?**
|
||||
Go to **Settings → Billing** to view your plan, update payment methods, and access invoices.
|
||||
**請求はどこで管理できますか？**
|
||||
プランの確認、支払い方法の更新、請求書へのアクセスは **設定 → 請求** で行えます。
|
||||
|
||||
**Can I use Twenty for free?**
|
||||
Yes! Self-host Twenty and get all Pro features at no cost.
|
||||
**Twenty を無料で使えますか？**
|
||||
はい！ Twenty をセルフホストすると、すべての Pro 機能を無料で利用できます。
|
||||
|
||||
**How do I upgrade?**
|
||||
Go to **Settings → Billing** and click **Switch to Organization** or **Switch to Yearly**.
|
||||
**どのようにアップグレードしますか？**
|
||||
**設定 → 請求** に移動し、**組織プランに切り替え** または **年払いに切り替え** をクリックします。
|
||||
|
||||
For more questions, see the [Billing FAQ](/l/ja/user-guide/billing/how-tos/billing-faq).
|
||||
詳しくは [請求に関する FAQ](/l/ja/user-guide/billing/how-tos/billing-faq) をご覧ください。
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
---
|
||||
title: Calendar
|
||||
description: Understanding calendar integration features in Twenty.
|
||||
title: カレンダー
|
||||
description: Twenty のカレンダー統合機能について。
|
||||
---
|
||||
|
||||
**Note**: To connect your calendar and configure sync settings, visit [Email & Calendar Setup](/l/ja/user-guide/calendar-emails/overview).
|
||||
**メモ**：カレンダーを接続し、同期設定を構成するには、[メールとカレンダーの設定](/l/ja/user-guide/calendar-emails/overview)を参照してください。
|
||||
|
||||
## How Calendar Integration Works
|
||||
## カレンダー統合の仕組み
|
||||
|
||||
Twenty automatically syncs your calendar events and links them to the relevant CRM records, giving you a complete view of your meeting history with contacts and companies.
|
||||
Twenty はカレンダーのイベントを自動的に同期し、関連する CRM レコードにリンクします。これにより、連絡先や企業との会議履歴を包括的に把握できます。
|
||||
|
||||
## Calendar Tab
|
||||
## カレンダータブ
|
||||
|
||||
Next to the Emails tab on records, you'll find a `Calendar` tab that contains the history of meetings scheduled with the record.
|
||||
メールタブの隣に、該当レコードとの会議の履歴が含まれる`カレンダー`タブがあります。
|
||||
|
||||
### Available For
|
||||
### 対象
|
||||
|
||||
* **People**: View all meetings scheduled with a specific contact
|
||||
* **Companies**: See all meetings related to a company and its employees
|
||||
* **Opportunities**: Access meeting history related to the company linked to this opportunity
|
||||
* **人物**：特定の連絡先とのすべての会議を表示
|
||||
* **会社**：会社およびその従業員に関連するすべての会議を表示
|
||||
* **機会**：この機会にリンクされた会社に関連する会議の履歴にアクセス
|
||||
|
||||
### Viewing Meeting History
|
||||
### 会議履歴の表示
|
||||
|
||||
1. **Navigate to a Record**: Go to any Person, Company, or Opportunity record
|
||||
2. **Select the Calendar Tab**: Click on the `Calendar` tab next to the Emails tab
|
||||
3. **Browse Meeting History**: View all scheduled meetings and their details
|
||||
4. **Access Meeting Context**: See meeting participants, times, and related information
|
||||
1. **レコードに移動**：任意の人物、会社、機会のレコードに移動
|
||||
2. **カレンダータブを選択**：メールタブの隣の`カレンダー` タブをクリック
|
||||
3. **会議履歴を閲覧**：予定されたすべての会議とその詳細を参照
|
||||
4. **会議コンテキストにアクセス**：会議の参加者、時間、関連情報を確認
|
||||
|
||||
## Visibility Settings
|
||||
## 可視性設定
|
||||
|
||||
Calendar data follows the same visibility settings as emails, ensuring consistent privacy controls across both communication channels.
|
||||
カレンダーデータは、メールと同じ可視性設定に従い、両方の通信チャネルで一貫したプライバシーコントロールを保証します。
|
||||
|
||||
## What Gets Synced
|
||||
## 同期されるもの
|
||||
|
||||
* **External Meetings**: All meetings with contacts outside your organization
|
||||
* **Automatic Linking**: Meetings connect to existing People and Company records based on attendee email addresses
|
||||
* **Meeting Details**: Subject, time, duration, and participants
|
||||
* **Updates**: New calendar events sync automatically
|
||||
* **外部会議**：組織外の連絡先とのすべての会議
|
||||
* **自動リンク**：出席者のメールアドレスに基づき、会議は既存の人物および会社のレコードに接続されます
|
||||
* **会議の詳細**：件名、時間、所要時間、参加者
|
||||
* **更新**：新しいカレンダーイベントは自動的に同期されます
|
||||
|
||||
## What Doesn't Get Synced
|
||||
## 同期されないもの
|
||||
|
||||
* **Internal Meetings**: Meetings with only colleagues (same domain) remain private
|
||||
* **Private Events**: Events marked as private in your calendar
|
||||
* **内部会議**：同僚のみ（同一ドメイン）の会議は非公開のままです
|
||||
* **プライベートイベント**：カレンダーでプライベートに設定されたイベント
|
||||
|
||||
@@ -1,85 +1,95 @@
|
||||
---
|
||||
title: Mailbox
|
||||
description: Understanding email integration features in Twenty.
|
||||
title: メールボックス
|
||||
description: Twenty のメール連携機能を理解する。
|
||||
---
|
||||
|
||||
**Note**: To connect your email accounts and configure sync settings, visit [Email & Calendar Setup](/l/ja/user-guide/calendar-emails/overview).
|
||||
**メモ**：メールアカウントを接続し、同期設定を構成するには、[メールとカレンダーの設定](/l/ja/user-guide/calendar-emails/overview)を訪問してください。
|
||||
|
||||
## How Email Integration Works
|
||||
## メール統合の仕組み
|
||||
|
||||
Twenty automatically links emails from your connected mailboxes to the relevant CRM records, keeping all communication history in one place.
|
||||
Twentyは、接続されたメールボックスからのメールを関連するCRMレコードに自動でリンクし、すべての通信履歴を一箇所にまとめます。
|
||||
|
||||
### Objects Where Emails Can Be Found
|
||||
### メールが見つかるオブジェクト
|
||||
|
||||
Email conversations appear in three main objects:
|
||||
メールの会話は、次の3つの主要なオブジェクトに表示されます。
|
||||
|
||||
* **People**: View all emails exchanged with a specific contact
|
||||
* **Companies**: See all emails related to a company and its employees
|
||||
* **Opportunities**: Access email threads related to the company linked to this opportunity. Email threads from individual people on the opportunity are not shown yet.
|
||||
* **人物**：特定の連絡先との交換されたすべてのメールを表示
|
||||
* **会社**：会社およびその従業員に関連するすべてのメールを表示
|
||||
* **機会**：この機会にリンクされた会社に関連するメールスレッドにアクセス。 この機会での個人のメールスレッドはまだ表示されません。 この機会での個人のメールスレッドはまだ表示されません。 この機会での個人のメールスレッドはまだ表示されません。 この機会での個人のメールスレッドはまだ表示されません。
|
||||
|
||||
### Viewing Email Threads
|
||||
### メールスレッドの表示
|
||||
|
||||
1. **Navigate to a Record**: Go to any Person, Company, or Opportunity record
|
||||
2. **Select the Emails Tab**: Click on the `Emails` tab to view synced emails
|
||||
3. **Open an Email Thread**: Click on any email to open and read the full conversation
|
||||
4. **Browse History**: Scroll through the complete email history with that contact
|
||||
1. **レコードに移動**：任意の人物、会社、機会のレコードにアクセス
|
||||
2. **メールタブを選択**：`メール` タブをクリックして同期されたメールを表示
|
||||
3. **メールスレッドを開く**：任意のメールをクリックして完全な会話を開いて読む
|
||||
4. **履歴を閲覧**：その連絡先とすべてのメール履歴をスクロールして参照する
|
||||
|
||||
<img src="/images/user-guide/emails/show-inbox.png" style={{width:'100%'}} />
|
||||
|
||||
## What You'll See
|
||||
## あなたが見るもの
|
||||
|
||||
### Email Thread View
|
||||
### メールスレッドビュー
|
||||
|
||||
When you open an email thread, you can:
|
||||
メールスレッドを開いたとき、次のことができます：
|
||||
|
||||
* **Read Full Conversations**: See the complete email exchange
|
||||
* **View Participants**: See all people involved in the email thread
|
||||
* **Check Timestamps**: Know exactly when each email was sent
|
||||
* **Access Context**: Understand the full communication history
|
||||
* **完全な会話を読む**：メール交換の全体を参照
|
||||
* **参加者を見る**：メールスレッドに関与しているすべての人を表示
|
||||
* **タイムスタンプを確認**：各メールが送信された正確な時間を把握
|
||||
* **コンテキストにアクセス**：完全な通信履歴を理解
|
||||
|
||||
### Email Visibility
|
||||
### メールの可視性
|
||||
|
||||
Depending on your mailbox settings, you might see:
|
||||
メールボックスの設定によっては、以下を確認する場合があります。
|
||||
|
||||
* **Full Content**: Complete email text and details
|
||||
* **Subject + Metadata**: Subject line, sender, recipient, and timestamp
|
||||
* **Metadata Only**: Basic information without email content
|
||||
* **完全なコンテンツ**：完全なメールテキストと詳細
|
||||
* **件名＋メタデータ**：件名、送信者、受信者、タイムスタンプ
|
||||
* **メタデータのみ**：メールコンテンツを含まない基本情報
|
||||
|
||||
## Email Sync Behavior
|
||||
## メールの同期動作
|
||||
|
||||
### What Gets Synced
|
||||
### 同期レート
|
||||
|
||||
* **External Emails**: All emails with contacts outside your organization
|
||||
* **Automatic Linking**: Emails connect to existing People and Company records
|
||||
* **Multiple Addresses**: Emails from any address link to the same contact record
|
||||
* **Updates**: New emails appear within 5 minutes
|
||||
Twenty は約 **1分あたり400通のメッセージ**を取り込みます。 このレートは現在、Gmail API のレート制限によって制限されています（他のプロバイダーにも同様に適用されます）。
|
||||
|
||||
### What Doesn't Get Synced
|
||||
参考:
|
||||
|
||||
* **Internal Emails**: Emails between colleagues (same domain) remain private
|
||||
* **Group Emails**: Distribution lists and group emails are excluded
|
||||
* **Excluded Folders**: Folders you've chosen not to sync (configured under Settings → Accounts → Email)
|
||||
* 1,000 通のメール → ~2.5 分
|
||||
* 10,000 通のメール → ~25 分
|
||||
* 50,000 通のメール → ~2 時間
|
||||
|
||||
### Selective Folder Sync (Lab Feature)
|
||||
### 同期されるもの
|
||||
|
||||
Control which email folders sync with Twenty:
|
||||
* **外部メール**：組織外の連絡先とのすべてのメール
|
||||
* **自動リンク**：メールは既存の人物と会社のレコードに接続
|
||||
* **複数のアドレス**：どのアドレスからのメールも同じ連絡先レコードにリンク
|
||||
* **更新**：新しいメールは5分以内に表示されます
|
||||
|
||||
1. Enable `Message Folder` in Settings → Releases → Lab
|
||||
2. Configure folders under Settings → Accounts → Email
|
||||
3. Choose specific folders to include or exclude (Inbox, Sent, Archive, custom folders)
|
||||
### 同期されないもの
|
||||
|
||||
## Troubleshooting Email Sync
|
||||
* **内部メール**：同僚（同じドメイン）間のメールは個人用に残る
|
||||
* **グループメール**：配信リストおよびグループメールは対象外
|
||||
* **除外フォルダー**：同期しないよう選択したフォルダー（設定 → アカウント → メールで設定）
|
||||
|
||||
### Common Sync Issues
|
||||
### 選択フォルダー同期
|
||||
|
||||
* **Sync Delays**: Emails appear within 5 minutes, but initial imports take longer
|
||||
* **Missing Emails**: Check if:
|
||||
* Folders are excluded in Message Folder settings
|
||||
* Contact auto-creation is disabled (emails need existing Twenty records)
|
||||
* Email is from colleagues (same domain) or group lists
|
||||
* Mailbox is still completing initial sync
|
||||
Twenty と同期するメールフォルダーを制御:
|
||||
|
||||
### Email Limitations
|
||||
1. **設定 → アカウント** に移動し、接続済みのメールアカウントを選択します
|
||||
2. メールセクションでフォルダーを設定します
|
||||
3. 特定のフォルダーを選択して含めるまたは除外する（受信トレイ、送信済み、アーカイブ、カスタムフォルダー）
|
||||
|
||||
* **System Folders**: Some email folders may not be available for sync
|
||||
* **Aliases**: Only true mailboxes can be connected (not email aliases)
|
||||
## メール同期のトラブルシューティング
|
||||
|
||||
### 一般的な同期問題
|
||||
|
||||
* **同期遅延**：メールは5分以内に表示されますが、最初のインポートには時間がかかります
|
||||
* **メールの欠落**：以下を確認してください：
|
||||
* メッセージフォルダー設定でフォルダーが除外されている
|
||||
* 連絡先の自動作成が無効になっている（メールには既存のTwentyレコードが必要）
|
||||
* メールが同僚（同じドメイン）またはグループリストからのものである
|
||||
* メールボックスが初期同期をまだ完了していない
|
||||
|
||||
### メールの制限事項
|
||||
|
||||
* **システムフォルダー**：一部のメールフォルダーは同期できない可能性があります
|
||||
* **エイリアス**：実際のメールボックスのみが接続できます（メールエイリアス不可）
|
||||
|
||||
+17
-17
@@ -1,28 +1,28 @@
|
||||
---
|
||||
title: Can I Book Meetings from Twenty?
|
||||
description: Information about booking meetings directly from Twenty.
|
||||
title: Twenty からミーティングを予約できますか？
|
||||
description: Twenty から直接ミーティングを予約することに関する情報。
|
||||
---
|
||||
|
||||
## Current Status
|
||||
## 現在の状況
|
||||
|
||||
**No, Twenty does not currently support booking meetings directly from the platform.**
|
||||
**いいえ、現在 Twenty ではプラットフォームから直接ミーティングを予約することはできません。**
|
||||
|
||||
Twenty's calendar integration is designed to **sync and display** your existing calendar events, not to create new ones. All meeting scheduling should be done through your native calendar application (Google Calendar, Microsoft Outlook, etc.).
|
||||
Twenty のカレンダー連携は、既存のカレンダーイベントを**同期して表示**するように設計されており、新規作成するためのものではありません。 ミーティングのスケジューリングは、すべてお使いのネイティブのカレンダーアプリ（Google Calendar、Microsoft Outlook など）で行ってください。
|
||||
|
||||
## What You Can Do
|
||||
## 現在できること
|
||||
|
||||
* **View meeting history** on People, Companies, and Opportunities records
|
||||
* **See upcoming meetings** with contacts in your CRM
|
||||
* **Track meeting context** alongside email communications
|
||||
* **Auto-create contacts** from meeting participants
|
||||
* **ミーティング履歴を表示**（People、Companies、Opportunities のレコード上）
|
||||
* CRM 内の連絡先との**今後のミーティングを確認**
|
||||
* メールのやり取りと併せて**ミーティングのコンテキストを追跡**
|
||||
* ミーティング参加者から**連絡先を自動作成**
|
||||
|
||||
## How to Schedule Meetings
|
||||
## ミーティングをスケジュールする方法
|
||||
|
||||
1. Use your native calendar app (Google Calendar, Outlook, etc.)
|
||||
2. Create the meeting as you normally would
|
||||
3. The meeting will automatically sync to Twenty within 5 minutes
|
||||
4. View the meeting on the relevant CRM records
|
||||
1. お使いのネイティブのカレンダーアプリ（Google Calendar、Outlook など）を使用する
|
||||
2. 通常どおりミーティングを作成する
|
||||
3. ミーティングは 5 分以内に自動的に Twenty と同期されます
|
||||
4. 関連する CRM のレコード上でミーティングを表示する
|
||||
|
||||
## Future Plans
|
||||
## 今後の計画
|
||||
|
||||
Meeting creation from within Twenty is on our roadmap. Join our [GitHub discussions](https://github.com/twentyhq/twenty/discussions) to share your use case and help prioritize this feature.
|
||||
Twenty 内からミーティングを作成する機能はロードマップに含まれています。 この機能の優先度付けの参考にするため、ユースケースを共有するには[GitHub のディスカッション](https://github.com/twentyhq/twenty/discussions)に参加してください。
|
||||
|
||||
+24
-24
@@ -1,44 +1,44 @@
|
||||
---
|
||||
title: Can I Send Emails from Twenty?
|
||||
description: Information about sending emails directly from Twenty.
|
||||
title: Twenty からメールを送信できますか？
|
||||
description: Twenty から直接メールを送信することに関する情報。
|
||||
---
|
||||
|
||||
## Current Status
|
||||
## 現在の状況
|
||||
|
||||
Twenty's email integration is designed to **sync and display** your email history. Emails cannot be composed or sent directly from Twenty's interface.
|
||||
Twenty のメール連携は、メール履歴を**同期して表示**するように設計されています。 Twenty のインターフェースからメールを作成したり直接送信したりすることはできません。
|
||||
|
||||
When you view an email thread on a record page and click **Reply**, you'll be redirected to the original thread in your mailbox (Gmail, Outlook, etc.). This is where you compose and send your reply.
|
||||
レコードページでメールスレッドを表示し、**返信**をクリックすると、メールボックス（Gmail、Outlook など）の元のスレッドにリダイレクトされます。 そこで返信を作成して送信します。
|
||||
|
||||
## What You Can Do Today
|
||||
## 現在できること
|
||||
|
||||
* **View email history** on People, Companies, and Opportunities records
|
||||
* **Read full email threads** with contacts in your CRM
|
||||
* **Track communication context** alongside calendar events
|
||||
* **Auto-create contacts** from email interactions
|
||||
* **Reply via redirect** — click Reply to jump to your mailbox
|
||||
* **メール履歴を表示**（People、Companies、Opportunities のレコード上）
|
||||
* CRM 内の連絡先との**メールスレッド全体を閲覧**
|
||||
* カレンダーイベントと併せて**コミュニケーションのコンテキストを追跡**
|
||||
* メールでのやり取りから**連絡先を自動作成**
|
||||
* **リダイレクトで返信** — 返信をクリックしてメールボックスに移動
|
||||
|
||||
## Sending Emails via Workflows
|
||||
## ワークフローによるメール送信
|
||||
|
||||
While you can't send emails manually from Twenty, you **can send emails automatically using Workflows**. This is useful for:
|
||||
Twenty から手動でメールを送信することはできませんが、**ワークフローを使用して自動的にメールを送信**できます。 このような用途に役立ちます:
|
||||
|
||||
* Automated follow-ups
|
||||
* Notifications to contacts
|
||||
* Triggered communications based on record changes
|
||||
* 自動フォローアップ
|
||||
* 連絡先への通知
|
||||
* レコードの変更をトリガーにしたコミュニケーション
|
||||
|
||||
Emails sent via workflows go through your connected mailbox account.
|
||||
ワークフロー経由で送信されるメールは、接続済みのメールボックスアカウントを通じて送信されます。
|
||||
|
||||
→ Learn about the [Send Email action](/l/ja/user-guide/workflows/capabilities/workflow-actions#send-email)
|
||||
→ [Send Email アクション](/l/ja/user-guide/workflows/capabilities/workflow-actions#send-email) について詳しく知る
|
||||
|
||||
## Email Sequences and Newsletters
|
||||
## メールシーケンスとニュースレター
|
||||
|
||||
For email sequences and newsletters, we recommend using workflows to connect Twenty to a dedicated email marketing tool.
|
||||
メールシーケンスやニュースレターには、ワークフローを使って Twenty を専用のメールマーケティングツールに接続することを推奨します。
|
||||
|
||||
<Warning>
|
||||
Mass emails should not be sent directly from your mailbox to protect your domain reputation. Use a dedicated tool for bulk communications.
|
||||
ドメインのレピュテーションを保護するため、大量メールをメールボックスから直接送信しないでください。 一括配信には専用ツールを使用してください。
|
||||
</Warning>
|
||||
|
||||
→ See [How to send emails from workflows](/l/ja/user-guide/workflows/capabilities/send-emails-from-workflows) for setup instructions
|
||||
→ 設定手順は、[ワークフローからメールを送信する方法](/l/ja/user-guide/workflows/capabilities/send-emails-from-workflows) を参照してください
|
||||
|
||||
## Future Plans
|
||||
## 今後の計画
|
||||
|
||||
Native email composition from within Twenty is on our roadmap. Join our [GitHub discussions](https://github.com/twentyhq/twenty/discussions) to share your use case and help prioritize this feature.
|
||||
Twenty 内でネイティブにメール作成できる機能はロードマップに含まれています。 この機能の優先度付けの参考にするため、ユースケースを共有するには[GitHub のディスカッション](https://github.com/twentyhq/twenty/discussions)に参加してください。
|
||||
|
||||
+21
-21
@@ -1,35 +1,35 @@
|
||||
---
|
||||
title: Can I Track Email Activity on All Objects?
|
||||
description: Understanding email activity tracking across different objects.
|
||||
title: すべてのオブジェクトでメールアクティビティを追跡できますか？
|
||||
description: 異なるオブジェクト間でのメールアクティビティの追跡について説明します。
|
||||
---
|
||||
|
||||
## Supported Objects
|
||||
## サポート対象のオブジェクト
|
||||
|
||||
Email activity is currently available on **three standard objects**:
|
||||
メールアクティビティは現在、**3 つの標準オブジェクト**で利用できます:
|
||||
|
||||
| Object | What You See |
|
||||
| ----------------- | ---------------------------------------------------------------- |
|
||||
| **People** | All emails exchanged with that specific contact |
|
||||
| **Companies** | All emails with anyone from that company (based on email domain) |
|
||||
| **Opportunities** | Emails related to the company linked to the opportunity |
|
||||
| オブジェクト | 表示内容 |
|
||||
| ------- | --------------------------------- |
|
||||
| **連絡先** | その特定の連絡先とやり取りしたすべてのメール |
|
||||
| **会社** | その会社に所属する相手とのすべてのメール（メールドメインに基づく） |
|
||||
| **商談** | その商談にリンクされた会社に関連するメール |
|
||||
|
||||
## Why Only These Objects?
|
||||
## なぜこれらのオブジェクトだけなのですか？
|
||||
|
||||
People, Companies, and Opportunities are the core relationship objects where email context adds the most value. Email threads are automatically linked based on:
|
||||
連絡先、会社、商談は、メールのコンテキストが最も価値を生む中核のリレーションシップオブジェクトです。 メールスレッドは以下に基づいて自動的にリンクされます:
|
||||
|
||||
* **Email address** → matched to People records
|
||||
* **Email domain** → matched to Company records
|
||||
* **Company relation** → linked to Opportunities
|
||||
* **メールアドレス** → 連絡先レコードに照合
|
||||
* **メールドメイン** → 会社レコードに照合
|
||||
* **会社の関連付け** → 商談にリンク
|
||||
|
||||
## Custom Objects
|
||||
## カスタムオブジェクト
|
||||
|
||||
**Email tracking is not available on custom objects** at this time.
|
||||
**カスタムオブジェクトではメール追跡は利用できません**（現時点では）。
|
||||
|
||||
If you need email context on a custom object, consider:
|
||||
カスタムオブジェクトでメールのコンテキストが必要な場合は、次を検討してください:
|
||||
|
||||
* Using a relation field to link your custom object to People or Companies
|
||||
* Viewing email history on the linked People/Company record
|
||||
* 関連フィールドを使用して、カスタムオブジェクトを連絡先または会社にリンクする
|
||||
* リンクされた連絡先/会社レコードでメール履歴を閲覧する
|
||||
|
||||
## Future Plans
|
||||
## 今後の計画
|
||||
|
||||
Extending email visibility to custom objects is being considered. Share your use case on our [GitHub discussions](https://github.com/twentyhq/twenty/discussions) to help prioritize this feature.
|
||||
メールの可視性をカスタムオブジェクトへ拡張することを検討中です。 この機能の優先順位付けの参考になるよう、ユースケースを[GitHub のディスカッション](https://github.com/twentyhq/twenty/discussions)で共有してください。
|
||||
|
||||
+26
-26
@@ -1,42 +1,42 @@
|
||||
---
|
||||
title: Connect Several Mailboxes per User
|
||||
description: Connect multiple email accounts for a single user.
|
||||
title: ユーザーごとに複数のメールボックスを接続
|
||||
description: 1人のユーザーに対して複数のメールアカウントを接続できます。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty supports **unlimited email accounts per user**. This is useful if you manage multiple inboxes, such as:
|
||||
Twenty は、**ユーザーごとに無制限のメールアカウント**をサポートしています。 例えば、次のような複数の受信トレイを管理している場合に便利です:
|
||||
|
||||
* Personal work email + shared team inbox
|
||||
* Multiple client-facing email addresses
|
||||
* Different email accounts for different roles
|
||||
* 個人の仕事用メール + 共有のチーム受信トレイ
|
||||
* クライアント対応用の複数のメールアドレス
|
||||
* 役割ごとに別々のメールアカウント
|
||||
|
||||
## How to Add Multiple Mailboxes
|
||||
## 複数のメールボックスを追加する方法
|
||||
|
||||
1. Go to **Settings → Accounts**
|
||||
2. Click **Add account**
|
||||
3. Connect your additional Google or Microsoft account
|
||||
4. Configure sync settings for this mailbox
|
||||
5. Repeat for each mailbox you want to connect
|
||||
1. **設定 → アカウント** に移動します
|
||||
2. **アカウントを追加**をクリックします
|
||||
3. 追加の Google または Microsoft アカウントを接続します
|
||||
4. このメールボックスの同期設定を構成します
|
||||
5. 接続したい各メールボックスについて繰り返します
|
||||
|
||||
## Managing Multiple Accounts
|
||||
## 複数アカウントの管理
|
||||
|
||||
Each connected mailbox has its own settings:
|
||||
接続された各メールボックスには独自の設定があります:
|
||||
|
||||
* **Email visibility**: Choose what teammates can see
|
||||
* **Contact auto-creation**: Enable/disable per mailbox
|
||||
* **Folder selection**: Choose which folders to sync (Lab feature)
|
||||
* **メールの表示範囲**: チームメンバーに何を見せるかを選択します
|
||||
* **連絡先の自動作成**: メールボックスごとに有効/無効を設定できます
|
||||
* **フォルダー選択**: 同期するフォルダーを選択
|
||||
|
||||
## How Emails Appear
|
||||
## メールの表示方法
|
||||
|
||||
Emails from all your connected mailboxes are synced to Twenty and appear on:
|
||||
接続したすべてのメールボックスからのメールは Twenty に同期され、次の場所に表示されます:
|
||||
|
||||
* **People records**: Based on the contact's email address
|
||||
* **Company records**: Based on the email domain
|
||||
* **Opportunities**: Based on the linked company
|
||||
* **人物レコード**: 連絡先のメールアドレスに基づく
|
||||
* **会社レコード**: メールドメインに基づく
|
||||
* **商談**: リンクされた会社に基づく
|
||||
|
||||
<Note>Each email shows which mailbox it was sent from/received to, so you can track which account was used for each communication.</Note>
|
||||
<Note>各メールには送信元/受信先のメールボックスが表示されるため、各やり取りでどのアカウントが使用されたかを追跡できます。</Note>
|
||||
|
||||
## Important Notes
|
||||
## 重要な注意事項
|
||||
|
||||
<Warning>Only true mailboxes can be connected. Email aliases that forward to another mailbox cannot be connected separately—they'll sync through the main mailbox.</Warning>
|
||||
<Warning>実際のメールボックスのみ接続できます。 別のメールボックスに転送するメールエイリアスは個別に接続できません—メインのメールボックス経由で同期されます。</Warning>
|
||||
|
||||
+28
-28
@@ -1,53 +1,53 @@
|
||||
---
|
||||
title: I Don't See Emails on Records
|
||||
description: Troubleshooting missing emails on records.
|
||||
title: レコードにメールが表示されない
|
||||
description: レコードにメールが表示されない場合のトラブルシューティング。
|
||||
---
|
||||
|
||||
## Common Reasons
|
||||
## よくある原因
|
||||
|
||||
### 1. Initial Sync Still in Progress
|
||||
### 1. 初回同期がまだ進行中です
|
||||
|
||||
Email sync takes time, especially for large mailboxes.
|
||||
メール同期には時間がかかります。特に大きなメールボックスでは時間を要します。 Twenty は約 **1分あたり400通のメッセージ**を取り込みます（Gmail API のレート制限により制限されます）。
|
||||
|
||||
* **Calendar sync**: Completes in minutes
|
||||
* **Email sync**: Can take several hours for large mailboxes
|
||||
* **カレンダー同期**: 数分で完了します
|
||||
* **メール同期**: メールボックスのサイズに依存します（例: 10,000 件のメール ≈ 25 分、50,000 件のメール ≈ 2 時間）
|
||||
|
||||
**Solution**: Wait up to a few hours for the initial import to complete.
|
||||
**解決策**: 初回の取り込みが完了するまでお待ちください。 メールボックスのサイズに基づいて所要時間を見積もることができます。
|
||||
|
||||
### 2. Contact Doesn't Exist in Twenty
|
||||
### 2. Twenty に連絡先が存在しない
|
||||
|
||||
Emails only appear on existing People records. If the contact wasn't created yet:
|
||||
メールは既存の People レコードにのみ表示されます。 連絡先がまだ作成されていない場合:
|
||||
|
||||
* Enable **Contact Auto-Creation** in your mailbox settings
|
||||
* Or manually create the Person record first
|
||||
* メールボックス設定で**連絡先の自動作成**を有効にする
|
||||
* または、先に Person レコードを手動で作成する
|
||||
|
||||
**Solution**: Go to **Settings → Accounts**, select your mailbox, and enable contact auto-creation.
|
||||
**解決策**: **設定 → アカウント** に移動し、メールボックスを選択して連絡先の自動作成を有効にします。
|
||||
|
||||
### 3. Internal Emails Are Excluded
|
||||
### 3. 社内メールは除外されます
|
||||
|
||||
Emails between colleagues (same email domain) are never synced to maintain privacy.
|
||||
同じメールドメインの同僚間のメールは、プライバシー保護のため同期されません。
|
||||
|
||||
**Solution**: This is expected behavior. Only external emails are synced.
|
||||
**解決策**: これは想定どおりの動作です。 外部メールのみが同期されます。
|
||||
|
||||
### 4. Email Is from a Group or Distribution List
|
||||
### 4. グループまたは配布リストからのメール
|
||||
|
||||
Group emails and distribution lists are excluded from sync.
|
||||
グループ宛てのメールや配布リストは同期対象外です。
|
||||
|
||||
**Solution**: This is expected behavior.
|
||||
**解決策**: これは想定どおりの動作です。
|
||||
|
||||
### 5. Folder Not Selected for Sync
|
||||
### 5. 同期対象として選択されていないフォルダー
|
||||
|
||||
If you're using the Message Folder feature, some folders might be excluded.
|
||||
メッセージフォルダー機能を使用している場合、一部のフォルダーが除外されている可能性があります。
|
||||
|
||||
**Solution**: Go to **Settings → Accounts**, select your mailbox, and check folder sync settings.
|
||||
**解決策**: **設定 → アカウント** に移動し、メールボックスを選択してフォルダー同期の設定を確認してください。
|
||||
|
||||
### 6. Wrong Email Address on Record
|
||||
### 6. レコードのメールアドレスが間違っている
|
||||
|
||||
The Person record might have a different email address than the one used in the email.
|
||||
メールで使用されているものとは異なるメールアドレスが Person レコードに登録されている可能性があります。
|
||||
|
||||
**Solution**: Add the correct email address to the Person record.
|
||||
**解決策**: 正しいメールアドレスを Person レコードに追加してください。
|
||||
|
||||
## Still Not Working?
|
||||
## まだうまくいきませんか？
|
||||
|
||||
1. Try disconnecting and reconnecting your mailbox
|
||||
2. Contact support if issues persist
|
||||
1. メールボックスの接続を一度解除して再接続してみてください
|
||||
2. 問題が解決しない場合はサポートにお問い合わせください
|
||||
|
||||
+32
-34
@@ -1,52 +1,50 @@
|
||||
---
|
||||
title: Limit Emails Imported
|
||||
description: Control which emails are imported into Twenty.
|
||||
title: インポートされるメールを制限
|
||||
description: Twenty にインポートされるメールを管理します。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
By default, Twenty syncs all external emails from your connected mailbox. You can limit what gets imported using **folder selection** and **visibility settings**.
|
||||
デフォルトでは、Twenty は接続済みメールボックスのすべての外部メールを同期します。 **フォルダー選択** と **表示設定** を使用して、インポート対象を制限できます。
|
||||
|
||||
## Method 1: Folder Selection (Recommended)
|
||||
## 方法 1: フォルダー選択（推奨）
|
||||
|
||||
Control which email folders sync with Twenty:
|
||||
Twenty と同期するメールフォルダーを制御:
|
||||
|
||||
1. Go to **Settings → Releases → Lab**
|
||||
2. Enable **Message Folder**
|
||||
3. Return to **Settings → Accounts**
|
||||
4. Select your connected email account
|
||||
5. Choose which folders to sync:
|
||||
1. **設定 → アカウント** に移動
|
||||
2. 接続済みのメールアカウントを選択
|
||||
3. 同期するフォルダーを選択してください:
|
||||
|
||||
| Folder | Description |
|
||||
| ------------------ | ----------------------------- |
|
||||
| **Inbox** | Primary incoming emails |
|
||||
| **Sent** | Outgoing emails you've sent |
|
||||
| **Archive** | Archived messages |
|
||||
| **Custom Folders** | Any specific folders you want |
|
||||
| フォルダー | 説明 |
|
||||
| ------------- | ------------- |
|
||||
| **受信トレイ** | 主要な受信メール |
|
||||
| **送信済み** | 送信したメール |
|
||||
| **アーカイブ** | アーカイブされたメッセージ |
|
||||
| **カスタムフォルダー** | 任意に指定したフォルダー |
|
||||
|
||||
6. Exclude folders you don't want synced (Spam, Trash, personal folders)
|
||||
6. 同期したくないフォルダーを除外（スパム、ゴミ箱、個人用フォルダー）
|
||||
|
||||
<Note>This gives you precise control over which emails appear in your CRM without syncing everything.</Note>
|
||||
<Note>これにより、すべてを同期することなく、CRM に表示されるメールを正確に制御できます。</Note>
|
||||
|
||||
## Method 2: Contact Auto-Creation Settings
|
||||
## 方法 2: 連絡先の自動作成設定
|
||||
|
||||
Control when contacts are created from emails:
|
||||
メールから連絡先を作成するタイミングを制御します:
|
||||
|
||||
1. Go to **Settings → Accounts**
|
||||
2. Select your connected mailbox
|
||||
3. Choose an option:
|
||||
* **Deactivated**: No contacts created, but emails still sync to existing contacts
|
||||
* **Sent & Received**: Create contacts from all external emails
|
||||
* **Sent Only**: Only create contacts from emails you send
|
||||
1. **設定 → アカウント** に移動します
|
||||
2. 接続済みのメールボックスを選択
|
||||
3. オプションを選択:
|
||||
* **無効**: 連絡先は作成されませんが、メールは既存の連絡先と引き続き同期されます
|
||||
* **送受信**: すべての外部メールから連絡先を作成します
|
||||
* **送信のみ**: 自分が送信したメールからのみ連絡先を作成します
|
||||
|
||||
## What's Always Excluded
|
||||
## 常に除外されるもの
|
||||
|
||||
These emails are never synced, regardless of settings:
|
||||
設定に関係なく、これらのメールは同期されません:
|
||||
|
||||
* **Internal emails**: Messages between colleagues (same domain)
|
||||
* **Group emails**: Distribution lists and group messages
|
||||
* **Spam/Trash**: System folders are typically excluded
|
||||
* **内部メール**: 同僚（同一ドメイン）間のメッセージ
|
||||
* **グループメール**: 配信リストおよびグループメッセージ
|
||||
* **スパム/ゴミ箱**: システムフォルダーは通常除外されます
|
||||
|
||||
## Important Note
|
||||
## 重要な注意事項
|
||||
|
||||
<Note>We don't provide a CC email address for selective syncing. Use the folder selection feature above to achieve the same level of control.</Note>
|
||||
<Note>選択的な同期のための CC メールアドレスは提供していません。 上記のフォルダー選択機能を使用して、同等のレベルの制御が可能です。</Note>
|
||||
|
||||
@@ -1,132 +1,130 @@
|
||||
---
|
||||
title: Calendar & Emails
|
||||
description: Connect your email and calendar accounts to Twenty.
|
||||
title: カレンダーとメール
|
||||
description: メールとカレンダーのアカウントをTwentyに接続します。
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Calendar & Emails" />
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="カレンダーとメール" />
|
||||
</Frame>
|
||||
|
||||
## Connection Options
|
||||
## 接続オプション
|
||||
|
||||
### Google Account (Gmail & Google Calendar)
|
||||
### Google アカウント（Gmail & Google カレンダー）
|
||||
|
||||
1. Go to **Settings → Accounts**
|
||||
2. Click **Add account**
|
||||
3. Select **Continue with Google**
|
||||
4. Authorize Twenty to access your Gmail and Google Calendar
|
||||
5. Configure email sync settings (visibility, auto-creation) → click **Next**
|
||||
6. Configure calendar sync settings (visibility, auto-creation) → click **Add Account**
|
||||
7. Your emails and calendar events will start syncing automatically
|
||||
1. **設定 → アカウント** に移動します
|
||||
2. **アカウントを追加**をクリックします
|
||||
3. **Googleで続行**を選択します
|
||||
4. Twenty に Gmail および Google カレンダーへのアクセスを許可
|
||||
5. メールの同期設定（表示、自動作成）を設定し、→ **次へ**をクリックします
|
||||
6. カレンダーの同期設定（表示、自動作成）を設定し、→ **アカウントを追加**をクリックします
|
||||
7. メールとカレンダーのイベントは自動で同期され始めます
|
||||
|
||||
### Microsoft Account (Outlook & Microsoft Calendar)
|
||||
### Microsoft アカウント（Outlook & Microsoft カレンダー）
|
||||
|
||||
1. Go to **Settings → Accounts**
|
||||
2. Click **Add account**
|
||||
3. Select **Continue with Microsoft**
|
||||
4. Authorize Twenty to access your Outlook and Microsoft Calendar
|
||||
5. Configure email sync settings (visibility, auto-creation) → click **Next**
|
||||
6. Configure calendar sync settings (visibility, auto-creation) → click **Add Account**
|
||||
7. Your emails and calendar events will start syncing automatically
|
||||
1. **設定 → アカウント** に移動します
|
||||
2. **アカウントを追加**をクリックします
|
||||
3. **Microsoftで続行**を選択します
|
||||
4. Twenty に Outlook および Microsoft カレンダーへのアクセスを許可
|
||||
5. メールの同期設定（表示、自動作成）を設定し、→ **次へ**をクリックします
|
||||
6. カレンダーの同期設定（表示、自動作成）を設定し、→ **アカウントを追加**をクリックします
|
||||
7. メールとカレンダーのイベントは自動で同期され始めます
|
||||
|
||||
### SMTP/CalDAV Setup (Other Providers)
|
||||
### SMTP/CalDAV セットアップ（他のプロバイダー）
|
||||
|
||||
For other email and calendar providers:
|
||||
他のメールおよびカレンダー プロバイダーの場合:
|
||||
|
||||
1. Go to **Settings → Releases → Lab** to enable the feature
|
||||
2. Return to **Settings → Accounts**
|
||||
3. Configure SMTP settings for email
|
||||
4. Configure CalDAV settings for calendar
|
||||
5. Test the connection
|
||||
1. **設定 → アカウント** に移動します
|
||||
2. メール用の SMTP 設定を構成
|
||||
3. カレンダー用の CalDAV 設定を構成
|
||||
4. 接続をテスト
|
||||
|
||||
### Multiple Mailboxes
|
||||
### 複数のメールボックス
|
||||
|
||||
* **Unlimited Accounts**: Connect multiple email accounts per user
|
||||
* **Account Management**: Switch between different mailboxes
|
||||
* **Sync Settings**: Configure different settings per mailbox
|
||||
* **無制限のアカウント**: ユーザーごとに複数のメールアカウントを接続
|
||||
* **アカウント管理**: 異なるメールボックス間を切り替える
|
||||
* **同期設定**: メールボックスごとに異なる設定を構成
|
||||
|
||||
<Warning>
|
||||
Only true mailboxes can be connected (e.g., support@domain.com with its own inbox). Email aliases that forward to another mailbox cannot be connected to Twenty.
|
||||
本物のメールボックスのみ接続可能（例: support@domain.com で独自の受信トレイ）。 他のメールボックスに転送するメールエイリアスは Twenty に接続できません。
|
||||
</Warning>
|
||||
|
||||
## Email Configuration
|
||||
## メール設定
|
||||
|
||||
### Message Visibility
|
||||
### メッセージの可視性
|
||||
|
||||
Choose different levels of visibility for your emails:
|
||||
メールの可視性レベルを選択:
|
||||
|
||||
* **Metadata Only**: Share only basic information (sender, recipient, date, time)
|
||||
* **Subject and Metadata**: Share subject line along with metadata
|
||||
* **All Email Content**: Share entire email content including attachments
|
||||
* **メタデータのみ**: 基本情報（送信者、受信者、日付、時間）のみ共有
|
||||
* **件名とメタデータ**: 件名とメタデータを共有
|
||||
* **すべてのメール コンテンツ**: 添付ファイルを含む全メールコンテンツを共有
|
||||
|
||||
### Contact Auto-Creation
|
||||
### 連絡先の自動作成
|
||||
|
||||
* **Deactivated**: No automatic contact creation
|
||||
* **For messages sent & received**: Create contacts for all external email interactions
|
||||
* **For messages sent only**: Create contacts only for emails you send
|
||||
* **Note**: Internal emails (same domain) are never synced to maintain privacy
|
||||
* **非活性化**: 連絡先の自動作成なし
|
||||
* **送受信メッセージ用**: すべての外部メール インタラクションの連絡先を作成
|
||||
* **送信メッセージ用のみ**: 送信するメールの連絡先のみ作成
|
||||
* **注意**: 内部メール（同じドメイン）はプライバシーを維持するために同期されません
|
||||
|
||||
<Note>When enabled, contacts are automatically linked to their Company records based on their email domain. If the company doesn't exist yet, Twenty creates it for you.</Note>
|
||||
<Note>有効にすると、連絡先はメールドメインに基づいて会社レコードに自動的にリンクされます。 会社がまだ存在しない場合は、Twentyが会社レコードを作成します。</Note>
|
||||
|
||||
### Control which emails get sync with Message Folder Selection (Lab Feature)
|
||||
### メッセージ フォルダー選択で同期するメールを制御
|
||||
|
||||
Control which email folders sync with Twenty:
|
||||
Twenty と同期するメールフォルダーを制御:
|
||||
|
||||
1. Go to **Settings → Releases → Lab** and enable **Message Folder**
|
||||
2. Return to **Settings → Accounts** and select your connected email account
|
||||
3. Choose which folders to sync:
|
||||
* **Inbox**: Primary incoming emails
|
||||
* **Sent**: Outgoing emails you've sent
|
||||
* **Custom Folders**: Any specific folders you want to include
|
||||
* **Exclude Folders**: Skip folders like Spam, Trash, or personal folders
|
||||
1. **設定 → アカウント** に移動し、接続済みのメールアカウントを選択します
|
||||
2. 同期するフォルダーを選択してください:
|
||||
* **受信トレイ**: 主要な受信メール
|
||||
* **送信済み**: 送信したメール
|
||||
* **カスタムフォルダー**: 含めたい特定のフォルダー
|
||||
* **フォルダーの除外**: スパム、ゴミ箱、個人用フォルダーなどをスキップ
|
||||
|
||||
This gives you precise control over which emails appear in your CRM without syncing everything.
|
||||
これにより、CRM に表示されるメールをすべて同期することなく正確に制御できます。
|
||||
|
||||
**What Gets Synced:**
|
||||
**同期される内容:**
|
||||
|
||||
* **External Emails**: All emails with external contacts from selected folders
|
||||
* **Internal Emails**: Not synced (same domain emails remain private)
|
||||
* **Attachments**: Coming in H1 2026
|
||||
* **外部メール**: 選択されたフォルダーの外部連絡先とのすべてのメール
|
||||
* **内部メール**: 同期されない（同じドメインのメールはプライベートのままです）
|
||||
* **添付ファイル**: H1 2026 に登場予定
|
||||
|
||||
**Note**: We don't provide a CC email address for selective syncing. Instead, use the Message Folder feature above to achieve the same level of control over which emails sync with Twenty.
|
||||
**注意**: 選択的な同期用の CC メールアドレスは提供していません。 代わりに、上記のメッセージフォルダー機能を使用して、Twenty と同期するメールの制御レベルを同様に達成してください。 **注意**: 選択的な同期用の CC メールアドレスは提供していません。 代わりに、上記のメッセージフォルダー機能を使用して、Twenty と同期するメールの制御レベルを同様に達成してください。 代わりに、上記のメッセージフォルダー機能を使用して、Twenty と同期するメールの制御レベルを同様に達成してください。
|
||||
|
||||
## Calendar Configuration
|
||||
## カレンダー設定
|
||||
|
||||
### Event Visibility
|
||||
### イベントの可視性
|
||||
|
||||
Choose what will be visible to other users in your workspace:
|
||||
ワークスペース内の他のユーザーに表示される内容を選択:
|
||||
|
||||
* **Everything**: The whole event details will be shared with your team
|
||||
* **Metadata**: Only date & participants will be shared with your team
|
||||
* **すべて**: イベントの詳細全体をチームと共有
|
||||
* **メタデータ**: 日付と参加者のみをチームに共有
|
||||
|
||||
### Contact Auto-Creation for Meetings
|
||||
### 会議のための連絡先自動作成
|
||||
|
||||
* **Yes**: Automatically create contacts for meeting participants not in your CRM
|
||||
* **No**: Only link meetings to existing contacts
|
||||
* **はい**: CRM にない会議参加者の連絡先を自動的に作成
|
||||
* **いいえ**: 既存の連絡先にのみ会議をリンク
|
||||
|
||||
<Note>When enabled, contacts are automatically linked to their Company records based on their email domain. If the company doesn't exist yet, Twenty creates it for you.</Note>
|
||||
<Note>有効にすると、連絡先はメールドメインに基づいて会社レコードに自動的にリンクされます。 会社がまだ存在しない場合は、Twentyが会社レコードを作成します。</Note>
|
||||
|
||||
### Control which events get sync
|
||||
### 同期するイベントを制御
|
||||
|
||||
* **Meeting Import**: Automatically import calendar events
|
||||
* **Contact Linking**: Link meetings to People and Company records
|
||||
* **会議インポート**: カレンダーイベントを自動的にインポート
|
||||
* **連絡先のリンク**: 会議を人物および会社のレコードにリンク
|
||||
|
||||
**What Gets Synced:**
|
||||
**同期される内容:**
|
||||
|
||||
* **Meetings**: Calendar events with external participants
|
||||
* **Contact Linking**: Events automatically linked to CRM records
|
||||
* **Team Events**: Shared calendar visibility
|
||||
* **会議**: 外部参加者とのカレンダーイベント
|
||||
* **連絡先のリンク**: イベントが自動的に CRM レコードにリンク
|
||||
* **チームイベント**: 共有カレンダーの可視性
|
||||
|
||||
## Sync Frequency
|
||||
## 同期頻度
|
||||
|
||||
**Updates every 5 minutes**: Both email and calendar data sync automatically every 5 minutes after the initial import.
|
||||
**5分ごとの更新**: メールとカレンダーのデータが初回インポート後に5分ごとに自動的に同期されます。
|
||||
|
||||
<Note>
|
||||
**Initial sync timing**: Calendar sync completes quickly (usually within minutes), while email sync takes longer for large mailboxes—up to a few hours depending on volume. Don't worry if you see contacts from calendar events appearing before your email contacts; this is normal behavior.
|
||||
**初回同期のタイミング**: カレンダーの同期はすばやく完了します（通常は数分以内に）。一方、メールの同期は大容量のメールボックスではより時間がかかります。 Twenty は約 **1分あたり400通のメッセージ**を取り込みます（Gmail API のレート制限により制限されます）。そのため、10,000通のメールがあるメールボックスでは約25分かかります。 カレンダーのイベント由来の連絡先がメールの連絡先より先に表示されても心配はいりません。これは正常な動作です。
|
||||
</Note>
|
||||
|
||||
## Next Steps
|
||||
## 次のステップ
|
||||
|
||||
* [Mailbox capabilities](/l/ja/user-guide/calendar-emails/capabilities/mailbox)
|
||||
* [Troubleshoot missing emails](/l/ja/user-guide/calendar-emails/how-tos/i-dont-see-emails-on-records)
|
||||
* [メールボックスの機能](/l/ja/user-guide/calendar-emails/capabilities/mailbox)
|
||||
* [メールが表示されない場合のトラブルシューティング](/l/ja/user-guide/calendar-emails/how-tos/i-dont-see-emails-on-records)
|
||||
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: チャート設定
|
||||
description: チャートが必要なとおりにデータを表示するように設定します。
|
||||
---
|
||||
|
||||
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
||||
|
||||
## チャート設定にアクセス
|
||||
|
||||
1. ダッシュボード右上の **編集** ボタンをクリック
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-edit.png" alt="編集モード" />
|
||||
|
||||
2. ダッシュボードが編集モードになります。
|
||||
3. 任意のウィジェットをクリックして選択します。
|
||||
4. 右側に設定パネルが開きます。
|
||||
|
||||
設定は次のセクションに分かれています。
|
||||
|
||||
* **データ**: 取得するデータとその絞り込み方法
|
||||
* **X 軸**: カテゴリのグループ化と並べ替え方法（棒グラフ/折れ線グラフ）
|
||||
* **Y 軸**: 何を測定し、どのように表示するか（棒グラフ/折れ線グラフ）
|
||||
* **スタイル**: 色、ラベル、表示オプション
|
||||
|
||||
<Note>
|
||||
一部の設定は、他の設定を構成したときにのみ表示されます。 たとえば、日付フィールドを選択した場合にのみ **日付の粒度** が表示されます。
|
||||
</Note>
|
||||
|
||||
---
|
||||
|
||||
## データ設定
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />ソース </span>
|
||||
|
||||
データを取得するオブジェクトを選択します。
|
||||
|
||||
1. **ソース** をクリック
|
||||
2. オブジェクトを選択します（商談、人物、会社など）。
|
||||
|
||||
標準オブジェクトとカスタムオブジェクトのすべてが利用できます。 ソースを変更すると、フィールドの選択肢は選択したオブジェクトに依存するため、他の設定がリセットされます。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-source.png" alt="ソース" />
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />フィルター </span>
|
||||
|
||||
チャートに含めるレコードを制限します。
|
||||
|
||||
1. **フィルター** をクリックします
|
||||
2. フィルタービルダーが開きます。
|
||||
3. **+ Add filter** をクリック
|
||||
4. フィールド、条件、値を選択します。
|
||||
5. 必要に応じてフィルターを追加します。
|
||||
|
||||
フィルターの動作はテーブルビューと同様です。 データの特定のセグメントに焦点を当てるために使用します。
|
||||
|
||||
**例**: ステージが「受注」に等しい商談でフィルターし、クローズ済みの商談のみを表示します。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-filters.png" alt="フィルター" />
|
||||
|
||||
<Tip>
|
||||
日付フィールドでは、**Is relative** を使うと「過去7日間」や「今月」のような自動更新される動的フィルターを作成できます。
|
||||
</Tip>
|
||||
|
||||
<Tip>
|
||||
高度なフィルターに対応しています — 複数のフィルタールールを追加し、**And** または **Or** ロジックで組み合わせます。
|
||||
</Tip>
|
||||
|
||||
---
|
||||
|
||||
## X 軸の設定
|
||||
|
||||
これらの設定は棒グラフと折れ線グラフの横軸を制御します。通常、データをカテゴリにどのようにグループ化するかを決定します。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />表示データ </span>
|
||||
|
||||
データをグループ化する基準のフィールドを選択します。 X 軸に表示されるカテゴリが決まります。
|
||||
|
||||
**例**: 「ステージ」を選択するとパイプラインのステージ別にグループ化されたデータを表示できます。「作成日」を選択すると時間の経過に沿ったデータを表示できます。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" alt="表示中のデータ" />
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />日付の粒度 </span>
|
||||
|
||||
日付フィールドでグループ化する場合、グループ化の期間を選択します。
|
||||
|
||||
| オプション | グループ化の基準 | 出力例 |
|
||||
| --------- | -------- | ----------------------- |
|
||||
| **日** | 各日 | 1月1日、1月2日、1月3日... |
|
||||
| **週** | カレンダー週 | 第1週、第2週、第3週... |
|
||||
| **月** | 各月 | 1月、2月、3月... |
|
||||
| **四半期** | 会計四半期 | Q1、Q2、Q3、Q4 |
|
||||
| **年** | 各年 | 2023、2024、2025 |
|
||||
| **曜日** | 曜日（集計） | 月曜日、火曜日... （すべての月曜日を集計） |
|
||||
| **年の月** | 月（集計） | 1月、2月... （すべての1月を集計） |
|
||||
| **年の四半期** | 四半期（集計） | Q1、Q2、Q3、Q4（すべてのQ1を集計） |
|
||||
|
||||
「曜日」「年の月」などのオプションは、全期間を横断して集計します。 「曜日」を使うと、通常どの曜日に最も多くの商談があるかが分かります。 「月」を使うと、月ごとの傾向を確認できます。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />並べ替え </span>
|
||||
|
||||
X 軸上のカテゴリの順序を制御します。
|
||||
|
||||
* **Position** – Select フィールド設定で定義された順序を使用
|
||||
* **Alphabetical** – A から Z（または日付の場合は時系列）
|
||||
* **By value** – 指標の値で順序付け（高い/低いの順）
|
||||
* **Manual** – ドラッグして任意の順序に設定
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" alt="並べ替え" />
|
||||
|
||||
**ヒント**: パイプラインのステージには、**Position** を使用して営業プロセスの順序（見込み → 資格判定 → 提案 → 受注）のとおりに表示します。
|
||||
|
||||
<Note>
|
||||
表示されるオプションはフィールドタイプによって異なります。 Select フィールドにはすべてのオプションがありますが、日付フィールドやテキストフィールドでは表示されるオプションが少なくなります。
|
||||
</Note>
|
||||
|
||||
<Tip>
|
||||
**Manual** 並べ替えでは、カテゴリをドラッグして任意の順序を作成できます。特定のセグメントを強調したり、データでストーリーを伝えたりするのに最適です。
|
||||
</Tip>
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />ゼロ値を除外 </span>
|
||||
|
||||
ゼロまたはデータのないカテゴリを非表示にします。
|
||||
|
||||
* **オン**: レコードのないカテゴリを非表示にする
|
||||
* **オフ**: 空でもすべてのカテゴリを表示する
|
||||
|
||||
データがまばらなチャートを見やすくするために使用します。
|
||||
|
||||
---
|
||||
|
||||
## Y 軸の設定
|
||||
|
||||
何を測定し、どのように表示するかを制御します。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />表示データ </span>
|
||||
|
||||
指標を計算するフィールドと演算を選択します。
|
||||
|
||||
* **カウント** – すべてをカウント、空をカウント、空以外をカウント、一意の値をカウント
|
||||
* **数値演算** – 合計、平均、最小、最大（数値フィールド）
|
||||
* **パーセンテージ** – 空の割合、空以外の割合
|
||||
|
||||
ブール値フィールドでは、True/False のカウントが追加されます。 日付フィールドを含む集計チャートでは、最古/最新を表示できます。
|
||||
|
||||
**例**: 「金額」を合計で選択するとカテゴリごとの商談総額を表示できます。Count all を選択すると商談件数を表示できます。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" alt="表示中のデータ" />
|
||||
|
||||
<Note>
|
||||
表示されるオプションはフィールドとチャートの種類によって異なります。 期待する演算が見つからない場合は、フィールドタイプを確認してください。
|
||||
</Note>
|
||||
|
||||
### 比率
|
||||
|
||||
Select、Multi-select、またはブール値フィールドでは、特定の値の割合を計算できます。
|
||||
|
||||
1. Select、Multi-select、またはブール値フィールドを選択します
|
||||
2. **Ratio** を有効にする
|
||||
3. 測定するオプションを選択します
|
||||
|
||||
**例**: すべての商談に対する「受注」商談の割合を表示します。 合計50件中受注が10件なら、チャートには20%と表示されます。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />グループ化 </span>
|
||||
|
||||
第2の次元を追加して複数の系列（複数のバーや線）を作成します。
|
||||
|
||||
1. 先に X 軸のフィールドを設定します
|
||||
2. **Group by** をクリック
|
||||
3. 2 つ目のフィールドを選択します
|
||||
|
||||
**例**: ステージ（X 軸）とオーナー（グループ化）の両方で商談をグループ化し、各担当者のパイプラインの内訳を並べて表示します。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" alt="グループ化" />
|
||||
|
||||
Group by を設定すると、チャートに複数の色が表示され、凡例が現れます。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />日付の粒度 </span>
|
||||
|
||||
Group by が日付フィールドの場合、期間を選択します（X 軸と同じオプション）。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />並べ替え </span>
|
||||
|
||||
Group by 設定時、グループ化された系列の順序（各カテゴリ内でどのオーナーのバーを先頭にするかなど）を制御します。
|
||||
|
||||
X 軸の並べ替えと同じオプション（**Position**、**Alphabetical**、**Manual**）ですが、第二のグループ化では「値に基づく並べ替え」は利用できません。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />累積 </span>
|
||||
|
||||
個別値の代わりに累計を表示します。
|
||||
|
||||
* **オフ**: 各バー/ポイントがそれ自身の値を表示
|
||||
* **オン**: 各バー/ポイントが、それ以前のすべての値の合計に自身の値を加えたものを表示
|
||||
|
||||
**例**: 1月 = 10、2月 = 15
|
||||
|
||||
* 累積オフ: 10 と 15 を表示
|
||||
* 累積オン: 10 と 25（10 + 15）を表示
|
||||
|
||||
累積を使うと、目標に向けた進捗を経時的に追跡できます。
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" alt="累積" />
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />最小値 / <ChartIcon icon="math-max" />最大値 </span>
|
||||
|
||||
Y 軸の最小値と最大値を固定します。
|
||||
|
||||
* 空欄のままにすると自動調整されます
|
||||
* 数値を入力すると境界が固定されます
|
||||
|
||||
**使用する場面:**
|
||||
|
||||
* 視覚的に正確な比較のために最小値を 0 に設定する
|
||||
* 複数のチャートでスケールを統一するため両方を設定する
|
||||
* 両方を設定して特定の値の範囲に焦点を当てる
|
||||
|
||||
---
|
||||
|
||||
## スタイル設定
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />色 </span>
|
||||
|
||||
チャートの配色を設定します。 さまざまなカラーパレットから選択できます。
|
||||
|
||||
<Note>
|
||||
選択フィールドでグループ化している場合、フィールド設定で各オプションに定義した色が自動的に使用されます。
|
||||
</Note>
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />軸名 </span>
|
||||
|
||||
表示する軸ラベルを選択します: **なし**、**X 軸**、**Y 軸**、**両方**（棒グラフと折れ線グラフのみ）。
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />積み上げ棒 / 積み上げ折れ線 </span>
|
||||
|
||||
Group by が設定されている場合、複数系列の表示方法を選択します。
|
||||
|
||||
* **オフ（グループ）**: 系列が横に並びます。 グループ間の正確な値を比較するときに使用します。
|
||||
* **オン（積み上げ）**: 系列が重なって表示されます。 構成（全体に対する内訳）を示すときに使用します。
|
||||
|
||||
**例**: ステージ別の商談（オーナー別にグループ化）
|
||||
|
||||
* グループ: 各オーナーの正確な数値を横並びで確認
|
||||
* 積み上げ: ステージごとの商談合計と各オーナーの内訳を積み上げで表示
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />データラベル </span>
|
||||
|
||||
棒、点、スライスなどのチャート要素に値を直接表示します。
|
||||
|
||||
* **オン**: 値をチャートに表示
|
||||
* **オフ**: 値を表示しない（すっきりした見た目）
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />凡例 </span>
|
||||
|
||||
凡例を表示/非表示にします（Group by 設定時のみ表示）。
|
||||
|
||||
* **オン**: 各色が何を表すかを凡例に表示
|
||||
* **オフ**: 凡例を表示しない
|
||||
|
||||
<Tip>
|
||||
**ホバー** すると、そのグループを強調表示します。 **クリック** すると、一時的にチャートから非表示にします。
|
||||
</Tip>
|
||||
|
||||
---
|
||||
|
||||
## チャート固有の注意事項
|
||||
|
||||
### パイチャート
|
||||
|
||||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **各スライスが表すもの** – スライスのグループ化方法を定義
|
||||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **空のカテゴリを非表示** – 値が 0 のスライスを除外
|
||||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **中央に値を表示** – 集計値（合計、平均、件数など）を表示
|
||||
|
||||
### 集計チャート
|
||||
|
||||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **接頭辞** – 数値の前に文字を追加（例: `$`）
|
||||
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **接尾辞** – 数値の後に文字を追加（例: `%`）
|
||||
@@ -1,74 +1,92 @@
|
||||
---
|
||||
title: Dashboards
|
||||
description: Create and organize dashboards with tabs to visualize your CRM data.
|
||||
title: ダッシュボード
|
||||
description: タブでダッシュボードを作成・整理し、CRM データを可視化します。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Dashboards in Twenty are organized in a hierarchy: **Dashboards → Tabs → Widgets**. Each dashboard can contain multiple tabs, and each tab contains widgets (charts, numbers, iFrames).
|
||||
Twenty のダッシュボードは階層構造で整理されています: **Dashboards → Tabs → Widgets**。 各ダッシュボードには複数のタブを含めることができ、各タブにはウィジェット（チャート、数値、iFrames）が含まれます。
|
||||
|
||||
## Creating a Dashboard
|
||||
## ダッシュボードの作成
|
||||
|
||||
1. Go to **Dashboards** in the navigation
|
||||
2. Click **+ New Dashboard**
|
||||
3. Give your dashboard a name
|
||||
4. Start adding tabs and widgets
|
||||
1. ナビゲーションの **Dashboards** に移動します。
|
||||
2. 「**+ New Record**」をクリックします
|
||||
|
||||
## Working with Tabs
|
||||
<img src="/images/user-guide/dashboard/dashboard-create-new.png" alt="新しいダッシュボードを作成" />
|
||||
|
||||
Tabs help you organize your dashboard into logical sections.
|
||||
3. ダッシュボードに名前を付けます
|
||||
4. タブとウィジェットの追加を開始します
|
||||
|
||||
### Creating Tabs
|
||||
## タブの操作
|
||||
|
||||
1. In edit mode, click **+ Add Tab**
|
||||
2. Name your tab (e.g., "Pipeline Overview", "Team Performance")
|
||||
3. Add widgets to the tab
|
||||
タブを使うと、ダッシュボードを論理的なセクションに整理できます。
|
||||
|
||||
### Duplicating Tabs
|
||||
### タブの作成
|
||||
|
||||
1. Click on the tab you want to duplicate
|
||||
2. Click the **Duplicate** button in the side panel
|
||||
1. 編集モードで、タブバーの **+** をクリックすると、右側にサイドパネルが開きます。
|
||||
2. タブに名前を付けます（例: 「パイプライン概要」「チームのパフォーマンス」）。
|
||||
3. タブにウィジェットを追加します。
|
||||
|
||||
## Dashboard Layout
|
||||
### タブの並べ替え
|
||||
|
||||
### Arranging Widgets
|
||||
1. 編集モードで、移動したいタブをクリックして押し続けます。
|
||||
2. 新しい位置にドラッグ＆ドロップします。
|
||||
3. タブをクリックし、コマンドメニューでタブを左または右に移動することもできます。
|
||||
|
||||
* Drag and drop to position
|
||||
* Resize for emphasis
|
||||
* Group related charts together
|
||||
### タブの削除
|
||||
|
||||
### Duplicating a Dashboard
|
||||
1. 編集モードで、削除したいタブをクリックします。
|
||||
2. コマンドメニューの **Delete** ボタンをクリックします。
|
||||
|
||||
1. Exit edit mode (view mode only)
|
||||
2. Open the command bar with **Cmd + K** (or **Ctrl + K** on Windows)
|
||||
3. Select **Duplicate dashboard**
|
||||
### タブの複製
|
||||
|
||||
### Best Practices
|
||||
1. 複製したいタブをクリックします。
|
||||
2. サイドパネルの **Duplicate** ボタンをクリックします。
|
||||
|
||||
* **Logical flow**: Arrange from overview to detail
|
||||
* **Visual hierarchy**: Larger charts for key metrics
|
||||
* **Consistent styling**: Use matching colors and fonts
|
||||
<img src="/images/user-guide/dashboard/dashboard-tabs.png" alt="ダッシュボードのタブ" />
|
||||
|
||||
## Visibility & Access
|
||||
## ダッシュボードのレイアウト
|
||||
|
||||
### Dashboard Visibility
|
||||
### ウィジェットの配置
|
||||
|
||||
Dashboards are visible to everyone who has access to your Twenty workspace. There is no private dashboard option at the moment.
|
||||
* ドラッグ＆ドロップで配置します。
|
||||
* 強調のためにサイズを変更します。
|
||||
* 関連するチャートをまとめてグループ化します。
|
||||
|
||||
### Favorites
|
||||
### ダッシュボードの複製
|
||||
|
||||
You can add dashboards to your favorites for quick access. This is a personal setting—your favorites are not visible to other users.
|
||||
1. 複製したいダッシュボードを選択します。
|
||||
2. コマンドバーを **Cmd + K**（Windows の場合は **Ctrl + K**）で開きます。
|
||||
3. **Duplicate dashboard** を選択します。
|
||||
|
||||
To add a dashboard to favorites, open the dashboard and click the star icon.
|
||||
<img src="/images/user-guide/dashboard/dashboard-duplicate.png" alt="ダッシュボードを複製" />
|
||||
|
||||
### Timezone Behavior
|
||||
### ベストプラクティス
|
||||
|
||||
Dashboards currently display data based on the timezone of the user viewing them. This means the same dashboard may show different metrics for team members in different regions (e.g., APAC vs. US).
|
||||
* **論理的な流れ**: 概要から詳細へ配置します。
|
||||
* **視覚的な階層**: 重要な指標には大きなチャートを使用します。
|
||||
* **一貫したスタイル**: 色やフォントを統一します。
|
||||
|
||||
## 表示とアクセス権
|
||||
|
||||
### ダッシュボードの表示範囲
|
||||
|
||||
ダッシュボードは、あなたの Twenty ワークスペースにアクセス権のあるすべての人に表示されます。 現在、プライベートダッシュボードのオプションはありません。
|
||||
|
||||
### お気に入り
|
||||
|
||||
ダッシュボードをお気に入りに追加して、すばやくアクセスできます。 これは個人設定であり、あなたのお気に入りは他のユーザーには表示されません。
|
||||
|
||||
ダッシュボードをお気に入りに追加するには、ダッシュボードを開いて星アイコンをクリックします。
|
||||
|
||||
### タイムゾーンの動作
|
||||
|
||||
ダッシュボードは現在、閲覧しているユーザーのタイムゾーンに基づいてデータを表示します。 つまり、同じダッシュボードでも、地域の異なるチームメンバー（例: APAC と US）には異なる指標が表示される場合があります。
|
||||
|
||||
<Note>
|
||||
**Coming soon**: We will add the ability to set a specific timezone for a dashboard, so all users see consistent data regardless of their location.
|
||||
**近日対応**: ダッシュボードごとに特定のタイムゾーンを設定できるようにし、ユーザーの所在地に関係なく一貫したデータが表示されるようにします。
|
||||
</Note>
|
||||
|
||||
<Note>
|
||||
**Coming soon**: Dashboard-level filters will allow you to apply filters across all widgets at once, making it faster to explore your data.
|
||||
**近日対応**: ダッシュボードレベルのフィルターにより、すべてのウィジェットに一括でフィルターを適用でき、データの探索がより速くなります。
|
||||
</Note>
|
||||
|
||||
@@ -1,131 +1,149 @@
|
||||
---
|
||||
title: Widgets
|
||||
description: Explore the widget types and visualization options in Twenty.
|
||||
title: ウィジェット
|
||||
description: Twentyのウィジェットの種類と可視化オプションを確認します。
|
||||
---
|
||||
|
||||
## Available Widgets
|
||||
import { ChartIcon } from '/snippets/chart-icon.mdx';
|
||||
|
||||
Twenty provides various widget types to visualize your CRM data.
|
||||
## 利用可能なウィジェット
|
||||
|
||||
### Bar Charts
|
||||
Twentyは、CRMデータを可視化するためのさまざまなウィジェットタイプを提供します。
|
||||
|
||||
Display data as horizontal or vertical bars.
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />Bar Charts</span>
|
||||
|
||||
**Best for:**
|
||||
データを横棒または縦棒で表示します。
|
||||
|
||||
* Comparing values across categories
|
||||
* Showing rankings
|
||||
* Tracking metrics by time period
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="Bar chart" />
|
||||
</Frame>
|
||||
|
||||
**Example uses:**
|
||||
**最適な用途:**
|
||||
|
||||
* Deals by stage
|
||||
* Revenue by sales rep
|
||||
* Contacts added per month
|
||||
* カテゴリ間の値を比較する
|
||||
* ランキングを表示する
|
||||
* 期間別の指標を追跡する
|
||||
|
||||
**使用例:**
|
||||
|
||||
* ステージ別の商談
|
||||
* 営業担当者別の売上
|
||||
* 月別のコンタクト追加数
|
||||
|
||||
<Note>
|
||||
**Display limits**: Bar charts can show a maximum of 100 bars (horizontal) or 50 bars (vertical). If you see the warning "Undisplayed data: max X bars per chart", add filters to narrow down your data or change the grouping (e.g., group by week instead of days).
|
||||
**Display limits**: Bar charts can show a maximum of 100 bars, and 50 groups per bar when using Group By. 警告 "Undisplayed data: max X bars per chart" が表示された場合は、フィルターを追加してデータを絞り込むか、グルーピングを変更します（例: 日単位ではなく週単位でグループ化）。
|
||||
</Note>
|
||||
|
||||
### Pie Charts
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />Pie Charts</span>
|
||||
|
||||
Show proportions of a whole.
|
||||
全体に占める割合を表示します。
|
||||
|
||||
**Best for:**
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="Pie chart" />
|
||||
</Frame>
|
||||
|
||||
* Showing composition or distribution
|
||||
* Comparing parts to whole
|
||||
* Highlighting major segments
|
||||
**最適な用途:**
|
||||
|
||||
**Example uses:**
|
||||
* 構成や分布を示す
|
||||
* 部分と全体を比較する
|
||||
* 主要セグメントを強調する
|
||||
|
||||
* Deal distribution by source
|
||||
* Contact breakdown by industry
|
||||
* Pipeline composition by owner
|
||||
**使用例:**
|
||||
|
||||
### Line Charts
|
||||
* ソース別の商談分布
|
||||
* 業種別のコンタクト内訳
|
||||
* 担当者別のパイプライン構成
|
||||
|
||||
Display trends over time.
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />Line Charts</span>
|
||||
|
||||
**Best for:**
|
||||
時間の経過に伴う傾向を表示します。
|
||||
|
||||
* Tracking changes over time
|
||||
* Identifying trends
|
||||
* Comparing multiple metrics
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="Line chart" />
|
||||
</Frame>
|
||||
|
||||
**Example uses:**
|
||||
**最適な用途:**
|
||||
|
||||
* Monthly deal count trend
|
||||
* Revenue growth over quarters
|
||||
* Activity levels over time
|
||||
* 時間経過による変化を追跡する
|
||||
* トレンドを把握する
|
||||
* 複数の指標を比較する
|
||||
|
||||
### Number Metrics
|
||||
**使用例:**
|
||||
|
||||
Display single key values prominently.
|
||||
* 月次の商談数の推移
|
||||
* 四半期ごとの売上成長
|
||||
* 活動量の推移
|
||||
|
||||
**Best for:**
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />Aggregate Charts</span>
|
||||
|
||||
* Highlighting KPIs
|
||||
* Showing totals or averages
|
||||
* Quick status checks
|
||||
重要な単一値を目立つ形で表示します。
|
||||
|
||||
**Example uses:**
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="Aggregate chart" />
|
||||
</Frame>
|
||||
|
||||
* Total pipeline value
|
||||
* Number of open opportunities
|
||||
* Conversion rate
|
||||
**最適な用途:**
|
||||
|
||||
**Advanced options:**
|
||||
* KPIを強調する
|
||||
* 合計や平均を表示する
|
||||
* ステータスを素早く確認する
|
||||
|
||||
* **Ratio**: For Select fields, calculate ratios between values. Go to **Data on display** → select your field → enable the **Ratio** option.
|
||||
* **Prefix & Suffix**: Add custom text before or after the number (e.g., "$" prefix or "%" suffix) for better readability.
|
||||
**使用例:**
|
||||
|
||||
### iFrames
|
||||
* パイプラインの合計金額
|
||||
* オープンな商談数
|
||||
* コンバージョン率
|
||||
|
||||
Embed external tools and content directly in your dashboard.
|
||||
**高度なオプション:**
|
||||
|
||||
**Best for:**
|
||||
* **比率**: Select フィールドで、値同士の比率を計算します。 **Data on display** → フィールドを選択 → **Ratio** オプションを有効にします。
|
||||
* **Prefix & Suffix**: 可読性を高めるために、数値の前後にカスタムテキストを追加します（例: "$" のプレフィックスや "%" のサフィックス）。
|
||||
|
||||
* Displaying external reports or dashboards
|
||||
* Integrating third-party sales tools
|
||||
* Showing live content from other systems
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
|
||||
|
||||
**Example uses:**
|
||||
外部ツールやコンテンツをダッシュボードに直接埋め込みます。
|
||||
|
||||
* Metrics from your Support tool
|
||||
* Metrics from your dialer
|
||||
* Live content from your Sales sequence tool
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
|
||||
</Frame>
|
||||
|
||||
**最適な用途:**
|
||||
|
||||
* 外部のレポートやダッシュボードを表示する
|
||||
* サードパーティのセールスツールを統合する
|
||||
* 他システムのライブコンテンツを表示する
|
||||
|
||||
**使用例:**
|
||||
|
||||
* サポートツールの指標
|
||||
* ダイヤラーの指標
|
||||
* セールスシーケンスツールのライブコンテンツ
|
||||
|
||||
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />Rich Text</span>
|
||||
|
||||
Add formatted text and content directly to your dashboard.
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="Rich text" />
|
||||
</Frame>
|
||||
|
||||
**最適な用途:**
|
||||
|
||||
* Adding context or instructions
|
||||
* Dashboard descriptions
|
||||
* Notes and annotations
|
||||
|
||||
**Features:**
|
||||
|
||||
* Rich text formatting (bold, italic, lists, etc.)
|
||||
* Image and file uploads
|
||||
* Markdown-style editing
|
||||
|
||||
<Note>
|
||||
**Coming soon**: Gauge charts and tables are not yet available but are on our roadmap.
|
||||
**近日提供予定**: ゲージチャートとテーブルはまだ利用できませんが、ロードマップに含まれています。
|
||||
</Note>
|
||||
|
||||
## Configuring Widgets
|
||||
### ウィジェットの複製
|
||||
|
||||
### Data Source
|
||||
|
||||
1. Select the object to visualize (Opportunities, People, etc.)
|
||||
2. Choose the metric to display (count, sum, average)
|
||||
3. Apply filters to focus on specific data
|
||||
|
||||
### Grouping
|
||||
|
||||
Group data by:
|
||||
|
||||
* Fields (stage, owner, industry)
|
||||
* Time periods (day, week, month, quarter)
|
||||
* Custom segments
|
||||
|
||||
### Styling
|
||||
|
||||
Customize your charts with:
|
||||
|
||||
* Colors and themes
|
||||
* Labels and legends
|
||||
* Size and positioning
|
||||
|
||||
### Duplicating Widgets
|
||||
|
||||
1. Click on the widget
|
||||
2. Open **Options**
|
||||
3. Click **Duplicate widget**
|
||||
1. ウィジェットをクリックします
|
||||
2. **Options** を開きます
|
||||
3. **Duplicate widget** をクリックします
|
||||
|
||||
@@ -1,59 +1,55 @@
|
||||
---
|
||||
title: Dashboards FAQ
|
||||
description: Frequently asked questions about dashboards in Twenty.
|
||||
title: ダッシュボードFAQ
|
||||
description: Twenty のダッシュボードに関するよくある質問。
|
||||
---
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Can I create private dashboards?">
|
||||
No, dashboards are currently visible to everyone with access to your Twenty workspace. Private dashboards are not yet available.
|
||||
<Accordion title="プライベートなダッシュボードを作成できますか？">
|
||||
いいえ、現在ダッシュボードは、あなたの Twenty ワークスペースへアクセスできるすべてのユーザーに表示されます。 プライベートダッシュボードはまだ利用できません。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Why do my metrics look different from my colleague's?">
|
||||
Dashboards currently display data based on the viewer's timezone. If you're in different regions (e.g., APAC vs. US), you may see slightly different numbers for the same dashboard. We're working on adding a timezone setting per dashboard to ensure consistent data across teams.
|
||||
<Accordion title="自分の指標が同僚のものと異なって見えるのはなぜですか？">
|
||||
現在、ダッシュボードは閲覧者のタイムゾーンに基づいてデータを表示します。 異なる地域（例: APAC と US）にいる場合、同じダッシュボードでも数値がわずかに異なることがあります。 チーム間でデータを一貫させるため、ダッシュボードごとのタイムゾーン設定の追加に取り組んでいます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I export my dashboard?">
|
||||
Exporting dashboards is not available at the moment. This feature is on our roadmap.
|
||||
<Accordion title="ダッシュボードをエクスポートできますか？">
|
||||
現時点では、ダッシュボードのエクスポートは利用できません。 この機能はロードマップに含まれています。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I share dashboards with external users?">
|
||||
No, sharing dashboards with users outside your Twenty workspace (non-Twenty users) is not currently supported.
|
||||
<Accordion title="ダッシュボードを外部ユーザーと共有できますか？">
|
||||
いいえ、現在は Twenty ワークスペース外のユーザー（Twenty を利用していないユーザー）とのダッシュボード共有には対応していません。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I add a dashboard to my favorites?">
|
||||
Open the dashboard you want to favorite, then click the star icon. Favorites are personal—they won't affect other users.
|
||||
<Accordion title="ダッシュボードをお気に入りに追加するにはどうすればよいですか？">
|
||||
お気に入りに追加したいダッシュボードを開き、星形アイコンをクリックします。 お気に入りは個人設定であり、他のユーザーには影響しません。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What's the difference between tabs and widgets?">
|
||||
* **Tabs** organize your dashboard into sections (like pages within the dashboard)
|
||||
* **Widgets** are the individual visualizations (charts, numbers, iFrames) within each tab
|
||||
<Accordion title="タブとウィジェットの違いは何ですか？">
|
||||
* **タブ** はダッシュボードをセクションに整理します（ダッシュボード内のページのようなもの）
|
||||
* **ウィジェット** は各タブ内の個々の可視化要素（グラフ、数値、iFrame）です
|
||||
|
||||
Structure: Dashboard → Tabs → Widgets
|
||||
構造: ダッシュボード → タブ → ウィジェット
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Why do I see 'Undisplayed data' warning on my bar chart?">
|
||||
Bar charts have display limits: 100 bars for horizontal charts, 50 for vertical. If your data exceeds this, add filters to narrow down the results or change the grouping (e.g., group by week instead of day).
|
||||
<Accordion title="ダッシュボード全体に一括でフィルターを適用できますか？">
|
||||
ダッシュボードレベルのフィルターはまだ利用できませんが、この機能はロードマップに含まれています。 現在は、各ウィジェットごとに個別にフィルターを適用する必要があります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I filter an entire dashboard at once?">
|
||||
Dashboard-level filters are not available yet, but this feature is on our roadmap. Currently, you need to apply filters to each widget individually.
|
||||
<Accordion title="ゲージチャートやテーブルは利用できますか？">
|
||||
まだできません。 ゲージチャートとテーブルはロードマップに含まれており、今後のリリースで追加されます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Are gauge charts or tables available?">
|
||||
Not yet. Gauge charts and tables are on our roadmap and will be added in a future release.
|
||||
<Accordion title="ダッシュボードを複製するにはどうすればよいですか？">
|
||||
1. 閲覧モードであることを確認してください（編集中ではないこと）。
|
||||
2. コマンドバーを **Cmd + K**（Windows の場合は **Ctrl + K**）で開きます。
|
||||
3. 「**Duplicate dashboard**」を選択します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I duplicate a dashboard?">
|
||||
1. Make sure you're in view mode (not editing)
|
||||
2. Open the command bar with **Cmd + K** (or **Ctrl + K** on Windows)
|
||||
3. Select **Duplicate dashboard**
|
||||
</Accordion>
|
||||
<Accordion title="ダッシュボードのデータはどのくらいの頻度で更新されますか？">
|
||||
CRM データの変更に合わせてウィジェットは自動的に更新されます:
|
||||
|
||||
<Accordion title="How often does dashboard data refresh?">
|
||||
Widgets update automatically as your CRM data changes:
|
||||
|
||||
* Real-time updates for most metrics
|
||||
* Use the refresh button for a manual update if needed
|
||||
* Historical data is preserved for trend analysis
|
||||
* ほとんどの指標はリアルタイムで更新されます
|
||||
* 必要に応じて、更新ボタンで手動更新できます
|
||||
* トレンド分析のために履歴データは保持されます
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: ウィジェットFAQ
|
||||
description: よくある質問とエラーメッセージの解説。
|
||||
---
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="件数ではなく割合を表示するにはどうすればよいですか？">
|
||||
3つの方法:
|
||||
|
||||
* **Percent empty/not empty**: Data on display で、Percent empty または Percent not empty を選択します
|
||||
* **Ratio**: Select または Checkbox フィールドでは、Ratio を有効にすると、特定のオプションを全レコードに対する割合で表示できます
|
||||
* **Suffix**: 集計チャートでは、Style settings の Suffix に `%` を追加します
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="グループ化と積み上げのバーの違いは何ですか？">
|
||||
**Group by** を使用する場合、系列は2つの方法で表示できます:
|
||||
|
||||
* **Grouped**: バーを横に並べる—正確な値の比較に最適
|
||||
* **Stacked**: バーを積み上げる—構成の表示に最適
|
||||
|
||||
切り替えるには、Style settings で **Stacked** を切り替えます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Sum や Average のオプションが表示されないのはなぜですか？">
|
||||
利用可能な操作は **フィールドタイプ** によって異なります:
|
||||
|
||||
* **数値フィールド**: Sum、Average、Min、Max
|
||||
* **日付フィールド**: Earliest、Latest（集計チャートのみ）
|
||||
* **チェックボックスフィールド**: Count true、Count false
|
||||
|
||||
オプションが表示されない場合は、互換性のあるフィールドタイプを選択しているか確認してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="一部の設定がグレーアウトしている、または表示されないのはなぜですか？">
|
||||
多くの設定は、前提条件を満たした場合にのみ表示されます:
|
||||
|
||||
* **Date granularity**: 先に日付フィールドを選択します
|
||||
* **Group by、Legend、Stacked**: 先に Source を設定します
|
||||
* **Legend、Stacked のトグル**: 先に Group by を設定します
|
||||
|
||||
設定が表示されない場合は、先にその前提条件を設定してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="「No data」とは何を意味しますか？">
|
||||
チャートは設定に一致するレコードを見つけられませんでした。
|
||||
|
||||
**対処方法:** フィルターを削除または調整し、正しい Source オブジェクトを選択しているか、指定した期間にレコードが存在するかを確認します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="「Invalid configuration」とは何を意味しますか？">
|
||||
必須の設定が欠けているか、互換性がありません。
|
||||
|
||||
**対処方法:** Source が設定されていること、Data on display が構成されていること、必要なグループ化フィールドが選択されていることを確認してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="「Undisplayed data」とは何を意味しますか？">
|
||||
データが表示制限（バー100、データポイント100、またはスライス100）を超えています。
|
||||
|
||||
**対処方法:** フィルターを追加してデータを絞り込むか、Date granularity を Day から Week または Month に変更します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="一方の軸にデータが表示されないのはなぜですか？">
|
||||
選択したフィールドにフィルター対象のレコードの値がないか、フィールドタイプが想定されるデータと一致していません。
|
||||
|
||||
**対処方法:** 別のフィールドを試すか、選択したフィールドに値があることを確認してください。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
@@ -1,79 +1,85 @@
|
||||
---
|
||||
title: Dashboards
|
||||
description: Learn the basics of reporting and dashboards in Twenty.
|
||||
title: ダッシュボード
|
||||
description: Twenty におけるレポートとダッシュボードの基本を学びましょう。
|
||||
image: /images/user-guide/reporting/pie-chart.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/reporting/pie-chart.png" alt="Dashboards" />
|
||||
<img src="/images/user-guide/reporting/pie-chart.png" alt="ダッシュボード" />
|
||||
</Frame>
|
||||
|
||||
## Understanding Dashboards
|
||||
|
||||
Dashboards in Twenty provide a visual way to track your key performance metrics and gain insights from your CRM data.
|
||||
|
||||
<img src="/images/user-guide/dashboard/dashboards_v2.png" alt="Dashboards" />
|
||||
|
||||
## Key Concepts
|
||||
|
||||
### Dashboards
|
||||
|
||||
A dashboard is a collection of tabs that display your CRM data at a glance. You can create multiple dashboards for different purposes:
|
||||
|
||||
* Sales performance
|
||||
* Team activity
|
||||
* Pipeline health
|
||||
* Custom metrics
|
||||
|
||||
### Tabs
|
||||
|
||||
Tabs allow you to organize your dashboard into sections. Each tab contains one or more widgets.
|
||||
|
||||
### Widgets
|
||||
|
||||
Widgets are individual visualizations that display specific data. Types include:
|
||||
|
||||
* Bar charts
|
||||
* Pie charts
|
||||
* Line charts
|
||||
* Number metrics
|
||||
* iFrames
|
||||
|
||||
<Note>
|
||||
**Current limitations**:
|
||||
|
||||
* Exporting dashboards and sharing with external users (non-Twenty users) are not available at the moment.
|
||||
* Gauge charts and tables are not yet available.
|
||||
ダッシュボードは現在ベータ版です。 **設定 → 更新 → 早期アクセス**で有効にしてください。
|
||||
</Note>
|
||||
|
||||
## Getting Started
|
||||
## ダッシュボードの理解
|
||||
|
||||
### Creating Your First Dashboard
|
||||
Twenty のダッシュボードは、主要なパフォーマンス指標を視覚的に追跡し、CRM データからインサイトを得るための手段を提供します。
|
||||
|
||||
1. Navigate to the **Dashboards** section
|
||||
2. Click **+ New Dashboard**
|
||||
3. Give your dashboard a name
|
||||
4. Add tabs to organize your content
|
||||
5. Add widgets to display your data
|
||||
6. Save
|
||||
<img src="/images/user-guide/dashboard/dashboards_v2.png" alt="ダッシュボード" />
|
||||
|
||||
### Adding Widgets
|
||||
## 主要な概念
|
||||
|
||||
1. Open a tab on your dashboard
|
||||
2. Click **+ Add Widget**
|
||||
3. Select the widget type
|
||||
4. Choose the data source (object)
|
||||
5. Configure the widget settings
|
||||
6. Save and view your widget
|
||||
### ダッシュボード
|
||||
|
||||
## Best Practices
|
||||
ダッシュボードは、CRM データをひと目で表示するタブの集合です。 目的に応じて複数のダッシュボードを作成できます:
|
||||
|
||||
* **Start simple**: Begin with a few key metrics and add more over time
|
||||
* **Focus on actionable data**: Display metrics that drive decisions
|
||||
* **Regular review**: Check your dashboards regularly to spot trends
|
||||
* **Share with team**: Make dashboards visible to relevant team members
|
||||
* 営業パフォーマンス
|
||||
* チームの活動
|
||||
* パイプラインの健全性
|
||||
* カスタム指標
|
||||
|
||||
## Next Steps
|
||||
### タブ
|
||||
|
||||
* [Widgets and visualizations](/l/ja/user-guide/dashboards/capabilities/widgets)
|
||||
* [Dashboards FAQ](/l/ja/user-guide/dashboards/how-tos/dashboards-faq)
|
||||
タブを使うと、ダッシュボードをセクションに整理できます。 各タブには1つ以上のウィジェットが含まれます。
|
||||
|
||||
### ウィジェット
|
||||
|
||||
ウィジェットは、特定のデータを表示する個別の可視化です。 種類には次のものがあります:
|
||||
|
||||
* 棒グラフ
|
||||
* パイチャート
|
||||
* ラインチャート
|
||||
* 集計チャート
|
||||
* iFrame
|
||||
* リッチテキスト
|
||||
|
||||
<Note>
|
||||
**現在の制限**:
|
||||
|
||||
* ダッシュボードのエクスポートおよび外部ユーザー（Twenty 以外のユーザー）との共有は、現時点では利用できません。
|
||||
* ゲージチャートおよびテーブルはまだ利用できません。
|
||||
</Note>
|
||||
|
||||
## 始めに
|
||||
|
||||
### 最初のダッシュボードを作成する
|
||||
|
||||
1. 「**Dashboards**」セクションに移動します
|
||||
2. 「**+ New Dashboard**」をクリックします
|
||||
3. ダッシュボードに名前を付けます
|
||||
4. コンテンツを整理するためにタブを追加します
|
||||
5. データを表示するためにウィジェットを追加します
|
||||
6. 保存
|
||||
|
||||
### ウィジェットの追加
|
||||
|
||||
1. ダッシュボードのタブを開きます
|
||||
2. 「**+ Add Widget**」をクリックします
|
||||
3. ウィジェットの種類を選択します
|
||||
4. データソース（オブジェクト）を選択します
|
||||
5. ウィジェットの設定を行います
|
||||
6. ウィジェットを保存して表示します
|
||||
|
||||
## ベストプラクティス
|
||||
|
||||
* **シンプルに始める**: いくつかの主要な指標から始め、徐々に追加していきます
|
||||
* **実行可能なデータに集中**: 意思決定を促進する指標を表示します
|
||||
* **定期的な確認**: 傾向を見つけるためにダッシュボードを定期的に確認します
|
||||
* **チームで共有**: 関連するチームメンバーがダッシュボードを閲覧できるようにします
|
||||
|
||||
## 次のステップ
|
||||
|
||||
* [ウィジェットと可視化](/l/ja/user-guide/dashboards/capabilities/widgets)
|
||||
* [チャート設定のリファレンス](/l/ja/user-guide/dashboards/capabilities/chart-settings)
|
||||
* [ダッシュボードのFAQ](/l/ja/user-guide/dashboards/how-tos/dashboards-faq)
|
||||
|
||||
+43
-43
@@ -1,76 +1,76 @@
|
||||
---
|
||||
title: Error Handling & Validation
|
||||
description: Review and fix import errors directly in the UI before confirming.
|
||||
title: エラー処理と検証
|
||||
description: 確定する前に、UI 上でインポートエラーを確認して修正します。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## Pre-Import Validation
|
||||
## インポート前の検証
|
||||
|
||||
After uploading your file and mapping fields, Twenty validates your data **before** importing. This allows you to catch and fix errors without affecting your existing data.
|
||||
ファイルをアップロードしてフィールドをマッピングした後、Twenty はインポートする**前**にデータを検証します。 これにより、既存のデータに影響を与えることなく、エラーを検出して修正できます。
|
||||
|
||||
## How It Works
|
||||
## 仕組み
|
||||
|
||||
1. **Upload** your CSV file
|
||||
2. **Map** your columns to Twenty fields
|
||||
3. **Review** the potential errors highlighted in yellow
|
||||
4. **Fix errors** directly in the UI
|
||||
5. **Confirm** the import
|
||||
1. **CSV ファイルをアップロード**
|
||||
2. **列を Twenty のフィールドにマッピング**
|
||||
3. **黄色で強調表示された潜在的なエラーを確認**
|
||||
4. **UI で直接エラーを修正**
|
||||
5. **インポートを確定**
|
||||
|
||||
<VimeoEmbed videoId="1145273857" title="Video demonstration" />
|
||||
<VimeoEmbed videoId="1145273857" title="デモ動画" />
|
||||
|
||||
## Error Display
|
||||
## エラーの表示
|
||||
|
||||
Rows with issues are highlighted in **yellow**. You can:
|
||||
問題のある行は **黄色** で強調表示されます。 次のことができます:
|
||||
|
||||
* **Edit the cell directly** to fix the error
|
||||
* **Remove the row** to skip it entirely
|
||||
* **セルを直接編集**してエラーを修正
|
||||
* **行を削除**して完全にスキップ
|
||||
|
||||
This inline editing saves time—no need to go back to your spreadsheet, fix errors, and re-upload.
|
||||
このインライン編集により時間を節約できます—スプレッドシートに戻ってエラーを修正し、再アップロードする必要はありません。
|
||||
|
||||
## Common Error Types
|
||||
## よくあるエラーの種類
|
||||
|
||||
### Duplicate Values
|
||||
### 重複した値
|
||||
|
||||
**Cause**: A unique field (email, domain) already exists in Twenty or appears twice in your file.
|
||||
**原因**: 一意のフィールド（メール、ドメイン）が Twenty に既に存在するか、ファイル内で 2 回出現しています。
|
||||
|
||||
**Fix**:
|
||||
**対処**:
|
||||
|
||||
* Edit the duplicate value in the import UI
|
||||
* Remove one of the duplicate rows
|
||||
* インポート UI で重複値を編集
|
||||
* 重複行のいずれかを削除
|
||||
|
||||
See [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints) for more details on how uniqueness is enforced.
|
||||
一意性の適用方法の詳細は[一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)を参照してください。
|
||||
|
||||
### Invalid Format
|
||||
### 無効な形式
|
||||
|
||||
**Cause**: Data doesn't match the expected format (e.g., invalid email, wrong date format).
|
||||
**原因**: データが期待される形式に一致していません（例: 無効なメールアドレス、日付形式の誤り）。
|
||||
|
||||
**Fix**: Edit the cell to use the correct format.
|
||||
**対処**: セルを編集して正しい形式にする。
|
||||
|
||||
See [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping) for the expected format of each field type.
|
||||
各フィールドタイプの期待される形式は[フィールドマッピング](/l/ja/user-guide/data-migration/capabilities/field-mapping)を参照してください。
|
||||
|
||||
### Missing Required Fields
|
||||
### 必須フィールドの欠落
|
||||
|
||||
**Cause**: A required field is empty.
|
||||
**原因**: 必須フィールドが空です。
|
||||
|
||||
**Fix**: Enter a value in the required field or remove the row.
|
||||
**対処**: 必須フィールドに値を入力するか、その行を削除する。
|
||||
|
||||
### Relation Not Found
|
||||
### リレーションが見つかりません
|
||||
|
||||
**Cause**: The referenced record doesn't exist (e.g., a Company domain that wasn't imported).
|
||||
**原因**: 参照しているレコードが存在しません（例: インポートされていない会社のドメイン）。
|
||||
|
||||
**Fix**:
|
||||
**対処**:
|
||||
|
||||
* Import the parent records first
|
||||
* Or correct the reference value
|
||||
* まず親レコードをインポートする
|
||||
* または参照値を修正する
|
||||
|
||||
See [Import Relations](/l/ja/user-guide/data-migration/capabilities/import-relations) for the correct import order and how to link records.
|
||||
正しいインポート順序とレコードの関連付け方法は[リレーションのインポート](/l/ja/user-guide/data-migration/capabilities/import-relations)を参照してください。
|
||||
|
||||
## Tips for Fewer Errors
|
||||
## エラーを減らすためのヒント
|
||||
|
||||
1. **Download the template** to see expected format prior to importing your file
|
||||
2. **Clean your data** in the spreadsheet first
|
||||
3. **Import files in correct order** to import relations (Companies → People → Opportunities)
|
||||
4. **Test with small batches** before full import
|
||||
5. **Check for duplicates** before uploading
|
||||
6. **Limit the size of your file to 10,000 records** per file
|
||||
1. **テンプレートをダウンロード**して、ファイルをインポートする前に期待される形式を確認
|
||||
2. まず**スプレッドシートでデータをクリーンアップ**
|
||||
3. **正しい順序でファイルをインポート**してリレーションを取り込む（会社 → 人 → 商談）
|
||||
4. **小さなバッチでテスト**してから全量インポート
|
||||
5. **アップロード前に重複を確認**
|
||||
6. **ファイルあたりのレコード数を 10,000 に制限**
|
||||
|
||||
+102
-102
@@ -1,198 +1,198 @@
|
||||
---
|
||||
title: Field Mapping
|
||||
description: How field mapping works during data import.
|
||||
title: フィールドマッピング
|
||||
description: データインポート時のフィールドマッピングの仕組み。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## How Field Mapping Works
|
||||
## フィールドマッピングの仕組み
|
||||
|
||||
When you upload a file, Twenty analyzes your columns and attempts to match them to existing fields.
|
||||
ファイルをアップロードすると、Twenty が列を解析し、既存のフィールドに一致させようとします。
|
||||
|
||||
### Automatic Mapping
|
||||
### 自動マッピング
|
||||
|
||||
Twenty tries to match columns based on:
|
||||
Twenty は次の基準に基づいて列を照合します：
|
||||
|
||||
* Column header names (exact or similar matches)
|
||||
* Data type detection (dates, numbers, emails)
|
||||
* Common field patterns
|
||||
* 列ヘッダー名（完全一致または類似一致）
|
||||
* データ型の検出（日付、数値、メールアドレス）
|
||||
* 一般的なフィールドのパターン
|
||||
|
||||
<Note>**Quick tip:** Export a few rows from the object you want to import. The exported file will have the exact column names Twenty expects, making automatic mapping seamless during import.</Note>
|
||||
<Note>**クイックヒント：** インポートしたいオブジェクトから数行をエクスポートしてください。 エクスポートしたファイルには、Twenty が想定する正確な列名が含まれているため、インポート時の自動マッピングがスムーズになります。</Note>
|
||||
|
||||
### Manual Mapping Options
|
||||
### 手動マッピングのオプション
|
||||
|
||||
For each column, you can:
|
||||
各列に対して、次の操作ができます：
|
||||
|
||||
* **Map to a field**: Select the matching Twenty field from a dropdown
|
||||
* **Do not map**: Skip the column entirely (data won't be imported)
|
||||
* **フィールドにマップ**：ドロップダウンから一致する Twenty のフィールドを選択します
|
||||
* **マップしない**：その列をスキップします（データはインポートされません）
|
||||
|
||||
<Note>**Fields must exist before import.** The import creates records, not fields. Create custom fields under **Settings → Data Model** before importing.</Note>
|
||||
<Note>**フィールドはインポート前に存在している必要があります。** インポートで作成されるのはフィールドではなくレコードです。 インポート前に **Settings → Data Model** でカスタムフィールドを作成してください。</Note>
|
||||
|
||||
## Field Type Compatibility
|
||||
## フィールドタイプの互換性
|
||||
|
||||
All field types available in the Data Model are supported for import.
|
||||
Data Model で利用可能なすべてのフィールドタイプはインポートに対応しています。
|
||||
|
||||
You can also import `id` values to either assign a specific ID to new records or update existing ones.
|
||||
`id` 値をインポートして、新規レコードに特定の ID を割り当てるか、既存レコードを更新することもできます。
|
||||
|
||||
<img src="/images/user-guide/fields/all-field-types.png" style={{width:'100%'}} />
|
||||
|
||||
## Data Format Requirements
|
||||
## データ形式の要件
|
||||
|
||||
<Note>**Some fields have special syntax.** We recommend downloading the sample file before preparing your import to see the expected syntax for each field type.</Note>
|
||||
<Note>**一部のフィールドには特別な書式があります。** インポートの準備をする前にサンプルファイルをダウンロードし、各フィールドタイプに期待される書式を確認することをおすすめします。</Note>
|
||||
|
||||
### Address Fields
|
||||
### 住所フィールド
|
||||
|
||||
Address is a nested field with multiple columns. Some can be left empty.
|
||||
住所は複数の列を持つネストされたフィールドです。 一部は空欄のままにできます。
|
||||
|
||||
* **Address / Address 1**: Street address line 1
|
||||
* **Address / Address 2**: Street address line 2
|
||||
* **Address / City**: City name
|
||||
* **Address / State**: State or province
|
||||
* **Address / Country**: Country name
|
||||
* **Address / Post Code**: Postal/ZIP code
|
||||
* **Address / Address 1**：住所の1行目
|
||||
* **Address / Address 2**：住所の2行目
|
||||
* **Address / City**：市区町村名
|
||||
* **Address / State**：州または都道府県
|
||||
* **Address / Country**：国名
|
||||
* **Address / Post Code**：郵便番号／ZIP コード
|
||||
|
||||
### Array Fields
|
||||
### 配列フィールド
|
||||
|
||||
Use the following format:
|
||||
次の形式を使用します：
|
||||
|
||||
```
|
||||
["value1","value2"]
|
||||
[\"value1\",\"value2\"]
|
||||
```
|
||||
|
||||
### Boolean Fields
|
||||
### ブール型フィールド
|
||||
|
||||
Use `TRUE` or `FALSE` (uppercase) - not `true` or `false`
|
||||
`TRUE` または `FALSE`（大文字）を使用します。`true` や `false` は使用しません
|
||||
|
||||
### Currency Fields
|
||||
### 通貨フィールド
|
||||
|
||||
Currency is a nested field with two columns that **both must be filled**:
|
||||
通貨は 2 列からなるネストされたフィールドで、**両方を必ず入力** する必要があります：
|
||||
|
||||
* **Amount / Amount**: The numeric value (e.g., `1234.56`)
|
||||
* **Amount / Currency**: The currency code (e.g., `USD`, `EUR`)
|
||||
* **Amount / Amount**：数値（例：`1234.56`）
|
||||
* **Amount / Currency**：通貨コード（例：`USD`、`EUR`）
|
||||
|
||||
### Date Fields
|
||||
### 日付フィールド
|
||||
|
||||
Supported formats:
|
||||
サポートされている形式：
|
||||
|
||||
* `YYYY-MM-DD` (recommended)
|
||||
* `YYYY-MM-DD`（推奨）
|
||||
* `MM/DD/YYYY`
|
||||
* `DD/MM/YYYY`
|
||||
* ISO 8601 format
|
||||
* ISO 8601 形式
|
||||
|
||||
### Domain Fields
|
||||
### ドメインフィールド
|
||||
|
||||
* It is recommended to use the format `https://domain.com` to avoid creating duplicates, as this is the format used for Companies created by the mailbox and calendar synchronizations
|
||||
* A `Domain Label` and `Domain URL` can be filled: best practice is to fill `domain.com` in the label and `https://domain.com` in the url
|
||||
* Domains must be unique within the Companies object
|
||||
* **Domains must be unique within the file to import**
|
||||
* 重複作成を避けるため、`https://domain.com` の形式を使用することを推奨します。これは、メールボックスおよびカレンダーの同期で作成される Companies オブジェクトでも使用される形式です
|
||||
* `Domain Label` と `Domain URL` を入力できます。ベストプラクティスは、ラベルには `domain.com`、URL には `https://domain.com` を入力することです
|
||||
* Companies オブジェクト内でドメインは一意である必要があります
|
||||
* **インポートするファイル内でもドメインは一意である必要があります**
|
||||
|
||||
### Email Fields
|
||||
### メールアドレスフィールド
|
||||
|
||||
* Must be valid email format
|
||||
* Emails must be unique within the People object
|
||||
* **Emails must be unique within the file to import**
|
||||
* For additional emails: use **Emails / Primary Email** for the main email, and **Emails / Additional Emails** with this format:
|
||||
* 有効なメールアドレス形式である必要があります
|
||||
* People オブジェクト内でメールアドレスは一意である必要があります
|
||||
* **インポートするファイル内でもメールアドレスは一意である必要があります**
|
||||
* 追加のメールアドレスについて：メインのメールには **Emails / Primary Email** を使用し、**Emails / Additional Emails** には次の形式を使用します：
|
||||
|
||||
```
|
||||
["jane@twenty.com","jane.doe@twenty.com"]
|
||||
[\"jane@twenty.com\",\"jane.doe@twenty.com\"]
|
||||
```
|
||||
|
||||
### Id Fields
|
||||
### ID フィールド
|
||||
|
||||
Specifying an `id` during import is optional. Twenty auto-generates one if not provided.
|
||||
インポート時に `id` を指定するかどうかは任意です。 指定しない場合は、Twenty が自動生成します。
|
||||
|
||||
Use cases for mapping an `id` column:
|
||||
`id` 列をマッピングするユースケース：
|
||||
|
||||
* **Set a specific ID**: Choose the UUID for newly created records
|
||||
* **Update existing records**: Match against existing records to update them instead of creating duplicates. In that case, it is recommended to not map the other unique fields: mapping only one unique field ensures a smoother import.
|
||||
* **特定の ID を設定**：新規作成されるレコードの UUID を指定します
|
||||
* **既存レコードを更新**：既存レコードに照合して、重複を作成せずに更新します。 その場合、他の一意なフィールドはマッピングしないことを推奨します。唯一の一意フィールドのみをマッピングすることで、よりスムーズにインポートできます。
|
||||
|
||||
<Note>If you provide an `id`, it must be in UUID format (e.g., `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`).</Note>
|
||||
<Note>`id` を指定する場合は UUID 形式（例：`c776ee49-f608-4a77-8cc8-6fe96ae1e43f`）である必要があります。</Note>
|
||||
|
||||
### JSON Fields
|
||||
### JSON フィールド
|
||||
|
||||
Use valid JSON format:
|
||||
有効な JSON 形式を使用します：
|
||||
|
||||
```
|
||||
{"key":"value","key2":"value2"}
|
||||
{\"key\":\"value\",\"key2\":\"value2\"}
|
||||
```
|
||||
|
||||
### Links Fields
|
||||
### リンクフィールド
|
||||
|
||||
Similar to Domain fields:
|
||||
ドメインフィールドと同様に：
|
||||
|
||||
* Fill both the label and URL columns: **Links / Link URL** and **Links / Link Label**
|
||||
* Use full URL format: `https://example.com`
|
||||
* For secondary links, use **Links / Secondary Links** column with this format:
|
||||
* ラベル列と URL 列の両方を入力します：**Links / Link URL** と **Links / Link Label**
|
||||
* 完全な URL 形式（`https://example.com`）を使用します
|
||||
* セカンダリリンクには **Links / Secondary Links** 列を使用し、次の形式で入力します：
|
||||
|
||||
```
|
||||
[{"url":"https://twenty.com","label":"Twenty"}]
|
||||
[{\"url\":\"https://twenty.com\",\"label\":\"Twenty\"}]
|
||||
```
|
||||
|
||||
### Multi-Select Fields
|
||||
### マルチセレクトフィールド
|
||||
|
||||
Use the **API names** (not the display labels) in the following format:
|
||||
表示ラベルではなく **API 名** を使用し、次の形式で指定します：
|
||||
|
||||
```
|
||||
["VALUE1","VALUE2"]
|
||||
[\"VALUE1\",\"VALUE2\"]
|
||||
```
|
||||
|
||||
See [here](#finding-api-names-for-select-fields) where to find the API names.
|
||||
API 名の確認方法は[こちら](#finding-api-names-for-select-fields)をご覧ください。
|
||||
|
||||
<Note>New select options will not be created automatically by the import. They must be added under **Settings → Data Model** before importing.</Note>
|
||||
<Note>新しい選択肢はインポートによって自動作成されません。 インポート前に **Settings → Data Model** で追加する必要があります。</Note>
|
||||
|
||||
<Warning>
|
||||
**Import overwrites, it does not add.**
|
||||
**インポートは追加ではなく上書きです。**
|
||||
|
||||
If a record already has `VALUE2` and `VALUE3` selected, and you import `["VALUE1"]`, the record will only have `VALUE1` after import. The previous selections are replaced, not merged.
|
||||
レコードにすでに `VALUE2` と `VALUE3` が選択されている状態で `[\"VALUE1\"]` をインポートすると、インポート後そのレコードは `VALUE1` のみになります。 以前の選択は結合されず、置き換えられます。
|
||||
</Warning>
|
||||
|
||||
### Number Fields
|
||||
### 数値フィールド
|
||||
|
||||
* Numbers only
|
||||
* Decimals use period: `1234.56`
|
||||
* No thousands separators
|
||||
* 数値のみ
|
||||
* 小数点はピリオドを使用：`1234.56`
|
||||
* 桁区切りは使用しないでください
|
||||
|
||||
### Phone Fields
|
||||
### 電話番号フィールド
|
||||
|
||||
Phone is a nested field with multiple columns that **must be filled**
|
||||
電話は複数の列からなるネストされたフィールドで、**必ず入力** する必要があります
|
||||
|
||||
* **Phones / Primary Phone Number**: The phone number (e.g., `4159095555`)
|
||||
* **Phones / Primary Phone Country Code**: Country code (e.g., `US`)
|
||||
* **Phones / Primary Phone Calling Code**: Dialing code (e.g., `+1`)
|
||||
* **Phones / Primary Phone Number**：電話番号（例：`4159095555`）
|
||||
* **Phones / Primary Phone Country Code**：国コード（例：`US`）
|
||||
* **Phones / Primary Phone Calling Code**：ダイヤルコード（例：`+1`）
|
||||
|
||||
### Rating Fields
|
||||
### 評価フィールド
|
||||
|
||||
Use the API name format: `RATING_1`, `RATING_2`, `RATING_3`, `RATING_4`, `RATING_5`
|
||||
API 名の形式（`RATING_1`、`RATING_2`、`RATING_3`、`RATING_4`、`RATING_5`）を使用します
|
||||
|
||||
### Relation Fields
|
||||
### リレーションフィールド
|
||||
|
||||
Please see our dedicated article: [Import Relations Between Objects](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
詳細は専用記事「[オブジェクト間のリレーションのインポート](/l/ja/user-guide/data-migration/capabilities/import-relations)」をご覧ください
|
||||
|
||||
### Select Fields
|
||||
### 選択フィールド
|
||||
|
||||
Use the **API name** of the option (not the display label):
|
||||
表示ラベルではなく、オプションの **API 名** を使用します：
|
||||
|
||||
```
|
||||
VALUE1
|
||||
```
|
||||
|
||||
See [here](#finding-api-names-for-select-fields) where to find the API names.
|
||||
<Note>New select options will not be created automatically by the import. They must be added under **Settings → Data Model** before importing.</Note>
|
||||
API 名の見つけ方は[こちら](#finding-api-names-for-select-fields)を参照してください。
|
||||
<Note>新しい Select オプションは、インポートによって自動的に作成されません。 インポート前に **設定 → データモデル** で追加する必要があります。</Note>
|
||||
|
||||
### Text Fields
|
||||
### テキストフィールド
|
||||
|
||||
* No special formatting required
|
||||
* Leading/trailing spaces are trimmed
|
||||
* 特別な書式設定は不要です
|
||||
* 先頭と末尾の空白は削除されます
|
||||
|
||||
## Finding API Names
|
||||
## API 名の見つけ方
|
||||
|
||||
For Select, Multi-Select, and Array fields with predefined options, you must use the **API names**, not the display labels.
|
||||
事前定義されたオプションを持つ Select、Multi-Select、Array フィールドでは、表示ラベルではなく、必ず **API 名** を使用してください。
|
||||
|
||||
### How to Find API Names
|
||||
### API 名の確認方法
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object and field
|
||||
3. Enable **Advanced mode** (toggle at the bottom right of the settings page)
|
||||
4. View the API name for each option
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. オブジェクトとフィールドを選択する
|
||||
3. **詳細モード** を有効にする（設定ページの右下にあるトグル）
|
||||
4. 各オプションの API 名を確認する
|
||||
|
||||
<VimeoEmbed videoId="1144910809" title="Video demonstration" />
|
||||
<VimeoEmbed videoId="1144910809" title="デモ動画" />
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
---
|
||||
title: Supported File Formats
|
||||
description: File formats supported for data import in Twenty.
|
||||
title: 対応ファイル形式
|
||||
description: Twenty でのデータインポートで対応しているファイル形式。
|
||||
---
|
||||
|
||||
## Supported Formats
|
||||
## 対応形式
|
||||
|
||||
Twenty supports three file formats for import:
|
||||
Twenty はインポート用に 3 種類のファイル形式に対応しています:
|
||||
|
||||
| Format | Extension | Notes |
|
||||
| ------------------ | --------- | ---------------------------- |
|
||||
| **CSV** | .csv | Recommended, most compatible |
|
||||
| **Excel** | .xlsx | Modern Excel format |
|
||||
| **Excel (Legacy)** | .xls | Older Excel format |
|
||||
| 形式 | 拡張子 | ノート |
|
||||
| ---------------- | ----- | ------------ |
|
||||
| **CSV** | .csv | 推奨（最も互換性が高い） |
|
||||
| **Excel** | .xlsx | 現行の Excel 形式 |
|
||||
| **Excel (レガシー)** | .xls | 旧 Excel 形式 |
|
||||
|
||||
## File Requirements
|
||||
## ファイル要件
|
||||
|
||||
| Requirement | Value |
|
||||
| ---------------- | ------------------------------------- |
|
||||
| **Encoding** | UTF-8 recommended |
|
||||
| **Record limit** | 10,000 records per file |
|
||||
| **Structure** | First row must contain column headers |
|
||||
| **Content** | One object type per file |
|
||||
| 要件 | 値 |
|
||||
| ------------ | --------------------- |
|
||||
| **エンコーディング** | UTF-8 を推奨 |
|
||||
| **レコード数の上限** | 1 ファイルあたり 10,000 レコード |
|
||||
| **構造** | 先頭行には列ヘッダーを含める必要があります |
|
||||
| **コンテンツ** | 1 ファイルにつき 1 種類のオブジェクト |
|
||||
|
||||
## CSV Best Practices
|
||||
## CSV ベストプラクティス
|
||||
|
||||
* **Delimiter**: Use comma (`,`) or semicolon (`;`)
|
||||
* **Text qualifier**: Use double quotes (`"`) for text containing commas
|
||||
* **Line endings**: Windows (CRLF) or Unix (LF) both supported
|
||||
* **Empty values**: Leave cells empty, don't use "NULL" or "N/A"
|
||||
* **区切り文字**: カンマ (`,`) またはセミコロン (`;`) を使用
|
||||
* **テキスト囲み文字**: カンマを含むテキストには二重引用符 (`\"`) を使用
|
||||
* **改行コード**: Windows (CRLF) または Unix (LF) のどちらにも対応
|
||||
* **空の値**: セルは空のままにし、"NULL" や "N/A" は使用しないでください
|
||||
|
||||
## Excel Best Practices
|
||||
## Excel ベストプラクティス
|
||||
|
||||
When exporting from Excel:
|
||||
Excel からエクスポートする場合:
|
||||
|
||||
* Remove formulas (export values only)
|
||||
* Delete empty rows at the end
|
||||
* Ensure no merged cells
|
||||
* Use the first sheet only
|
||||
* 数式を削除 (値のみをエクスポート),
|
||||
* 末尾の空行を削除
|
||||
* 結合セルがないことを確認
|
||||
* 最初のシートのみを使用
|
||||
|
||||
## Large Datasets
|
||||
## 大規模データセット
|
||||
|
||||
For datasets larger than 10,000 records:
|
||||
10,000 レコードを超えるデータセットの場合:
|
||||
|
||||
* Split into multiple files
|
||||
* Or use the [API import](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) for unlimited records
|
||||
* 複数のファイルに分割
|
||||
* または、無制限のレコードに対応する [API インポート](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) を使用
|
||||
|
||||
<Note>For very large migrations (100,000+ records), the API is significantly faster and more reliable than CSV imports.</Note>
|
||||
<Note>非常に大規模な移行 (100,000 レコード以上) の場合、API は CSV インポートよりも大幅に高速で信頼性も高くなります。</Note>
|
||||
|
||||
+78
-78
@@ -1,94 +1,94 @@
|
||||
---
|
||||
title: Import Relations Between Objects
|
||||
description: Import relationships between records via CSV.
|
||||
title: オブジェクト間のリレーションをインポートする
|
||||
description: CSV を使ってレコード間のリレーションをインポートします。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty supports importing relationships between objects during CSV import. This allows you to link records (e.g., attach People to Companies) as part of your data migration.
|
||||
Twenty は、CSV インポート時にオブジェクト間のリレーションのインポートをサポートしています。 これにより、データ移行の一環としてレコードをリンクできます（例：連絡先を会社に関連付ける）。
|
||||
|
||||
<Note>**Currently supported for import**: One-to-many relations pointing to a single object type on each side (e.g., People → Companies). Relations pointing to multiple object types are not yet supported in import/export.</Note>
|
||||
<Note>**現在インポートでサポート**：各側が単一のオブジェクトタイプを指す一対多リレーション（例：連絡先 → 会社）。 複数のオブジェクトタイプを指すリレーションは、現時点ではインポート/エクスポートに対応していません。</Note>
|
||||
|
||||
## How Relations Work in Twenty
|
||||
## Twenty におけるリレーションの仕組み
|
||||
|
||||
### One to Many / Many to One
|
||||
### 1 対多 / 多対 1
|
||||
|
||||
Twenty supports standard relations where one record links to many others:
|
||||
Twenty は、1 件のレコードが複数のレコードにリンクする標準的なリレーションをサポートしています:
|
||||
|
||||
* **One Company → Many People**: A company can have multiple employees, but each person belongs to one company
|
||||
* **One Company → Many Opportunities**: A company can have multiple deals, but each opportunity belongs to one company
|
||||
* **1 社 → 複数の連絡先**：1 つの会社には複数の従業員が所属できますが、各連絡先は 1 つの会社に所属します
|
||||
* **1 社 → 複数の商談**：1 つの会社は複数の商談を持てますが、各商談は 1 つの会社に属します
|
||||
|
||||
### Relations That Can Point to Multiple Object Types
|
||||
### 複数のオブジェクトタイプを指すことができるリレーション
|
||||
|
||||
Some relations can connect to different types of objects. This works in two ways:
|
||||
一部のリレーションは、異なる種類のオブジェクトに接続できます。 これは 2 つのパターンで機能します:
|
||||
|
||||
**Pattern 1: Many records linking to one record each from different object types**
|
||||
**パターン 1：異なるオブジェクトタイプからの多数のレコードが、それぞれ 1 件のレコードにリンクする場合**
|
||||
|
||||
Several Notes, Tasks, or Activities can each be attached to multiple object types at once:
|
||||
複数のメモ、タスク、またはアクティビティは、それぞれ同時に複数のオブジェクトタイプに関連付けることができます:
|
||||
|
||||
* **Notes** can be linked to one Person, one Company, and one Opportunity simultaneously
|
||||
* **Tasks** can be linked to one Person, one Company, and one Opportunity simultaneously
|
||||
* **メモ**は、連絡先 1 件、会社 1 社、商談 1 件に同時にリンクできます
|
||||
* **タスク**は、連絡先 1 件、会社 1 社、商談 1 件に同時にリンクできます
|
||||
|
||||
Here, the Notes/Tasks are on the "many" side. Each links to one record per object type.
|
||||
ここでは、メモ/タスクが「多」の側です。 それぞれがオブジェクトタイプごとに 1 件のレコードへリンクします。
|
||||
|
||||
<img src="/images/user-guide/fields/many-to-one-morph.png" style={{width:'100%'}} />
|
||||
|
||||
**Pattern 2: One record receiving links from many records of different object types**
|
||||
**パターン 2：1 件のレコードが、異なるオブジェクトタイプの多数のレコードからリンクを受け取る場合**
|
||||
|
||||
A Project can receive links from multiple records across different object types:
|
||||
プロジェクトは、異なるオブジェクトタイプにわたる複数のレコードからリンクを受け取ることができます:
|
||||
|
||||
* **A Project** can have many People linked to it, many Companies linked to it, and many Notes attached to it
|
||||
* **プロジェクト**には、多数の連絡先がリンクされ、多数の会社がリンクされ、多数のメモが添付される可能性があります
|
||||
|
||||
Here, the Project is on the "one" side. Multiple records from different objects can all link to the same Project.
|
||||
ここでは、プロジェクトが「1」の側です。 異なるオブジェクトの複数のレコードが、同じプロジェクトにすべてリンクできます。
|
||||
|
||||
<img src="/images/user-guide/fields/one-to-many-morph.png" style={{width:'100%'}} />
|
||||
|
||||
<Warning>
|
||||
**Import/Export limitation**: Relations that point to multiple object types (like Notes → People/Companies/Opportunities) are **not yet supported** in CSV import or export.
|
||||
**インポート/エクスポートの制限**：複数のオブジェクトタイプを指すリレーション（例：メモ → 連絡先/会社/商談）は、CSV のインポートやエクスポートでは**まだサポートされていません**。
|
||||
|
||||
* **Import**: Only one-to-many relations pointing to a single object type on each side can be imported
|
||||
* **Export**: Columns for relations pointing to multiple object types are currently left empty
|
||||
* **インポート**：各側が単一のオブジェクトタイプを指す一対多のリレーションのみインポートできます
|
||||
* **エクスポート**：複数のオブジェクトタイプを指すリレーションの列は、現在空のままになります
|
||||
|
||||
This is on our roadmap.
|
||||
これはロードマップにあります。
|
||||
</Warning>
|
||||
|
||||
### What's Not Supported Today
|
||||
### 現在サポートされていないもの
|
||||
|
||||
**Many to Many relations** are not yet available. For example, you cannot currently create a relation where:
|
||||
**多対多リレーション**はまだ利用できません。 たとえば、現在は次のようなリレーションを作成できません：
|
||||
|
||||
* Many People are linked to many Projects
|
||||
* 多数の連絡先が多数のプロジェクトにリンクされる
|
||||
|
||||
<Note>Many to Many relations are planned for H1 2026.</Note>
|
||||
<Note>多対多リレーションは 2026 年上半期に提供予定です。</Note>
|
||||
|
||||
## Linking Records During Import
|
||||
## インポート時にレコードをリンクする
|
||||
|
||||
<Note>**Reminder**: Only one-to-many relations pointing to a single object type can be imported (e.g., People → Companies). Relations pointing to multiple object types (e.g., Notes → People/Companies/Opportunities) are not yet supported.</Note>
|
||||
<Note>**リマインダー**：各側が単一のオブジェクトタイプを指す一対多のリレーションのみインポートできます（例：連絡先 → 会社）。 複数のオブジェクトタイプを指すリレーション（例：メモ → 連絡先/会社/商談）は、まだサポートされていません。</Note>
|
||||
|
||||
### Step 1: Identify the "One" and "Many" Sides
|
||||
### ステップ 1: 「1」と「多」の側を特定する
|
||||
|
||||
First, determine which object is on the "one" side and which is on the "many" side of the relationship.
|
||||
まず、どのオブジェクトがリレーションの「1」の側で、どのオブジェクトが「多」の側かを特定します。
|
||||
|
||||
**Example**:
|
||||
**例**:
|
||||
|
||||
* **Company** is the "one" side (one company has many employees)
|
||||
* **People** is the "many" side (each person belongs to one company)
|
||||
* **会社**が「1」の側（1 つの会社に多くの従業員がいる）
|
||||
* **連絡先**が「多」の側（各人は 1 つの会社に所属する）
|
||||
|
||||
### Step 2: Ensure the "One" Side Records Exist
|
||||
### ステップ 2: 「1」の側のレコードが存在することを確認する
|
||||
|
||||
Before importing the "many" side, the "one" side records must already exist in Twenty.
|
||||
「多」の側をインポートする前に、「1」の側のレコードが Twenty に既に存在している必要があります。
|
||||
|
||||
* Import or create the "one" side records first (e.g., Companies)
|
||||
* Validate their unique identifier. This can be:
|
||||
* The `id` (Twenty's UUID)
|
||||
* A field set as unique (e.g., `domain` for Companies, or an external ID from your previous system)
|
||||
* まず「1」の側のレコード（例：会社）をインポートまたは作成します
|
||||
* それらの一意の識別子を検証します。 これは次のいずれかです:
|
||||
* `id`（Twenty の UUID）
|
||||
* 一意に設定されたフィールド（例：会社の `domain`、または以前のシステムの外部 ID）
|
||||
|
||||
<Warning>The import will fail if a reference is made to a record that does not exist.</Warning>
|
||||
<Warning>存在しないレコードを参照している場合、インポートは失敗します。</Warning>
|
||||
|
||||
### Step 3: Prepare Your CSV File
|
||||
### ステップ 3: CSV ファイルを準備する
|
||||
|
||||
Add a column in your "many" side CSV file that references the "one" side record.
|
||||
「多」の側の CSV ファイルに、「1」の側のレコードを参照する列を追加します。
|
||||
|
||||
**Example**: For a People CSV file linking to Companies:
|
||||
**例**：会社にリンクする連絡先の CSV ファイルの場合:
|
||||
|
||||
```
|
||||
firstName,lastName,email,companyDomain
|
||||
@@ -96,53 +96,53 @@ John,Smith,john@acme.com,https://acme.com
|
||||
Jane,Doe,jane@widgets.co,https://widgets.co
|
||||
```
|
||||
|
||||
**Important**:
|
||||
**重要**:
|
||||
|
||||
* The value must **exactly match** the unique field on the Company record
|
||||
* For domains, use the **Domain URL** (e.g., `https://acme.com`), not the Domain Label
|
||||
* Map only **one** unique identifier per relation: this leads to a smoother import
|
||||
* 値は会社レコード上の一意フィールドと**完全に一致**している必要があります
|
||||
* ドメインの場合は、ドメインラベルではなく、**ドメイン URL**（例：`https://acme.com`）を使用してください
|
||||
* リレーションごとに**1 つ**の一意の識別子のみをマッピングしてください。そうすることで、よりスムーズにインポートできます
|
||||
|
||||
### Step 4: Ensure the Relation Field Exists
|
||||
### ステップ 4: リレーションフィールドが存在することを確認する
|
||||
|
||||
Before uploading your file, make sure the relation field exists between your objects.
|
||||
ファイルをアップロードする前に、オブジェクト間にリレーションフィールドが存在することを確認してください。
|
||||
|
||||
If it doesn't exist:
|
||||
存在しない場合は:
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select your object (e.g., People)
|
||||
3. Create a relation field pointing to the target object (e.g., Company)
|
||||
1. **設定 → データモデル** に移動
|
||||
2. オブジェクト（例：連絡先）を選択する
|
||||
3. 対象オブジェクト（例：会社）を指すリレーションフィールドを作成する
|
||||
|
||||
### Step 5: Upload and Map the Relation
|
||||
### ステップ 5: リレーションをアップロードしてマッピングする
|
||||
|
||||
1. Upload your CSV file via the import UI
|
||||
2. In the field mapping step, find your relation column (e.g., `companyDomain`)
|
||||
3. Map it to the relation field (e.g., Company)
|
||||
4. Twenty will automatically link each record to the matching parent
|
||||
1. インポート UI から CSV ファイルをアップロードする
|
||||
2. フィールドのマッピング手順で、リレーション列（例：`companyDomain`）を見つける
|
||||
3. それをリレーションフィールド（例：会社）にマッピングする
|
||||
4. Twenty が各レコードを一致する親に自動でリンクします。
|
||||
|
||||
### Available Unique Fields for Relations
|
||||
### リレーションで利用可能な一意フィールド
|
||||
|
||||
| Object | Unique Fields Available |
|
||||
| ------------------------------------- | --------------------------------------- |
|
||||
| **Companies** | `id`, `domain`, any custom unique field |
|
||||
| **People** | `id`, `email`, any custom unique field |
|
||||
| **Workspace Members** | `id`, `email` (not name) |
|
||||
| **Other standard and custom objects** | `id`, any field marked as unique |
|
||||
| オブジェクト | 利用可能な一意フィールド |
|
||||
| ----------------------------- | ---------------------------- |
|
||||
| **会社** | `id`、`domain`、任意のカスタム一意フィールド |
|
||||
| **連絡先** | `id`、`email`、任意のカスタム一意フィールド |
|
||||
| **ワークスペースメンバー** | `id`、`email`（名前ではありません） |
|
||||
| **その他の標準オブジェクトおよびカスタムオブジェクト** | `id`、一意としてマークされた任意のフィールド |
|
||||
|
||||
<Note>**Linking to Workspace Members**: When the relation points to Workspace Members (your team logging into Twenty), reference them by their **email address**, not their name.</Note>
|
||||
<Note>**ワークスペースメンバーへのリンク**：リレーションの参照先がワークスペースメンバー（Twenty にログインするあなたのチーム）の場合、名前ではなく**メールアドレス**で参照してください。</Note>
|
||||
|
||||
<Note>We recommend using `domain` for Companies and `email` for People, as these are human-readable and easy to maintain in spreadsheets.</Note>
|
||||
<Note>会社には `domain`、連絡先には `email` を使用することをおすすめします。これらは人間が読みやすく、スプレッドシートでの管理も容易です。</Note>
|
||||
|
||||
<Note>**Reminder**: Soft-deleted records (visible under Command Menu → See deleted records) count toward uniqueness criteria. If you import a record with the same unique value as a deleted record, the deleted record will be restored. See [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints) for more details.</Note>
|
||||
<Note>**リマインダー**：ソフト削除されたレコード（コマンドメニュー → 削除済みレコードを表示 で確認可能）は、一意性の判定に含まれます。 削除済みレコードと同じ一意の値を持つレコードをインポートすると、その削除済みレコードが復元されます。 詳細は[一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)を参照してください。</Note>
|
||||
|
||||
## Import Order Rule
|
||||
## インポート順のルール
|
||||
|
||||
<Warning>
|
||||
**Always import the "one" side first!**
|
||||
**必ず「1」の側を先にインポートしてください！**
|
||||
|
||||
1. **Companies** first (no dependencies)
|
||||
2. **People** second (linked to Companies)
|
||||
3. **Opportunities** third (linked to Companies/People)
|
||||
4. **Custom objects** following their dependencies
|
||||
1. **会社**を最初に（依存関係なし）
|
||||
2. **連絡先**を次に（会社にリンク）
|
||||
3. **商談**を 3 番目に（会社/連絡先にリンク）
|
||||
4. **カスタムオブジェクト**は依存関係に従って
|
||||
|
||||
The parent record must exist before you can reference it.
|
||||
参照する前に、親レコードが存在している必要があります。
|
||||
</Warning>
|
||||
|
||||
+41
-41
@@ -1,72 +1,72 @@
|
||||
---
|
||||
title: Uniqueness Constraints
|
||||
description: How Twenty enforces data uniqueness during import.
|
||||
title: 一意性の制約
|
||||
description: Twenty によるインポート時のデータ一意性の確保方法。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty enforces uniqueness on certain fields to prevent duplicate records and ensure data integrity. Understanding these constraints is essential for successful imports.
|
||||
Twenty は、重複レコードを防ぎデータの整合性を確保するため、特定のフィールドに一意性を強制します。 これらの制約を理解することは、インポートを成功させるうえで不可欠です。
|
||||
|
||||
## Default Unique Fields
|
||||
## デフォルトの一意のフィールド
|
||||
|
||||
| Object | Unique Fields |
|
||||
| ------------------ | ---------------------- |
|
||||
| **People** | `id`, `email` |
|
||||
| **Companies** | `id`, `domain` |
|
||||
| **Custom objects** | `id` only (by default) |
|
||||
| オブジェクト | 一意のフィールド |
|
||||
| -------------- | -------------- |
|
||||
| **連絡先** | `id`, `email` |
|
||||
| **会社** | `id`, `domain` |
|
||||
| **カスタムオブジェクト** | `id` のみ（デフォルト） |
|
||||
|
||||
<Note>The `id` field is Twenty's internal identifier, auto-generated for each record. It uses UUID format (e.g., `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`).</Note>
|
||||
<Note>`id` フィールドは Twenty の内部識別子で、各レコードに対して自動生成されます。 UUID 形式を使用します（例: `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`）。</Note>
|
||||
|
||||
## Custom Unique Fields
|
||||
## カスタムの一意フィールド
|
||||
|
||||
You can define additional unique fields under **Settings → Data Model**:
|
||||
追加の一意フィールドは **設定 → データモデル** で定義できます:
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object
|
||||
3. Click on a field
|
||||
4. Enable **Unique** in field settings
|
||||
1. **設定 → データモデル** に移動します
|
||||
2. オブジェクトを選択する
|
||||
3. フィールドをクリックする
|
||||
4. フィールド設定で **Unique** を有効化する
|
||||
|
||||
### Use Cases for Custom Unique Fields
|
||||
### カスタムの一意フィールドのユースケース
|
||||
|
||||
* **External IDs**: Store IDs from other systems (Salesforce ID, HubSpot ID)
|
||||
* **Business identifiers**: Employee numbers, customer codes
|
||||
* **Alternative contact info**: LinkedIn profile, phone number
|
||||
* **外部 ID**: 他システムの ID を保存（Salesforce ID、HubSpot ID）
|
||||
* **ビジネス識別子**: 従業員番号、顧客コード
|
||||
* **代替連絡先情報**: LinkedIn プロフィール、電話番号
|
||||
|
||||
<Note>The field name `id` is reserved for Twenty's internal ID. Use a different name like `externalId` or `legacyId` for external identifiers.</Note>
|
||||
<Note>フィールド名 `id` は Twenty の内部 ID 用に予約されています。 外部識別子には `externalId` や `legacyId` など別の名前を使用してください。</Note>
|
||||
|
||||
## Import Behavior
|
||||
## インポート時の動作
|
||||
|
||||
### Creating New Records
|
||||
### 新規レコードの作成
|
||||
|
||||
If a unique field value doesn't exist, a new record is created.
|
||||
一意フィールドの値が存在しない場合は、新しいレコードが作成されます。
|
||||
|
||||
### Updating Existing Records
|
||||
### 既存レコードの更新
|
||||
|
||||
If a unique field value matches an existing record, that record is **updated** with the new data.
|
||||
<Warning>To **update existing records**, it is recommended to **only match one unique field**.</Warning>
|
||||
一意フィールドの値が既存レコードに一致する場合、そのレコードは新しいデータで**更新**されます。
|
||||
<Warning>**既存レコードを更新**する場合は、**一意フィールドを 1 つのみに限定して照合**することを推奨します。</Warning>
|
||||
|
||||
### Soft-Deleted Records
|
||||
### ソフト削除済みレコード
|
||||
|
||||
<Warning>
|
||||
**Deleted records count toward uniqueness.**
|
||||
**削除済みレコードは一意性の判定に含まれます。**
|
||||
|
||||
Soft-deleted records (visible under Command Menu → See deleted records) are included in uniqueness checks. If you import a record with the same unique value as a deleted record, the deleted record will be **restored** with the new data.
|
||||
ソフト削除されたレコード（コマンドメニュー → 削除済みレコードを表示 で表示可能）は、一意性チェックに含まれます。 削除済みレコードと同じ一意の値を持つレコードをインポートすると、その削除済みレコードが新しいデータで**復元**されます。
|
||||
</Warning>
|
||||
|
||||
## Duplicate Detection During Import
|
||||
## インポート時の重複検出
|
||||
|
||||
During the validation phase:
|
||||
検証フェーズ中:
|
||||
|
||||
* Duplicates within your file are highlighted in yellow
|
||||
* You can edit or remove duplicate rows from the UI before starting the import
|
||||
* ファイル内の重複は黄色でハイライト表示されます
|
||||
* インポートを開始する前に、UI から重複行を編集または削除できます
|
||||
|
||||
<VimeoEmbed videoId="1145246326" title="Video demonstration" />
|
||||
<VimeoEmbed videoId="1145246326" title="デモ動画" />
|
||||
|
||||
## Best Practices
|
||||
## ベストプラクティス
|
||||
|
||||
1. **Remove duplicates** from your file before importing
|
||||
2. **Check for existing records** in Twenty before importing
|
||||
3. **Use external IDs** when migrating from other systems
|
||||
4. **Include unique fields** if you want to update existing records
|
||||
1. インポート前にファイルから**重複を削除**してください
|
||||
2. インポート前に Twenty で**既存レコードを確認**してください
|
||||
3. 他のシステムから移行する場合は、**外部 ID を使用**してください
|
||||
4. 既存レコードを更新したい場合は、**一意フィールドを含め**てください
|
||||
|
||||
+127
-127
@@ -1,209 +1,209 @@
|
||||
---
|
||||
title: Export Your Data
|
||||
description: Complete step-by-step guide to exporting data from Twenty.
|
||||
title: データをエクスポート
|
||||
description: Twenty からデータをエクスポートするための完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Export your workspace data to CSV for backups, reporting, or migration.
|
||||
バックアップ、レポート作成、または移行のために、ワークスペースのデータを CSV にエクスポートします。
|
||||
|
||||
**Use cases:**
|
||||
**ユースケース：**
|
||||
|
||||
* **Regular backups** — keep copies of your data
|
||||
* **External reporting** — analyze data in Excel, Google Sheets, or BI tools
|
||||
* **Migration** — move data to another system
|
||||
* **Bulk updates** — export, edit, and re-import to update records
|
||||
* **定期的なバックアップ** — データのコピーを保持
|
||||
* **外部レポーティング** — Excel、Google スプレッドシート、BI ツールでデータを分析
|
||||
* **移行** — データを別のシステムに移す
|
||||
* **一括更新** — エクスポートして編集し、再インポートしてレコードを更新
|
||||
|
||||
## What You Need to Know
|
||||
## 知っておくべきこと
|
||||
|
||||
### Export Limits
|
||||
### エクスポートの制限
|
||||
|
||||
* **Maximum 20,000 records** per export
|
||||
* Only **visible columns** are exported
|
||||
* Only **filtered records** are exported (based on your current view)
|
||||
* 1 回のエクスポートにつき **最大 20,000 件のレコード**
|
||||
* **表示されている列**のみがエクスポートされます
|
||||
* **フィルターで絞り込まれたレコード**のみがエクスポートされます（現在のビューに基づきます）
|
||||
|
||||
<Note>For larger exports (20,000+ records), use filters to export in batches or use the [API](/l/ja/developers/extend/capabilities/apis).</Note>
|
||||
<Note>大規模なエクスポート（20,000 件超）では、フィルターを使ってバッチに分けてエクスポートするか、[API](/l/ja/developers/extend/capabilities/apis) を使用してください。</Note>
|
||||
|
||||
### Permissions
|
||||
### 権限
|
||||
|
||||
You need the **"Export CSV"** permission to export data. Contact your workspace admin if you don't have this option.
|
||||
データをエクスポートするには **"Export CSV"** 権限が必要です。 このオプションがない場合は、ワークスペース管理者に連絡してください。
|
||||
|
||||
## Step 1: Navigate to the Object
|
||||
## ステップ 1：対象オブジェクトに移動
|
||||
|
||||
Go to the object you want to export:
|
||||
エクスポートしたいオブジェクトに移動します：
|
||||
|
||||
* **People** — for contacts
|
||||
* **Companies** — for organizations
|
||||
* **Opportunities** — for deals
|
||||
* **Custom objects** — any object you've created
|
||||
* **People** — 連絡先
|
||||
* **Companies** — 組織
|
||||
* **Opportunities** — 商談
|
||||
* **カスタムオブジェクト** — 作成した任意のオブジェクト
|
||||
|
||||
## Step 2: Configure Your View
|
||||
## ステップ 2：ビューを設定
|
||||
|
||||
**Important:** The export includes only what's visible in your current view.
|
||||
**重要:** エクスポートには現在のビューで表示されているもののみが含まれます。
|
||||
|
||||
### Add/Remove Columns
|
||||
### 列の追加/削除
|
||||
|
||||
1. Click **Options → Fields** (or the **+** at the end of columns)
|
||||
2. Check the fields you want to export
|
||||
3. Uncheck fields you don't need
|
||||
1. **Options → Fields** をクリックします（または列の末尾の **+** をクリックします）
|
||||
2. エクスポートしたいフィールドにチェックを入れる
|
||||
3. 不要なフィールドのチェックを外す
|
||||
|
||||
### Filter Records (Optional)
|
||||
### レコードをフィルター（任意）
|
||||
|
||||
If you only need a subset of data:
|
||||
データの一部だけが必要な場合：
|
||||
|
||||
1. Click **Filter**
|
||||
2. Add filter conditions (e.g., "Created date > January 1, 2024")
|
||||
3. Only matching records will be exported
|
||||
1. **Filter** をクリックします
|
||||
2. フィルター条件を追加します（例："Created date > January 1, 2024"）
|
||||
3. 条件に一致するレコードのみがエクスポートされます
|
||||
|
||||
### Sort Records (Optional)
|
||||
### レコードを並べ替え（任意）
|
||||
|
||||
1. Click a column header to sort
|
||||
2. The export will follow your sort order
|
||||
1. 列ヘッダーをクリックして並べ替えます
|
||||
2. エクスポートは並べ替え順に従います
|
||||
|
||||
<Note>**Create a dedicated export view.** Save a view specifically configured for exports so you don't need to reconfigure each time.</Note>
|
||||
<Note>**エクスポート専用のビューを作成しましょう。** エクスポート用に設定したビューを保存しておくと、毎回再設定する必要がありません。</Note>
|
||||
|
||||
## Step 3: Export the Data
|
||||
## ステップ 3：データをエクスポート
|
||||
|
||||
1. Click the **⋮** icon on the top right of the table
|
||||
2. Select **Export view**
|
||||
3. Choose where to save the CSV file
|
||||
4. Wait for the download to complete
|
||||
1. テーブル右上の **⋮** アイコンをクリックします
|
||||
2. **Export view** を選択します
|
||||
3. CSV ファイルの保存場所を選択します
|
||||
4. ダウンロードの完了を待ちます
|
||||
|
||||
## What Gets Exported
|
||||
## エクスポートされる内容
|
||||
|
||||
| Included | Not Included |
|
||||
| -------------------------------- | ---------------------- |
|
||||
| All visible columns | Hidden columns |
|
||||
| Records matching current filters | Filtered-out records |
|
||||
| Custom field values | Fields not in the view |
|
||||
| Record IDs | File attachments |
|
||||
| Relation IDs | Images |
|
||||
| 含まれるもの | 含まれないもの |
|
||||
| ----------------- | ---------------- |
|
||||
| 表示されているすべての列 | 非表示の列 |
|
||||
| 現在のフィルターに一致するレコード | フィルターで除外されたレコード |
|
||||
| カスタムフィールドの値 | ビューに含まれていないフィールド |
|
||||
| レコード ID | 添付ファイル |
|
||||
| リレーション ID | 画像 |
|
||||
|
||||
### Relation Fields
|
||||
### リレーションフィールド
|
||||
|
||||
Relation IDs are only exported on the **"many" side** of a relationship:
|
||||
リレーション ID はリレーションシップの **"many" 側** でのみエクスポートされます：
|
||||
|
||||
* **People export** includes a `companyId` column (People → Company relation)
|
||||
* **Companies export** does NOT include `peopleIds` (Companies is the "one" side)
|
||||
* **People のエクスポート** には `companyId` 列が含まれます（People → Company のリレーション）
|
||||
* **Companies のエクスポート** には `peopleIds` は含まれません（Companies は "one" 側です）
|
||||
|
||||
This means you can use the People export to re-import and maintain the Company link, but you'll need to re-import People after Companies to recreate the relationships.
|
||||
つまり、People のエクスポートを使用して再インポートすれば Company とのリンクを維持できますが、関係を再作成するには Companies の後に People を再インポートする必要があります。
|
||||
|
||||
## Exporting for Specific Purposes
|
||||
## 目的別のエクスポート
|
||||
|
||||
### For Backups
|
||||
### バックアップの場合
|
||||
|
||||
1. Create a view with **all fields** visible
|
||||
2. Remove all filters to include all records
|
||||
3. Export each object type separately
|
||||
4. Store exports in a secure location
|
||||
5. Set a recurring reminder (weekly/monthly)
|
||||
1. **すべてのフィールド** を表示したビューを作成
|
||||
2. すべてのフィルターを解除して全レコードを含める
|
||||
3. 各オブジェクトタイプを個別にエクスポート
|
||||
4. エクスポートファイルを安全な場所に保管
|
||||
5. 定期的なリマインダーを設定（毎週/毎月）
|
||||
|
||||
### For External Reporting
|
||||
### 外部レポーティングの場合
|
||||
|
||||
1. Include only the fields you need for analysis
|
||||
2. Apply filters to focus on relevant data
|
||||
3. Consider sorting by the field you'll analyze
|
||||
1. 分析に必要なフィールドのみを含める
|
||||
2. フィルターを適用して関連データに絞り込む
|
||||
3. 分析対象のフィールドで並べ替えることを検討
|
||||
|
||||
### For Bulk Updates
|
||||
### 一括更新の場合
|
||||
|
||||
1. Export the records you want to update
|
||||
2. Include the unique identifier (`email`, `domain`, or `id`)
|
||||
3. Edit the exported file
|
||||
4. Re-import to update records
|
||||
See: [How to Update Existing Records](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import)
|
||||
1. 更新したいレコードをエクスポート
|
||||
2. 一意の識別子（`email`、`domain`、または `id`）を含める
|
||||
3. エクスポートしたファイルを編集
|
||||
4. 再インポートしてレコードを更新します
|
||||
参照：[既存レコードを更新する方法](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import)
|
||||
|
||||
### For Migration
|
||||
### マイグレーションの場合
|
||||
|
||||
If you're exporting to migrate to another system:
|
||||
別のシステムへマイグレーションするためにエクスポートする場合：
|
||||
|
||||
1. **Export each object separately** — People, Companies, Opportunities, etc.
|
||||
2. **Include ID fields** — these help maintain relationships
|
||||
3. **Document field mappings** — note how Twenty fields map to your target system
|
||||
1. **各オブジェクトを個別にエクスポート** — People、Companies、Opportunities など
|
||||
2. **ID フィールドを含める** — 関係の維持に役立ちます
|
||||
3. **フィールドのマッピングを文書化** — Twenty のフィールドが対象システムにどのように対応するかを記録
|
||||
|
||||
## Handling Large Datasets (20,000+ Records)
|
||||
## 大規模データセットの扱い（20,000 件超）
|
||||
|
||||
The export limit is 20,000 records. For larger datasets:
|
||||
エクスポートの上限は 20,000 件です。 より大きなデータセットの場合：
|
||||
|
||||
### Option 1: Export in Batches
|
||||
### オプション 1：バッチでエクスポート
|
||||
|
||||
1. Add a filter (e.g., "Created date" ranges)
|
||||
2. Export the first batch
|
||||
3. Change the filter
|
||||
4. Export the next batch
|
||||
5. Combine files in your spreadsheet
|
||||
1. フィルターを追加（例："Created date" の範囲）
|
||||
2. 最初のバッチをエクスポート
|
||||
3. フィルターを変更
|
||||
4. 次のバッチをエクスポート
|
||||
5. スプレッドシートでファイルを結合
|
||||
|
||||
**Example filters for batching:**
|
||||
**バッチ分割の例となるフィルター：**
|
||||
|
||||
* By date range (January, February, March...)
|
||||
* By owner (Team member A, Team member B...)
|
||||
* By status (Active, Inactive...)
|
||||
* 日付範囲別（1月、2月、3月...）
|
||||
* 担当者別（チームメンバー A、チームメンバー B...）
|
||||
* ステータス別（Active、Inactive...）
|
||||
|
||||
### Option 2: Use the API
|
||||
### オプション 2：API を使用
|
||||
|
||||
The API has no record limit:
|
||||
API にはレコード数の上限がありません：
|
||||
|
||||
1. Get your API key from **Settings → Developers**
|
||||
2. Use the GraphQL API to query records
|
||||
3. Process results in your application
|
||||
1. **Settings → Developers** から API キーを取得
|
||||
2. GraphQL API を使用してレコードをクエリします
|
||||
3. アプリケーションで結果を処理
|
||||
|
||||
See: [API Documentation](/l/ja/developers/extend/capabilities/apis)
|
||||
参照：[API ドキュメント](/l/ja/developers/extend/capabilities/apis)
|
||||
|
||||
## Tips and Best Practices
|
||||
## ヒントとベストプラクティス
|
||||
|
||||
### Create Export Views
|
||||
### エクスポート用ビューを作成
|
||||
|
||||
Save views configured specifically for exports:
|
||||
エクスポート用に設定したビューを保存します：
|
||||
|
||||
1. Configure columns and filters
|
||||
2. Click **View options** → **Save as new view**
|
||||
3. Name it "Export - [Purpose]"
|
||||
1. 列とフィルターを設定
|
||||
2. **View options** → **Save as new view** をクリック
|
||||
3. 名前を "Export - [Purpose]" にします
|
||||
|
||||
### Secure Your Exports
|
||||
### エクスポートを安全に管理
|
||||
|
||||
Exported files may contain sensitive data:
|
||||
エクスポートされたファイルには機密データが含まれる場合があります：
|
||||
|
||||
* Store in secure locations
|
||||
* Delete old exports when no longer needed
|
||||
* Be careful sharing export files
|
||||
* 安全な場所に保管する
|
||||
* 不要になった古いエクスポートを削除する
|
||||
* エクスポートファイルの共有に注意する
|
||||
|
||||
### Check Before Exporting
|
||||
### エクスポート前の確認
|
||||
|
||||
<Check>Correct columns are visible</Check>
|
||||
<Check>Filters are set correctly (or removed for full export)</Check>
|
||||
<Check>You have Export permission</Check>
|
||||
<Check>正しい列が表示されている</Check>
|
||||
<Check>フィルターが正しく設定されている（または全件エクスポートのために解除済み）</Check>
|
||||
<Check>エクスポート権限がある</Check>
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Why are some columns missing from my export?">
|
||||
Only visible columns are exported. Add the columns you need via **Options → Fields** before exporting.
|
||||
<Accordion title="エクスポートに一部の列が含まれていないのはなぜですか？">
|
||||
表示されている列のみがエクスポートされます。 エクスポート前に **Options → Fields** から必要な列を追加してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Why doesn't my export have all records?">
|
||||
Check your filters. The export only includes records matching your current view filters. Remove filters to export all records.
|
||||
<Accordion title="エクスポートにすべてのレコードが含まれないのはなぜですか？">
|
||||
フィルターを確認してください。 エクスポートには、現在のビューのフィルターに一致するレコードのみが含まれます。 すべてのレコードをエクスポートするにはフィルターを解除してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I export more than 20,000 records?">
|
||||
Not in a single export. Use filters to export in batches, or use the API for larger datasets.
|
||||
<Accordion title="20,000 件を超えるレコードをエクスポートできますか？">
|
||||
1 回のエクスポートではできません。 フィルターを使ってバッチに分けてエクスポートするか、より大きなデータセットには API を使用してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What format is the export file?">
|
||||
CSV (Comma Separated Values). Opens in Excel, Google Sheets, or any spreadsheet application.
|
||||
<Accordion title="エクスポートファイルの形式は何ですか？">
|
||||
CSV（カンマ区切り形式）です。 Excel、Google スプレッドシート、その他のスプレッドシートアプリで開けます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Are relation IDs included?">
|
||||
Yes, but only on the "many" side of relationships. For example, a People export includes `companyId`, but a Companies export does not include people IDs.
|
||||
<Accordion title="リレーション ID は含まれますか？">
|
||||
はい。ただし、リレーションシップの "many" 側のみです。 たとえば、People のエクスポートには `companyId` が含まれますが、Companies のエクスポートには People の ID は含まれません。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I automate exports?">
|
||||
Not directly through the UI. Use the API to build automated export workflows.
|
||||
<Accordion title="エクスポートを自動化できますか？">
|
||||
UI から直接はできません。 API を使用して自動エクスポートのワークフローを構築してください。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Next Steps
|
||||
## 次のステップ
|
||||
|
||||
* [How to Update Existing Records](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) — edit and re-import your export
|
||||
* [How to Import Data via API](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) — for large datasets
|
||||
* [API Documentation](/l/ja/developers/extend/capabilities/apis) — build custom export workflows
|
||||
* [既存レコードを更新する方法](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) — エクスポートを編集して再インポート
|
||||
* [API でデータをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) — 大規模データセット向け
|
||||
* [API ドキュメント](/l/ja/developers/extend/capabilities/apis) — カスタムのエクスポートワークフローを構築
|
||||
|
||||
+215
-215
@@ -1,122 +1,122 @@
|
||||
---
|
||||
title: Fix Import Errors
|
||||
description: Complete troubleshooting guide for resolving CSV import errors.
|
||||
title: インポートエラーの修正
|
||||
description: CSV のインポートエラーを解決するための包括的なトラブルシューティングガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Import not working? This guide helps you identify and fix common import errors step by step.
|
||||
インポートがうまくいきませんか？ このガイドでは、一般的なインポートエラーを段階的に特定して修正する方法を説明します。
|
||||
|
||||
## How Import Validation Works
|
||||
## インポート検証の仕組み
|
||||
|
||||
After uploading your file and mapping columns, Twenty validates your data:
|
||||
ファイルをアップロードして列をマッピングすると、Twenty がデータを検証します。
|
||||
|
||||
1. **Validation runs** — Twenty checks each row for errors
|
||||
2. **Errors are highlighted** — problematic rows appear in **yellow**
|
||||
3. **You can fix in-place** — edit cells directly in the import UI
|
||||
4. **Or remove rows** — skip problematic records entirely
|
||||
1. **検証の実行** — Twenty が各行にエラーがないか確認します
|
||||
2. **エラーをハイライト** — 問題のある行は**黄色**で表示されます
|
||||
3. **その場で修正可能** — インポート UI でセルを直接編集できます
|
||||
4. **行を削除** — 問題のあるレコードをまるごとスキップします
|
||||
|
||||
<Note>**Fix errors in the UI.** You don't need to go back to your spreadsheet. Edit cells directly during import to save time.</Note>
|
||||
<Note>**エラーは UI で修正できます。** スプレッドシートに戻る必要はありません。 インポート中にセルを直接編集して時間を節約しましょう。</Note>
|
||||
|
||||
## Step-by-Step Troubleshooting
|
||||
## ステップごとのトラブルシューティング
|
||||
|
||||
### Step 1: Identify the Error Type
|
||||
### ステップ 1: エラーの種類を特定する
|
||||
|
||||
Click on a highlighted row to see the specific error message. Common error types:
|
||||
ハイライトされた行をクリックすると、具体的なエラーメッセージを確認できます。 よくあるエラーの種類：
|
||||
|
||||
| Error Message | What It Means |
|
||||
| --------------------------------------------------------------------- | ------------------------------------------------------------ |
|
||||
| Duplicate values highlighted in yellow | Value already exists in Twenty or appears twice in your file |
|
||||
| `{field} is not a valid {type}` (hover on yellow cell) | Data doesn't match expected format |
|
||||
| Required field highlighted | A required field is empty |
|
||||
| `Can't connect to {object}. No unique record found...` (import fails) | Referenced record doesn't exist |
|
||||
| `Too many records. Up to 10000 allowed` (upload blocked) | File has more than 10,000 records |
|
||||
| エラーメッセージ | 意味 |
|
||||
| ------------------------------------------------------------------- | -------------------------------------- |
|
||||
| 重複する値が黄色でハイライト | その値は Twenty に既に存在するか、ファイル内で 2 回出現しています |
|
||||
| `{field} is not a valid {type}`（黄色のセルにカーソルを合わせる） | データが想定される形式と一致していません |
|
||||
| 必須フィールドがハイライト表示 | 必須フィールドが空です |
|
||||
| `Can't connect to {object}. No unique record found...`（インポートは失敗します） | 参照されているレコードが存在しません |
|
||||
| `Too many records. Up to 10000 allowed`（アップロードがブロックされます） | ファイルのレコード数が 10,000 を超えています |
|
||||
|
||||
### Step 2: Fix the Error
|
||||
### ステップ 2: エラーを修正する
|
||||
|
||||
Follow the specific instructions below for each error type.
|
||||
各エラータイプに応じて、以下の手順に従ってください。
|
||||
|
||||
---
|
||||
|
||||
## Error: Duplicate Value
|
||||
## エラー：重複する値
|
||||
|
||||
### What You'll See
|
||||
### あなたが見るもの
|
||||
|
||||
Rows with duplicate values are **highlighted in yellow** in the import UI before the import starts.
|
||||
インポート開始前に、重複する値がある行はインポート UI で**黄色でハイライト表示**されます。
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
A unique field (email, domain) either:
|
||||
一意のフィールド（email、domain）が次のいずれかに該当しています：
|
||||
|
||||
* Already exists in Twenty
|
||||
* Appears twice in your file
|
||||
* Twenty に既に存在する
|
||||
* ファイル内で 2 回出現している
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
**Option 1: Edit the duplicate value**
|
||||
**オプション 1：重複している値を編集**
|
||||
|
||||
1. Click the cell with the error
|
||||
2. Change to a unique value
|
||||
3. Continue with import
|
||||
1. エラーのあるセルをクリック
|
||||
2. 一意の値に変更
|
||||
3. インポートを続行
|
||||
|
||||
**Option 2: Remove the duplicate row**
|
||||
**オプション 2：重複行を削除**
|
||||
|
||||
1. Click the X next to the row
|
||||
2. The row will be skipped during import
|
||||
1. 行の横にある X をクリック
|
||||
2. その行はインポート時にスキップされます
|
||||
|
||||
**Option 3: Let Twenty update the existing record**
|
||||
**オプション 3：Twenty に既存レコードの更新を任せる**
|
||||
|
||||
1. Ensure your file includes a unique identifier (`email`, `domain`, or `id`)
|
||||
2. Map the unique identifier field
|
||||
3. Twenty will update the existing record instead of creating a duplicate
|
||||
1. ファイルに一意の識別子（`email`、`domain`、または `id`）が含まれていることを確認する
|
||||
2. 一意の識別子フィールドをマッピングする
|
||||
3. Twenty は重複を作成せず、既存のレコードを更新します
|
||||
|
||||
<Note>
|
||||
**You can update unique fields too.**
|
||||
一意のフィールドも更新できます。
|
||||
|
||||
* If you keep the `id` but change the `email` → the email will be updated
|
||||
* If you keep the `email` but change the `id` → the id will be updated
|
||||
* `id` を保持して `email` を変更すると → メールアドレスが更新されます
|
||||
* `email` を保持して `id` を変更すると → ID が更新されます
|
||||
|
||||
As long as one unique identifier matches, Twenty updates the record.
|
||||
いずれか 1 つの一意の識別子が一致していれば、Twenty がレコードを更新します。
|
||||
</Note>
|
||||
|
||||
### How to Prevent This Error
|
||||
### このエラーの防止策
|
||||
|
||||
Before importing:
|
||||
インポート前：
|
||||
|
||||
1. Sort your spreadsheet by the unique field
|
||||
2. Remove duplicate rows
|
||||
3. Check if records already exist in Twenty
|
||||
1. スプレッドシートを一意のフィールドで並べ替える
|
||||
2. 重複行を削除する
|
||||
3. レコードが Twenty に既に存在するか確認する
|
||||
|
||||
<Warning>
|
||||
**Soft-deleted records count toward uniqueness.**
|
||||
**論理削除されたレコードも一意性の判定に含まれます。**
|
||||
|
||||
Check Command Menu → See deleted records. Records there still enforce uniqueness. Permanently delete them or restore and update.
|
||||
コマンドメニューを確認 → 削除済みレコードを表示。 そこにあるレコードにも一意性制約が適用されます。 完全に削除するか、復元して更新します。
|
||||
</Warning>
|
||||
|
||||
For more details: [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
詳細はこちら： [一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
|
||||
---
|
||||
|
||||
## Error: Invalid Format
|
||||
## エラー：無効な形式
|
||||
|
||||
### What You'll See
|
||||
### あなたが見るもの
|
||||
|
||||
The cell value is highlighted in yellow. Hover over it to see the error message:
|
||||
セルの値が黄色でハイライト表示されます。 カーソルを合わせるとエラーメッセージが表示されます：
|
||||
|
||||
```
|
||||
{field name} is not a valid {field type}
|
||||
{field name} は有効な {field type} ではありません
|
||||
```
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
The data doesn't match the expected format for that field type.
|
||||
データがそのフィールドタイプの想定形式と一致していません。
|
||||
|
||||
### How to Fix — By Field Type
|
||||
### 解決方法 — フィールドタイプ別
|
||||
|
||||
#### Email
|
||||
#### メール
|
||||
|
||||
**Problem:** Invalid email format
|
||||
**Solution:** Use format `name@domain.com`
|
||||
**問題:** 無効なメール形式
|
||||
**解決策:** `name@domain.com` 形式を使用する
|
||||
|
||||
```
|
||||
❌ john.smith@
|
||||
@@ -124,23 +124,23 @@ The data doesn't match the expected format for that field type.
|
||||
✓ john.smith@acme.com
|
||||
```
|
||||
|
||||
#### Domain
|
||||
#### ドメイン
|
||||
|
||||
**Problem:** Inconsistent format may cause duplicates
|
||||
**Solution:** Use `https://domain.com` format (recommended)
|
||||
**問題:** 形式の不一致は重複の原因になります
|
||||
**解決策:** `https://domain.com` 形式を使用（推奨）
|
||||
|
||||
```
|
||||
⚠️ acme.com (valid, but not recommended)
|
||||
⚠️ www.acme.com (valid, but not recommended)
|
||||
✅ https://acme.com (recommended)
|
||||
⚠️ acme.com （有効だが非推奨）
|
||||
⚠️ www.acme.com （有効だが非推奨）
|
||||
✅ https://acme.com （推奨）
|
||||
```
|
||||
|
||||
<Note>All formats are valid, but `https://domain.com` is recommended because it matches the format used by email/calendar sync. Using other formats may create duplicate companies.</Note>
|
||||
<Note>すべての形式は有効ですが、メール/カレンダー同期で使用される形式と一致するため、`https://domain.com` を推奨します。 他の形式を使用すると、会社が重複して作成される場合があります。</Note>
|
||||
|
||||
#### Date
|
||||
#### 日付
|
||||
|
||||
**Problem:** Unrecognized date format
|
||||
**Solution:** Use consistent format throughout file
|
||||
**問題:** 認識できない日付形式
|
||||
**解決策:** ファイル全体で形式を統一する
|
||||
|
||||
```
|
||||
✓ 2024-03-15 (YYYY-MM-DD - recommended)
|
||||
@@ -148,21 +148,21 @@ The data doesn't match the expected format for that field type.
|
||||
✓ 15/03/2024 (DD/MM/YYYY)
|
||||
```
|
||||
|
||||
#### Phone
|
||||
#### 電話
|
||||
|
||||
**Problem:** Missing required columns
|
||||
**Solution:** Include all phone columns
|
||||
**問題:** 必須列が不足
|
||||
**解決策:** すべての電話関連の列を含める
|
||||
|
||||
| Column | Example |
|
||||
| 列 | 例 |
|
||||
| --------------------------------------- | ------------ |
|
||||
| **Phones / Primary Phone Number** | `4159095555` |
|
||||
| **Phones / Primary Phone Country Code** | `US` |
|
||||
| **Phones / Primary Phone Calling Code** | `+1` |
|
||||
|
||||
#### Boolean
|
||||
#### ブール型
|
||||
|
||||
**Problem:** Wrong boolean value
|
||||
**Solution:** Use uppercase `TRUE` or `FALSE`
|
||||
**問題:** 不正なブール値
|
||||
**解決策:** 大文字の `TRUE` または `FALSE` を使用する
|
||||
|
||||
```
|
||||
❌ true
|
||||
@@ -172,37 +172,37 @@ The data doesn't match the expected format for that field type.
|
||||
✓ FALSE
|
||||
```
|
||||
|
||||
#### Select / Multi-Select
|
||||
#### セレクト／マルチセレクト
|
||||
|
||||
**Problem:** Value doesn't match existing options
|
||||
**Solution:** Use **API names**, not display labels
|
||||
**問題:** 値が既存のオプションと一致しない
|
||||
**解決策:** 表示ラベルではなく、**API 名**を使用する
|
||||
|
||||
How to find API names:
|
||||
API 名の確認方法:
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object and field
|
||||
3. Enable **Advanced mode** (toggle at bottom right)
|
||||
4. Use the API name (e.g., `OPTION_1`, not "Option 1")
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. オブジェクトとフィールドを選択する
|
||||
3. **詳細モード** を有効にする（右下のトグル）
|
||||
4. API 名を使用する（例：`OPTION_1`。"Option 1" ではありません）
|
||||
|
||||
```
|
||||
❌ High Priority
|
||||
✓ HIGH_PRIORITY
|
||||
```
|
||||
|
||||
#### Currency
|
||||
#### 通貨
|
||||
|
||||
**Problem:** Missing amount or currency code
|
||||
**Solution:** Fill both columns
|
||||
**問題:** 金額または通貨コードが欠落
|
||||
**解決策:** 両方の列を入力する
|
||||
|
||||
| Column | Example |
|
||||
| 列 | 例 |
|
||||
| --------------------- | --------- |
|
||||
| **Amount / Amount** | `1234.56` |
|
||||
| **Amount / Currency** | `USD` |
|
||||
|
||||
#### Number
|
||||
#### 数
|
||||
|
||||
**Problem:** Non-numeric characters
|
||||
**Solution:** Numbers only, period for decimals
|
||||
**問題:** 数値以外の文字を含む
|
||||
**解決策:** 数字のみを使用し、小数はピリオドを使用する
|
||||
|
||||
```
|
||||
❌ $1,234.56
|
||||
@@ -210,221 +210,221 @@ How to find API names:
|
||||
✓ 1234.56
|
||||
```
|
||||
|
||||
For complete format reference: [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
完全な形式のリファレンス: [フィールドマッピング](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
|
||||
---
|
||||
|
||||
## Error: Required Field Missing
|
||||
## エラー：必須フィールドが未入力
|
||||
|
||||
### What You'll See
|
||||
### あなたが見るもの
|
||||
|
||||
The row is highlighted in yellow with the required field cell marked.
|
||||
必須フィールドのセルがマークされ、その行が黄色でハイライト表示されます。
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
A required field is empty for this row.
|
||||
この行で必須フィールドが未入力です。
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
**Option 1: Enter a value**
|
||||
**オプション 1：値を入力**
|
||||
|
||||
1. Click the empty cell
|
||||
2. Enter a value
|
||||
3. Continue with import
|
||||
1. 空のセルをクリック
|
||||
2. 値を入力する
|
||||
3. インポートを続行
|
||||
|
||||
**Option 2: Remove the row**
|
||||
**オプション 2：行を削除**
|
||||
|
||||
1. If you don't have the data, click X to skip the row
|
||||
1. データがない場合は、X をクリックしてその行をスキップ
|
||||
|
||||
### How to Prevent This Error
|
||||
### このエラーの防止策
|
||||
|
||||
Before importing, identify required fields:
|
||||
インポート前に、必須フィールドを確認してください：
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select your object
|
||||
3. Check which fields are marked as required
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. 対象のオブジェクトを選択する
|
||||
3. どのフィールドが必須としてマークされているか確認する
|
||||
|
||||
---
|
||||
|
||||
## Error: Relation Not Found
|
||||
## エラー：リレーションが見つかりません
|
||||
|
||||
### What You'll See
|
||||
### あなたが見るもの
|
||||
|
||||
This error appears **after the import starts** — the import fails with a message like:
|
||||
このエラーは**インポート開始後**に発生します — 次のようなメッセージとともにインポートが失敗します：
|
||||
|
||||
```
|
||||
Can't connect to company. No unique record found with condition: id = 7776ee49-f608-4a77-8cc8-6fe96ae1e43f
|
||||
```
|
||||
|
||||
This means there is no Company in Twenty with that specific identifier.
|
||||
これは、その特定の識別子を持つ会社が Twenty に存在しないことを意味します。
|
||||
|
||||
<Note>Unlike other errors, this one is not caught during the data review step. The import will start and then fail when it encounters the missing relation.</Note>
|
||||
<Note>他のエラーと異なり、このエラーはデータレビューの段階では検出されません。 インポートは開始されますが、欠落しているリレーションに遭遇すると失敗します。</Note>
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
You're trying to link to a record that doesn't exist in Twenty.
|
||||
Twenty に存在しないレコードへリンクしようとしています。
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
**Option 1: Import parent records first**
|
||||
**オプション 1：まず親レコードをインポート**
|
||||
|
||||
1. Cancel the current import
|
||||
2. Import the parent records (e.g., Companies)
|
||||
3. Then import the child records (e.g., People)
|
||||
1. 現在のインポートをキャンセル
|
||||
2. 親レコード（例：会社）をインポート
|
||||
3. その後、子レコード（例：連絡先）をインポート
|
||||
|
||||
**Option 2: Fix the reference value**
|
||||
**オプション 2：参照値を修正**
|
||||
|
||||
1. Check the reference value in your file
|
||||
2. Ensure it exactly matches an existing record
|
||||
3. Verify format: domains should be `https://domain.com`
|
||||
1. ファイル内の参照値を確認
|
||||
2. 既存のレコードと完全一致していることを確認
|
||||
3. 形式を確認：ドメインは `https://domain.com` にする
|
||||
|
||||
**Option 3: Remove the relation**
|
||||
**オプション 3：リレーションを削除**
|
||||
|
||||
1. Clear the cell to import without the relation
|
||||
2. Add the relation manually later
|
||||
1. セルを空にして、リレーションなしでインポート
|
||||
2. 後で手動でリレーションを追加
|
||||
|
||||
### How to Prevent This Error
|
||||
### このエラーの防止策
|
||||
|
||||
1. **Import in the correct order:**
|
||||
* Companies first
|
||||
* People second (with company references)
|
||||
* Opportunities third
|
||||
1. **正しい順序でインポートする：**
|
||||
* まず会社
|
||||
* 次に連絡先（会社の参照付き）
|
||||
* 最後に商談
|
||||
|
||||
2. **Verify reference values:**
|
||||
* Export parent records to get exact identifiers
|
||||
* Use domain format `https://domain.com`
|
||||
* Check for typos and case sensitivity
|
||||
2. **参照値を検証する：**
|
||||
* 親レコードをエクスポートして正確な識別子を取得
|
||||
* ドメイン形式は `https://domain.com` を使用
|
||||
* 入力ミスや大文字・小文字の相違を確認
|
||||
|
||||
<Warning>
|
||||
**Import will fail if a reference is made to a non-existent record.**
|
||||
**存在しないレコードを参照している場合、インポートは失敗します。**
|
||||
|
||||
Always import parent objects before child objects.
|
||||
必ず子オブジェクトの前に親オブジェクトをインポートしてください。
|
||||
</Warning>
|
||||
|
||||
For more details: [Import Relations](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
詳細はこちら： [リレーションのインポート](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
|
||||
---
|
||||
|
||||
## Error: File Too Large
|
||||
## エラー：ファイルが大きすぎます
|
||||
|
||||
### What You'll See
|
||||
### あなたが見るもの
|
||||
|
||||
This error appears **when uploading your file** — the upload is blocked entirely:
|
||||
このエラーは**ファイルのアップロード時**に表示され、アップロードは完全にブロックされます：
|
||||
|
||||
```
|
||||
Too many records. Up to 10000 allowed
|
||||
```
|
||||
|
||||
You won't be able to proceed to the data review step until you reduce the file size.
|
||||
ファイルサイズを減らすまで、データレビューの段階に進むことはできません。
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
Your file has more than 10,000 records.
|
||||
ファイルのレコード数が 10,000 を超えています。
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
**Option 1: Split into multiple files**
|
||||
**オプション 1：複数のファイルに分割**
|
||||
|
||||
1. Divide your data into files of 10,000 records or fewer
|
||||
2. Import each file separately
|
||||
3. Maintain import order (Companies before People)
|
||||
1. データを 10,000 レコード以下のファイルに分割する
|
||||
2. 各ファイルを個別にインポートする
|
||||
3. インポートの順序を維持する（連絡先の前に会社）
|
||||
|
||||
**Option 2: Use API import**
|
||||
For very large datasets, use the API which has no record limit.
|
||||
See: [How to Import Data via API](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)
|
||||
**オプション 2：API インポートを使用**
|
||||
非常に大きなデータセットには、レコード数の制限がない API を使用してください。
|
||||
参照：[API でデータをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)
|
||||
|
||||
---
|
||||
|
||||
## Error: Field Not Recognized
|
||||
## エラー：フィールドが認識されません
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
A column in your file can't be mapped because the field doesn't exist in Twenty.
|
||||
ファイル内の列をマッピングできません。該当フィールドが Twenty に存在しないためです。
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object you're importing
|
||||
3. Click **+ Add field**
|
||||
4. Create the custom field with the appropriate type
|
||||
5. Re-upload your file
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. インポート対象のオブジェクトを選択する
|
||||
3. **+ Add field** をクリック
|
||||
4. 適切なタイプでカスタムフィールドを作成する
|
||||
5. ファイルを再アップロードする
|
||||
|
||||
<Note>The CSV import creates records, not fields. All fields must exist before importing.</Note>
|
||||
<Note>CSV インポートで作成されるのはレコードであり、フィールドではありません。 すべてのフィールドは、インポート前に存在している必要があります。</Note>
|
||||
|
||||
---
|
||||
|
||||
## Error: User Relation Empty
|
||||
## エラー：ユーザーのリレーションが空
|
||||
|
||||
### What It Means
|
||||
### 意味
|
||||
|
||||
You're trying to assign a record to a user (Owner, Assignee) but the relation isn't being mapped.
|
||||
レコードをユーザー（所有者、担当者）に割り当てようとしていますが、そのリレーションがマッピングされていません。
|
||||
|
||||
### Common Causes
|
||||
### よくある原因
|
||||
|
||||
1. **User hasn't accepted their invitation** — the user doesn't exist in Twenty yet
|
||||
2. **Using user ID from old system** — Twenty can't match IDs from another system
|
||||
3. **Wrong email format** — the email doesn't match the user's Twenty account
|
||||
1. **ユーザーが招待を受諾していない** — そのユーザーはまだ Twenty に存在していません
|
||||
2. **旧システムのユーザー ID を使用している** — Twenty は他システムの ID を照合できません
|
||||
3. **メール形式が不正** — 入力されたメールがユーザーの Twenty アカウントと一致していません
|
||||
|
||||
### How to Fix
|
||||
### 解決方法
|
||||
|
||||
1. Ensure all users have **accepted their invitation** to your Twenty workspace
|
||||
2. Use the user's **email address** (not their name or old system ID)
|
||||
3. Use the same email they used to join Twenty
|
||||
1. すべてのユーザーが Twenty ワークスペースへの**招待を受諾**していることを確認する
|
||||
2. ユーザーの**メールアドレス**を使用する（名前や旧システムの ID ではなく）
|
||||
3. Twenty に参加した際と同じメールアドレスを使用する
|
||||
|
||||
<Warning>
|
||||
**Users must accept invitations before importing.**
|
||||
**インポート前に、ユーザーは招待を受諾している必要があります。**
|
||||
|
||||
If a user hasn't accepted their invitation, records referencing them will have empty user relations.
|
||||
ユーザーが招待を受諾していない場合、そのユーザーを参照するレコードのユーザーリレーションは空になります。
|
||||
</Warning>
|
||||
|
||||
---
|
||||
|
||||
## Pre-Import Checklist
|
||||
## インポート前チェックリスト
|
||||
|
||||
Avoid errors by checking these before importing:
|
||||
インポート前に次を確認し、エラーを回避してください：
|
||||
|
||||
### File Requirements
|
||||
### ファイル要件
|
||||
|
||||
<Check>File is CSV, XLSX, or XLS format</Check>
|
||||
<Check>File has fewer than 10,000 records</Check>
|
||||
<Check>File uses UTF-8 encoding</Check>
|
||||
<Check>ファイル形式が CSV、XLSX、または XLS</Check>
|
||||
<Check>レコード数が 10,000 未満</Check>
|
||||
<Check>UTF-8 エンコードを使用</Check>
|
||||
|
||||
### Data Quality
|
||||
### データ品質
|
||||
|
||||
<Check>No duplicate emails (for People)</Check>
|
||||
<Check>No duplicate domains (for Companies)</Check>
|
||||
<Check>All dates use consistent format</Check>
|
||||
<Check>All domains use `https://domain.com` format</Check>
|
||||
<Check>メールの重複なし（連絡先）</Check>
|
||||
<Check>ドメインの重複なし（会社）</Check>
|
||||
<Check>すべての日付が一貫した形式</Check>
|
||||
<Check>すべてのドメインが `https://domain.com` 形式</Check>
|
||||
|
||||
### Field Formats
|
||||
### フィールドの形式
|
||||
|
||||
<Check>Boolean fields use `TRUE` or `FALSE` (uppercase)</Check>
|
||||
<Check>Select fields use API names, not display labels</Check>
|
||||
<Check>Phone fields have all required columns</Check>
|
||||
<Check>Currency fields have both Amount and Currency Code</Check>
|
||||
<Check>ブール型フィールドは `TRUE` または `FALSE`（大文字）を使用</Check>
|
||||
<Check>セレクト型フィールドは表示ラベルではなく API 名を使用</Check>
|
||||
<Check>電話フィールドに必要な列がすべて揃っている</Check>
|
||||
<Check>通貨フィールドに金額と通貨コードの両方がある</Check>
|
||||
|
||||
### Relations
|
||||
### 関連
|
||||
|
||||
<Check>Parent records imported before child records</Check>
|
||||
<Check>Relation columns reference existing records</Check>
|
||||
<Check>Domain format matches Twenty's format exactly</Check>
|
||||
<Check>親レコードを子レコードより先にインポート</Check>
|
||||
<Check>リレーション列が既存レコードを参照している</Check>
|
||||
<Check>ドメイン形式が Twenty の形式と完全一致</Check>
|
||||
|
||||
### Data Model
|
||||
### データモデル
|
||||
|
||||
<Check>All custom fields exist in Settings → Data Model</Check>
|
||||
<Check>Select options exist before importing</Check>
|
||||
<Check>すべてのカスタムフィールドが 設定 → データモデル に存在</Check>
|
||||
<Check>インポート前にセレクトの選択肢が作成済み</Check>
|
||||
|
||||
---
|
||||
|
||||
## Still Having Issues?
|
||||
## まだ問題がありますか？
|
||||
|
||||
If you've tried the above solutions:
|
||||
上記の解決策を試しても解決しない場合：
|
||||
|
||||
1. **Download the sample file** — see the exact format Twenty expects
|
||||
2. **Export existing records** — compare your file to working data
|
||||
3. **Test with a small batch** — try 5-10 rows first
|
||||
4. **Check the reference articles:**
|
||||
* [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [Import Relations](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
* [Error Handling](/l/ja/user-guide/data-migration/capabilities/error-handling)
|
||||
1. **サンプルファイルをダウンロード** — Twenty が想定する正確な形式を確認
|
||||
2. **既存レコードをエクスポート** — ファイルを動作しているデータと比較
|
||||
3. **少量でテスト** — まず 5〜10 行で試す
|
||||
4. **参考記事を確認：**
|
||||
* [フィールドマッピング](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [リレーションのインポート](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
* [エラー処理](/l/ja/user-guide/data-migration/capabilities/error-handling)
|
||||
|
||||
+100
-100
@@ -1,71 +1,71 @@
|
||||
---
|
||||
title: Import Companies via CSV
|
||||
description: Complete step-by-step guide to importing companies into Twenty.
|
||||
title: CSV ファイルで会社をインポートする
|
||||
description: Twenty に会社をインポートするための完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through importing your companies into Twenty. **Companies should be imported first** because People and Opportunities link to Companies.
|
||||
このガイドでは、会社を Twenty にインポートする手順を説明します。 **まず Companies をインポートしてください**。People と Opportunities は Companies にリンクします。
|
||||
|
||||
## Before You Start
|
||||
## 始める前に
|
||||
|
||||
### Prerequisites Checklist
|
||||
### 事前準備チェックリスト
|
||||
|
||||
<Check>
|
||||
Your file is CSV, XLSX, or XLS format
|
||||
ファイル形式が CSV、XLSX、または XLS である
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
File has fewer than 10,000 records
|
||||
ファイルのレコード数が 10,000 未満
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
No duplicate domains in your file
|
||||
ファイル内に重複するドメインがない
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
All custom fields exist in **Settings → Data Model**
|
||||
すべてのカスタムフィールドが **Settings → Data Model** に存在する
|
||||
</Check>
|
||||
|
||||
<Note>
|
||||
Need to import more than 10,000 companies? Split into multiple files or use the [API import](/l/ja/user-guide/data-migration/how-tos/import-data-via-api).
|
||||
10,000 社を超えてインポートする必要がありますか？ 複数のファイルに分割するか、[API インポート](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) を使用します。
|
||||
</Note>
|
||||
|
||||
## Step 1: Prepare Your Company Data
|
||||
## ステップ 1: 会社データを準備する
|
||||
|
||||
### Required and Recommended Fields
|
||||
### 必須および推奨フィールド
|
||||
|
||||
| Field | Required? | Format | Notes |
|
||||
| ----------------- | ----------- | -------------------- | ------------------------ |
|
||||
| **Name** | Recommended | Text | Company display name |
|
||||
| **Domain** | Recommended | `https://domain.com` | Unique identifier |
|
||||
| **Address** | Optional | Multiple columns | See below |
|
||||
| **Employees** | Optional | Number | Employee count |
|
||||
| **Custom fields** | Optional | Varies | Must exist in Data Model |
|
||||
| フィールド | 必須? | 形式 | ノート |
|
||||
| ------------- | --- | -------------------- | --------------------- |
|
||||
| **Name** | 推奨 | テキスト | 会社の表示名 |
|
||||
| **ドメイン** | 推奨 | `https://domain.com` | 一意の識別子 |
|
||||
| **住所** | 任意 | 複数の列 | 以下を参照 |
|
||||
| **従業員** | 任意 | 数 | 従業員数 |
|
||||
| **カスタムフィールド** | 任意 | 項目により異なる | データモデル内に存在している必要があります |
|
||||
|
||||
### Domain Format
|
||||
### ドメイン形式
|
||||
|
||||
<Warning>
|
||||
**Use the format `https://domain.com` for domains.**
|
||||
**ドメインには `https://domain.com` の形式を使用してください。**
|
||||
|
||||
This matches the format used when Companies are auto-created from email/calendar sync, preventing duplicates later.
|
||||
これは、メール／カレンダー同期から Companies が自動作成される際に使用される形式と一致し、後の重複を防ぎます。
|
||||
</Warning>
|
||||
|
||||
**Domain columns:**
|
||||
**ドメイン列:**
|
||||
|
||||
* **Domain / Domain Label**: `acme.com`
|
||||
* **Domain / Domain URL**: `https://acme.com`
|
||||
|
||||
### Address Format
|
||||
### 住所形式
|
||||
|
||||
Address is a nested field with multiple columns:
|
||||
住所は複数の列を必要とする**ネストされたフィールド**です:
|
||||
|
||||
```
|
||||
Address / Address 1,Address / City,Address / State,Address / Country,Address / Post Code
|
||||
123 Main Street,San Francisco,CA,USA,94105
|
||||
```
|
||||
|
||||
### Sample CSV Structure
|
||||
### CSV のサンプル構造
|
||||
|
||||
```csv
|
||||
name,Domain / Domain URL,Domain / Domain Label,Address / City,Address / Country,employees
|
||||
@@ -74,128 +74,128 @@ Widget Co,https://widgets.co,widgets.co,New York,USA,50
|
||||
```
|
||||
|
||||
<Note>
|
||||
**Pro tip:** Click **Download sample file** during import to see the exact column names Twenty expects.
|
||||
**プロのヒント:** インポート中に **Download sample file** をクリックして、Twenty が想定する正確な列名を確認してください。
|
||||
</Note>
|
||||
|
||||
## Step 2: Access the Import Feature
|
||||
## ステップ 2: インポート機能にアクセスする
|
||||
|
||||
**Option 1: From the Companies View**
|
||||
**オプション 1: Companies ビューから**
|
||||
|
||||
1. Navigate to **Companies** in the left sidebar
|
||||
2. Click the **⋮** icon on the top right
|
||||
3. Select **Import records**
|
||||
1. 左側のサイドバーで **Companies** に移動します
|
||||
2. 右上の **⋮** アイコンをクリックします
|
||||
3. **Import records** を選択します
|
||||
|
||||
**Option 2: Using Command Menu**
|
||||
**オプション 2: Command メニューを使用**
|
||||
|
||||
1. Press `Cmd + K` (Mac) or `Ctrl + K` (Windows)
|
||||
2. Type "import"
|
||||
3. Select **Import records**
|
||||
4. Choose **Companies**
|
||||
1. `Cmd + K`（Mac）または`Ctrl + K`（Windows）を押します
|
||||
2. "import" と入力します
|
||||
3. **Import records** を選択します
|
||||
4. **Companies** を選択します
|
||||
|
||||
## Step 3: Upload Your File
|
||||
## ステップ 3: ファイルをアップロードする
|
||||
|
||||
1. Click **Select file**
|
||||
2. Choose your CSV, XLSX, or XLS file
|
||||
3. Wait for Twenty to analyze your file
|
||||
1. **Select file** をクリックします
|
||||
2. CSV、XLSX、または XLS ファイルを選択します
|
||||
3. Twenty がファイルを解析するまで待ちます
|
||||
|
||||
## Step 4: Map Your Columns
|
||||
## ステップ 4: 列をマッピングする
|
||||
|
||||
Twenty automatically tries to match your columns to fields. Review and adjust:
|
||||
Twenty は列をフィールドに自動的に照合しようとします。 確認して調整します:
|
||||
|
||||
1. **Check automatic mappings** — verify they're correct
|
||||
2. **Fix incorrect mappings** — click the dropdown to select the right field
|
||||
3. **Skip columns** — select **Do not map** for columns you don't want to import
|
||||
1. **自動マッピングを確認** — 正しいことを検証します
|
||||
2. **誤ったマッピングを修正** — ドロップダウンをクリックして正しいフィールドを選択します
|
||||
3. **列をスキップ** — インポートしたくない列には **Do not map** を選択します
|
||||
|
||||
### Important Mapping Rules
|
||||
### 重要なマッピングルール
|
||||
|
||||
* **Domain**: Map to **Domain / Domain URL** (not Domain Label)
|
||||
* **Address**: Map each part to its specific column (City, State, etc.)
|
||||
* **Select fields**: Values must match existing options (or you'll map them in the next step)
|
||||
* **Domain**: **Domain / Domain URL** にマップします（Domain Label ではありません）
|
||||
* **住所**: 各項目を対応する列（City、State など）にマップします
|
||||
* **Select フィールド**: 値は既存のオプションと一致している必要があります（次のステップでマッピングすることもできます）
|
||||
|
||||
<img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}} />
|
||||
|
||||
## Step 5: Map Select Field Values
|
||||
## ステップ 5: Select フィールドの値をマッピングする
|
||||
|
||||
If you have Select or Multi-Select fields:
|
||||
Select または Multi-Select フィールドがある場合:
|
||||
|
||||
1. Twenty shows your values alongside existing options
|
||||
2. Match each value in your file to a Twenty option
|
||||
3. Or create new options if needed
|
||||
1. Twenty は、既存のオプションと並べて値を表示します
|
||||
2. ファイル内の各値を Twenty のオプションに対応付けます
|
||||
3. 必要に応じて新しいオプションを作成します
|
||||
|
||||
<Note>
|
||||
Select options use **API names**, not display labels. Check **Settings → Data Model** → Enable **Advanced mode** to see API names.
|
||||
Select のオプションは表示ラベルではなく、**API 名**を使用します。 API 名を確認するには、**Settings → Data Model** で **Advanced mode** を有効にします。
|
||||
</Note>
|
||||
|
||||
## Step 6: Review and Fix Errors
|
||||
## ステップ 6: エラーを確認して修正
|
||||
|
||||
Before completing the import, Twenty validates your data:
|
||||
インポートを完了する前に、Twenty がデータを検証します:
|
||||
|
||||
1. Click **Next Steps**
|
||||
2. Rows with errors are highlighted in **yellow**
|
||||
3. **Fix errors directly** — click a cell and edit the value
|
||||
4. **Remove problematic rows** — click the X to skip that row
|
||||
1. **Next Steps** をクリックします
|
||||
2. エラーのある行は **黄色** で強調表示されます
|
||||
3. **エラーを直接修正** — セルをクリックして値を編集します
|
||||
4. **問題のある行を削除** — その行をスキップするには X をクリックします
|
||||
|
||||
### Common Company Import Errors
|
||||
### 一般的な会社インポートのエラー
|
||||
|
||||
| Error | Cause | Solution |
|
||||
| -------------------------- | ------------------------------- | ------------------------------------------ |
|
||||
| **Duplicate domain** | Domain already exists in Twenty | Remove from file or update existing record |
|
||||
| **Invalid domain format** | Wrong format | Use `https://domain.com` |
|
||||
| **Missing required field** | Required field is empty | Fill in the value or remove the row |
|
||||
| エラー | 原因 | 解決策 |
|
||||
| -------------- | -------------------- | --------------------------- |
|
||||
| **重複したドメイン** | ドメインが Twenty に既に存在する | ファイルから削除するか、既存のレコードを更新します |
|
||||
| **無効なドメイン形式** | 形式の誤り | `https://domain.com` を使用します |
|
||||
| **必須フィールドの欠落** | 必須フィールドが空です | 値を入力するか、その行を削除します |
|
||||
|
||||
## Step 7: Complete the Import
|
||||
## ステップ 7: インポートを完了する
|
||||
|
||||
1. Review the import summary
|
||||
2. Click **Confirm** to import
|
||||
3. Wait for the import to complete
|
||||
4. Verify by checking a few records
|
||||
1. インポートの概要を確認します
|
||||
2. インポートするには **Confirm** をクリックします
|
||||
3. インポートが完了するまで待ちます
|
||||
4. いくつかのレコードを確認して検証します
|
||||
|
||||
## After Importing Companies
|
||||
## 会社をインポートした後
|
||||
|
||||
Now you can import records that link to Companies:
|
||||
これで、Companies にリンクするレコードをインポートできます:
|
||||
|
||||
1. **[Import People](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)** — link them to Companies using the domain
|
||||
2. **Import Opportunities** — link them to Companies
|
||||
3. **Verify the import** — spot-check a few records to ensure data is correct
|
||||
1. **[People をインポート](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)** — ドメインを使って Companies にリンクします
|
||||
2. **Opportunities をインポート** — Companies にリンクします
|
||||
3. **インポートを検証** — データが正しいことを確認するために、いくつかのレコードを抜き取り確認します
|
||||
|
||||
## Updating Existing Companies
|
||||
## 既存の会社を更新する
|
||||
|
||||
To update companies instead of creating new ones:
|
||||
新規作成ではなく会社を更新するには:
|
||||
|
||||
1. Include the `domain` or `id` column in your file
|
||||
2. Twenty matches records by this unique identifier
|
||||
3. Existing companies are updated; new ones are created
|
||||
1. ファイルに `domain` または `id` 列を含めます
|
||||
2. Twenty はこの一意の識別子でレコードを照合します
|
||||
3. 既存の会社は更新され、新規は作成されます
|
||||
|
||||
See [How to Update Existing Records](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) for details.
|
||||
詳細は [既存レコードを更新する方法](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) を参照してください。
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Why can't two Companies have the same domain?">
|
||||
Domain is a unique identifier in Twenty. This prevents duplicate companies and ensures email sync correctly links emails to the right company.
|
||||
<Accordion title="なぜ 2 社が同じドメインを持つことはできないのですか？">
|
||||
ドメインは Twenty における一意の識別子です。 これにより会社の重複を防ぎ、メール同期でメールが正しい会社にリンクされるようになります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What if I have companies without a domain?">
|
||||
You can leave the domain empty. However, we recommend adding domains when possible for better data quality and automatic email linking.
|
||||
<Accordion title="ドメインのない会社がある場合はどうすればよいですか？">
|
||||
ドメインは空のままでもかまいません。 ただし、データ品質を高め自動メールリンクのため、可能であればドメインの追加を推奨します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I import companies without any People linked?">
|
||||
Yes! You can import companies first, then import People later and link them using the company domain.
|
||||
<Accordion title="People にリンクされていない会社をインポートできますか？">
|
||||
はい! 最初に会社をインポートし、その後に People をインポートして、会社のドメインを使用して関連付けることができます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What happens if I import a domain that already exists?">
|
||||
If you include a unique identifier (domain or id) that matches an existing company, Twenty updates that company instead of creating a duplicate.
|
||||
<Accordion title="既に存在するドメインをインポートした場合はどうなりますか？">
|
||||
既存の会社と一致する一意の識別子（ドメインまたは id）を含めた場合、Twenty は重複を作成せず、その会社を更新します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I fix 'duplicate domain' errors?">
|
||||
Either remove the duplicate from your file, or include the company's `id` to update the existing record instead.
|
||||
<Accordion title="「duplicate domain」エラーはどのように修正しますか？">
|
||||
ファイルから重複を削除するか、代わりに会社の `id` を含めて既存のレコードを更新してください。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
Having issues? Check:
|
||||
お困りですか？ 次を確認してください:
|
||||
|
||||
* [How to Fix Import Errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [Field Mapping Reference](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [インポートエラーを解決する方法](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [フィールドマッピングのリファレンス](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
|
||||
+125
-125
@@ -1,90 +1,90 @@
|
||||
---
|
||||
title: Import Contacts via CSV
|
||||
description: Complete step-by-step guide to importing people/contacts into Twenty.
|
||||
title: CSV ファイルで連絡先をインポートする
|
||||
description: Twenty に連絡先（People）をインポートするための完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through importing your contacts (People) into Twenty. **Import Companies first** if you want to link People to Companies.
|
||||
このガイドでは、連絡先（People）を Twenty にインポートする手順を説明します。 People を会社に関連付けたい場合は、**会社を先にインポート**してください。
|
||||
|
||||
## Before You Start
|
||||
## 始める前に
|
||||
|
||||
### Prerequisites Checklist
|
||||
### 事前準備チェックリスト
|
||||
|
||||
<Check>
|
||||
Your file is CSV, XLSX, or XLS format
|
||||
ファイル形式が CSV、XLSX、または XLS である
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
File has fewer than 10,000 records
|
||||
ファイルのレコード数が 10,000 未満
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
No duplicate email addresses in your file
|
||||
ファイル内に重複するメールアドレスがない
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
**Companies imported first** (if linking People to Companies)
|
||||
**会社を先にインポート**（People を会社に関連付ける場合）
|
||||
</Check>
|
||||
|
||||
<Check>
|
||||
All custom fields exist in **Settings → Data Model**
|
||||
すべてのカスタムフィールドが **Settings → Data Model** に存在する
|
||||
</Check>
|
||||
|
||||
<Warning>
|
||||
**Import Companies Before People**
|
||||
**People の前に会社をインポート**
|
||||
|
||||
If you want to link People to Companies, import Companies first. The Company must exist before you can reference it.
|
||||
People を会社に関連付けたい場合は、まず会社をインポートしてください。 参照する前に、その会社が存在している必要があります。
|
||||
</Warning>
|
||||
|
||||
## Step 1: Prepare Your Contact Data
|
||||
## ステップ 1: 連絡先データを準備する
|
||||
|
||||
### Required and Recommended Fields
|
||||
### 必須および推奨フィールド
|
||||
|
||||
| Field | Required? | Format | Notes |
|
||||
| ----------------- | ----------- | ----------------- | ------------------------- |
|
||||
| **Email** | Recommended | `name@domain.com` | Must be unique |
|
||||
| **First Name** | Recommended | Text | |
|
||||
| **Last Name** | Recommended | Text | |
|
||||
| **Company** | Optional | Domain or ID | Links to existing Company |
|
||||
| **Phone** | Optional | Multiple columns | See below |
|
||||
| **Job Title** | Optional | Text | |
|
||||
| **Custom fields** | Optional | Varies | Must exist in Data Model |
|
||||
| フィールド | 必須? | 形式 | ノート |
|
||||
| ------------- | --- | ----------------- | --------------------- |
|
||||
| **メール** | 推奨 | `name@domain.com` | 一意である必要があります |
|
||||
| **名** | 推奨 | テキスト | |
|
||||
| **姓** | 推奨 | テキスト | |
|
||||
| **会社** | 任意 | ドメインまたは ID | 既存の会社にリンクします |
|
||||
| **電話** | 任意 | 複数の列 | 以下を参照 |
|
||||
| **職種** | 任意 | テキスト | |
|
||||
| **カスタムフィールド** | 任意 | 項目により異なる | データモデル内に存在している必要があります |
|
||||
|
||||
### Email Format
|
||||
### メール形式
|
||||
|
||||
* Must be valid email format: `name@domain.com`
|
||||
* **Must be unique** — no duplicates in your file or in Twenty
|
||||
* For additional emails, use the **Emails / Additional Emails** column:
|
||||
* 有効なメール形式である必要があります: `name@domain.com`
|
||||
* **一意である必要があります** — ファイル内や Twenty 内に重複がないこと
|
||||
* 追加のメールには、**Emails / Additional Emails** 列を使用してください:
|
||||
|
||||
```
|
||||
["jane@twenty.com","jane.doe@twenty.com"]
|
||||
```
|
||||
|
||||
### Phone Format
|
||||
### 電話番号の形式
|
||||
|
||||
Phone is a **nested field** requiring multiple columns:
|
||||
電話番号は複数の列を必要とする**ネストされたフィールド**です:
|
||||
|
||||
| Column | Example |
|
||||
| 列 | 例 |
|
||||
| --------------------------------------- | ------------ |
|
||||
| **Phones / Primary Phone Number** | `4159095555` |
|
||||
| **Phones / Primary Phone Country Code** | `US` |
|
||||
| **Phones / Primary Phone Calling Code** | `+1` |
|
||||
|
||||
### Linking to Companies
|
||||
### 会社への関連付け
|
||||
|
||||
Add a column with the Company's unique identifier:
|
||||
会社の一意の識別子を含む列を追加します:
|
||||
|
||||
| Column Name | Format | Example |
|
||||
| --------------- | ---------- | -------------------------------------- |
|
||||
| `companyDomain` | URL format | `https://acme.com` |
|
||||
| `companyId` | UUID | `c776ee49-f608-4a77-8cc8-6fe96ae1e43f` |
|
||||
| 列名 | 形式 | 例 |
|
||||
| --------------- | ------ | -------------------------------------- |
|
||||
| `companyDomain` | URL 形式 | `https://acme.com` |
|
||||
| `companyId` | UUID | `c776ee49-f608-4a77-8cc8-6fe96ae1e43f` |
|
||||
|
||||
<Note>
|
||||
**Use Domain URL format** (`https://acme.com`), not the label. This matches how Companies are stored in Twenty.
|
||||
**ドメインの URL 形式**（`https://acme.com`）を使用し、ラベルは使用しないでください。 これは Twenty における会社の保存方式に一致します。
|
||||
</Note>
|
||||
|
||||
### Sample CSV Structure
|
||||
### CSV のサンプル構造
|
||||
|
||||
```csv
|
||||
firstName,lastName,email,jobTitle,companyDomain,Phones / Primary Phone Number,Phones / Primary Phone Country Code
|
||||
@@ -93,150 +93,150 @@ Jane,Doe,jane@widgets.co,CTO,https://widgets.co,2125551234,US
|
||||
```
|
||||
|
||||
<Note>
|
||||
**Pro tip:** Click **Download sample file** during import or export a few existing People to see the exact column names Twenty expects.
|
||||
**プロのヒント:** インポート中に **Download sample file** をクリックするか、既存の People をいくつかエクスポートして、Twenty が想定する正確な列名を確認してください。
|
||||
</Note>
|
||||
|
||||
## Step 2: Access the Import Feature
|
||||
## ステップ 2: インポート機能にアクセスする
|
||||
|
||||
**Option 1: From the People View**
|
||||
**オプション 1: People ビューから**
|
||||
|
||||
1. Navigate to **People** in the left sidebar
|
||||
2. Click the **⋮** icon on the top right
|
||||
3. Select **Import records**
|
||||
1. 左側のサイドバーで **People** に移動します
|
||||
2. 右上の **⋮** アイコンをクリックします
|
||||
3. **Import records** を選択します
|
||||
|
||||
**Option 2: Using Command Menu**
|
||||
**オプション 2: Command メニューを使用**
|
||||
|
||||
1. Press `Cmd + K` (Mac) or `Ctrl + K` (Windows)
|
||||
2. Type "import"
|
||||
3. Select **Import records**
|
||||
4. Choose **People**
|
||||
1. `Cmd + K`（Mac）または`Ctrl + K`（Windows）を押します
|
||||
2. "import" と入力します
|
||||
3. **Import records** を選択します
|
||||
4. **People** を選択します
|
||||
|
||||
## Step 3: Upload Your File
|
||||
## ステップ 3: ファイルをアップロードする
|
||||
|
||||
1. Click **Select file**
|
||||
2. Choose your CSV, XLSX, or XLS file
|
||||
3. Wait for Twenty to analyze your file
|
||||
1. **Select file** をクリックします
|
||||
2. CSV、XLSX、または XLS ファイルを選択します
|
||||
3. Twenty がファイルを解析するまで待ちます
|
||||
|
||||
## Step 4: Map Your Columns
|
||||
## ステップ 4: 列をマッピングする
|
||||
|
||||
Twenty automatically tries to match your columns to fields. Review and adjust:
|
||||
Twenty は列をフィールドに自動的に照合しようとします。 確認して調整します:
|
||||
|
||||
1. **Check automatic mappings** — verify they're correct
|
||||
2. **Fix incorrect mappings** — click the dropdown to select the right field
|
||||
3. **Skip columns** — select **Do not map** for columns you don't want to import
|
||||
1. **自動マッピングを確認** — 正しいことを検証します
|
||||
2. **誤ったマッピングを修正** — ドロップダウンをクリックして正しいフィールドを選択します
|
||||
3. **列をスキップ** — インポートしたくない列には **Do not map** を選択します
|
||||
|
||||
### Important Mapping Rules
|
||||
### 重要なマッピングルール
|
||||
|
||||
| Column Type | Map To | Notes |
|
||||
| ----------------- | ------------------------------ | ---------------------------------- |
|
||||
| Company reference | **Company** relation field | Use domain OR id, not both |
|
||||
| Email | **Email** | Primary email address |
|
||||
| Additional emails | **Emails / Additional Emails** | Array format |
|
||||
| Phone | Separate columns | Number, Country Code, Calling Code |
|
||||
| 列の種類 | マッピング先 | ノート |
|
||||
| ------ | ------------------------------ | ------------------------------------ |
|
||||
| 会社参照 | **会社** の関連フィールド | ドメインまたは ID のいずれか一方を使用し、両方は使用しないでください |
|
||||
| メール | **メール** | プライマリメールアドレス |
|
||||
| 追加のメール | **Emails / Additional Emails** | 配列形式 |
|
||||
| 電話 | 別々の列 | 番号、国コード、Calling Code |
|
||||
|
||||
<img src="/images/user-guide/import-export-data/match-columns.png" style={{width:'100%'}} />
|
||||
|
||||
### Mapping the Company Relation
|
||||
### 会社リレーションのマッピング
|
||||
|
||||
When mapping the company column:
|
||||
会社列をマッピングする際:
|
||||
|
||||
1. Find your company reference column (e.g., `companyDomain`)
|
||||
2. Map it to the **Company** relation field
|
||||
3. Twenty will link each Person to the matching Company
|
||||
1. 会社参照列（例: `companyDomain`）を見つけます
|
||||
2. それを **会社** の関連フィールドにマッピングします
|
||||
3. Twenty は各 People レコードを対応する会社にリンクします
|
||||
|
||||
<Warning>
|
||||
**Map only ONE unique identifier for relations.**
|
||||
**リレーションには一意の識別子を必ず1つだけマッピングしてください。**
|
||||
|
||||
Don't map both `companyId` AND `companyDomain`. Choose one—preferably domain since it's human-readable.
|
||||
`companyId` と `companyDomain` の両方をマッピングしないでください。 どちらか一方を選択してください—人間が読みやすいので、可能であればドメインを推奨します。
|
||||
</Warning>
|
||||
|
||||
## Step 5: Map Select Field Values
|
||||
## ステップ 5: Select フィールドの値をマッピングする
|
||||
|
||||
If you have Select or Multi-Select fields (like Lead Source):
|
||||
Select または Multi-Select フィールド（例: リードソース）がある場合:
|
||||
|
||||
1. Twenty shows your values alongside existing options
|
||||
2. Match each value in your file to a Twenty option
|
||||
3. Or create new options if needed
|
||||
1. Twenty は、既存のオプションと並べて値を表示します
|
||||
2. ファイル内の各値を Twenty のオプションに対応付けます
|
||||
3. 必要に応じて新しいオプションを作成します
|
||||
|
||||
<Note>
|
||||
Select options use **API names**, not display labels. Check **Settings → Data Model** → Enable **Advanced mode** to see API names.
|
||||
Select のオプションは表示ラベルではなく、**API 名**を使用します。 API 名を確認するには、**Settings → Data Model** で **Advanced mode** を有効にします。
|
||||
</Note>
|
||||
|
||||
## Step 6: Review and Fix Errors
|
||||
## ステップ 6: エラーを確認して修正
|
||||
|
||||
Before completing the import, Twenty validates your data:
|
||||
インポートを完了する前に、Twenty がデータを検証します:
|
||||
|
||||
1. Click **Next Steps**
|
||||
2. Rows with errors are highlighted in **yellow**
|
||||
3. **Fix errors directly** — click a cell and edit the value
|
||||
4. **Remove problematic rows** — click the X to skip that row
|
||||
1. **Next Steps** をクリックします
|
||||
2. エラーのある行は **黄色** で強調表示されます
|
||||
3. **エラーを直接修正** — セルをクリックして値を編集します
|
||||
4. **問題のある行を削除** — その行をスキップするには X をクリックします
|
||||
|
||||
### Common Contact Import Errors
|
||||
### 一般的な連絡先インポートのエラー
|
||||
|
||||
| Error | Cause | Solution |
|
||||
| -------------------------- | -------------------------------------- | ------------------------------------------- |
|
||||
| **Duplicate email** | Email already exists in Twenty or file | Remove duplicate or update existing record |
|
||||
| **Invalid email format** | Email format incorrect | Fix to `name@domain.com` |
|
||||
| **Relation not found** | Company doesn't exist | Import Companies first or fix the reference |
|
||||
| **Missing required field** | Required field is empty | Fill in the value or remove the row |
|
||||
| エラー | 原因 | 解決策 |
|
||||
| ------------------ | ------------------------------- | --------------------------- |
|
||||
| **重複したメールアドレス** | メールアドレスが Twenty またはファイルに既に存在します | 重複を削除するか、既存のレコードを更新します |
|
||||
| **無効なメールアドレス形式** | メールアドレスの形式が正しくありません | `name@domain.com` の形式に修正します |
|
||||
| **リレーションが見つかりません** | 会社が存在しません | 先に会社をインポートするか、参照を修正します |
|
||||
| **必須フィールドの欠落** | 必須フィールドが空です | 値を入力するか、その行を削除します |
|
||||
|
||||
## Step 7: Complete the Import
|
||||
## ステップ 7: インポートを完了する
|
||||
|
||||
1. Review the import summary
|
||||
2. Click **Confirm** to import
|
||||
3. Wait for the import to complete
|
||||
4. Verify by checking a few records and their Company links
|
||||
1. インポートの概要を確認します
|
||||
2. インポートするには **Confirm** をクリックします
|
||||
3. インポートが完了するまで待ちます
|
||||
4. いくつかのレコードを確認し、それらの Company リンクをチェックして検証します
|
||||
|
||||
## After Importing Contacts
|
||||
## 連絡先をインポートした後
|
||||
|
||||
Your contacts are now in Twenty! Next steps:
|
||||
連絡先は Twenty に追加されました！ 次のステップ:
|
||||
|
||||
1. **Verify Company links** — open a few People records to confirm they're linked to the right Company
|
||||
2. **Import Opportunities** — if needed, link them to People and Companies
|
||||
3. **Set up email sync** — connect your mailbox to see email history on contact records
|
||||
1. **会社リンクを確認** — いくつかの People レコードを開き、正しい会社にリンクされていることを確認します
|
||||
2. **Opportunities をインポート** — 必要に応じて、People や Companies にリンクします
|
||||
3. **メール同期を設定** — メールボックスを接続して、連絡先レコード上でメール履歴を確認します
|
||||
|
||||
## Updating Existing Contacts
|
||||
## 既存の連絡先を更新する
|
||||
|
||||
To update contacts instead of creating new ones:
|
||||
新規作成ではなく連絡先を更新するには:
|
||||
|
||||
1. Include the `email` or `id` column in your file
|
||||
2. Twenty matches records by this unique identifier
|
||||
3. Existing contacts are updated; new ones are created
|
||||
1. ファイルに `email` または `id` 列を含めます
|
||||
2. Twenty はこの一意の識別子でレコードを照合します
|
||||
3. 既存の連絡先は更新され、新規は作成されます
|
||||
|
||||
See [How to Update Existing Records](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) for details.
|
||||
詳細は [既存レコードを更新する方法](/l/ja/user-guide/data-migration/how-tos/update-existing-records-via-import) を参照してください。
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Why can't two People have the same email?">
|
||||
Email is a unique identifier in Twenty. This prevents duplicate contacts and ensures email sync correctly links emails to the right person.
|
||||
<Accordion title="なぜ 2人の People が同じメールアドレスを持つことはできないのですか？">
|
||||
メールアドレスは Twenty における一意の識別子です。 これにより連絡先の重複を防ぎ、メール同期でメールが正しい人物にリンクされるようになります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What if I have people without an email?">
|
||||
You can leave the email empty. However, we recommend adding emails when possible for better data quality and email sync functionality.
|
||||
<Accordion title="メールアドレスのない人がいる場合はどうすればよいですか？">
|
||||
メールアドレスは空のままでもかまいません。 ただし、データ品質とメール同期機能を高めるため、可能であればメールアドレスの追加を推奨します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I link People to Companies during import?">
|
||||
Add a column with the Company's domain (e.g., `https://acme.com`) or ID. During mapping, connect this column to the Company relation field.
|
||||
<Accordion title="インポート中に People を Companies にリンクするにはどうすればよいですか？">
|
||||
Company のドメイン（例: `https://acme.com`）または ID の列を追加します マッピング時に、この列を Company のリレーションフィールドに関連付けます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What if the Company doesn't exist yet?">
|
||||
Import Companies first, then import People. The Company must exist before you can reference it.
|
||||
<Accordion title="Company がまだ存在しない場合はどうすればよいですか？">
|
||||
まず Companies をインポートし、その後 People をインポートします。 参照する前に、その Company が存在している必要があります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I import the ID from my previous CRM?">
|
||||
Yes! Create a custom field marked as "unique" in your data model to store the external ID. Note: the field name `id` is reserved for Twenty's internal ID.
|
||||
<Accordion title="以前の CRM の ID をインポートできますか？">
|
||||
はい! 外部 ID を保存するために、データモデルで "unique" に指定したカスタムフィールドを作成します。 注意: フィールド名 `id` は Twenty の内部 ID 用に予約されています。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I fix 'relation not found' errors?">
|
||||
The Company you're referencing doesn't exist. Either import the Company first, or check that the domain/ID exactly matches an existing Company.
|
||||
<Accordion title="「relation not found」エラーはどのように修正しますか？">
|
||||
参照している Company が存在しません。 Company を先にインポートするか、ドメイン/ID が既存の Company と完全に一致しているか確認してください。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
Having issues? Check:
|
||||
お困りですか？ 次を確認してください:
|
||||
|
||||
* [How to Fix Import Errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [How to Import Relations](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
* [Field Mapping Reference](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [インポートエラーを解決する方法](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [リレーションをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
* [フィールドマッピングのリファレンス](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
|
||||
+106
-106
@@ -1,176 +1,176 @@
|
||||
---
|
||||
title: Import Data via API
|
||||
description: When and how to use Twenty's APIs for large-scale data imports.
|
||||
title: API でデータをインポートする
|
||||
description: 大規模なデータインポートに Twenty の API をいつ・どのように使用するか。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Twenty provides both **GraphQL** and **REST APIs** for programmatic data import. Use the API when CSV import isn't practical for your data volume or when you need automated, recurring imports.
|
||||
Twenty は、プログラムによるデータインポートのために **GraphQL** と **REST API** の両方を提供しています。 CSV インポートがデータ量の観点で現実的でない場合、または自動化された定期的なインポートが必要な場合は、API を使用してください。
|
||||
|
||||
## When to Use API Import
|
||||
## API インポートを使うべきタイミング
|
||||
|
||||
| Scenario | Recommended Method |
|
||||
| ---------------------------------- | ----------------------------- |
|
||||
| Under 10,000 records | CSV Import |
|
||||
| 10,000 - 50,000 records | CSV Import (split into files) |
|
||||
| **50,000+ records** | **API Import** |
|
||||
| One-time migration | Either (based on volume) |
|
||||
| **Recurring imports** | **API Import** |
|
||||
| **Real-time sync** | **API Import** |
|
||||
| **Integration with other systems** | **API Import** |
|
||||
| シナリオ | 推奨アプローチ |
|
||||
| ------------- | ----------------- |
|
||||
| 1 万件未満 | CSVインポート |
|
||||
| 1 万〜5 万件 | CSVインポート（ファイルに分割） |
|
||||
| **5 万件以上** | **API インポート** |
|
||||
| 一度きりの移行 | どちらでも可（データ量に応じて） |
|
||||
| **定期的なインポート** | **API インポート** |
|
||||
| **リアルタイム同期** | **API インポート** |
|
||||
| **他システムとの統合** | **API インポート** |
|
||||
|
||||
<Note>For datasets in the hundreds of thousands, the API is significantly faster and more reliable than multiple CSV imports.</Note>
|
||||
<Note>数十万件規模のデータセットでは、複数回の CSV インポートよりも API の方が大幅に高速で信頼性があります。</Note>
|
||||
|
||||
## API Rate Limits
|
||||
## API レートリミット
|
||||
|
||||
Twenty enforces rate limits to ensure system stability:
|
||||
Twenty では、システムの安定性を確保するためにレート制限を設けています：
|
||||
|
||||
| Limit | Value |
|
||||
| -------------------------- | --------------------- |
|
||||
| **Requests per minute** | 100 |
|
||||
| **Records per batch call** | 60 |
|
||||
| **Maximum throughput** | ~6,000 records/minute |
|
||||
| 制限 | 値 |
|
||||
| -------------------- | ------------- |
|
||||
| **1 分あたりのリクエスト数** | 100 |
|
||||
| **バッチ呼び出しあたりのレコード数** | 60 |
|
||||
| **最大スループット** | ~6,000 レコード/分 |
|
||||
|
||||
<Warning>
|
||||
**Plan your import around these limits.**
|
||||
**これらの制限を前提にインポート計画を立ててください。**
|
||||
|
||||
For 100,000 records at maximum throughput, expect approximately 17 minutes of import time. Add buffer time for error handling and retries.
|
||||
最大スループットで 100,000 レコードの場合、インポート時間は約 17 分になります。 エラー処理や再試行のための余裕時間を確保してください。
|
||||
</Warning>
|
||||
|
||||
## Getting Started
|
||||
## 始めに
|
||||
|
||||
### Step 1: Get Your API Key
|
||||
### ステップ 1: API キーを取得する
|
||||
|
||||
1. Go to **Settings → Developers**
|
||||
2. Click **+ Create API key**
|
||||
3. Give your key a descriptive name
|
||||
4. Copy the API key immediately (it won't be shown again)
|
||||
5. Store it securely
|
||||
1. **設定 → 開発者** に移動
|
||||
2. **+ API キーを作成** をクリック
|
||||
3. キーにわかりやすい名前を付ける
|
||||
4. API キーをすぐにコピーします（再表示されません）
|
||||
5. 安全に保管する
|
||||
|
||||
<Warning>
|
||||
**Keep your API key secret.**
|
||||
**API キーは秘密にしてください。**
|
||||
|
||||
Anyone with your API key can access and modify your workspace data. Never commit it to code repositories or share it publicly.
|
||||
API キーを知っている人は誰でも、あなたのワークスペースのデータにアクセス・変更できます。 コードリポジトリにコミットしたり、公開で共有したりしないでください。
|
||||
</Warning>
|
||||
|
||||
### Step 2: Choose Your API
|
||||
### ステップ 2: API を選択する
|
||||
|
||||
Twenty supports two API types:
|
||||
Twenty は 2 種類の API をサポートしています：
|
||||
|
||||
| API | Best For | Documentation |
|
||||
| ----------- | ----------------------------------------------------------- | ------------------------------------------------ |
|
||||
| **GraphQL** | Flexible queries, fetching related data, complex operations | [API Docs](/l/ja/developers/extend/capabilities/apis) |
|
||||
| **REST** | Simple CRUD operations, familiar REST patterns | [API Docs](/l/ja/developers/extend/capabilities/apis) |
|
||||
| API | 最適な用途 | ドキュメント |
|
||||
| ----------- | ------------------------------ | -------------------------------------------------- |
|
||||
| **GraphQL** | 柔軟なクエリ、関連データの取得、複雑な操作に最適 | [API ドキュメント](/l/ja/developers/extend/capabilities/apis) |
|
||||
| **REST** | シンプルな CRUD 操作、馴染みのある REST パターン | [API ドキュメント](/l/ja/developers/extend/capabilities/apis) |
|
||||
|
||||
Both APIs support:
|
||||
両方の API でサポートされる内容:
|
||||
|
||||
* Creating, reading, updating, and deleting records
|
||||
* **Batch operations** — create or update up to 60 records per call
|
||||
* レコードの作成、読み取り、更新、削除
|
||||
* **バッチ操作** — 1 回の呼び出しで最大 60 レコードを作成または更新
|
||||
|
||||
**For imports, use batch operations** to maximize throughput within rate limits.
|
||||
**インポートではバッチ操作を使用**し、レート制限内でスループットを最大化してください。
|
||||
|
||||
### Step 3: Plan Your Import Order
|
||||
### ステップ 3: インポート順序を計画する
|
||||
|
||||
Just like CSV imports, **order matters** for relations:
|
||||
CSV インポートと同様に、リレーションでは**順序が重要**です:
|
||||
|
||||
1. **Companies** first (no dependencies)
|
||||
2. **People** second (can link to Companies)
|
||||
3. **Opportunities** third (can link to Companies and People)
|
||||
4. **Tasks/Notes** (can link to any of the above)
|
||||
5. **Custom objects** (following their dependencies)
|
||||
1. **会社**を最初に（依存関係なし）
|
||||
2. 2 番目に **連絡先**（会社にリンク可能）
|
||||
3. 3 番目に **商談**（会社および連絡先にリンク可能）
|
||||
4. **タスク/メモ**（上記のいずれにもリンク可能）
|
||||
5. **カスタムオブジェクト**（依存関係に従って）
|
||||
|
||||
## Best Practices
|
||||
## ベストプラクティス
|
||||
|
||||
### Batch Your Requests
|
||||
### リクエストをバッチ化する
|
||||
|
||||
* Don't send records one at a time
|
||||
* Group up to **60 records per API call**
|
||||
* This maximizes throughput within rate limits
|
||||
* レコードを 1 件ずつ送信しない
|
||||
* 1 回の API 呼び出しにつき**最大 60 レコード**にまとめる
|
||||
* これにより、レート制限内でスループットを最大化できます
|
||||
|
||||
### Handle Rate Limits
|
||||
### レート制限への対応
|
||||
|
||||
* Implement delays between requests (600ms minimum for sustained imports)
|
||||
* Use exponential backoff when you hit limits
|
||||
* Monitor for 429 (Too Many Requests) responses
|
||||
* リクエスト間に遅延を入れる（継続的なインポートでは最小 600ms）
|
||||
* 制限に達したら指数バックオフを使用する
|
||||
* 429（Too Many Requests）応答を監視する
|
||||
|
||||
### Validate Data First
|
||||
### まずデータを検証する
|
||||
|
||||
* Clean and validate your data before importing
|
||||
* Check required fields are populated
|
||||
* Verify formats match Twenty's requirements (see [Field Mapping](/l/ja/user-guide/data-migration/capabilities/field-mapping))
|
||||
* インポート前にデータをクリーンアップし、検証する
|
||||
* 必須フィールドが入力されていることを確認する
|
||||
* 形式が Twenty の要件に合致していることを確認する（[フィールドマッピング](/l/ja/user-guide/data-migration/capabilities/field-mapping) を参照）
|
||||
|
||||
### Log Everything
|
||||
### すべてをログに記録する
|
||||
|
||||
* Log every record imported (including IDs)
|
||||
* Log errors with full context
|
||||
* This helps debug issues and verify completion
|
||||
* インポートしたすべてのレコード（ID を含む）を記録する
|
||||
* エラーをコンテキスト情報とともに記録する
|
||||
* これにより、問題のデバッグと完了確認が容易になります
|
||||
|
||||
### Test First
|
||||
### まずテストする
|
||||
|
||||
* Test with a small batch (10-20 records)
|
||||
* Verify data appears correctly in Twenty
|
||||
* Then run the full import
|
||||
* 少量のバッチ（10〜20 レコード）でテストする
|
||||
* Twenty にデータが正しく表示されることを確認する
|
||||
* その後、フルインポートを実行する
|
||||
|
||||
### Upsert to Avoid Duplicates
|
||||
### 重複を避けるためにアップサートを使用する
|
||||
|
||||
The GraphQL API supports **batch upsert** — update if the record exists, create if not. This prevents duplicates when re-running imports.
|
||||
GraphQL API は **バッチ アップサート**をサポートしています — レコードが存在する場合は更新、存在しない場合は作成します。 これにより、インポートを再実行しても重複を防止できます。
|
||||
|
||||
## Finding Object and Field Names
|
||||
## オブジェクト名とフィールド名の確認方法
|
||||
|
||||
To see available objects and fields:
|
||||
利用可能なオブジェクトとフィールドを確認するには:
|
||||
|
||||
1. Go to **Settings → API and Webhooks**
|
||||
2. Browse the **Metadata API**
|
||||
3. View all standard and custom objects with their fields
|
||||
1. **設定 → API と Webhook** に移動
|
||||
2. **Metadata API** を参照
|
||||
3. すべての標準およびカスタムオブジェクトとそのフィールドを表示
|
||||
|
||||
The documentation shows all standard and custom objects, their fields, and the expected data types.
|
||||
ドキュメントには、すべての標準およびカスタムオブジェクト、そのフィールド、および期待されるデータ型が示されています。
|
||||
|
||||
## Professional Services
|
||||
## プロフェッショナルサービス
|
||||
|
||||
For complex API migrations, our partners can help:
|
||||
複雑な API 移行については、パートナーがお手伝いします:
|
||||
|
||||
| Service | What's Included |
|
||||
| ----------------------- | ---------------------------------- |
|
||||
| **Data Model Design** | design your optimal data structure |
|
||||
| **Migration Scripts** | write and run the import scripts |
|
||||
| **Data Transformation** | handle complex mapping and cleanup |
|
||||
| **Validation & QA** | verify the migration is complete |
|
||||
| サービス | 提供内容 |
|
||||
| ------------ | ------------------- |
|
||||
| **データモデル設計** | 最適なデータ構造を設計 |
|
||||
| **移行スクリプト** | インポート用スクリプトの作成と実行 |
|
||||
| **データ変換** | 複雑なマッピングとクリーンアップに対応 |
|
||||
| **検証と QA** | 移行が完了していることを検証 |
|
||||
|
||||
**Best for:**
|
||||
**最適な用途:**
|
||||
|
||||
* Migrations of 100,000+ records
|
||||
* Complex data transformations
|
||||
* Tight timelines
|
||||
* Teams without developer resources
|
||||
* 10 万件以上のレコードの移行
|
||||
* 複雑なデータ変換
|
||||
* 厳しいスケジュール
|
||||
* 開発リソースのないチーム
|
||||
|
||||
Contact us at [contact@twenty.com](mailto:contact@twenty.com) or explore our [Implementation Services](/l/ja/user-guide/getting-started/capabilities/implementation-services).
|
||||
[contact@twenty.com](mailto:contact@twenty.com) までお問い合わせいただくか、[導入支援サービス](/l/ja/user-guide/getting-started/capabilities/implementation-services)をご覧ください。
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="What's the difference between GraphQL and REST?">
|
||||
GraphQL lets you request exactly the data you need in a single query and is better for complex operations. REST uses standard HTTP methods (GET, POST, PUT, DELETE) and may be more familiar if you've worked with traditional APIs.
|
||||
<Accordion title="GraphQL と REST の違いは何ですか？">
|
||||
GraphQL は、1 回のクエリで必要なデータだけを正確に要求でき、複雑な操作に適しています。 REST は標準的な HTTP メソッド（GET、POST、PUT、DELETE）を使用しており、従来の API を扱ったことがある場合は馴染みやすいでしょう。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I update existing records via API?">
|
||||
Yes! Use update mutations (GraphQL) or PUT/PATCH requests (REST) with the record's `id`.
|
||||
<Accordion title="API で既存のレコードを更新できますか？">
|
||||
はい! 更新用ミューテーション（GraphQL）またはレコードの `id` を用いた PUT/PATCH リクエスト（REST）を使用してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I handle duplicates?">
|
||||
Query for existing records first using unique identifiers (email, domain). Update if exists, create if not.
|
||||
<Accordion title="重複にはどう対処すればよいですか？">
|
||||
一意の識別子（メール、ドメイン）を使用して、まず既存のレコードをクエリします。 存在すれば更新、なければ作成します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I delete records via API?">
|
||||
Yes, use delete mutations (GraphQL) or DELETE requests (REST).
|
||||
<Accordion title="API でレコードを削除できますか？">
|
||||
はい、削除用ミューテーション（GraphQL）または DELETE リクエスト（REST）を使用します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Is there a Python or Node.js SDK?">
|
||||
Not currently, but both APIs work with any HTTP client in any language.
|
||||
<Accordion title="Python や Node.js の SDK はありますか？">
|
||||
現時点ではありませんが、どちらの API もあらゆる言語の任意の HTTP クライアントで利用できます。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## API Documentation
|
||||
## API ドキュメント
|
||||
|
||||
For full implementation details, code examples, and schema reference:
|
||||
実装の詳細、コード例、スキーマリファレンスについては次を参照してください:
|
||||
|
||||
* [API Documentation](/l/ja/developers/extend/capabilities/apis)
|
||||
* [API ドキュメント](/l/ja/developers/extend/capabilities/apis)
|
||||
|
||||
+130
-130
@@ -1,103 +1,103 @@
|
||||
---
|
||||
title: Import Relations Between Objects via CSV
|
||||
description: Complete step-by-step guide to linking records during CSV import.
|
||||
title: CSV でオブジェクト間のリレーションをインポートする
|
||||
description: CSV インポート時にレコードを関連付けるための完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through importing relations between objects—for example, linking People to Companies, or Opportunities to People.
|
||||
本ガイドでは、オブジェクト間のリレーションをインポートする手順を説明します（例：連絡先を会社にリンク、または商談を連絡先にリンク）。
|
||||
|
||||
<Note>**What can be imported:** Only one-to-many relations pointing to a single object type. Relations pointing to multiple object types (like Notes linking to People AND Companies) are not yet supported for import.</Note>
|
||||
<Note>**インポート可能なもの:** 単一のオブジェクトタイプを指す 1 対多のリレーションのみ。 複数のオブジェクトタイプを指すリレーション（例：メモが連絡先と会社の双方にリンク）は、現時点ではインポートに対応していません。</Note>
|
||||
|
||||
## Understanding Relations
|
||||
## リレーションの理解
|
||||
|
||||
### What is a "One-to-Many" Relation?
|
||||
### 「1 対多」リレーションとは？
|
||||
|
||||
In a one-to-many relation:
|
||||
1 対多のリレーションでは:
|
||||
|
||||
* **One** Company has **many** People (employees)
|
||||
* **One** Company has **many** Opportunities
|
||||
* **One** Person has **many** Tasks
|
||||
* **1 つの**会社には**多数の**連絡先（従業員）がいる
|
||||
* **1 つの**会社には**多数の**商談がある
|
||||
* **1 つの**連絡先には**多数の**タスクがある
|
||||
|
||||
The "one" side is the **parent**. The "many" side is the **child**.
|
||||
「1」の側は**親**です。 「多」の側は**子**です。
|
||||
|
||||
### Common Relations in Twenty
|
||||
### Twenty における一般的なリレーション
|
||||
|
||||
| Relation | "One" Side (Parent) | "Many" Side (Child) |
|
||||
| ------------------------- | ------------------- | ------------------- |
|
||||
| Companies → People | Company | People |
|
||||
| Companies → Opportunities | Company | Opportunities |
|
||||
| People → Tasks | Person | Tasks |
|
||||
| People → Notes | Person | Notes |
|
||||
| リレーション | 「1」の側（親） | 「多」の側（子） |
|
||||
| --------- | -------- | -------- |
|
||||
| 会社 → 連絡先 | 会社 | 人物 |
|
||||
| 会社 → 商談 | 会社 | 商談 |
|
||||
| 連絡先 → タスク | 人物 | タスク |
|
||||
| 連絡先 → メモ | 人物 | ノート |
|
||||
|
||||
## Step 1: Identify the "One" and "Many" Sides
|
||||
## ステップ 1: 「1」と「多」の側を特定する
|
||||
|
||||
Before importing, determine which object is the parent and which is the child.
|
||||
インポート前に、どのオブジェクトが親で、どれが子かを判断します。
|
||||
|
||||
**Ask yourself:** "Does ONE [Object A] have MANY [Object B]?"
|
||||
**自問:** 「1 つの [オブジェクト A] は多数の [オブジェクト B] を持つか？」
|
||||
|
||||
* One Company → Many People ✓ (Company is parent)
|
||||
* One Person → Many Companies ✗ (This is wrong—a person belongs to one company)
|
||||
* 1 つの会社 → 多数の連絡先 ✓（会社が親）
|
||||
* 1 人 → 多数の会社 ✗（誤りです—1 人は 1 社に所属）
|
||||
|
||||
## Step 2: Import the Parent Records First
|
||||
## ステップ 2: まず親レコードをインポートする
|
||||
|
||||
The parent ("one" side) must exist in Twenty before you can reference it.
|
||||
参照する前に、親（「1」の側）が Twenty に存在している必要があります。
|
||||
|
||||
**Import order:**
|
||||
**インポート順:**
|
||||
|
||||
1. **Companies** first (no dependencies)
|
||||
2. **People** second (link to Companies)
|
||||
3. **Opportunities** third (link to Companies and/or People)
|
||||
4. **Tasks/Notes** (link to any of the above)
|
||||
1. **会社**を最初に（依存関係なし）
|
||||
2. **連絡先**を次に（会社にリンク）
|
||||
3. **商談**を 3 番目に（会社や連絡先にリンク）
|
||||
4. **タスク/メモ**（上記のいずれかにリンク）
|
||||
|
||||
<Warning>
|
||||
**If the parent record doesn't exist, the import will fail.**
|
||||
**親レコードが存在しない場合、インポートは失敗します。**
|
||||
|
||||
Always verify that Companies are imported before importing People with company references.
|
||||
会社参照を含む連絡先をインポートする前に、必ず会社がインポート済みであることを確認してください。
|
||||
</Warning>
|
||||
|
||||
## Step 3: Note the Parent's Unique Identifier
|
||||
## ステップ 3: 親の一意識別子を控える
|
||||
|
||||
You need to reference the parent record using a **unique identifier**. Available options:
|
||||
親レコードは**一意の識別子**で参照する必要があります。 利用可能な選択肢:
|
||||
|
||||
| Parent Object | Available Unique Identifiers |
|
||||
| --------------------- | --------------------------------------------------------------- |
|
||||
| **Companies** | `id` (UUID), `domain` (recommended), or any custom unique field |
|
||||
| **People** | `id` (UUID), `email`, or any custom unique field |
|
||||
| **Workspace Members** | `id` (UUID), `email` (not name) |
|
||||
| **Custom Objects** | `id` (UUID), or any field marked as unique |
|
||||
| 親オブジェクト | 利用可能な一意識別子 |
|
||||
| --------------- | ----------------------------------------- |
|
||||
| **会社** | `id`（UUID）、`domain`（推奨）、または任意のカスタム一意フィールド |
|
||||
| **連絡先** | `id`（UUID）、`email`、または任意のカスタム一意フィールド |
|
||||
| **ワークスペースメンバー** | `id`（UUID）、`email`（名前ではありません） |
|
||||
| **カスタムオブジェクト** | `id`（UUID）、または一意としてマークされた任意のフィールド |
|
||||
|
||||
<Note>**Recommended:** Use `domain` for Companies and `email` for People. These are human-readable and easy to verify in your spreadsheet.</Note>
|
||||
<Note>**推奨:** 会社には `domain`、連絡先には `email` を使用してください。 これらは人間が読みやすく、スプレッドシートで簡単に確認できます。</Note>
|
||||
|
||||
### Finding the Identifier
|
||||
### 識別子の見つけ方
|
||||
|
||||
If you need the `id`:
|
||||
`id` が必要な場合:
|
||||
|
||||
1. Export the parent records from Twenty
|
||||
2. The export includes the `id` column
|
||||
3. Use these IDs in your child records file
|
||||
1. 親レコードを Twenty からエクスポートする
|
||||
2. エクスポートには `id` 列が含まれます
|
||||
3. これらの ID を子レコードのファイルで使用する
|
||||
|
||||
## Step 4: Verify the Relation Field Exists
|
||||
## ステップ 4: リレーションフィールドが存在することを確認する
|
||||
|
||||
Before importing, ensure the relation field exists between your objects.
|
||||
インポート前に、オブジェクト間のリレーションフィールドが存在することを確認します。
|
||||
|
||||
**To check or create:**
|
||||
**確認・作成方法:**
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select your child object (e.g., People)
|
||||
3. Look for a relation field pointing to the parent (e.g., Company)
|
||||
4. If it doesn't exist, create it:
|
||||
* Click **+ Add field**
|
||||
* Select **Relation** type
|
||||
* Choose the parent object
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. 子オブジェクト（例：連絡先）を選択する
|
||||
3. 親（例：会社）を指すリレーションフィールドを探す
|
||||
4. 存在しない場合は作成する:
|
||||
* **+ Add field** をクリック
|
||||
* **Relation** タイプを選択
|
||||
* 親オブジェクトを選択
|
||||
|
||||
## Step 5: Prepare Your CSV File
|
||||
## ステップ 5: CSV ファイルを準備する
|
||||
|
||||
Add a column to your child CSV that references the parent using its unique identifier.
|
||||
子側の CSV に、親を一意の識別子で参照する列を追加します。
|
||||
|
||||
### Example: People Linking to Companies
|
||||
### 例：連絡先を会社にリンクする
|
||||
|
||||
**Your People CSV:**
|
||||
**連絡先の CSV:**
|
||||
|
||||
```csv
|
||||
firstName,lastName,email,jobTitle,companyDomain
|
||||
@@ -106,66 +106,66 @@ Jane,Doe,jane@widgets.co,CTO,https://widgets.co
|
||||
Bob,Johnson,bob@techstart.io,Developer,https://techstart.io
|
||||
```
|
||||
|
||||
The `companyDomain` column references the Company's domain.
|
||||
`companyDomain` 列は会社のドメインを参照します。
|
||||
|
||||
### Format Requirements
|
||||
### 形式要件
|
||||
|
||||
| Identifier | Format | Example |
|
||||
| ---------- | -------------- | -------------------------------------- |
|
||||
| Domain | URL format | `https://acme.com` |
|
||||
| Email | Standard email | `john@acme.com` |
|
||||
| ID | UUID | `c776ee49-f608-4a77-8cc8-6fe96ae1e43f` |
|
||||
| 識別子 | 形式 | 例 |
|
||||
| ---- | ----------- | -------------------------------------- |
|
||||
| ドメイン | URL 形式 | `https://acme.com` |
|
||||
| メール | 標準的なメールアドレス | `john@acme.com` |
|
||||
| ID | UUID | `c776ee49-f608-4a77-8cc8-6fe96ae1e43f` |
|
||||
|
||||
<Warning>
|
||||
**Domain format matters!**
|
||||
**ドメインの形式が重要です！**
|
||||
|
||||
Use `https://domain.com` (not just `domain.com`). This matches how Twenty stores Company domains and prevents matching errors.
|
||||
`https://domain.com` を使用してください（`domain.com` だけではありません）。 これは Twenty が会社のドメインを保存する方法に一致し、照合エラーを防ぎます。
|
||||
</Warning>
|
||||
|
||||
### Important Rules
|
||||
### 重要なルール
|
||||
|
||||
1. **Exact match required** — the value must exactly match the parent record
|
||||
2. **Map only ONE unique identifier** — don't include both `companyId` AND `companyDomain`
|
||||
3. **Case sensitive** — `Acme.com` ≠ `acme.com`
|
||||
1. **完全一致が必要** — 値は親レコードと完全に一致している必要があります
|
||||
2. **一意の識別子は 1 つだけマッピング** — `companyId` と `companyDomain` の両方を含めないでください
|
||||
3. **大文字小文字を区別** — `Acme.com` ≠ `acme.com`
|
||||
|
||||
## Step 6: Upload and Map the Relation
|
||||
## ステップ 6: リレーションをアップロードしてマッピングする
|
||||
|
||||
1. Navigate to the child object (e.g., People)
|
||||
2. Click **⋮** → **Import records**
|
||||
3. Upload your CSV file
|
||||
4. In the field mapping step:
|
||||
* Find your relation column (e.g., `companyDomain`)
|
||||
* Map it to the **Company** relation field
|
||||
5. Complete the remaining mapping
|
||||
6. Review errors and confirm
|
||||
1. 子オブジェクト（例：連絡先）に移動
|
||||
2. **⋮** → **Import records** をクリック
|
||||
3. CSV ファイルをアップロード
|
||||
4. フィールドマッピングのステップで:
|
||||
* リレーション列（例：`companyDomain`）を見つける
|
||||
* それを**会社**のリレーションフィールドにマッピングする
|
||||
5. 残りのマッピングを完了する
|
||||
6. エラーを確認して確定する
|
||||
|
||||
Twenty will automatically link each child record to the matching parent.
|
||||
Twenty が各子レコードを一致する親に自動でリンクします。
|
||||
|
||||
## Step 7: Verify the Import
|
||||
## ステップ 7: インポートを確認する
|
||||
|
||||
After importing:
|
||||
インポート後：
|
||||
|
||||
1. Open a few child records (e.g., People)
|
||||
2. Verify the relation field shows the correct parent (e.g., Company)
|
||||
3. Open a parent record and check the related records section
|
||||
1. いくつかの子レコード（例：連絡先）を開く
|
||||
2. リレーションフィールドに正しい親（例：会社）が表示されていることを確認する
|
||||
3. 親レコードを開き、関連レコードのセクションを確認する
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
## 避けるべき一般的なミス
|
||||
|
||||
| Mistake | Problem | Solution |
|
||||
| -------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
|
||||
| **Wrong import order** | Importing People before Companies | Always import parents first, then children |
|
||||
| **Wrong domain format** | Using `acme.com` instead of `https://acme.com` | Use full URL format with `https://` |
|
||||
| **Multiple unique fields** | Mapping both `companyId` AND `companyDomain` | Map only ONE unique identifier |
|
||||
| **Missing relation field** | The relation field doesn't exist in the data model | Create it in **Settings → Data Model** before importing |
|
||||
| **Non-existent records** | The parent record doesn't exist in Twenty | Import parent records first, or check for typos |
|
||||
| **Case mismatch** | `Acme.com` in file but `acme.com` in Twenty | Ensure exact case matching |
|
||||
| ミス | 問題 | 解決策 |
|
||||
| ------------------ | ------------------------------------------- | ----------------------------- |
|
||||
| **インポート順の誤り** | 会社より先に連絡先をインポートしている | 常に親を先に、次に子をインポートする |
|
||||
| **ドメイン形式の誤り** | `https://acme.com` ではなく `acme.com` を使用している | `https://` を含む完全な URL 形式を使用する |
|
||||
| **複数の一意フィールド** | `companyId` と `companyDomain` の両方をマッピングしている | 一意の識別子は 1 つだけマッピングする |
|
||||
| **リレーションフィールドがない** | データモデルにリレーションフィールドが存在しない | インポート前に **設定 → データモデル** で作成する |
|
||||
| **存在しないレコード** | 親レコードが Twenty に存在しない | 先に親レコードをインポートするか、タイプミスを確認する |
|
||||
| **大文字小文字の不一致** | ファイルでは `Acme.com`、Twenty では `acme.com` | 大文字小文字が完全に一致していることを確認する |
|
||||
|
||||
## Linking to Workspace Members
|
||||
## ワークスペースメンバーへのリンク
|
||||
|
||||
When linking to Workspace Members (your team):
|
||||
ワークスペースメンバー（あなたのチーム）にリンクする場合：
|
||||
|
||||
* Use their **email address**, not their name
|
||||
* Example: `owner@yourcompany.com`, not "John Smith"
|
||||
* 名前ではなく**メールアドレス**を使用する
|
||||
* 例：`owner@yourcompany.com`、"John Smith" ではなく
|
||||
|
||||
```csv
|
||||
taskName,assignedTo
|
||||
@@ -176,53 +176,53 @@ Review proposal,jane@yourcompany.com
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="What if my parent record doesn't have a domain or email?">
|
||||
You have two options:
|
||||
<Accordion title="親レコードにドメインやメールがない場合はどうすればよいですか？">
|
||||
次の 2 つの選択肢があります：
|
||||
|
||||
1. Use the Twenty `id` (export parent records to get their IDs)
|
||||
2. Create a custom unique field in your data model to store an external ID from your previous system
|
||||
1. Twenty の `id` を使用する（親レコードをエクスポートして ID を取得）
|
||||
2. データモデルにカスタムの一意フィールドを作成し、以前のシステムの外部 ID を保存する
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I update relations on existing records?">
|
||||
Yes! Include the child record's unique identifier (e.g., `email` for People) and the new relation value. The import will update the relation.
|
||||
<Accordion title="既存レコードのリレーションを更新できますか？">
|
||||
はい! 子レコードの一意の識別子（例：連絡先なら `email`）と新しいリレーションの値を含めてください。 インポートによってリレーションが更新されます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I import Many-to-Many relationships?">
|
||||
Many-to-Many relations are not yet supported for import. This is planned for H1 2026.
|
||||
<Accordion title="多対多のリレーションをインポートできますか？">
|
||||
多対多のリレーションは、現時点ではインポートに対応していません。 これは 2026 年上期に対応予定です。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I link to multiple object types (like Notes to People AND Companies)?">
|
||||
Relations pointing to multiple object types are not yet supported for import/export. This is on our roadmap.
|
||||
<Accordion title="複数のオブジェクトタイプ（例：メモを連絡先と会社の双方）にリンクできますか？">
|
||||
複数のオブジェクトタイプを指すリレーションは、現時点ではインポート/エクスポートに対応していません。 これはロードマップにあります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What happens if a parent record doesn't exist?">
|
||||
The import will show an error for that row. You can either:
|
||||
<Accordion title="親レコードが存在しない場合はどうなりますか？">
|
||||
その行に対してエラーが表示されます。 次のいずれかを行うことができます。
|
||||
|
||||
* Import the parent record first, then re-import
|
||||
* Fix the reference value
|
||||
* Remove the row from import
|
||||
* 先に親レコードをインポートしてから再インポートする
|
||||
* 参照値を修正する
|
||||
* インポート対象からその行を削除する
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Why is my relation not linking correctly?">
|
||||
Common causes:
|
||||
<Accordion title="リレーションが正しくリンクされないのはなぜですか？">
|
||||
よくある原因：
|
||||
|
||||
* Wrong format (use `https://domain.com` for domains)
|
||||
* Case mismatch (check exact spelling)
|
||||
* Parent doesn't exist (import parents first)
|
||||
* Mapping multiple identifiers (use only one)
|
||||
* 形式の誤り（ドメインには `https://domain.com` を使用）
|
||||
* 大文字小文字の不一致（綴りを正確に確認）
|
||||
* 親が存在しない（先に親をインポート）
|
||||
* 複数の識別子をマッピングしている（1 つだけを使用）
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
<Warning>
|
||||
**Remember: Soft-deleted records count toward uniqueness.**
|
||||
**注意: 論理削除されたレコードも一意性の判定に含まれます。**
|
||||
|
||||
If you're getting "not found" errors but the record seems to exist, check Command Menu → See deleted records. The parent may have been soft-deleted.
|
||||
「not found」エラーが出るのにレコードが存在するように見える場合は、Command Menu → See deleted records を確認してください。 親が論理削除されている可能性があります。
|
||||
</Warning>
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
Having issues? Check:
|
||||
お困りですか？ 次を確認してください:
|
||||
|
||||
* [How to Fix Import Errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [Import Relations Capabilities](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
* [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [インポートエラーを解決する方法](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [リレーションのインポート機能](/l/ja/user-guide/data-migration/capabilities/import-relations)
|
||||
* [一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
|
||||
+177
-177
@@ -1,133 +1,133 @@
|
||||
---
|
||||
title: Migrating from Other CRMs
|
||||
description: Step-by-step guide to migrate your data from any CRM to Twenty.
|
||||
title: 他のCRMからの移行
|
||||
description: 任意の CRM から Twenty へデータを移行するためのステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through migrating your data from any CRM to Twenty. The process involves auditing your data, preparing your Twenty workspace, exporting from your current system, and importing into Twenty.
|
||||
このガイドでは、任意の CRM から Twenty へデータを移行する手順を説明します。 このプロセスには、データの監査、Twenty ワークスペースの準備、現在のシステムからのエクスポート、および Twenty へのインポートが含まれます。
|
||||
|
||||
<Note>Views, workflows, and permissions must be recreated manually after migration. Plan time for this configuration work.</Note>
|
||||
<Note>移行後、ビュー、ワークフロー、権限は手動で再作成する必要があります。 この構成作業のための時間を確保してください。</Note>
|
||||
|
||||
## Step 1: Audit Your Current Data
|
||||
## ステップ 1: 現在のデータを監査する
|
||||
|
||||
Migration is an opportunity for a fresh start. Don't bring over clutter.
|
||||
移行は新たなスタートの好機です。 不要なデータは持ち込まないでください。
|
||||
|
||||
**What to keep:**
|
||||
**保持するもの:**
|
||||
|
||||
* Active contacts and companies
|
||||
* Open opportunities and deals
|
||||
* Important notes and activities
|
||||
* Custom fields you actually use
|
||||
* アクティブな連絡先と会社
|
||||
* 進行中の商談やディール
|
||||
* 重要なメモとアクティビティ
|
||||
* 実際に使用しているカスタムフィールド
|
||||
|
||||
**What to leave behind:**
|
||||
**除外するもの:**
|
||||
|
||||
* Outdated contacts (no activity in 2+ years)
|
||||
* Duplicate records
|
||||
* Test data
|
||||
* Unused custom fields
|
||||
* 古い連絡先（2年以上アクティビティがないもの）
|
||||
* 重複レコード
|
||||
* テストデータ
|
||||
* 未使用のカスタムフィールド
|
||||
|
||||
## Step 2: Map Your Data Model
|
||||
## ステップ 2: データモデルをマッピングする
|
||||
|
||||
Create a mapping document between your current CRM and Twenty:
|
||||
現在の CRM と Twenty の間のマッピングドキュメントを作成します:
|
||||
|
||||
| Your CRM | Twenty |
|
||||
| ---------------------- | -------------------- |
|
||||
| Account / Organization | **Company** |
|
||||
| Contact / Person | **People** |
|
||||
| Deal / Opportunity | **Opportunity** |
|
||||
| Activity | **Task** or **Note** |
|
||||
| Custom Object | **Custom Object** |
|
||||
| お使いの CRM | Twenty |
|
||||
| ---------- | ------------------ |
|
||||
| アカウント / 組織 | **会社** |
|
||||
| 連絡先 / 人 | **連絡先** |
|
||||
| ディール / 商談 | **商談** |
|
||||
| アクティビティ | **タスク** または **メモ** |
|
||||
| カスタムオブジェクト | **カスタムオブジェクト** |
|
||||
|
||||
**For each field, document:**
|
||||
**各フィールドごとに、次を記録します：**
|
||||
|
||||
* The source field name
|
||||
* The target Twenty field
|
||||
* Any format transformations needed (dates, phone numbers, etc.)
|
||||
* ソースフィールド名
|
||||
* 移行先の Twenty フィールド
|
||||
* 必要な形式変換（例：日付、電話番号など）
|
||||
|
||||
<Note>Keep this mapping document handy during import—you'll reference it when mapping columns.</Note>
|
||||
<Note>インポート中はこのマッピングドキュメントを手元に置いてください—列のマッピング時に参照します。</Note>
|
||||
|
||||
## Step 3: Set Up Your Twenty Workspace
|
||||
## ステップ 3: Twenty ワークスペースを設定する
|
||||
|
||||
Before importing data, prepare your Twenty workspace:
|
||||
データをインポートする前に、Twenty ワークスペースを準備します:
|
||||
|
||||
### Create Custom Objects and Fields
|
||||
### カスタムオブジェクトとフィールドを作成
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Create any custom objects you need
|
||||
3. Add custom fields to standard and custom objects
|
||||
4. Configure field settings (unique, required, select options, etc.)
|
||||
1. **設定 → データモデル** に移動
|
||||
2. 必要なカスタムオブジェクトを作成する
|
||||
3. 標準オブジェクトおよびカスタムオブジェクトにカスタムフィールドを追加する
|
||||
4. フィールドの設定（一意、必須、選択肢など）を構成する
|
||||
|
||||
<Warning>
|
||||
**Fields must exist before import.**
|
||||
**インポート前にフィールドが存在している必要があります。**
|
||||
|
||||
The CSV import creates records, not fields. Create all custom fields in Settings → Data Model before importing.
|
||||
CSV インポートはレコードを作成します。フィールドは作成しません。 インポート前に **設定 → データモデル** でカスタムフィールドをすべて作成してください。
|
||||
</Warning>
|
||||
|
||||
### Invite Your Team
|
||||
### チームを招待
|
||||
|
||||
<Warning>
|
||||
**Invite users BEFORE importing data.**
|
||||
**重要: データをインポートする前にユーザーを招待してください。**
|
||||
|
||||
If your data includes user references (Account Owner, Assignee, etc.), those users must exist in Twenty before import. Otherwise, those relations cannot be mapped.
|
||||
データにユーザー参照（アカウント所有者、担当者など）が含まれる場合、それらのユーザーはインポート前に Twenty 上に存在している必要があります。 そうでない場合、それらのリレーションはマッピングできません。
|
||||
</Warning>
|
||||
|
||||
1. Go to **Settings → Members**
|
||||
2. Invite all team members
|
||||
3. **Wait for everyone to accept** their invitation
|
||||
4. Verify all users appear in your Members list
|
||||
1. **設定 → メンバー** に移動
|
||||
2. すべてのチームメンバーを招待する
|
||||
3. **全員が招待を受諾するのを待つ**
|
||||
4. メンバー一覧にすべてのユーザーが表示されていることを確認する
|
||||
|
||||
## Step 4: Export from Your Current CRM
|
||||
## ステップ 4: 現在の CRM からエクスポートする
|
||||
|
||||
Export your data from your current CRM:
|
||||
現在の CRM からデータをエクスポートします:
|
||||
|
||||
1. Look for an **Export** function (usually under Settings, Data Management, or Admin)
|
||||
2. Export to **CSV format** when possible
|
||||
3. Export each object type separately (Companies, Contacts, Deals, etc.)
|
||||
4. Include all fields you want to migrate
|
||||
1. 通常は設定、データ管理、管理の下にある **エクスポート** 機能を探します
|
||||
2. 可能であれば **CSV 形式** でエクスポートする
|
||||
3. 各オブジェクトタイプを個別にエクスポートする（会社、連絡先、商談など）
|
||||
4. 移行したいすべてのフィールドを含める
|
||||
|
||||
**Export these objects (in this order for reference):**
|
||||
**次のオブジェクトをエクスポートします（この順序で）:**
|
||||
|
||||
1. Companies / Accounts / Organizations
|
||||
2. Contacts / People
|
||||
3. Deals / Opportunities
|
||||
4. Notes and Activities
|
||||
5. Custom objects
|
||||
1. 会社 / アカウント / 組織
|
||||
2. 連絡先 / 人
|
||||
3. ディール / 商談
|
||||
4. メモとアクティビティ
|
||||
5. カスタムオブジェクト
|
||||
|
||||
## Step 5: Clean and Format Your Data
|
||||
## ステップ 5: データをクリーンアップして整形する
|
||||
|
||||
Open each exported CSV in a spreadsheet application and prepare it for Twenty.
|
||||
エクスポートした各 CSV を表計算アプリで開き、Twenty 用に準備します。
|
||||
|
||||
### Remove Duplicates
|
||||
### 重複を削除
|
||||
|
||||
1. Sort by the unique field (email for People, domain for Companies)
|
||||
2. Remove or merge duplicate rows
|
||||
3. Verify no duplicates exist in Twenty already
|
||||
1. 一意のフィールドで並べ替える（連絡先はメール、会社はドメイン）
|
||||
2. 重複行を削除または統合する
|
||||
3. Twenty にすでに重複が存在しないことを確認する
|
||||
|
||||
### Format Fields Correctly
|
||||
### フィールドの形式を正しく整える
|
||||
|
||||
| Field Type | Required Format |
|
||||
| ----------------- | ------------------------------------------------- |
|
||||
| **Domain** | `https://domain.com` |
|
||||
| **Email** | `name@domain.com` (must be unique) |
|
||||
| **Date** | `YYYY-MM-DD` |
|
||||
| **Phone** | Three columns: Number, Country Code, Calling Code |
|
||||
| **Boolean** | `TRUE` or `FALSE` (uppercase) |
|
||||
| **Select fields** | Use API names, not display labels |
|
||||
| フィールドタイプ | 必須の形式 |
|
||||
| ----------- | ------------------------------- |
|
||||
| **ドメイン** | `https://domain.com` |
|
||||
| **メール** | `name@domain.com`（一意である必要があります） |
|
||||
| **日付** | `YYYY-MM-DD` |
|
||||
| **電話** | 3 列: 番号、国コード、Calling Code |
|
||||
| **ブール型** | `TRUE` または `FALSE`（大文字） |
|
||||
| **選択フィールド** | 表示ラベルではなく API 名を使用する |
|
||||
|
||||
<Warning>
|
||||
**Domain format is critical.**
|
||||
**ドメインの形式は重要です。**
|
||||
|
||||
Use `https://domain.com` (not `domain.com` or `www.domain.com`). This matches Twenty's format and prevents duplicates when you connect email/calendar sync.
|
||||
`https://domain.com` を使用してください（`domain.com` や `www.domain.com` ではありません）。 これは Twenty の形式に一致し、メール/カレンダー同期を接続した際の重複を防ぎます。
|
||||
</Warning>
|
||||
|
||||
See [How to Prepare Your CSV Files](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files) for complete formatting requirements for all field types.
|
||||
すべてのフィールドタイプに関する完全な書式要件は、[CSV ファイルを準備する方法](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files) を参照してください。
|
||||
|
||||
### Add Relation Columns
|
||||
### リレーション列を追加
|
||||
|
||||
To link records (e.g., People to Companies), add a column with the parent's unique identifier.
|
||||
レコードをリンクするには（例：連絡先を会社にリンク）、親の一意の識別子を含む列を追加します。
|
||||
|
||||
**Example: People CSV with Company link**
|
||||
**例：会社リンク付きの連絡先 CSV**
|
||||
|
||||
```csv
|
||||
firstName,lastName,email,companyDomain
|
||||
@@ -135,159 +135,159 @@ John,Smith,john@acme.com,https://acme.com
|
||||
Jane,Doe,jane@widgets.co,https://widgets.co
|
||||
```
|
||||
|
||||
See [How to Import Relations](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) for detailed instructions on linking records.
|
||||
レコードをリンクする手順の詳細は、[リレーションをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) を参照してください。
|
||||
|
||||
### Update User References
|
||||
### ユーザー参照を更新
|
||||
|
||||
If your data includes user assignments (Owner, Assignee):
|
||||
データにユーザーの割り当て（所有者、担当者）が含まれる場合：
|
||||
|
||||
1. Add a column with the **user's email** (not just their ID from the old system)
|
||||
2. Use the same email addresses that users used to join your Twenty workspace
|
||||
1. **ユーザーのメールアドレス** の列を追加する（古いシステムの ID だけでは不可）
|
||||
2. ユーザーが Twenty のワークスペースに参加した際に使用したものと同じメールアドレスを使用してください。
|
||||
|
||||
See [How to Prepare Your CSV Files](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files) for complete formatting guide.
|
||||
完全な書式ガイドは、[CSV ファイルを準備する方法](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files) を参照してください。
|
||||
|
||||
## Step 6: Import to Twenty
|
||||
## ステップ 6: Twenty にインポートする
|
||||
|
||||
<Warning>
|
||||
**Import Order Matters!**
|
||||
**インポート順は重要です！**
|
||||
|
||||
Always import in this order:
|
||||
必ずこの順序でインポートします:
|
||||
|
||||
1. **Companies** first (no dependencies)
|
||||
2. **People** second (link to Companies)
|
||||
3. **Opportunities** third (link to Companies/People)
|
||||
4. **Notes and Tasks** (link to records)
|
||||
5. **Custom objects** following their dependencies
|
||||
1. 最初に **会社**（依存関係なし）
|
||||
2. 次に **連絡先**（会社にリンク）
|
||||
3. 3 番目に **商談**（会社/連絡先にリンク）
|
||||
4. **メモとタスク**（レコードにリンク）
|
||||
5. **カスタムオブジェクト**（依存関係に従って）
|
||||
|
||||
The parent record must exist before you can reference it.
|
||||
参照する前に、親レコードが存在している必要があります。
|
||||
</Warning>
|
||||
|
||||
### Import Each Object
|
||||
### 各オブジェクトをインポート
|
||||
|
||||
For each CSV file, in order:
|
||||
各 CSV ファイルについて、順番に実行します:
|
||||
|
||||
1. Navigate to the object in Twenty
|
||||
2. Click **⋮ → Import records**
|
||||
3. Upload the CSV file
|
||||
4. Map columns to fields:
|
||||
* Map user email columns to the appropriate relation fields
|
||||
* Map relation columns (like `companyDomain`) to relation fields
|
||||
5. Review and fix any errors in the UI
|
||||
6. Confirm the import
|
||||
7. Verify a few records before proceeding to the next file
|
||||
1. Twenty の対象オブジェクトに移動します
|
||||
2. **⋮ → Import records** をクリックします
|
||||
3. CSV ファイルをアップロードします
|
||||
4. 列をフィールドにマッピングします:
|
||||
* ユーザーのメールアドレス列を適切なリレーションフィールドにマッピングします
|
||||
* リレーション列（`companyDomain` など）をリレーションフィールドにマッピングします
|
||||
5. UI でエラーを確認して修正します
|
||||
6. インポートを確定します
|
||||
7. 次のファイルに進む前に、いくつかのレコードを確認します
|
||||
|
||||
**Detailed guides:**
|
||||
**詳細ガイド:**
|
||||
|
||||
* [How to Import Companies](/l/ja/user-guide/data-migration/how-tos/import-companies-via-csv)
|
||||
* [How to Import Contacts](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)
|
||||
* [How to Import Relations](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
* [会社をインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-companies-via-csv)
|
||||
* [連絡先をインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)
|
||||
* [リレーションをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
|
||||
## Step 7: Large Migrations (50,000+ Records)
|
||||
## ステップ 7: 大規模な移行（5 万件以上のレコード）
|
||||
|
||||
For large migrations:
|
||||
大規模な移行の場合:
|
||||
|
||||
| Volume | Recommended Approach |
|
||||
| ----------------------- | ----------------------------- |
|
||||
| Under 10,000 records | Single CSV import |
|
||||
| 10,000 - 50,000 records | Split into multiple CSV files |
|
||||
| 50,000+ records | Use the API |
|
||||
| 件数 | 推奨アプローチ |
|
||||
| -------- | ----------------- |
|
||||
| 1 万件未満 | 単一の CSV インポート |
|
||||
| 1 万〜5 万件 | 複数の CSV ファイルに分割する |
|
||||
| 5 万件以上 | API を使用する |
|
||||
|
||||
**For API imports:**
|
||||
**API でのインポートについて:**
|
||||
|
||||
* Faster and more reliable for large datasets
|
||||
* Supports batch operations (up to 60 records per call)
|
||||
* See [How to Import Data via API](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)
|
||||
* 大規模データセットでは高速で信頼性が高い
|
||||
* バッチ処理に対応（1 回の呼び出しで最大 60 レコード）
|
||||
* 詳細は [API でデータをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-data-via-api) を参照
|
||||
|
||||
## Step 8: Post-Migration Setup
|
||||
## ステップ 8: 移行後のセットアップ
|
||||
|
||||
After importing data, complete your workspace configuration:
|
||||
データのインポート後、ワークスペースの設定を完了します:
|
||||
|
||||
### Recreate Views
|
||||
### ビューを再作成
|
||||
|
||||
* Set up saved views with filters, sorts, and column configurations
|
||||
* Create any kanban or calendar views you need
|
||||
* フィルター、並べ替え、列の構成を含む保存済みビューを設定します
|
||||
* 必要なカンバンビューやカレンダービューを作成します
|
||||
|
||||
### Recreate Workflows
|
||||
### ワークフローを再作成
|
||||
|
||||
* Rebuild your automations in **Settings → Workflows**
|
||||
* Start with the most critical workflows
|
||||
* Test each one before relying on it
|
||||
* **設定 → ワークフロー** で自動化を再構築します
|
||||
* 最も重要なワークフローから開始する
|
||||
* 運用に入れる前に各ワークフローをテストします
|
||||
|
||||
### Configure Roles and Permissions
|
||||
### 役割と権限の設定
|
||||
|
||||
* Set up roles in **Settings → Roles**
|
||||
* Assign users to appropriate roles
|
||||
* **設定 → 役割** で役割を設定します
|
||||
* ユーザーに適切な役割を割り当てます
|
||||
|
||||
### Connect Email and Calendar
|
||||
### メールとカレンダーの連携
|
||||
|
||||
* Each user connects their own account in **Settings → Accounts**
|
||||
* Twenty will start syncing emails to contact records
|
||||
* See [Email & Calendar](/l/ja/user-guide/calendar-emails/overview)
|
||||
* 各ユーザーは **設定 → アカウント** で自分のアカウントを接続します
|
||||
* Twenty がメールを連絡先レコードと同期し始めます
|
||||
* [メールとカレンダー](/l/ja/user-guide/calendar-emails/overview) を参照
|
||||
|
||||
### Train Your Team
|
||||
### チームのトレーニング
|
||||
|
||||
* Walk through the new interface together
|
||||
* Document any team-specific processes
|
||||
* 新しいインターフェースを一緒に確認する
|
||||
* チーム固有のプロセスを文書化する
|
||||
|
||||
## Common Issues and Solutions
|
||||
## 一般的な問題と解決策
|
||||
|
||||
| Issue | Cause | Solution |
|
||||
| ----------------------- | --------------------------- | ------------------------------------------------------------------------------------ |
|
||||
| **Duplicate errors** | Email/domain already exists | Remove duplicates from file, or include unique identifier to update existing records |
|
||||
| **Relation not found** | Parent record doesn't exist | Import parent objects first (Companies before People) |
|
||||
| **Missing fields** | Custom field doesn't exist | Create field in Settings → Data Model before importing |
|
||||
| **Select field errors** | Using display labels | Use API names (enable Advanced mode in Settings to find them) |
|
||||
| **User relation empty** | User hasn't accepted invite | Ensure all users accept invitations before importing |
|
||||
| 問題 | 原因 | 解決策 |
|
||||
| ------------------ | ---------------- | -------------------------------------------- |
|
||||
| **重複エラー** | メール/ドメインがすでに存在する | ファイルから重複を削除するか、一意の識別子を含めて既存のレコードを更新する |
|
||||
| **リレーションが見つかりません** | 親レコードが存在しない | 親オブジェクトを先にインポートする（連絡先の前に会社） |
|
||||
| **不足しているフィールド** | カスタムフィールドが存在しない | インポート前に **設定 → データモデル** でフィールドを作成する |
|
||||
| **選択フィールドのエラー** | 表示ラベルを使用している | API 名を使用する（設定で詳細モードを有効にして確認） |
|
||||
| **ユーザーのリレーションが空** | ユーザーが招待を受諾していない | データをインポートする前に、すべてのユーザーが招待を受諾していることを確認してください。 |
|
||||
|
||||
See [How to Fix Import Errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors) for detailed troubleshooting steps.
|
||||
詳細なトラブルシューティング手順は、[インポートエラーを解決する方法](/l/ja/user-guide/data-migration/how-tos/fix-import-errors) を参照してください。
|
||||
|
||||
## Post-Migration Checklist
|
||||
## ポスト移行チェックリスト
|
||||
|
||||
### Data Integrity
|
||||
### データの整合性
|
||||
|
||||
<Check>All records imported (compare counts with source system)</Check>
|
||||
<Check>Relations working correctly (People linked to Companies)</Check>
|
||||
<Check>User assignments mapped correctly (Owner, Assignee)</Check>
|
||||
<Check>Custom fields populated</Check>
|
||||
<Check>No unexpected duplicates</Check>
|
||||
<Check>すべてのレコードがインポートされた（ソースシステムの件数と比較）</Check>
|
||||
<Check>リレーションが正常に機能している（連絡先が会社にリンク）</Check>
|
||||
<Check>ユーザーの割り当てが正しくマッピングされている（所有者、担当者）</Check>
|
||||
<Check>カスタムフィールドが入力されている</Check>
|
||||
<Check>想定外の重複がない</Check>
|
||||
|
||||
### Configuration
|
||||
### 構成
|
||||
|
||||
<Check>Views recreated</Check>
|
||||
<Check>Workflows recreated and tested</Check>
|
||||
<Check>Roles and permissions configured</Check>
|
||||
<Check>Email/calendar sync connected</Check>
|
||||
<Check>ビューを再作成済み</Check>
|
||||
<Check>ワークフローを再作成しテスト済み</Check>
|
||||
<Check>役割と権限を設定済み</Check>
|
||||
<Check>メール/カレンダー同期を接続済み</Check>
|
||||
|
||||
### Team Readiness
|
||||
### チームの準備状況
|
||||
|
||||
<Check>Team trained on new system</Check>
|
||||
<Check>Old CRM access plan decided (keep for reference? When to disable?)</Check>
|
||||
<Check>新しいシステムについてチームをトレーニング済み</Check>
|
||||
<Check>旧 CRM のアクセス計画を決定（参照用に保持する？ いつ無効化するか？)</Check>
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Can I migrate workflows automatically?">
|
||||
Not currently. Workflows must be recreated manually in Twenty.
|
||||
<Accordion title="ワークフローを自動的に移行できますか？">
|
||||
現時点ではできません。 ワークフローは Twenty で手動で再作成する必要があります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What about file attachments?">
|
||||
File attachments are not included in CSV exports. You'll need to re-upload them manually, migrate via API, or contact our team for assistance.
|
||||
<Accordion title="ファイル添付はどうなりますか？">
|
||||
CSV のエクスポートにはファイル添付は含まれません。 手動で再アップロードするか、API で移行するか、サポートが必要な場合は弊社チームにご連絡ください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I keep both systems running during migration?">
|
||||
Yes, we recommend keeping your old CRM running until you've verified the migration is complete. Just be careful not to create new data in both places.
|
||||
<Accordion title="移行中に両方のシステムを稼働させておけますか？">
|
||||
はい、移行が完了したことを確認するまでは、旧 CRM を稼働させておくことを推奨します。 ただし、両方の環境で新しいデータを作成しないよう注意してください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How long does migration typically take?">
|
||||
Depends on data volume and complexity. Small migrations (under 10,000 records) can be done in a few hours. Large migrations may take several days including data cleanup and testing.
|
||||
<Accordion title="移行には通常どれくらい時間がかかりますか？">
|
||||
データの量と複雑さによります。 小規模な移行（1 万件未満）は数時間で完了します。 大規模な移行は、データのクリーンアップやテストを含め、数日かかる場合があります。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Need Help?
|
||||
## ヘルプが必要ですか?
|
||||
|
||||
For complex migrations or large datasets:
|
||||
複雑な移行や大規模なデータセットの場合:
|
||||
|
||||
* **Guided setup:** Book a 4-hour onboarding pack
|
||||
* **Full migration service:** Our partners can handle the entire migration
|
||||
* **ガイド付きセットアップ:** 4 時間のオンボーディングパックを予約する
|
||||
* **フル移行サービス:** パートナーが移行全体に対応できます
|
||||
|
||||
Contact [contact@twenty.com](mailto:contact@twenty.com) or explore our [Implementation Services](/l/ja/user-guide/getting-started/capabilities/implementation-services).
|
||||
[contact@twenty.com](mailto:contact@twenty.com) までご連絡いただくか、[導入支援サービス](/l/ja/user-guide/getting-started/capabilities/implementation-services)をご覧ください。
|
||||
|
||||
+98
-98
@@ -1,171 +1,171 @@
|
||||
---
|
||||
title: Migrating from Self-Hosted to Cloud
|
||||
description: Step-by-step guide to migrate your Twenty self-hosted instance to Twenty Cloud.
|
||||
title: セルフホストからクラウドへの移行
|
||||
description: Twenty のセルフホストのインスタンスを Twenty Cloud に移行するためのステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through migrating your data from a Twenty self-hosted instance to Twenty Cloud. The process involves setting up your cloud workspace, exporting your data, and re-importing it.
|
||||
このガイドでは、Twenty のセルフホストのインスタンスから Twenty Cloud へデータを移行する手順を説明します。 クラウドのワークスペースをセットアップし、データをエクスポートしてから再インポートする流れです。
|
||||
|
||||
<Note>Views, workflows, and roles must be recreated manually after migration. Plan time for this configuration work.</Note>
|
||||
<Note>移行後、ビュー、ワークフロー、役割は手動で再作成する必要があります。 この構成作業のための時間を確保してください。</Note>
|
||||
|
||||
## Step 1: Create Your Cloud Workspace
|
||||
## ステップ 1: クラウドワークスペースを作成する
|
||||
|
||||
1. Go to [app.twenty.com](https://app.twenty.com) and create a new workspace
|
||||
2. Complete the initial setup wizard
|
||||
3. Note your new workspace URL
|
||||
1. [app.twenty.com](https://app.twenty.com) にアクセスし、新しいワークスペースを作成します
|
||||
2. 初期セットアップウィザードを完了します
|
||||
3. 新しいワークスペースの URL を控えておきます
|
||||
|
||||
## Step 2: Recreate Your Data Model
|
||||
## ステップ 2: データモデルを再作成する
|
||||
|
||||
Before importing data, recreate your custom objects and fields:
|
||||
データをインポートする前に、カスタムオブジェクトとフィールドを再作成してください:
|
||||
|
||||
1. Go to **Settings → Data Model** in your cloud instance
|
||||
2. Create custom objects that match your self-hosted setup
|
||||
3. Add custom fields to standard and custom objects
|
||||
4. Configure field settings (unique, required, etc.)
|
||||
1. クラウドのインスタンスで **設定 → データモデル** に移動します
|
||||
2. セルフホスト環境の設定に一致するカスタムオブジェクトを作成します
|
||||
3. 標準オブジェクトおよびカスタムオブジェクトにカスタムフィールドを追加します
|
||||
4. フィールドの設定（一意、必須など）を行います
|
||||
|
||||
<Note>Take screenshots of your self-hosted data model for reference, or keep both instances open side by side.</Note>
|
||||
<Note>参照用にセルフホスト環境のデータモデルのスクリーンショットを撮るか、両方のインスタンスを並べて開いたままにしておきましょう。</Note>
|
||||
|
||||
## Step 3: Invite All Users
|
||||
## ステップ 3: すべてのユーザーを招待する
|
||||
|
||||
<Warning>
|
||||
**Critical: Invite users BEFORE importing data.**
|
||||
**重要: データをインポートする前にユーザーを招待してください。**
|
||||
|
||||
Users must accept their invitations before you import any records that reference them (like Account Owner fields). If users don't exist yet, those relations cannot be mapped.
|
||||
ユーザーを参照するレコード（例: Account Owner フィールド）をインポートする前に、ユーザーは招待を受諾している必要があります。 ユーザーがまだ存在しない場合、それらのリレーションはマッピングできません。
|
||||
</Warning>
|
||||
|
||||
1. Go to **Settings → Members** in your cloud instance
|
||||
2. Invite all team members who had accounts on self-hosted
|
||||
3. **Wait for everyone to accept** their invitation
|
||||
4. Verify all users appear in your Members list
|
||||
1. クラウドのインスタンスで **設定 → メンバー** に移動します
|
||||
2. セルフホストでアカウントを持っていたチームメンバー全員を招待します
|
||||
3. **全員が招待を受諾するのを待ちます**
|
||||
4. メンバー一覧にすべてのユーザーが表示されていることを確認します
|
||||
|
||||
## Step 4: Export Data from Self-Hosted
|
||||
## ステップ 4: セルフホストからデータをエクスポートする
|
||||
|
||||
Export each object from your self-hosted instance:
|
||||
セルフホストのインスタンスから各オブジェクトをエクスポートします:
|
||||
|
||||
1. Navigate to each object (Companies, People, Opportunities, etc.)
|
||||
2. Configure the view to show **all columns** you want to migrate
|
||||
3. Click **⋮ → Export view**
|
||||
4. Save each CSV file with a clear name (e.g., `companies-export.csv`)
|
||||
1. 各オブジェクト（会社、連絡先、商談など）に移動します
|
||||
2. 移行したい**すべての列**が表示されるようにビューを設定します
|
||||
3. **⋮ → Export view** をクリックします
|
||||
4. 各 CSV ファイルをわかりやすい名前で保存します（例: `companies-export.csv`）
|
||||
|
||||
**Export in this order** (for reference when importing):
|
||||
インポート時の参照のため、**この順序でエクスポート**してください:
|
||||
|
||||
1. Companies
|
||||
2. People
|
||||
3. Opportunities
|
||||
4. Custom objects (following their dependencies)
|
||||
5. Tasks, Notes
|
||||
1. 会社
|
||||
2. 人物
|
||||
3. 商談
|
||||
4. カスタムオブジェクト（依存関係に従って）
|
||||
5. タスク、メモ
|
||||
|
||||
## Step 5: Update Workspace Member References
|
||||
## ステップ 5: ワークスペースのメンバー参照を更新する
|
||||
|
||||
The exported CSVs contain user IDs from your self-hosted instance. These IDs won't match your cloud instance, so you need to replace them with emails.
|
||||
エクスポートした CSV には、セルフホストのインスタンスのユーザー ID が含まれています。 これらの ID はクラウドのインスタンスと一致しないため、メールアドレスに置き換える必要があります。
|
||||
|
||||
**For each CSV file with user references (Owner, Assignee, etc.):**
|
||||
**ユーザー参照（Owner、Assignee など）がある各 CSV ファイルについて:**
|
||||
|
||||
1. Open the CSV in a spreadsheet application
|
||||
2. Add a new column next to each user ID column (e.g., `accountOwnerEmail` next to `accountOwnerId`)
|
||||
3. Fill in the **email address** of each user
|
||||
4. You can delete the old ID column or leave it (it will be skipped during import)
|
||||
1. CSV をスプレッドシートアプリで開きます
|
||||
2. 各ユーザー ID 列の隣に新しい列を追加します（例: `accountOwnerId` の隣に `accountOwnerEmail`）
|
||||
3. 各ユーザーの**メールアドレス**を入力します
|
||||
4. 古い ID 列は削除しても残しても構いません（インポート時にスキップされます）
|
||||
|
||||
**Example:**
|
||||
**例:**
|
||||
|
||||
Before:
|
||||
以前:
|
||||
|
||||
```csv
|
||||
name,domain,accountOwnerId
|
||||
Acme Corp,https://acme.com,old-uuid-123
|
||||
```
|
||||
|
||||
After:
|
||||
以降:
|
||||
|
||||
```csv
|
||||
name,domain,accountOwnerEmail
|
||||
Acme Corp,https://acme.com,john@yourcompany.com
|
||||
```
|
||||
|
||||
<Note>Use the same email addresses that users used to accept their cloud workspace invitation.</Note>
|
||||
<Note>クラウドのワークスペース招待を受諾した際にユーザーが使用したものと同じメールアドレスを使用してください。</Note>
|
||||
|
||||
## Step 6: Plan Your Import Order
|
||||
## ステップ 6: インポート順序を計画する
|
||||
|
||||
Import files in the correct order to maintain relationships:
|
||||
リレーションを維持するため、正しい順序でファイルをインポートします:
|
||||
|
||||
1. **Companies** first (no dependencies)
|
||||
2. **People** second (link to Companies)
|
||||
3. **Opportunities** third (link to Companies and People)
|
||||
4. **Custom objects** (following their dependencies)
|
||||
5. **Tasks and Notes** last (link to other records)
|
||||
1. 最初に**会社**（依存関係なし）
|
||||
2. 次に**連絡先**（会社にリンク）
|
||||
3. 3 番目に**商談**（会社および連絡先にリンク）
|
||||
4. **カスタムオブジェクト**（依存関係に従って）
|
||||
5. 最後に**タスクとメモ**（他のレコードにリンク）
|
||||
|
||||
See [How to Import Relations](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) for details on maintaining relationships.
|
||||
リレーションの維持方法の詳細は、[リレーションをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) を参照してください。
|
||||
|
||||
## Step 7: Import to Cloud
|
||||
## ステップ 7: クラウドにインポートする
|
||||
|
||||
For each CSV file, in order:
|
||||
各 CSV ファイルについて、順番に実行します:
|
||||
|
||||
1. Navigate to the object in your cloud instance
|
||||
2. Click **⋮ → Import records**
|
||||
3. Upload the CSV file
|
||||
4. Map columns to fields:
|
||||
* Map user email columns to the appropriate relation fields
|
||||
* Map other columns as usual
|
||||
5. Review and fix any errors
|
||||
6. Confirm the import
|
||||
7. Verify a few records before proceeding to the next file
|
||||
1. クラウドのインスタンスで対象のオブジェクトに移動します
|
||||
2. **⋮ → Import records** をクリックします
|
||||
3. CSV ファイルをアップロードします
|
||||
4. 列をフィールドにマッピングします:
|
||||
* ユーザーのメールアドレス列を適切なリレーションフィールドにマッピングします
|
||||
* その他の列は通常どおりマッピングします
|
||||
5. エラーを確認して修正します
|
||||
6. インポートを確認します
|
||||
7. 次のファイルに進む前に、いくつかのレコードを確認します
|
||||
|
||||
## Step 8: Recreate Configuration
|
||||
## ステップ 8: 設定を再作成する
|
||||
|
||||
After importing data, manually recreate:
|
||||
データのインポート後、次の項目を手動で再作成します:
|
||||
|
||||
### Views
|
||||
### ビュー
|
||||
|
||||
* Recreate saved views with filters, sorts, and column configurations
|
||||
* Set up any kanban or calendar views
|
||||
* フィルター、並べ替え、列の構成を含む保存済みビューを再作成します
|
||||
* カンバンビューやカレンダービューを設定します
|
||||
|
||||
### Workflows
|
||||
### ワークフロー
|
||||
|
||||
* Recreate automations in **Settings → Workflows**
|
||||
* Test each workflow before relying on it
|
||||
* **設定 → ワークフロー** で自動化を再作成します
|
||||
* 運用に入れる前に各ワークフローをテストします
|
||||
|
||||
### Roles and Permissions
|
||||
### 役割と権限
|
||||
|
||||
* Configure roles in **Settings → Roles**
|
||||
* Assign users to appropriate roles
|
||||
* **設定 → 役割** で役割を設定します
|
||||
* ユーザーに適切な役割を割り当てます
|
||||
|
||||
### Integrations
|
||||
### 統合
|
||||
|
||||
* Reconnect email and calendar sync for each user
|
||||
* Reconfigure any API integrations with new API keys
|
||||
* 各ユーザーのメールおよびカレンダーの同期を再接続します
|
||||
* 新しい API キーで各種 API 連携を再設定します
|
||||
|
||||
## Post-Migration Checklist
|
||||
## ポスト移行チェックリスト
|
||||
|
||||
<Check>All data imported successfully</Check>
|
||||
<Check>Relations between objects working correctly</Check>
|
||||
<Check>User assignments (Owner, Assignee) mapped correctly</Check>
|
||||
<Check>Views recreated</Check>
|
||||
<Check>Workflows recreated and tested</Check>
|
||||
<Check>Roles and permissions configured</Check>
|
||||
<Check>Email/calendar sync reconnected</Check>
|
||||
<Check>API integrations updated with new keys</Check>
|
||||
<Check>すべてのデータが正常にインポートされている</Check>
|
||||
<Check>オブジェクト間のリレーションが正しく機能している</Check>
|
||||
<Check>ユーザーの割り当て（Owner、Assignee）が正しくマッピングされている</Check>
|
||||
<Check>ビューを再作成済み</Check>
|
||||
<Check>ワークフローを再作成し、テスト済み</Check>
|
||||
<Check>役割と権限を構成済み</Check>
|
||||
<Check>メール/カレンダーの同期を再接続済み</Check>
|
||||
<Check>API 連携を新しいキーで更新済み</Check>
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Can I migrate workflows automatically?">
|
||||
Not currently. Workflows must be recreated manually in your cloud instance.
|
||||
<Accordion title="ワークフローを自動的に移行できますか？">
|
||||
現時点ではできません。 ワークフローはクラウドのインスタンスで手動で再作成する必要があります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What about file attachments and images?">
|
||||
File attachments are not included in CSV exports. You'll need to re-upload any attachments manually, migrate them via API or contact our team for assistance with large migrations.
|
||||
<Accordion title="ファイルの添付や画像はどうなりますか？">
|
||||
CSV のエクスポートにはファイルの添付は含まれません。 添付ファイルは手動で再アップロードするか、API で移行するか、大規模な移行については弊社チームにご連絡ください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I keep both instances running during migration?">
|
||||
Yes, we recommend keeping your self-hosted instance running until you've verified the cloud migration is complete. Just be careful not to create new data in both places.
|
||||
<Accordion title="移行中に両方のインスタンスを稼働させておけますか？">
|
||||
はい、クラウドへの移行が完了したことを確認するまでは、セルフホストのインスタンスを稼働させておくことを推奨します。 ただし、両方の環境で新しいデータを作成しないようご注意ください。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What if a user hasn't accepted their invitation yet?">
|
||||
Records referencing that user will fail to import or the relation will be empty. Ensure all users accept invitations before importing data.
|
||||
<Accordion title="ユーザーがまだ招待を受諾していない場合はどうなりますか？">
|
||||
そのユーザーを参照するレコードはインポートに失敗するか、リレーションが空になります。 データをインポートする前に、すべてのユーザーが招待を受諾していることを確認してください。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Need Help?
|
||||
## ヘルプが必要ですか?
|
||||
|
||||
For complex migrations or large datasets, contact us at [contact@twenty.com](mailto:contact@twenty.com) or explore our [Implementation Services](/l/ja/user-guide/getting-started/capabilities/implementation-services).
|
||||
複雑な移行や大規模なデータセットについては、[contact@twenty.com](mailto:contact@twenty.com) までご連絡いただくか、[導入支援サービス](/l/ja/user-guide/getting-started/capabilities/implementation-services)をご覧ください。
|
||||
|
||||
+150
-150
@@ -1,200 +1,200 @@
|
||||
---
|
||||
title: Prepare Your CSV Files
|
||||
description: Complete step-by-step guide to format your data for import into Twenty.
|
||||
title: CSV ファイルを準備する
|
||||
description: Twenty へのインポート用にデータをフォーマットするための、完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
This guide walks you through preparing your CSV file for a successful import. Follow these steps in order to avoid errors.
|
||||
このガイドは、インポートを成功させるための CSV ファイルの準備方法を順を追って説明します。 エラーを避けるために、次の手順に従ってください。
|
||||
|
||||
## Step 1: Check File Requirements
|
||||
## ステップ 1: ファイル要件を確認する
|
||||
|
||||
Before you start, ensure your file meets these requirements:
|
||||
開始する前に、ファイルが次の要件を満たしていることを確認してください。
|
||||
|
||||
| Requirement | Details |
|
||||
| 要件 | 詳細 |
|
||||
| ------------ | --------------------- |
|
||||
| **形式** | CSV、XLSX、または XLS |
|
||||
| **サイズ上限** | 1 ファイルあたり 10,000 レコード |
|
||||
| **エンコーディング** | UTF-8 推奨 |
|
||||
| **構造** | ファイルごとに 1 つのオブジェクトタイプ |
|
||||
|
||||
<Note>10,000 レコードを超えるデータセットは、複数のファイルに分割するか、[API インポート](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)を使用してください。</Note>
|
||||
|
||||
## ステップ 2: サンプルファイルをダウンロードする
|
||||
|
||||
**これは最も重要なステップです。** サンプルファイルには、Twenty が想定する正確な列名と形式が示されています。
|
||||
|
||||
1. オブジェクトビュー（People、Companies など）に移動します。
|
||||
2. 「**⋮**」→「**Import records**」をクリックします。
|
||||
3. 「**Download sample file**」をクリックします。
|
||||
4. このファイルをテンプレートとして使用してください。
|
||||
|
||||
<Note>**プロのヒント:** 代わりに、既存のレコードを少数エクスポートします。 これにより、データのあるべきフォーマットの実例が得られ、インポート時に列名が自動的にマッピングされます。</Note>
|
||||
|
||||
## ステップ 3: 重複値を削除する
|
||||
|
||||
Twenty は一部のフィールドに一意性を強制します。 重複はインポートエラーの原因になります。
|
||||
|
||||
| オブジェクト | 一意のフィールド |
|
||||
| -------------- | ------------------------ |
|
||||
| **Format** | CSV, XLSX, or XLS |
|
||||
| **Size limit** | 10,000 records per file |
|
||||
| **Encoding** | UTF-8 recommended |
|
||||
| **Structure** | One object type per file |
|
||||
| **People** | `id`, `email` |
|
||||
| **会社** | `id`, `domain` |
|
||||
| **カスタムオブジェクト** | `id` に加え、一意に設定した任意のフィールド |
|
||||
|
||||
<Note>For datasets larger than 10,000 records, split into multiple files or use the [API import](/l/ja/user-guide/data-migration/how-tos/import-data-via-api).</Note>
|
||||
**インポート前に:**
|
||||
|
||||
## Step 2: Download the Sample File
|
||||
1. スプレッドシートを一意フィールド（email または domain）で並べ替えます。
|
||||
2. 重複行を削除または統合します。
|
||||
3. Twenty に既に存在する重複がないか確認します。
|
||||
|
||||
**This is the most important step.** The sample file shows you the exact column names and format Twenty expects.
|
||||
<Warning>**ソフト削除されたレコードも一意性の判定に含まれます。** Command Menu → See deleted records にあるレコードは重複エラーの原因になります。 それらを完全に削除するか、復元して更新してください。</Warning>
|
||||
|
||||
1. Go to the object view (People, Companies, etc.)
|
||||
2. Click **⋮** → **Import records**
|
||||
3. Click **Download sample file**
|
||||
4. Use this file as your template
|
||||
## ステップ 4: 各フィールドタイプを正しくフォーマットする
|
||||
|
||||
<Note>**Pro tip:** Export a few existing records instead. This gives you real examples of how data should be formatted, and the column names will map automatically during import.</Note>
|
||||
フィールドタイプごとに必要な形式が異なります。 完全なリファレンスは次のとおりです。
|
||||
|
||||
## Step 3: Remove Duplicate Values
|
||||
### テキストフィールド
|
||||
|
||||
Twenty enforces uniqueness on certain fields. Duplicates will cause import errors.
|
||||
* 特別なフォーマットは不要です
|
||||
* 先頭/末尾の空白は自動的にトリムされます
|
||||
|
||||
| Object | Unique Fields |
|
||||
| ------------------ | ----------------------------------------- |
|
||||
| **People** | `id`, `email` |
|
||||
| **Companies** | `id`, `domain` |
|
||||
| **Custom objects** | `id`, plus any field you marked as unique |
|
||||
### メールフィールド
|
||||
|
||||
**Before importing:**
|
||||
|
||||
1. Sort your spreadsheet by the unique field (email or domain)
|
||||
2. Remove or merge duplicate rows
|
||||
3. Check for duplicates that already exist in Twenty
|
||||
|
||||
<Warning>**Soft-deleted records count toward uniqueness.** Records in Command Menu → See deleted records will cause duplicate errors. Delete them permanently or restore and update them.</Warning>
|
||||
|
||||
## Step 4: Format Each Field Type Correctly
|
||||
|
||||
Different field types require specific formats. Here's the complete reference:
|
||||
|
||||
### Text Fields
|
||||
|
||||
* No special formatting required
|
||||
* Leading/trailing spaces are automatically trimmed
|
||||
|
||||
### Email Fields
|
||||
|
||||
* Must be valid email format: `name@domain.com`
|
||||
* Must be unique (no duplicates in file or in Twenty)
|
||||
* For additional emails, use this format in the **Emails / Additional Emails** column:
|
||||
* 有効なメール形式である必要があります: `name@domain.com`
|
||||
* 一意である必要があります（ファイル内および Twenty 内に重複がないこと）
|
||||
* 追加のメールについては、**Emails / Additional Emails** 列で次の形式を使用します:
|
||||
|
||||
```
|
||||
["jane@twenty.com","jane.doe@twenty.com"]
|
||||
```
|
||||
|
||||
### Domain Fields
|
||||
### ドメインフィールド
|
||||
|
||||
* **Recommended format**: `https://domain.com`
|
||||
* This matches the format used by mailbox/calendar sync (prevents duplicates)
|
||||
* Fill both columns:
|
||||
* **推奨形式**: `https://domain.com`
|
||||
* これはメールボックス/カレンダーの同期で使用される形式と一致します（重複を防止）
|
||||
* 両方の列を入力してください。
|
||||
* **Domain / Domain Label**: `domain.com`
|
||||
* **Domain / Domain URL**: `https://domain.com`
|
||||
* Must be unique within your file and in Twenty
|
||||
* ファイル内および Twenty 内で一意である必要があります
|
||||
|
||||
### Phone Fields
|
||||
### 電話番号フィールド
|
||||
|
||||
Phone is a **nested field** requiring multiple columns:
|
||||
電話番号は、複数の列を必要とする**ネストされたフィールド**です:
|
||||
|
||||
| Column | Example |
|
||||
| 列 | 例 |
|
||||
| --------------------------------------- | ------------ |
|
||||
| **Phones / Primary Phone Number** | `4159095555` |
|
||||
| **Phones / Primary Phone Country Code** | `US` |
|
||||
| **Phones / Primary Phone Calling Code** | `+1` |
|
||||
|
||||
### Address Fields
|
||||
### 住所フィールド
|
||||
|
||||
Address is a **nested field** with multiple columns (some can be left empty):
|
||||
住所は複数列からなる **入れ子のフィールド** です（空欄のままでよい列もあります）:
|
||||
|
||||
* **Address / Address 1**: Street address line 1
|
||||
* **Address / Address 2**: Street address line 2 (optional)
|
||||
* **Address / City**: City name
|
||||
* **Address / State**: State or province
|
||||
* **Address / Country**: Country name
|
||||
* **Address / Post Code**: Postal/ZIP code
|
||||
* **Address / Address 1**: 住所の 1 行目（番地など）
|
||||
* **Address / Address 2**: 住所の 2 行目（任意）
|
||||
* **Address / City**: 市区町村名
|
||||
* **Address / State**: 州または都道府県
|
||||
* **Address / Country**: 国名
|
||||
* **Address / Post Code**: 郵便番号（ZIP コード）
|
||||
|
||||
### Date Fields
|
||||
### 日付フィールド
|
||||
|
||||
Use consistent formatting throughout your file:
|
||||
ファイル全体で形式を統一してください:
|
||||
|
||||
* `YYYY-MM-DD` (recommended): `2024-03-15`
|
||||
* `YYYY-MM-DD`（推奨）: `2024-03-15`
|
||||
* `MM/DD/YYYY`: `03/15/2024`
|
||||
* `DD/MM/YYYY`: `15/03/2024`
|
||||
* ISO 8601: `2024-03-15T10:30:00Z`
|
||||
|
||||
### Number Fields
|
||||
### 数値フィールド
|
||||
|
||||
* Numbers only (no text)
|
||||
* Use period for decimals: `1234.56`
|
||||
* No thousands separators (not `1,234.56`)
|
||||
* 数値のみ（テキスト不可）
|
||||
* 小数点はピリオドを使用: `1234.56`
|
||||
* 桁区切りを使用しない（`1,234.56` は不可）
|
||||
|
||||
### Currency Fields
|
||||
### 通貨フィールド
|
||||
|
||||
Currency is a **nested field** requiring two columns that **both must be filled**:
|
||||
通貨は **2 列を要する入れ子のフィールド** で、**両方に入力が必要** です:
|
||||
|
||||
| Column | Example |
|
||||
| 列 | 例 |
|
||||
| --------------------- | --------- |
|
||||
| **Amount / Amount** | `1234.56` |
|
||||
| **Amount / Currency** | `USD` |
|
||||
|
||||
### Boolean Fields
|
||||
### ブール値フィールド
|
||||
|
||||
Use uppercase: `TRUE` or `FALSE`
|
||||
大文字を使用: `TRUE` または `FALSE`
|
||||
|
||||
<Warning>Lowercase `true` or `false` will not work.</Warning>
|
||||
<Warning>小文字の `true` や `false` は動作しません。</Warning>
|
||||
|
||||
### Select Fields
|
||||
### 選択フィールド
|
||||
|
||||
Use the **API name** of the option, not the display label.
|
||||
表示ラベルではなく、オプションの **API 名** を使用してください。
|
||||
|
||||
**How to find API names:**
|
||||
**API 名の見つけ方:**
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object and field
|
||||
3. Enable **Advanced mode** (toggle at bottom right)
|
||||
4. Copy the API name (e.g., `OPTION_1`, not "Option 1")
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. オブジェクトとフィールドを選択
|
||||
3. **高度なモード** を有効化（右下のトグル）
|
||||
4. API 名をコピー（例: `OPTION_1`。"Option 1" ではありません）
|
||||
|
||||
<Note>New select options are not created automatically. Add them in **Settings → Data Model** before importing.</Note>
|
||||
<Note>新しい選択肢は自動的に作成されません。 インポート前に **設定 → データモデル** で追加してください。</Note>
|
||||
|
||||
### Multi-Select Fields
|
||||
### 複数選択フィールド
|
||||
|
||||
Use API names in array format:
|
||||
API 名を配列形式で記述します:
|
||||
|
||||
```
|
||||
["VALUE1","VALUE2"]
|
||||
```
|
||||
|
||||
### Array Fields
|
||||
### 配列フィールド
|
||||
|
||||
Use JSON array format:
|
||||
JSON 配列形式を使用します:
|
||||
|
||||
```
|
||||
["value1","value2"]
|
||||
```
|
||||
|
||||
### Rating Fields
|
||||
### 評価フィールド
|
||||
|
||||
Use the format: `RATING_1`, `RATING_2`, `RATING_3`, `RATING_4`, or `RATING_5`
|
||||
次の形式を使用: `RATING_1`、`RATING_2`、`RATING_3`、`RATING_4`、または `RATING_5`
|
||||
|
||||
### Links/URL Fields
|
||||
### リンク/URL フィールド
|
||||
|
||||
Fill both columns:
|
||||
両方の列を入力:
|
||||
|
||||
* **Links / Link Label**: `Twenty`
|
||||
* **Links / Link URL**: `https://twenty.com`
|
||||
|
||||
For secondary links, use the **Links / Secondary Links** column:
|
||||
二次リンクは **Links / Secondary Links** 列を使用します:
|
||||
|
||||
```
|
||||
[{"url":"https://twenty.com","label":"Twenty"}]
|
||||
```
|
||||
|
||||
### JSON Fields
|
||||
### JSON フィールド
|
||||
|
||||
Use valid JSON format:
|
||||
有効な JSON 形式を使用します:
|
||||
|
||||
```
|
||||
{"key":"value","key2":"value2"}
|
||||
```
|
||||
|
||||
### ID Fields
|
||||
### ID フィールド
|
||||
|
||||
* **Optional**: Twenty auto-generates IDs if not provided
|
||||
* **Format**: UUID (e.g., `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`)
|
||||
* **Use case**: Include ID to update existing records instead of creating new ones
|
||||
* **任意**: 指定がない場合、Twenty が ID を自動生成します
|
||||
* **形式**: UUID（例: `c776ee49-f608-4a77-8cc8-6fe96ae1e43f`）
|
||||
* **用途**: 新規作成ではなく既存レコードを更新する場合は ID を含めます
|
||||
|
||||
## Step 5: Add Relation Columns (If Linking Records)
|
||||
## 手順5: リレーション列を追加（レコードをリンクする場合）
|
||||
|
||||
To link records to other objects (e.g., People to Companies), add a column with the unique identifier of the related record.
|
||||
レコードを他のオブジェクトにリンクするには（例: People を Companies にリンク）、関連レコードの一意の識別子を含む列を追加します。
|
||||
|
||||
**Example**: Linking People to Companies
|
||||
**例**: People を Companies にリンク
|
||||
|
||||
Add a column to your People CSV:
|
||||
People の CSV に列を追加:
|
||||
|
||||
```
|
||||
firstName,lastName,email,companyDomain
|
||||
@@ -202,69 +202,69 @@ John,Smith,john@acme.com,https://acme.com
|
||||
Jane,Doe,jane@widgets.co,https://widgets.co
|
||||
```
|
||||
|
||||
**Important rules for relations:**
|
||||
**リレーションに関する重要なルール:**
|
||||
|
||||
* The parent record must already exist in Twenty
|
||||
* Use the **Domain URL** format (`https://domain.com`), not the label
|
||||
* Map only ONE unique identifier (don't include both `companyId` AND `companyDomain`)
|
||||
* For Workspace Members, use their **email** (not name)
|
||||
* 親レコードは事前に Twenty に存在している必要があります
|
||||
* ラベルではなく **ドメイン URL** 形式（`https://domain.com`）を使用してください
|
||||
* 一意の識別子は 1 つだけマッピングしてください（`companyId` と `companyDomain` を両方含めない）
|
||||
* ワークスペースメンバーには **メールアドレス**（氏名ではなく）を使用してください
|
||||
|
||||
<Warning>
|
||||
**Import Order Matters!**
|
||||
**インポート順序は重要です！**
|
||||
|
||||
Import the "one" side before the "many" side:
|
||||
「1」側を「多」側より先にインポートしてください:
|
||||
|
||||
1. **Companies** first
|
||||
2. **People** second (with company reference)
|
||||
3. **Opportunities** third
|
||||
1. **会社** を先に
|
||||
2. **People** を 2 番目（会社参照付き）
|
||||
3. **商談** を 3 番目に
|
||||
|
||||
The parent record must exist before you can reference it.
|
||||
参照する前に親レコードが存在している必要があります。
|
||||
</Warning>
|
||||
|
||||
See [How to Import Relations](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) for detailed instructions.
|
||||
詳細な手順については、[リレーションをインポートする方法](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)を参照してください。
|
||||
|
||||
## Step 6: Ensure Fields Exist in Twenty
|
||||
## 手順6: Twenty にフィールドが存在することを確認
|
||||
|
||||
The import creates **records**, not **fields**. All fields you want to import must already exist in your data model.
|
||||
インポートで作成されるのはフィールドではなくレコードです。 インポートしたいフィールドはすべて、あらかじめデータモデルに存在している必要があります。
|
||||
|
||||
**Before importing:**
|
||||
**インポート前に:**
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select your object
|
||||
3. Create any custom fields you need
|
||||
4. Note the exact field names (they must match your column headers)
|
||||
1. **設定 → データモデル** に移動する
|
||||
2. 対象オブジェクトを選択する
|
||||
3. 必要なカスタムフィールドを作成する
|
||||
4. フィールド名の正確な表記を控える（列ヘッダーと一致している必要があります）
|
||||
|
||||
## Step 7: Final Checklist
|
||||
## 手順7: 最終チェックリスト
|
||||
|
||||
Before uploading your file, verify:
|
||||
ファイルをアップロードする前に、次を確認してください:
|
||||
|
||||
<Check>File is CSV, XLSX, or XLS format</Check>
|
||||
<Check>File has fewer than 10,000 records</Check>
|
||||
<Check>Encoding is UTF-8</Check>
|
||||
<Check>No duplicate emails (for People) or domains (for Companies)</Check>
|
||||
<Check>Dates use consistent format throughout</Check>
|
||||
<Check>Domains use `https://domain.com` format</Check>
|
||||
<Check>Boolean fields use `TRUE` or `FALSE` (uppercase)</Check>
|
||||
<Check>Select fields use API names, not display labels</Check>
|
||||
<Check>All custom fields exist in Settings → Data Model</Check>
|
||||
<Check>Parent records imported before child records</Check>
|
||||
<Check>Relation columns reference existing records</Check>
|
||||
<Check>ファイル形式が CSV、XLSX、または XLS である</Check>
|
||||
<Check>ファイルのレコード数が 10,000 未満である</Check>
|
||||
<Check>エンコーディングが UTF-8 である</Check>
|
||||
<Check>（People）では重複するメールがなく、（Companies）では重複するドメインがない</Check>
|
||||
<Check>日付の形式が全体で統一されている</Check>
|
||||
<Check>ドメインが `https://domain.com` 形式である</Check>
|
||||
<Check>ブール値フィールドは `TRUE` または `FALSE`（大文字）を使用している</Check>
|
||||
<Check>選択フィールドは表示ラベルではなく API 名を使用している</Check>
|
||||
<Check>すべてのカスタムフィールドが 設定 → データモデル に存在する</Check>
|
||||
<Check>子レコードより先に親レコードをインポートしている</Check>
|
||||
<Check>リレーション列が既存レコードを参照している</Check>
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
## 避けるべき一般的なミス
|
||||
|
||||
| Mistake | Solution |
|
||||
| -------------------------------------------- | ------------------------------------- |
|
||||
| Using `true` instead of `TRUE` | Boolean values must be uppercase |
|
||||
| Using display labels for Select fields | Find and use API names in Settings |
|
||||
| Importing People before Companies | Always import parent objects first |
|
||||
| Missing currency code for Currency fields | Fill both Amount and Currency columns |
|
||||
| Wrong domain format | Use `https://domain.com` consistently |
|
||||
| Mapping multiple unique fields for relations | Map only ONE (domain OR id, not both) |
|
||||
| 誤り | 解決策 |
|
||||
| -------------------------------- | --------------------------------------- |
|
||||
| `TRUE` の代わりに `true` を使用している | ブール値は大文字である必要があります |
|
||||
| 選択フィールドで表示ラベルを使用している | 設定で API 名を確認して使用する |
|
||||
| Companies より先に People をインポートしている | 常に親オブジェクトから先にインポートする |
|
||||
| 通貨フィールドで通貨コードが欠けている | Amount と Currency の両方の列を入力する |
|
||||
| ドメインの形式が誤っている | `https://domain.com` を一貫して使用する |
|
||||
| リレーションで複数の一意フィールドをマッピングしている | 1 つだけをマッピングする（domain か id のどちらかで、両方は不可） |
|
||||
|
||||
## Next Steps
|
||||
## 次のステップ
|
||||
|
||||
Your file is ready! Now:
|
||||
ファイルの準備ができました！ 次へ:
|
||||
|
||||
* [Import Companies](/l/ja/user-guide/data-migration/how-tos/import-companies-via-csv) (import these first)
|
||||
* [Import Contacts](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)
|
||||
* [Fix any import errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [会社をインポート](/l/ja/user-guide/data-migration/how-tos/import-companies-via-csv)（これを先にインポート）
|
||||
* [コンタクトをインポート](/l/ja/user-guide/data-migration/how-tos/import-contacts-via-csv)
|
||||
* [インポートエラーを修正](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
|
||||
+107
-107
@@ -1,67 +1,67 @@
|
||||
---
|
||||
title: Update Existing Records via Import
|
||||
description: Complete step-by-step guide to bulk updating records using CSV import.
|
||||
title: インポートで既存のレコードを更新する
|
||||
description: CSV インポートを使用したレコードの一括更新のための完全なステップバイステップガイド。
|
||||
---
|
||||
|
||||
## Overview
|
||||
## 概要
|
||||
|
||||
Need to update many records at once? Instead of editing them one by one, use the CSV import to bulk update existing records.
|
||||
多数のレコードを一度に更新する必要がありますか？ 1 件ずつ編集する代わりに、CSV インポートを使って既存のレコードを一括更新しましょう。
|
||||
|
||||
**Use cases:**
|
||||
**ユースケース：**
|
||||
|
||||
* Update job titles for multiple people
|
||||
* Change company information in bulk
|
||||
* Add data to new custom fields
|
||||
* Correct data errors across many records
|
||||
* 複数の連絡先の役職を更新する
|
||||
* 会社情報を一括で変更する
|
||||
* 新しいカスタムフィールドにデータを追加する
|
||||
* 多数のレコードにわたるデータの誤りを修正する
|
||||
|
||||
## How It Works
|
||||
## 仕組み
|
||||
|
||||
When you import a file containing a **unique identifier** that matches an existing record, Twenty updates that record instead of creating a duplicate.
|
||||
既存のレコードと一致する**一意の識別子**を含むファイルをインポートすると、Twenty は重複を作成せず、そのレコードを更新します。
|
||||
|
||||
| If unique identifier... | Twenty will... |
|
||||
| -------------------------- | ------------------------------------------------ |
|
||||
| Matches an existing record | **Update** the existing record |
|
||||
| Doesn't match any record | **Create** a new record |
|
||||
| Is missing from your file | **Create** a new record (with auto-generated ID) |
|
||||
| 一意の識別子が... | Twenty は... |
|
||||
| ------------- | ------------------------ |
|
||||
| 既存のレコードに一致する | 既存のレコードを**更新** |
|
||||
| どのレコードにも一致しない | 新しいレコードを**作成** |
|
||||
| ファイルに含まれていない | 新しいレコードを**作成**（ID は自動生成） |
|
||||
|
||||
<Warning>
|
||||
**Multi-Select fields are overwritten, not merged.**
|
||||
**複数選択フィールドはマージではなく上書きされます。**
|
||||
|
||||
If a record has `Option A` and `Option B` selected, and you import `["Option C"]`, the record will only have `Option C` after import. The import replaces all previous selections—it does not add to them.
|
||||
あるレコードで `Option A` と `Option B` が選択されている状態で `["Option C"]` をインポートすると、インポート後はそのレコードには `Option C` のみが残ります。 インポートは以前の選択をすべて置き換えます—追加はされません。
|
||||
|
||||
To keep existing values, include them all in your import: `["Option A","Option B","Option C"]`
|
||||
既存の値を保持するには、インポートにすべて含めてください: `["Option A","Option B","Option C"]`
|
||||
</Warning>
|
||||
|
||||
## Step 1: Export Your Current Data
|
||||
## ステップ 1: 現在のデータをエクスポートする
|
||||
|
||||
First, export the records you want to update:
|
||||
まず、更新したいレコードをエクスポートします。
|
||||
|
||||
1. Navigate to the object (People, Companies, etc.)
|
||||
2. **Add the columns you need** — click **Options → Fields** to show the fields you want to update
|
||||
3. **Filter if needed** — narrow down to only the records you want to update
|
||||
4. Click **⋮** → **Export view**
|
||||
5. Save the CSV file
|
||||
1. オブジェクト（連絡先、会社など）に移動します。
|
||||
2. **必要な列を追加** — 更新したいフィールドを表示するには **Options → Fields** をクリックします
|
||||
3. **必要に応じてフィルター** — 更新対象のレコードのみに絞り込みます
|
||||
4. **⋮** → **Export view** をクリック
|
||||
5. CSV ファイルを保存します
|
||||
|
||||
<Note>**Why export first?** The exported file has the correct format, includes unique identifiers, and maps automatically during import.</Note>
|
||||
<Note>**なぜ最初にエクスポートするのか？** エクスポートされたファイルは正しい形式で、一意の識別子を含み、インポート時に自動でマッピングされます。</Note>
|
||||
|
||||
### What Gets Exported
|
||||
### エクスポートされる内容
|
||||
|
||||
* All visible columns in your current view
|
||||
* The record's unique identifiers (`id`, `email`, `domain`)
|
||||
* Current field values you can modify
|
||||
* 現在のビューで表示されているすべての列
|
||||
* レコードの一意の識別子（`id`、`email`、`domain`）
|
||||
* 変更可能な現在のフィールド値
|
||||
|
||||
## Step 2: Edit the CSV File
|
||||
## ステップ 2: CSV ファイルを編集する
|
||||
|
||||
Open the exported file in your spreadsheet application (Excel, Google Sheets, etc.):
|
||||
エクスポートしたファイルを表計算アプリ（Excel、Google スプレッドシートなど）で開きます。
|
||||
|
||||
1. **Keep the unique identifier column** — don't delete `id`, `email`, or `domain`
|
||||
2. **Update the values** in the columns you want to change
|
||||
3. **Remove columns you don't need to update** (optional, but cleaner)
|
||||
4. **Don't change unique identifier values** — or Twenty will create new records
|
||||
1. **一意の識別子の列は残す** — `id`、`email`、`domain` は削除しないでください
|
||||
2. 変更したい列の値を**更新**します
|
||||
3. **更新が不要な列は削除**（任意ですが、その方がすっきりします）
|
||||
4. **一意の識別子の値は変更しないでください** — 変更すると Twenty が新しいレコードを作成します
|
||||
|
||||
### Example: Updating Job Titles
|
||||
### 例：役職の更新
|
||||
|
||||
**Exported file:**
|
||||
**エクスポートしたファイル：**
|
||||
|
||||
```csv
|
||||
id,email,firstName,lastName,jobTitle
|
||||
@@ -70,7 +70,7 @@ id,email,firstName,lastName,jobTitle
|
||||
550e8400-e29b-41d4-a716-446655440003,bob@acme.com,Bob,Johnson,Sales Rep
|
||||
```
|
||||
|
||||
**After your edits:**
|
||||
**編集後：**
|
||||
|
||||
```csv
|
||||
id,email,firstName,lastName,jobTitle
|
||||
@@ -80,63 +80,63 @@ id,email,firstName,lastName,jobTitle
|
||||
```
|
||||
|
||||
<Warning>
|
||||
**Don't change the unique identifier values.**
|
||||
**一意の識別子の値は変更しないでください。**
|
||||
|
||||
If you change `john@acme.com` to `john.smith@acme.com`, Twenty will create a new record instead of updating the existing one.
|
||||
`john@acme.com` を `john.smith@acme.com` に変更すると、Twenty は既存のレコードを更新せずに新しいレコードを作成します。
|
||||
</Warning>
|
||||
|
||||
## Step 3: Import the Updated File
|
||||
## ステップ 3: 更新したファイルをインポートする
|
||||
|
||||
1. Navigate to the object
|
||||
2. Click **⋮** → **Import records**
|
||||
3. Upload your edited CSV file
|
||||
4. **Ensure the unique identifier is mapped** — verify `email`, `domain`, or `id` is mapped correctly
|
||||
5. Review the field mappings
|
||||
6. Check for errors
|
||||
7. Click **Confirm**
|
||||
1. 対象のオブジェクトに移動します
|
||||
2. **⋮** → **Import records** をクリック
|
||||
3. 編集した CSV ファイルをアップロードします
|
||||
4. **一意の識別子がマッピングされていることを確認** — `email`、`domain`、または `id` が正しくマッピングされているか検証します
|
||||
5. フィールドのマッピングを確認します
|
||||
6. エラーがないか確認します
|
||||
7. **Confirm** をクリック
|
||||
|
||||
Twenty matches records by the unique identifier and updates them with new values.
|
||||
Twenty は一意の識別子でレコードを照合し、新しい値で更新します。
|
||||
|
||||
## Choosing the Right Unique Identifier
|
||||
## 適切な一意の識別子の選び方
|
||||
|
||||
| Object | Recommended | Alternative | Notes |
|
||||
| ------------------ | ---------------- | ----------- | ---------------------------- |
|
||||
| **People** | `email` | `id` | Email is human-readable |
|
||||
| **Companies** | `domain` | `id` | Domain is human-readable |
|
||||
| **Custom objects** | Any unique field | `id` | Use your custom unique field |
|
||||
| オブジェクト | 推奨 | 代替 | ノート |
|
||||
| -------------- | ---------- | ---- | ----------------- |
|
||||
| **連絡先** | `メール` | `id` | メールアドレスは人間が読みやすい |
|
||||
| **会社** | `ドメイン` | `id` | ドメインは人間が読みやすい |
|
||||
| **カスタムオブジェクト** | 任意の一意フィールド | `id` | カスタムの一意フィールドを使用する |
|
||||
|
||||
<Note>**Use only ONE unique identifier.** Don't map both `email` AND `id`. This can cause confusion and errors.</Note>
|
||||
<Note>**一意の識別子は 1 つだけ使用してください。** `email` と `id` の両方をマッピングしないでください。 これは混乱やエラーの原因になります。</Note>
|
||||
|
||||
### Using Custom Unique Fields
|
||||
### カスタムの一意フィールドを使用する
|
||||
|
||||
If you have a custom field marked as unique (like an external ID from another system):
|
||||
一意としてマークされたカスタムフィールド（他システムの外部 ID など）がある場合：
|
||||
|
||||
1. Include that field in your export and import
|
||||
2. Map it during import
|
||||
3. Twenty will match on that field
|
||||
1. そのフィールドをエクスポートとインポートに含めます
|
||||
2. インポート時にマッピングします
|
||||
3. Twenty はそのフィールドで照合します
|
||||
|
||||
## Step 4: Verify the Updates
|
||||
## ステップ 4: 更新内容を確認する
|
||||
|
||||
After importing:
|
||||
インポート後：
|
||||
|
||||
1. Open a few updated records
|
||||
2. Verify the changes were applied
|
||||
3. Check that no duplicate records were created
|
||||
1. 更新されたレコードをいくつか開きます
|
||||
2. 変更が反映されていることを確認します
|
||||
3. 重複レコードが作成されていないことを確認します
|
||||
|
||||
## What About Fields Not in Your File?
|
||||
## ファイルに含まれていないフィールドはどうなりますか？
|
||||
|
||||
**Fields not included in your import file remain unchanged.**
|
||||
**インポートファイルに含まれていないフィールドは変更されません。**
|
||||
|
||||
| Your file includes... | Result |
|
||||
| ---------------------------- | ------------------------------------------------------ |
|
||||
| `email`, `jobTitle` | Only `jobTitle` is updated; other fields stay the same |
|
||||
| `email`, `jobTitle`, `phone` | `jobTitle` and `phone` are updated |
|
||||
| ファイルに含まれている項目... | 結果 |
|
||||
| -------------------------- | -------------------------------- |
|
||||
| `email`、`jobTitle` | `jobTitle` のみ更新され、他のフィールドはそのままです |
|
||||
| `email`、`jobTitle`、`phone` | `jobTitle` と `phone` が更新されます |
|
||||
|
||||
This means you only need to include the fields you want to change (plus the unique identifier).
|
||||
つまり、変更したいフィールド（＋一意の識別子）だけを含めれば十分です。
|
||||
|
||||
## Combining Updates and New Records
|
||||
## 更新と新規レコードの併用
|
||||
|
||||
You can update existing records AND create new ones in the same import:
|
||||
同じインポートで既存レコードの更新と新規作成の両方が可能です。
|
||||
|
||||
```csv
|
||||
email,firstName,lastName,jobTitle
|
||||
@@ -144,55 +144,55 @@ john@acme.com,John,Smith,Senior Manager ← Updates existing (email matches)
|
||||
newperson@acme.com,New,Person,Analyst ← Creates new (email doesn't match)
|
||||
```
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
## 避けるべき一般的なミス
|
||||
|
||||
| Mistake | Problem | Result | Solution |
|
||||
| ------------------------------ | ------------------------------------------------------- | -------------------------------------- | ----------------------------------------- |
|
||||
| **Changing unique identifier** | Changed `john@acme.com` to `john.smith@acme.com` | Creates new record instead of updating | Keep unique identifiers unchanged |
|
||||
| **Multiple unique fields** | Mapping both `email` AND `id` | Potential matching conflicts | Map only ONE unique identifier |
|
||||
| **No unique identifier** | File only has `firstName`, `lastName`, `jobTitle` | All rows create new records | Always include `email`, `domain`, or `id` |
|
||||
| **Case mismatch** | File has `John@acme.com` but Twenty has `john@acme.com` | Creates new record | Export from Twenty to get exact values |
|
||||
| ミス | 問題 | 結果 | 解決策 |
|
||||
| -------------- | --------------------------------------------------------- | ------------------- | -------------------------------- |
|
||||
| **一意の識別子の変更** | `john@acme.com` を `john.smith@acme.com` に変更した | 更新ではなく新しいレコードが作成される | 一意の識別子は変更しない |
|
||||
| **複数の一意フィールド** | `email` と `id` の両方をマッピングしている | 照合の競合が発生する可能性 | 一意の識別子は 1 つだけマッピングする |
|
||||
| **一意の識別子なし** | ファイルには `firstName`、`lastName`、`jobTitle` しかない | すべての行で新しいレコードが作成される | `email`、`domain`、または `id` を必ず含める |
|
||||
| **大文字小文字の不一致** | ファイルは `John@acme.com` だが、Twenty では `john@acme.com` になっている | 新しいレコードを作成する | 正確な値を取得するには Twenty からエクスポートする |
|
||||
|
||||
## FAQ
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="What if some records don't exist yet?">
|
||||
Records with unique identifiers that don't match existing records will be created as new records. This lets you update and create in the same import.
|
||||
<Accordion title="一部のレコードがまだ存在しない場合はどうなりますか？">
|
||||
一意の識別子が既存レコードと一致しないレコードは新規レコードとして作成されます。 これにより、同じインポートで更新と新規作成の両方が可能になります。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I clear/empty a field value?">
|
||||
Yes, leave the cell empty in your CSV. The import will clear that field's value on the existing record.
|
||||
<Accordion title="フィールドの値をクリア（空に）できますか？">
|
||||
はい、CSV のセルを空白のままにしてください。 インポートにより、既存レコードのそのフィールド値がクリアされます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="What happens to fields I don't include in the import?">
|
||||
Fields not in your import file remain unchanged on existing records. Only fields you include are updated.
|
||||
<Accordion title="インポートに含めなかったフィールドはどうなりますか？">
|
||||
インポートファイルにないフィールドは、既存レコード上で変更されません。 含めたフィールドのみが更新されます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I update relation fields (like Company)?">
|
||||
Yes! Include the relation's unique identifier (e.g., `companyDomain`) and map it to the relation field. The relation will be updated.
|
||||
<Accordion title="リレーションフィールド（Company など）を更新できますか？">
|
||||
はい! リレーションの一意の識別子（例：`companyDomain`）を含め、リレーションフィールドにマッピングします。 リレーションが更新されます。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I know which records will be updated vs. created?">
|
||||
During the import review step, Twenty shows you how many records will be updated vs. created based on unique identifier matches.
|
||||
<Accordion title="どのレコードが更新され、どれが作成されるかはどのようにわかりますか？">
|
||||
インポートの確認ステップで、一意の識別子の一致に基づき、更新と作成の件数を Twenty が表示します。
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I undo a bulk update?">
|
||||
There's no automatic undo. We recommend exporting your data as a backup before making bulk updates.
|
||||
<Accordion title="一括更新を元に戻せますか？">
|
||||
自動で元に戻す機能はありません。 一括更新の前に、バックアップとしてデータをエクスポートすることをお勧めします。
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Best Practices
|
||||
## ベストプラクティス
|
||||
|
||||
1. **Export first** — always start from an export to ensure correct format
|
||||
2. **Backup before updating** — export your data before making bulk changes
|
||||
3. **Test with a few records** — try updating 5-10 records first before doing a large batch
|
||||
4. **Use human-readable identifiers** — `email` and `domain` are easier to verify than `id`
|
||||
5. **Only include necessary columns** — fewer columns means less chance for errors
|
||||
1. **まずエクスポート** — 正しい形式を確実にするため、必ずエクスポートから始める
|
||||
2. **更新前にバックアップ** — 大量の変更を行う前にデータをエクスポートする
|
||||
3. **少数のレコードでテスト** — 大規模に実行する前に、まず 5～10 件で更新を試す
|
||||
4. **人間が読みやすい識別子を使用** — `id` よりも `email` と `domain` の方が検証しやすい
|
||||
5. **必要な列のみを含める** — 列が少ないほどエラーの可能性が減ります
|
||||
|
||||
## Troubleshooting
|
||||
## トラブルシューティング
|
||||
|
||||
Having issues? Check:
|
||||
お困りですか？ 次を確認してください:
|
||||
|
||||
* [How to Fix Import Errors](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [Uniqueness Constraints](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [Field Mapping Reference](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
* [インポートエラーを解決する方法](/l/ja/user-guide/data-migration/how-tos/fix-import-errors)
|
||||
* [一意性制約](/l/ja/user-guide/data-migration/capabilities/uniqueness-constraints)
|
||||
* [フィールドマッピングのリファレンス](/l/ja/user-guide/data-migration/capabilities/field-mapping)
|
||||
|
||||
@@ -1,89 +1,89 @@
|
||||
---
|
||||
title: Data Migration
|
||||
description: Import and export your CRM data via CSV files or API.
|
||||
title: データ移行
|
||||
description: CSVファイルまたはAPIを使用してCRMデータをインポートおよびエクスポートできます。
|
||||
image: /images/user-guide/import-export-data/cloud.png
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/import-export-data/cloud.png" alt="Data Migration" />
|
||||
<img src="/images/user-guide/import-export-data/cloud.png" alt="データ移行" />
|
||||
</Frame>
|
||||
|
||||
## Import Methods
|
||||
## インポート方法
|
||||
|
||||
Twenty supports two main methods for importing data:
|
||||
Twenty では、データのインポート方法として主に次の2つをサポートしています。
|
||||
|
||||
| Method | Best For | Volume Limit |
|
||||
| -------------- | ------------------------------------ | ----------------------- |
|
||||
| **CSV Import** | Standard migrations, regular updates | 10,000 records per file |
|
||||
| **API Import** | Large-scale migrations, automation | Unlimited |
|
||||
| メソッド | 最適用途 | 件数上限 |
|
||||
| ------------ | ------------- | --------------- |
|
||||
| **CSVインポート** | 標準的な移行や定期的な更新 | 1ファイルあたり10,000件 |
|
||||
| **APIインポート** | 大規模な移行や自動化 | 無制限 |
|
||||
|
||||
<Note>For very large datasets (hundreds of thousands of records), use the API. Our [implementation partners](/l/ja/user-guide/getting-started/capabilities/implementation-services) can help run these scripts if needed.</Note>
|
||||
<Note>非常に大きなデータセット（数十万件のレコード）の場合は、API を使用してください。 必要に応じて、当社の[実装パートナー](/l/ja/user-guide/getting-started/capabilities/implementation-services)がこれらのスクリプトの実行を支援できます。</Note>
|
||||
|
||||
## CSV Import Basics
|
||||
## CSVインポートの基本
|
||||
|
||||
You can import data for any object using CSV, XLSX, or XLS files. Each file should contain **only one type of object** (e.g., only People records).
|
||||
CSV、XLSX、または XLS ファイルを使用して、任意のオブジェクトのデータをインポートできます。 各ファイルには、**1種類のオブジェクトのみ**を含めてください（例：People レコードのみ）。
|
||||
|
||||
<Note>**Fields must exist before import.** Uploading a CSV creates records but does not create fields. If you need custom fields, create them first under **Settings → Data Model**.</Note>
|
||||
<Note>**インポート前にフィールドが存在している必要があります。** CSV をアップロードするとレコードは作成されますが、フィールドは作成されません。 カスタムフィールドが必要な場合は、まず**Settings → Data Model**で作成してください。</Note>
|
||||
|
||||
### Steps
|
||||
### 手順
|
||||
|
||||
1. Navigate to the object where you want to import data
|
||||
2. Click the **⋮** icon on the top right (this is the Command Menu) and click on **Import records**
|
||||
3. Download the template file to ensure your data is in the expected format
|
||||
4. Upload your formatted CSV file
|
||||
5. Map your columns to Twenty fields
|
||||
6. Review errors (highlighted in yellow) and fix them, directly editing in the UI
|
||||
7. Confirm the import
|
||||
1. データをインポートする対象のオブジェクトに移動します。
|
||||
2. 右上の**⋮**アイコン（コマンドメニュー）をクリックし、**Import records**をクリックします。
|
||||
3. テンプレートファイルをダウンロードし、データが想定された形式になっていることを確認します。
|
||||
4. フォーマット済みのCSVファイルをアップロードします。
|
||||
5. 列を Twenty のフィールドにマッピングします。
|
||||
6. エラー（黄色でハイライト）を確認し、UI 上で直接編集して修正します。
|
||||
7. インポートを確定します。
|
||||
|
||||
### Importing relations between objects
|
||||
### オブジェクト間の関係をインポート
|
||||
|
||||
You can import relations between objects using the csv import function. You need to reference the related object using a unique field from this object: the `id`, the `email` for People and Workspace Members, the `domain` for companies, any other field set as unique in the data model for any other object.
|
||||
CSV インポート機能を使用して、オブジェクト間の関係をインポートできます。 関連オブジェクトは、一意のフィールドを使って参照します。使用できる例：`id`、People と Workspace Members では `email`、Companies では `domain`、そのほかのオブジェクトではデータモデルで一意に設定した任意のフィールド。
|
||||
|
||||
<Note>**Deleted records count toward uniqueness.** Soft-deleted records (visible under Command Menu → See deleted records) are included in uniqueness checks. If you import a record with the same unique value as a deleted record, the deleted record will be restored.</Note>
|
||||
<Note>**削除済みレコードも一意性に含まれます。** ソフト削除されたレコード（Command Menu → See deleted records で表示可能）も一意性チェックに含まれます。 削除済みレコードと同じ一意値のレコードをインポートすると、その削除済みレコードが復元されます。</Note>
|
||||
|
||||
<Warning>
|
||||
**Import Order Matters!**
|
||||
**インポートの順序が重要です！**
|
||||
|
||||
When importing related objects, upload files in this order:
|
||||
関連オブジェクトをインポートする場合は、次の順序でファイルをアップロードしてください。
|
||||
|
||||
1. **Companies** first (the "one" side of relationships)
|
||||
2. **People** second (linked to companies via companyId)
|
||||
3. **Opportunities** third (linked to companies/people)
|
||||
4. **Custom objects** with relations last
|
||||
1. **Companies** を最初に（リレーションの「one」側）
|
||||
2. **People** を2番目に（companyId を介して Companies にリンク）
|
||||
3. **Opportunities** を3番目に（Companies／People にリンク）
|
||||
4. リレーションのある **Custom objects** は最後に
|
||||
|
||||
Why? The "one" side of a one-to-many relationship must exist before you can reference it. For example, the Company record must exist before you import a Person with that company's ID.
|
||||
なぜですか？ 1対多のリレーションでは、「one」側が参照される前に存在している必要があります。 例えば、その会社のIDを持つ Person をインポートする前に、Company レコードが存在している必要があります。
|
||||
</Warning>
|
||||
|
||||
Please refer to [this article](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) for a step-by-step guide on how to proceed.
|
||||
手順の詳細については、[こちらの記事](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)を参照してください。
|
||||
|
||||
## Export Data
|
||||
## データをエクスポート
|
||||
|
||||
Export your workspace data for backups, reporting, or migration.
|
||||
バックアップ、レポーティング、または移行のためにワークスペースのデータをエクスポートします。
|
||||
|
||||
### Steps
|
||||
### 手順
|
||||
|
||||
1. Navigate to the object you want to export
|
||||
2. Configure the view with the columns you need
|
||||
3. Click **⋮** → **Export view**
|
||||
4. Save the CSV file
|
||||
1. エクスポートしたいオブジェクトに移動します。
|
||||
2. 必要な列を含むようにビューを設定します。
|
||||
3. **⋮** → **Export view** をクリックします。
|
||||
4. CSV ファイルを保存します。
|
||||
|
||||
<Note>**Only visible columns are exported.** The CSV file will only contain the columns displayed in your current view. Add or hide columns before exporting to control what data is included.</Note>
|
||||
<Note>**表示されている列のみがエクスポートされます。** CSV ファイルには、現在のビューに表示されている列だけが含まれます。 どのデータを含めるかを制御するために、エクスポート前に列を追加または非表示にしてください。</Note>
|
||||
|
||||
<Note>**Export limits**: Up to 20,000 records per export.</Note>
|
||||
<Note>**エクスポートの上限**: 1回のエクスポートにつき最大20,000件。</Note>
|
||||
|
||||
## Permissions
|
||||
## 権限
|
||||
|
||||
Data import and export require specific permissions:
|
||||
データのインポートとエクスポートには特定の権限が必要です。
|
||||
|
||||
* **Import**: Requires "Import CSV" permission
|
||||
* **Export**: Requires "Export CSV" permission
|
||||
* **Import**: "Import CSV" 権限が必要
|
||||
* **Export**: "Export CSV" 権限が必要
|
||||
|
||||
Contact your workspace admin if you don't have these permissions.
|
||||
これらの権限がない場合は、ワークスペース管理者に連絡してください。
|
||||
|
||||
## Next Steps
|
||||
## 次のステップ
|
||||
|
||||
* [Prepare your CSV files](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files)
|
||||
* [Import relations between objects](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
* [Import via API for large datasets](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)
|
||||
* [CSV ファイルの準備](/l/ja/user-guide/data-migration/how-tos/prepare-your-csv-files)
|
||||
* [オブジェクト間の関係をインポート](/l/ja/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv)
|
||||
* [大規模データセットをAPIでインポート](/l/ja/user-guide/data-migration/how-tos/import-data-via-api)
|
||||
|
||||
@@ -1,122 +1,124 @@
|
||||
---
|
||||
title: Fields
|
||||
description: Understand the role of fields and how to manage them.
|
||||
title: フィールド
|
||||
description: フィールドの役割とその管理方法を理解しましょう。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## About Fields
|
||||
## フィールドについて
|
||||
|
||||
Fields are like columns in a spreadsheet. They store different types of data like text, numbers, or dates. Fields can be standard (built-in) or custom (the ones you create).
|
||||
フィールドはスプレッドシートの列のようなものです。 テキスト、数字、日付などの異なるデータタイプを保存します。 フィールドには、標準（ビルトイン）とカスタム（ユーザー作成）があります。
|
||||
|
||||
### Standard Fields
|
||||
### 標準フィールド
|
||||
|
||||
Standard fields come built-in with Twenty to handle common business needs.
|
||||
Twenty には、一般的な業務ニーズに対応する標準フィールドがビルトインされています。
|
||||
|
||||
For example, `First Name` and `Last Name` are standard fields in the `People` object. They store text data for individual names.
|
||||
たとえば、「名」および「姓」は「人物」オブジェクトの標準フィールドです。 それらは個々の名前のテキストデータを保存します。
|
||||
|
||||
You cannot delete standard fields, but you can deactivate them if you don't need them.
|
||||
標準フィールドは削除できませんが、必要がない場合は無効化できます。
|
||||
|
||||
You can also customize the options of the standard `SELECT` type fields, for example the options for the `Stage` on Opportunities.
|
||||
標準の `SELECT` 型フィールドのオプションもカスタマイズできます。たとえば、商談の `Stage` のオプションです。
|
||||
|
||||
<img src="/images/user-guide/fields/standard-fields.png" style={{width:'100%'}} />
|
||||
|
||||
### Custom Fields
|
||||
### カスタムフィールド
|
||||
|
||||
Custom fields can be added to any object. You can store text, numbers, dates, dropdown selections, and more. Use custom fields to track information that's specific to your business.
|
||||
カスタムフィールドは任意のオブジェクトに追加できます。 テキスト、数字、日付、ドロップダウンの選択肢などを保存できます。 カスタムフィールドを使用して、ビジネスに特化した情報を追跡します。
|
||||
|
||||
For instance, a custom field for SpaceX could be `Rocket Active Status`, indicating if a rocket is operational.
|
||||
たとえば、SpaceX用のカスタムフィールドとして「ロケットの運用状況」を設定できます。これはロケットが稼働中かどうかを示します。
|
||||
|
||||
<img src="/images/user-guide/fields/custom-fields.png" style={{width:'100%'}} />
|
||||
|
||||
## Field Types
|
||||
## フィールドタイプ
|
||||
|
||||
Twenty supports various field types:
|
||||
Twenty はさまざまなフィールドタイプをサポートしています。
|
||||
|
||||
| Type | Description | Example |
|
||||
| ------------ | ----------------------------------------------------------------- | ------------------ |
|
||||
| Address | Structured address with street, city, state, country, postal code | Office Address |
|
||||
| Array | List of text values | Tags |
|
||||
| Boolean | True/false checkbox | Is Active |
|
||||
| Currency | Monetary value with currency code | Deal Amount (USD) |
|
||||
| Date | Date values | Close Date |
|
||||
| Date & Time | Date with time | Meeting Time |
|
||||
| Domain | Website domain (used for Companies) | acme.com |
|
||||
| Email | Email addresses (with primary + additional) | Contact Email |
|
||||
| JSON | Structured JSON data | Custom metadata |
|
||||
| Links | URLs with labels (primary + secondary) | Website, LinkedIn |
|
||||
| Long Text | Multi-line text | Description, Notes |
|
||||
| Multi-Select | Multiple choices from a predefined list | Tags, Categories |
|
||||
| Number | Numeric values (integers or decimals) | Quantity, Score |
|
||||
| Phone | Phone numbers with country code | Work Phone |
|
||||
| Rating | Star rating (1-5) | Priority, Score |
|
||||
| Relation | Links to records in other objects | Company → People |
|
||||
| Select | Single choice from a predefined list | Stage, Status |
|
||||
| Text | Single line of text | Name, Title |
|
||||
| タイプ | 説明 | 例 |
|
||||
| ------ | --------------------------- | ---------------- |
|
||||
| 住所 | 通り、都市、州、国、郵便番号を含む構造化された住所 | オフィス住所 |
|
||||
| Array | テキスト値のリスト | タグ |
|
||||
| ブール型 | 真偽値のチェックボックス | アクティブ |
|
||||
| 通貨 | 通貨コード付きの金額 | 商談金額（USD） |
|
||||
| 日付 | 日付の値 | 締切日 |
|
||||
| 日付と時間 | 時刻付きの日付 | ミーティング時刻 |
|
||||
| ドメイン | Web サイトのドメイン（Companies で使用） | acme.com |
|
||||
| メール | メールアドレス（主要＋追加） | 連絡先メール |
|
||||
| JSON | 構造化された JSON データ | カスタムメタデータ |
|
||||
| リンク | ラベル付きの URL（主要＋サブ） | Web サイト、LinkedIn |
|
||||
| 長文テキスト | 複数行テキスト | 説明、メモ |
|
||||
| マルチ選択 | あらかじめ定義されたリストから複数選択 | タグ、カテゴリ |
|
||||
| 数 | 数値（整数または小数） | 数量、スコア |
|
||||
| 電話 | 国番号付きの電話番号 | 勤務先電話 |
|
||||
| 評価 | 星評価（1〜5） | 優先度、スコア |
|
||||
| リレーション | 他のオブジェクト内のレコードへのリンク | Company → People |
|
||||
| 選択 | あらかじめ定義されたリストからの単一選択 | ステージ、ステータス |
|
||||
| テキスト | 1 行のテキスト | 名前、タイトル |
|
||||
|
||||
## Create a Custom Field
|
||||
## カスタムフィールドを作成する
|
||||
|
||||
To add a custom field to any object, follow these steps:
|
||||
任意のオブジェクトにカスタムフィールドを追加するには、次の手順に従います。
|
||||
|
||||
1. Go to `Settings` in the left sidebar.
|
||||
2. Go to `Data Model`, then select the object you wish to customize.
|
||||
3. Proceed by clicking on `Add Field`.
|
||||
4. Choose a field name and type that suits your requirements. Consider adding a field description for better understanding.
|
||||
1. 左サイドバーの「設定」に移動します。
|
||||
2. 「データモデル」に移動し、カスタマイズしたいオブジェクトを選択します。
|
||||
3.
|
||||
3. 「フィールドを追加」をクリックして続行します。
|
||||
4.
|
||||
4. 要件に合ったフィールド名とタイプを選択してください。 より良い理解のためにフィールドの説明を追加することを検討してください。 より良い理解のためにフィールドの説明を追加することを検討してください。 より良い理解のためにフィールドの説明を追加することを検討してください。
|
||||
|
||||
Your newly created field is now available within the application's fields. To display it on a specific view, click on the options menu, then select `Fields`.
|
||||
作成したフィールドはアプリケーションのフィールド内で利用できるようになります。 特定のビューに表示するには、オプションメニューをクリックして「フィールド」を選択します。 特定のビューに表示するには、オプションメニューをクリックして「フィールド」を選択します。
|
||||
|
||||
<VimeoEmbed videoId="927628219" title="Video demonstration" />
|
||||
<VimeoEmbed videoId="927628219" title="動画デモ" />
|
||||
|
||||
**Quick way:** Click the **+** button at the top right of any object table, then select `Customize fields`. This takes you directly to the Data Model settings.
|
||||
**簡単な方法:** 任意のオブジェクトテーブルの右上の **+** ボタンをクリックし、「フィールドをカスタマイズ」を選択します。 これにより、データモデルの設定に直接アクセスできます。
|
||||
|
||||
<img src="/images/user-guide/fields/quick-new-field.png" style={{width:'100%'}} />
|
||||
|
||||
## Deactivate a Field
|
||||
## フィールドを無効にする
|
||||
|
||||
You can deactivate a field to hide it from the app without losing your data. Think of it as hiding the field rather than deleting it.
|
||||
データを失わずにアプリからフィールドを隠すには、フィールドを無効にすることができます。 これはフィールドを削除するのではなく、隠すようなものです。 これはフィールドを削除するのではなく、隠すようなものです。 これはフィールドを削除するのではなく、隠すようなものです。
|
||||
|
||||
Here's how you can do it:
|
||||
以下に方法を示します。
|
||||
|
||||
1. Find the field you want to deactivate in your object settings.
|
||||
1. オブジェクト設定で無効化したいフィールドを見つけます。
|
||||
|
||||
2. Click the three dots `⋮` next to the field to open the menu.
|
||||
2. フィールドの横にある三点リーダー`⋮`をクリックしてメニューを開きます。
|
||||
|
||||
3. Select `Deactivate` from the dropdown.
|
||||
3. ドロップダウンメニューから「無効化」を選択します。
|
||||
|
||||
<img src="/images/user-guide/fields/deactivate-field.png" style={{width:'100%'}} />
|
||||
|
||||
What happens when you deactivate a field?
|
||||
フィールドを無効にするとどうなりますか？
|
||||
|
||||
1. **In the app:** The field disappears and you can't add new values to it.
|
||||
1. **アプリ内では:** フィールドが消え、新しい値を追加することができなくなります。
|
||||
|
||||
2. **Existing relationships:** If it's a relation field, existing connections stay but you can't create new ones.
|
||||
2. **既存の関係:** それがリレーションフィールドである場合、既存の接続は維持されますが、新しいものを作成することはできません。
|
||||
|
||||
3. **API access:** You can still access the field and its data through the API.
|
||||
3. **APIアクセス:** フィールドとそのデータには引き続きAPI経由でアクセスできます。
|
||||
|
||||
You can reactivate Standard and Custom Fields or have the option to permanently delete them.
|
||||
標準フィールドとカスタムフィールドを再アクティブ化することができます。また、それらを永久に削除するオプションがあります。
|
||||
|
||||
## Make Fields Unique
|
||||
## フィールドをユニークにする
|
||||
|
||||
Make a field unique to ensure distinct records cannot have the same value. For example, email addresses are unique for each person.
|
||||
異なるレコードが同じ値を持つことがないように、フィールドをユニークにします。 例えば、メールアドレスは各人物に対してユニークです。 例えば、メールアドレスは各人物に対してユニークです。 例えば、メールアドレスは各人物に対してユニークです。
|
||||
|
||||
If you get an error when setting uniqueness, check for duplicate values in your data (including deleted records).
|
||||
ユニーク性を設定する際にエラーが発生した場合、データ内の重複した値（削除されたレコードも含む）を確認してください。
|
||||
|
||||
## Field Configuration Best Practices
|
||||
## フィールド構成のベストプラクティス
|
||||
|
||||
### Naming Conventions and Limitations
|
||||
### 命名規則と制限
|
||||
|
||||
* **Singular and plural named must be distinct**: Our GraphQL API needs distinct names for mutations
|
||||
* **Protected field names**: some names are reserved for system usage (e.g., `Type`, `Application`)
|
||||
* **単数形と複数形の名前は独立している必要があります**：私たちのGraphQL APIでは、変換に際して名前の違いが必要です
|
||||
* **保護されたフィールド名**：一部の名前はシステムで使用するために予約されています（例：`Type`、`Application`）
|
||||
|
||||
### Currency and Phone Fields
|
||||
### 通貨フィールドと電話フィールド
|
||||
|
||||
* **Default currency**: can be configured via the data model
|
||||
* **Default country codes**: can be configured for phone fields via the data model
|
||||
* **デフォルト通貨**：データモデルを介して設定できます
|
||||
* **デフォルト国コード**：データモデルを介して電話フィールドに設定できます
|
||||
|
||||
### Select Fields
|
||||
### 選択フィールド
|
||||
|
||||
* **A default option can be selected** for each Select field
|
||||
* **各選択フィールドにデフォルトオプションを選択できます**
|
||||
|
||||
### Record Text Fields
|
||||
### レコードテキストフィールド
|
||||
|
||||
* **Each object has one main display field**: This field appears in the leftmost column and represents the record when linked to other objects. It must be a text field. For example, People uses `Name` as the main field, so when you link a person to a company, you'll see their name in the company's view.
|
||||
* **各オブジェクトには**1つのメイン表示フィールドがあります。このフィールドは左側の列に表示され、他のオブジェクトにリンクされたときにレコードを表します。 これはテキストフィールドである必要があります。 たとえば、Peopleは「名前」をメインフィールドとして使用しているため、人物を会社にリンクすると、会社のビューにその名前が表示されます。 これはテキストフィールドである必要があります。 たとえば、Peopleは「名前」をメインフィールドとして使用しているため、人物を会社にリンクすると、会社のビューにその名前が表示されます。 これはテキストフィールドである必要があります。 たとえば、Peopleは「名前」をメインフィールドとして使用しているため、人物を会社にリンクすると、会社のビューにその名前が表示されます。
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
---
|
||||
title: Objects
|
||||
description: Learn about standard and custom objects in Twenty.
|
||||
title: オブジェクト
|
||||
description: Twenty の標準オブジェクトとカスタムオブジェクトについて学びます。
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
## Standard Objects
|
||||
## 標準オブジェクト
|
||||
|
||||
Standard objects are predefined entities in your workspace to help you get started. They're part of a shared data model accessible to all users of Twenty. You can use them as-is, customize them or deactivate them.
|
||||
標準オブジェクトは、作業を開始するためのワークスペースに予め定義されているエンティティです。 これらは、Twentyの全ユーザーがアクセスできる共有データモデルの一部です。 そのまま使用することも、カスタマイズすることも、無効化することもできます。
|
||||
|
||||
<img src="/images/user-guide/objects/standard-objects.png" style={{width:'100%'}} />
|
||||
|
||||
### People
|
||||
### "人"
|
||||
|
||||
The `People` object stores your contacts. It includes contact details and interaction history, so you can see all your customer interactions in one place.
|
||||
`People` オブジェクトは連絡先を保存します。 連絡先の詳細とやり取りの履歴が含まれており、すべての顧客とのやり取りを一か所で確認できます。
|
||||
|
||||
### Company
|
||||
### 会社
|
||||
|
||||
The `Companies` object stores your business accounts. It includes details like industry, size and location. Companies connect to both `People` and `Opportunities` objects.
|
||||
`Companies` オブジェクトはビジネスアカウントを保存します。 業界、規模、所在地などの詳細が含まれます。 `People` および `Opportunities` オブジェクトに接続します。
|
||||
|
||||
### Opportunities
|
||||
### 商談
|
||||
|
||||
The `Opportunities` object stores deal-related data. It tracks the progression of potential sales, from prospecting to closure, recording stages, deal sizes, associated account, and expected close date. You can view your sales pipeline in a kanban layout.
|
||||
`Opportunities` オブジェクトは、取引関連のデータを保存します。 見込み客から成約までの販売の進捗を追跡し、ステージ、取引規模、関連するアカウント、予想終了日に関する記録を残します。 カンバン形式で販売パイプラインを表示できます。
|
||||
|
||||
### Notes
|
||||
### ノート
|
||||
|
||||
The `Notes` object stores free-form notes that can be attached to People, Companies, Opportunities, and other records. Use notes to capture meeting summaries, important details, or any contextual information.
|
||||
`Notes` オブジェクトは、People、Companies、Opportunities などのレコードに添付できる自由形式のメモを保存します。 メモを使用して、会議の要約、重要な詳細、その他のコンテキスト情報を記録します。
|
||||
|
||||
### Tasks
|
||||
### タスク
|
||||
|
||||
The `Tasks` object stores to-dos and action items. Tasks can be linked to People, Companies, Opportunities, and other records. Track due dates, assignees, and completion status to stay on top of your follow-ups.
|
||||
`Tasks` オブジェクトは、To-Do やアクション項目を保存します。 タスクは、People、Companies、Opportunities などのレコードに関連付けできます。 期限、担当者、完了状況を追跡して、フォローアップを的確に管理します。
|
||||
|
||||
## Custom Objects
|
||||
## カスタムオブジェクト
|
||||
|
||||
Custom objects let you store information that's unique to your organization and that standard objects can't handle. For example, if you're SpaceX, you may want to create a custom object for Rockets and Launches.
|
||||
カスタムオブジェクトを使用すると、標準オブジェクトでは対応できない組織独自の情報を保存できます。 例えば、SpaceXであれば、ロケットや打ち上げ用にカスタムオブジェクトを作成することが考えられます。 例えば、SpaceXであれば、ロケットや打ち上げ用にカスタムオブジェクトを作成することが考えられます。 例えば、SpaceXであれば、ロケットや打ち上げ用にカスタムオブジェクトを作成することが考えられます。
|
||||
|
||||
<img src="/images/user-guide/objects/custom-objects.png" style={{width:'100%'}} />
|
||||
|
||||
### Creating a New Custom Object
|
||||
### 新しいカスタムオブジェクトの作成
|
||||
|
||||
To create a new custom object:
|
||||
新しいカスタムオブジェクトを作成するには：
|
||||
|
||||
1. Go to Settings in the sidebar on the left.
|
||||
2. Under Workspace, go to Data model. Here you'll be able to see an overview of all your existing Standard and Custom objects (both active and disabled).
|
||||
1. 左側のサイドバーの設定に移動します。
|
||||
2. ワークスペースの下で、データモデルに移動します。 ここでは、すべての既存の標準およびカスタムオブジェクト（アクティブと非アクティブの両方）の概要を確認できます。 ワークスペースの下で、データモデルに移動します。 ここでは、すべての既存の標準およびカスタムオブジェクト（アクティブと非アクティブの両方）の概要を確認できます。 ここでは、すべての既存の標準およびカスタムオブジェクト（アクティブと非アクティブの両方）の概要を確認できます。
|
||||
|
||||
<VimeoEmbed videoId="926288174" title="Video demonstration" />
|
||||
<VimeoEmbed videoId="926288174" title="デモ動画" />
|
||||
|
||||
3. Click on `+ New object` at the top. Enter the name (both singular and plural), choose an icon, and add a description for your custom object and hit Save (at the top right). Using Listing as an example of custom object, the singular would be "listing" and the plural would be "listings" along with a description like "Listings that hosts created to showcase their property."
|
||||
3. 上部の `+ 新しいオブジェクト` をクリックします。 カスタムオブジェクトの名前（単数形と複数形の両方）、アイコンを選択し、説明を追加し、[保存]（右上）をクリックします。 上部の `+ 新しいオブジェクト` をクリックします。 カスタムオブジェクトの名前（単数形と複数形の両方）、アイコンを選択し、説明を追加し、[保存]（右上）をクリックします。 カスタムオブジェクトの例として、Listingを使用し、単数形は "listing" 、複数形は "listings" 、説明は "ホストがプロパティを紹介するために作成したリスティング" となります。
|
||||
|
||||
4. Your custom object is now created and will appear in your sidebar. You can start adding records to it right away.
|
||||
4. カスタムオブジェクトが作成され、サイドバーに表示されます。 すぐにレコードを追加できます。
|
||||
|
||||
## Managing Objects
|
||||
## オブジェクトの管理
|
||||
|
||||
### Deactivating Objects
|
||||
### オブジェクトの無効化
|
||||
|
||||
If you don't need a standard or custom object:
|
||||
標準オブジェクトまたはカスタムオブジェクトが不要な場合:
|
||||
|
||||
1. Go to Settings → Data Model
|
||||
2. Find the object you want to deactivate
|
||||
3. Click the toggle to deactivate it
|
||||
4. The object will be hidden from your workspace but data is preserved
|
||||
1. 設定 → データモデル に移動
|
||||
2. 無効化したいオブジェクトを見つけます
|
||||
3. トグルをクリックして無効化します
|
||||
4. オブジェクトはワークスペースから非表示になりますが、データは保持されます。
|
||||
|
||||
### Reactivating Objects
|
||||
### オブジェクトの再有効化
|
||||
|
||||
To bring back a deactivated object:
|
||||
無効化したオブジェクトを再有効化するには:
|
||||
|
||||
1. Go to Settings → Data Model
|
||||
2. Look for deactivated objects (they'll be grayed out)
|
||||
3. Click the toggle to reactivate it
|
||||
4. The object and all its data will be restored
|
||||
1. 設定 → データモデル に移動
|
||||
2. 無効化されたオブジェクトを探します（グレー表示になります）。
|
||||
3. トグルをクリックして再有効化します
|
||||
4. オブジェクトとそのすべてのデータが復元されます。
|
||||
|
||||
## Best Practices
|
||||
## ベストプラクティス
|
||||
|
||||
### When to Create Custom Objects
|
||||
### カスタムオブジェクトを作成するタイミング
|
||||
|
||||
* **Unique business entities**: Things specific to your industry or process
|
||||
* **Complex relationships**: When you need to track connections between multiple entities
|
||||
* **Scalable data**: When you might have many instances of something
|
||||
* **独自のビジネスエンティティ**: 業界やプロセスに特有のもの
|
||||
* **複雑なリレーションシップ**: 複数のエンティティ間の関係を追跡する必要がある場合
|
||||
* **スケーラブルなデータ**: 多数のインスタンスが発生する可能性がある場合
|
||||
|
||||
### When to Use Fields Instead
|
||||
### 代わりにフィールドを使用するタイミング
|
||||
|
||||
* **Simple attributes**: Properties that describe existing objects
|
||||
* **Categories or labels**: Ways to classify existing records
|
||||
* **Single values**: Information that doesn't need its own lifecycle
|
||||
* **シンプルな属性**: 既存のオブジェクトを記述するプロパティ
|
||||
* **カテゴリやラベル**: 既存のレコードを分類する方法
|
||||
* **単一の値**: 独自のライフサイクルを必要としない情報
|
||||
|
||||
### Object Naming
|
||||
### オブジェクトの命名
|
||||
|
||||
* **Use clear, descriptive names**: Make it obvious what the object represents
|
||||
* **Follow conventions**: Use singular for the object name, plural for the collection
|
||||
* **Consider your team**: Choose names everyone will understand
|
||||
* **明確で説明的な名前を使う**: オブジェクトが何を表すかを一目でわかるようにする
|
||||
* **規約に従う**: オブジェクト名は単数形、コレクションは複数形を使用する
|
||||
* **チームを考慮する**: 全員が理解できる名前を選ぶ
|
||||
|
||||
@@ -1,92 +1,96 @@
|
||||
---
|
||||
title: Relation Fields
|
||||
description: Connect records across different objects using relation fields.
|
||||
title: リレーションフィールド
|
||||
description: リレーションフィールドを使用して、異なるオブジェクト間でレコードをリンクします。
|
||||
---
|
||||
|
||||
## Types of Relations
|
||||
## リレーションの種類
|
||||
|
||||
### One-to-Many
|
||||
### 1対多
|
||||
|
||||
One record in Object A can be linked to many records in Object B.
|
||||
オブジェクトAの1件のレコードは、オブジェクトBの複数のレコードにリンクできます。
|
||||
|
||||
**Example:** One Company can have many People (employees).
|
||||
**例:** 1つの会社には多数の連絡先（従業員）がいます。
|
||||
|
||||
### Many-to-One
|
||||
### 多対1
|
||||
|
||||
Many records in Object A can be linked to one record in Object B.
|
||||
オブジェクトAの複数のレコードは、オブジェクトBの1件のレコードにリンクできます。
|
||||
|
||||
**Example:** Many People can belong to one Company.
|
||||
**例:** 多数の連絡先は1社に所属できます。
|
||||
|
||||
### Relations to Multiple Object Types
|
||||
### 複数のオブジェクトタイプへのリレーション
|
||||
|
||||
Some objects can link to multiple object types on one side of the relation.
|
||||
一部のオブジェクトは、リレーションの片側で複数のオブジェクトタイプにリンクできます。
|
||||
|
||||
**Example:** A Note can be attached to one Person AND one Company AND one Opportunity simultaneously. The Note is on the "many" side, connecting to multiple "one" sides.
|
||||
**例:** メモは、連絡先1件、会社1社、商談1件に同時にリンクできます。 メモは"多"の側にあり、複数の"1"の側にリンクしています。
|
||||
|
||||
<img src="/images/user-guide/fields/many-to-one-morph.png" style={{width:'100%'}} />
|
||||
|
||||
Similarly, a Project (on the "one" side) could receive links from multiple People, multiple Companies, and multiple Notes.
|
||||
同様に、プロジェクト（"1"の側）は、複数の連絡先、複数の会社、複数のメモからリンクを受け取ることができます。
|
||||
|
||||
<img src="/images/user-guide/fields/one-to-many-morph.png" style={{width:'100%'}} />
|
||||
|
||||
<Warning>
|
||||
**Import/Export limitation**: Relations pointing to multiple object types are not yet supported for CSV import/export. This is on our roadmap.
|
||||
**インポート/エクスポートの制限**: 複数のオブジェクトタイプを指すリレーションは、CSV のインポート/エクスポートにはまだ対応していません。 これはロードマップに含まれています。
|
||||
</Warning>
|
||||
|
||||
### Many-to-Many
|
||||
### 多対多
|
||||
|
||||
Many records in Object A can be linked to many records in Object B.
|
||||
オブジェクトAの複数のレコードは、オブジェクトBの複数のレコードにリンクできます。
|
||||
|
||||
**Example:** Many People can be linked to many Projects, and vice versa.
|
||||
**例:** 多数の連絡先は多数のプロジェクトにリンクでき、その逆も可能です。
|
||||
|
||||
多対多のリレーションでは、両側を接続する中間オブジェクトを用いる**ジャンクションオブジェクト**パターンを使用します。 ジャンクションリレーション機能により、Twenty は最終的にリンクされたレコードを直接表示し、中間オブジェクトを UI から隠します。
|
||||
|
||||
<img src="/images/user-guide/fields/junction-relation-diagram.png" style={{width:'100%'}} />
|
||||
|
||||
<Warning>
|
||||
**Many-to-Many is not yet supported.**
|
||||
|
||||
This relation type is planned for H1 2026. As a workaround, create an intermediate "junction" object (e.g., "Project Assignments") that has Many-to-One relations to both objects.
|
||||
**ラボ機能**: 使用前に **Settings → Updates → Lab** でジャンクションリレーションを有効化する必要があります。
|
||||
</Warning>
|
||||
|
||||
## Creating a Relation Field
|
||||
完全なステップバイステップのガイドについては、[多対多リレーションの作成方法](/l/ja/user-guide/data-model/how-tos/create-many-to-many-relations) を参照してください。
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Select the object where you want to add the relation
|
||||
3. Click **+ Add Field**
|
||||
4. Select **Relation** as the field type
|
||||
5. Choose the target object(s) to relate to
|
||||
6. Configure the relation settings:
|
||||
* **Field name on source object**: The name of the relation field on the object you're editing
|
||||
* **Field name on destination object**: The name of the relation field that will appear on the target object
|
||||
* Relation type (one-to-many, many-to-one)
|
||||
7. Click **Save**
|
||||
## リレーションフィールドの作成
|
||||
|
||||
## Standard Relations
|
||||
1. **設定 → データモデル** に移動
|
||||
2. リレーションを追加したいオブジェクトを選択します
|
||||
3. **+ Add Field** をクリック
|
||||
4. フィールドタイプとして **Relation** を選択
|
||||
5. 関連付け先のオブジェクトを選択します
|
||||
6. リレーションの設定を行います:
|
||||
* **ソースオブジェクト上のフィールド名**: 編集しているオブジェクト上のリレーションフィールドの名前
|
||||
* **対象オブジェクト上のフィールド名**: 対象オブジェクトに表示されるリレーションフィールドの名前
|
||||
* リレーションタイプ（1対多、多対1）
|
||||
7. **保存**をクリック
|
||||
|
||||
Twenty comes with pre-built relations between standard objects:
|
||||
## 標準リレーション
|
||||
|
||||
| From Object | To Object | Relation Type |
|
||||
| ------------- | --------- | ------------- |
|
||||
| People | Companies | Many-to-One |
|
||||
| Opportunities | Companies | Many-to-One |
|
||||
| Opportunities | People | Many-to-One |
|
||||
Twenty には標準オブジェクト間のあらかじめ用意されたリレーションがあります:
|
||||
|
||||
## Best Practices
|
||||
| 元オブジェクト | 宛先オブジェクト | リレーションタイプ |
|
||||
| ------- | -------- | --------- |
|
||||
| 人物 | 会社 | 多対1 |
|
||||
| 商談 | 会社 | 多対1 |
|
||||
| 商談 | 人物 | 多対1 |
|
||||
|
||||
### Planning Relations
|
||||
## ベストプラクティス
|
||||
|
||||
* **Map your data model**: Plan relations before creating them
|
||||
* **Consider direction**: Think about which object "owns" the relationship
|
||||
* **Avoid circular dependencies**: Keep your data model clean
|
||||
### リレーションの計画
|
||||
|
||||
### Naming Relations
|
||||
* **データモデルをマッピング**: 作成前にリレーションを計画する
|
||||
* **方向性を検討**: どのオブジェクトがそのリレーションを"所有"するかを考える
|
||||
* **循環依存を避ける**: データモデルをクリーンに保つ
|
||||
|
||||
* **Use clear names**: Make it obvious what the relation represents
|
||||
* **Be consistent**: Use similar naming patterns across relations
|
||||
* **Consider both sides**: Name both sides of the relation appropriately
|
||||
### リレーションの命名
|
||||
|
||||
### Performance
|
||||
* **明確な名前を使う**: リレーションが何を表すかが一目でわかるようにする
|
||||
* **一貫性を保つ**: リレーション全体で似た命名パターンを使用する
|
||||
* **両側を考慮する**: リレーションの両側に適切な名前を付ける
|
||||
|
||||
* **Don't over-relate**: Too many relations can slow down your workspace
|
||||
### パフォーマンス
|
||||
|
||||
## Limitations
|
||||
* **リレーションの作りすぎに注意**: リレーションが多すぎるとワークスペースが遅くなる可能性があります
|
||||
|
||||
* **Deleting relations** removes the link but not the related records
|
||||
* **Circular relations** should be avoided for data integrity
|
||||
## 制限事項
|
||||
|
||||
* **リレーションを削除**するとリンクは削除されますが、関連レコード自体は削除されません。
|
||||
* **循環リレーション**はデータの整合性のため避けるべきです
|
||||
|
||||
@@ -13,7 +13,7 @@ Custom fields let you capture information specific to your business. Add them to
|
||||
4. Choose a **field type** (see [Fields](/l/ja/user-guide/data-model/capabilities/fields) for all types)
|
||||
5. Enter the **field name** and optional description
|
||||
6. Configure field-specific settings (see below)
|
||||
7. Click **Save**
|
||||
7. **保存**をクリック
|
||||
|
||||
**Quick method:** Click the **+** at the end of column headers in any table view → **Customize fields**.
|
||||
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
---
|
||||
title: Create Custom Objects
|
||||
description: Step-by-step guide to creating custom objects in Twenty.
|
||||
title: カスタムオブジェクトを作成する
|
||||
description: Twenty でカスタムオブジェクトを作成するためのステップバイステップガイド。
|
||||
---
|
||||
|
||||
Custom objects let you store information unique to your business that standard objects don't cover. For example: Projects, Products, Tickets, or Listings.
|
||||
カスタムオブジェクトを使用すると、標準オブジェクトでは対応できないビジネス固有の情報を保存できます。 例: プロジェクト、製品、チケット、リスティング。
|
||||
|
||||
<Note>
|
||||
**Not sure if you need an object or a field?** See [Understanding Your Data Model](/l/ja/user-guide/data-model/overview) for guidance.
|
||||
**オブジェクトが必要か、フィールドが必要か迷っていますか？** 詳しくは[データモデルの理解](/l/ja/user-guide/data-model/overview)を参照してください。
|
||||
</Note>
|
||||
|
||||
## Steps
|
||||
## 手順
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Click **+ New object**
|
||||
3. Fill in:
|
||||
* **Singular name** (e.g., "Listing")
|
||||
* **Plural name** (e.g., "Listings")
|
||||
* **Icon**
|
||||
* **Description** (optional)
|
||||
4. Click **Save**
|
||||
1. **設定 → データモデル** に移動
|
||||
2. **+ New object** をクリック
|
||||
3. 次を入力:
|
||||
* **単数名**（例: "Listing"）
|
||||
* **複数名**（例: "Listings"）
|
||||
* **アイコン**
|
||||
* **説明**（任意）
|
||||
4. **保存**をクリック
|
||||
|
||||
Your object appears in the sidebar immediately.
|
||||
作成したオブジェクトはすぐにサイドバーに表示されます。
|
||||
|
||||
## Next: Add Fields
|
||||
## 次: フィールドを追加
|
||||
|
||||
New objects start with basic fields. Add custom fields to capture the data you need:
|
||||
新しいオブジェクトには基本フィールドがあらかじめ含まれています。 必要なデータを収集するために、カスタムフィールドを追加します:
|
||||
|
||||
1. In **Settings → Data Model**, select your object
|
||||
2. Click **+ Add Field**
|
||||
3. Choose a field type, configure, and save
|
||||
1. **設定 → データモデル** で、対象のオブジェクトを選択します
|
||||
2. **+ Add Field** をクリック
|
||||
3. フィールドタイプを選択し、設定して保存します
|
||||
|
||||
See [How to Create Custom Fields](/l/ja/user-guide/data-model/how-tos/create-custom-fields) for details on field types and configuration.
|
||||
フィールドタイプと設定の詳細は、[カスタムフィールドの作成方法](/l/ja/user-guide/data-model/how-tos/create-custom-fields)を参照してください。
|
||||
|
||||
## Connecting to Other Objects
|
||||
## 他のオブジェクトと接続する
|
||||
|
||||
To link your object to People, Companies, or other objects, create a relation field. See [How to Create Relation Fields](/l/ja/user-guide/data-model/how-tos/create-relation-fields).
|
||||
オブジェクトを People、Companies、その他のオブジェクトにリンクするには、リレーションフィールドを作成します。 [リレーションフィールドの作成方法](/l/ja/user-guide/data-model/how-tos/create-relation-fields)を参照してください。
|
||||
|
||||
## Deactivating an Object
|
||||
## オブジェクトの無効化
|
||||
|
||||
If you no longer need an object:
|
||||
オブジェクトが不要になった場合:
|
||||
|
||||
1. Go to **Settings → Data Model**
|
||||
2. Toggle the object off
|
||||
1. **設定 → データモデル** に移動
|
||||
2. オブジェクトをオフに切り替えます
|
||||
|
||||
The object is hidden but data is preserved. You can reactivate or permanently delete later.
|
||||
オブジェクトは非表示になりますが、データは保持されます。 後で再有効化することも、完全に削除することもできます。
|
||||
|
||||
## Related
|
||||
## 関連
|
||||
|
||||
* [Objects](/l/ja/user-guide/data-model/capabilities/objects) — standard vs custom objects
|
||||
* [Data Model FAQ](/l/ja/user-guide/data-model/how-tos/data-model-faq) — common questions
|
||||
* [オブジェクト](/l/ja/user-guide/data-model/capabilities/objects) — 標準オブジェクトとカスタムオブジェクト
|
||||
* [データモデル FAQ](/l/ja/user-guide/data-model/how-tos/data-model-faq) — よくある質問
|
||||
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
---
|
||||
title: 多対多リレーションを作成する
|
||||
description: ジャンクションオブジェクトを使うことで、両側の多数のレコード同士をリンクできます。
|
||||
---
|
||||
|
||||
多対多リレーションでは、両側で複数のレコードを相互に接続できます。 例えば、多数の連絡先が多数のプロジェクトで作業でき、各プロジェクトには多数の連絡先が紐づきます。
|
||||
|
||||
<Warning>
|
||||
**ラボ機能**: ジャンクションリレーションは現在 Lab にあります。 このガイドに進む前に、**Settings → Updates → Lab** で有効にしてください。
|
||||
</Warning>
|
||||
|
||||
<Note>
|
||||
この機能を使うには **詳細モード** も有効にする必要があります（Settings の右下にあるトグルで切り替え）。
|
||||
</Note>
|
||||
|
||||
## 多対多を使うタイミング
|
||||
|
||||
関係の両側が複数の接続を持ちうる場合に、多対多を使用します。
|
||||
|
||||
| 関係 | 例 |
|
||||
| ------------ | -------------------------------------------------- |
|
||||
| 連絡先 ↔ プロジェクト | 1 人の連絡先は複数のプロジェクトで作業でき、1 つのプロジェクトには複数のチームメンバーがいます。 |
|
||||
| 会社 ↔ タグ | 1 社には複数のタグを付与でき、1 つのタグは複数の会社に適用できます。 |
|
||||
| 商品 ↔ 注文 | 1 つの商品は複数の注文に含まれ、1 件の注文には複数の商品が含まれます。 |
|
||||
|
||||
## 仕組み
|
||||
|
||||
Twenty は多対多リレーションに **ジャンクションオブジェクト** パターンを使用します。 ジャンクションオブジェクトは 2 つのオブジェクトの間に位置し、接続を保持します。
|
||||
|
||||
```
|
||||
People ←→ Project Assignments ←→ Projects
|
||||
```
|
||||
|
||||
**Project Assignments** オブジェクト（ジャンクション）には次があります。
|
||||
|
||||
* People へのリレーション（多対1）
|
||||
* Projects へのリレーション（多対1）
|
||||
|
||||
ジャンクションリレーションのトグルを有効にすると、Twenty は中間のジャンクションレコードを表示せず、リンクされたレコードを直接表示します。
|
||||
|
||||
## 前提条件
|
||||
|
||||
1. **Lab で Junction Relations を有効化**: **Settings → Updates → Lab** に移動し、**Junction Relations** を有効にします
|
||||
2. **詳細モードを有効化**: 設定サイドバーの右下にある **Advanced mode** のトグルをオンにします
|
||||
3. データモデルを計画する:
|
||||
* どの 2 つのオブジェクトを接続しますか？
|
||||
* ジャンクションオブジェクトの名称は何にしますか？
|
||||
|
||||
## ステップ 1: ジャンクションオブジェクトを作成する
|
||||
|
||||
まず、接続を保持する中間オブジェクトを作成します。
|
||||
|
||||
1. **設定 → データモデル** に移動します
|
||||
2. **+ New object** をクリック
|
||||
3. わかりやすい名前を付けます（例: "Project Assignment"、"Team Member"、"Product Order"）
|
||||
4. **保存**をクリック
|
||||
|
||||
<Tip>
|
||||
**命名規則**: "Project Assignment" や "Team Membership" のように、関係を表す名前を使用してください。 これにより、データモデルが理解しやすくなります。
|
||||
</Tip>
|
||||
|
||||
## ステップ 2: ジャンクションオブジェクトからリレーションを作成する
|
||||
|
||||
ジャンクションオブジェクトから、接続したい両方のオブジェクトへのリレーションフィールドを追加します。
|
||||
|
||||
### 最初のリレーション（ジャンクション → オブジェクト A）
|
||||
|
||||
1. **Settings → Data Model** でジャンクションオブジェクトを選択します
|
||||
2. **+ Add Field** をクリック
|
||||
3. フィールドタイプとして **Relation** を選択します
|
||||
4. 最初のオブジェクトを選択します（例: "People"）
|
||||
5. リレーションタイプを **Many-to-One** に設定します（多数の割り当てが 1 人の連絡先にリンクできます）
|
||||
6. フィールドに名前を付けます:
|
||||
* ジャンクション側のフィールド: 例: "Person"
|
||||
* People 側のフィールド: 例: "Project Assignments"
|
||||
7. **保存**をクリック
|
||||
|
||||
### 2 番目のリレーション（ジャンクション → オブジェクト B）
|
||||
|
||||
1. 引き続きジャンクションオブジェクトで、**+ Add Field** をクリックします
|
||||
2. フィールドタイプとして **Relation** を選択します
|
||||
3. 2 番目のオブジェクトを選択します（例: "Projects"）
|
||||
4. リレーションタイプを **Many-to-One** に設定します
|
||||
5. フィールドに名前を付けます:
|
||||
* ジャンクション側のフィールド: 例: "Project"
|
||||
* Projects 側のフィールド: 例: "Team Members"
|
||||
6. **保存**をクリック
|
||||
|
||||
## ステップ 3: ジャンクションリレーションの表示を設定する
|
||||
|
||||
次に、中間のジャンクションオブジェクトを介さずにリンクされたレコードを直接表示するよう、元のオブジェクトを設定します。
|
||||
|
||||
1. **設定 → データモデル** に移動します
|
||||
2. 最初のオブジェクトを選択します（例: "People"）
|
||||
3. ジャンクションオブジェクトを指すリレーションフィールド（例: "Project Assignments"）を見つけます
|
||||
4. クリックしてフィールドを編集します
|
||||
5. **"これはジャンクションオブジェクトへのリレーションです"** を有効にします
|
||||
6. **Target relation** を選択します（例: "Project" — 反対側を指すジャンクション上のフィールド）
|
||||
7. **保存**をクリック
|
||||
|
||||
{/* TODO: Add image
|
||||
<img src="/images/user-guide/fields/junction-relation-toggle.png" style={{width:'100%'}}/>
|
||||
*/}
|
||||
|
||||
もう一方のオブジェクトでも同様に行います:
|
||||
|
||||
1. Data Model で "Projects" を選択します
|
||||
2. "Team Members" のリレーションフィールドを編集します
|
||||
3. ジャンクションのトグルを有効にします
|
||||
4. 対象リレーションとして "Person" を選択します
|
||||
5. 保存
|
||||
|
||||
## 結果
|
||||
|
||||
設定後:
|
||||
|
||||
* **Person** レコードでは、"Project Assignments" フィールドに **Projects** が直接表示されます（割り当てレコードではありません）
|
||||
* **Project** レコードでは、"Team Members" フィールドに **People** が直接表示されます
|
||||
|
||||
ジャンクションオブジェクト自体は存在し接続を保存しますが、UI ではよりすっきりした多対多ビューとして表示されます。
|
||||
|
||||
## 例: People ↔ Projects
|
||||
|
||||
完全な手順は以下のとおりです:
|
||||
|
||||
### ジャンクションオブジェクトを作成する
|
||||
|
||||
* 名前: **Project Assignment**
|
||||
* 説明: "人と、その人が携わっているプロジェクトを関連付けます"
|
||||
|
||||
### リレーションを追加する
|
||||
|
||||
1. **Project Assignment → People**
|
||||
* タイプ: 多対1
|
||||
* Assignment 側のフィールド: "Person"
|
||||
* People 側のフィールド: "Project Assignments"
|
||||
|
||||
2. **Project Assignment → Projects**
|
||||
* タイプ: 多対1
|
||||
* Assignment 側のフィールド: "Project"
|
||||
* Projects 側のフィールド: "Team Members"
|
||||
|
||||
### ジャンクションの表示を設定する
|
||||
|
||||
1. **People** オブジェクトで:
|
||||
* "Project Assignments" フィールドを編集
|
||||
* ジャンクションのトグルを有効にする
|
||||
* 対象: "Project"
|
||||
|
||||
2. **Projects** オブジェクトで:
|
||||
* "Team Members" フィールドを編集
|
||||
* ジャンクションのトグルを有効にする
|
||||
* 対象: "Person"
|
||||
|
||||
### 使ってみる
|
||||
|
||||
* Person レコードを開く → 紐づく Projects を直接表示
|
||||
* Project レコードを開く → チームメンバーを直接表示
|
||||
* どちら側からでも新しい接続を作成できます
|
||||
|
||||
## 接続に追加データを持たせる
|
||||
|
||||
ジャンクションオブジェクトは実体のあるオブジェクトなので、関係に関する情報を保存するためのカスタムフィールドを追加できます。
|
||||
|
||||
* **役割**: "Developer"、"Designer"、"Manager"
|
||||
* **開始日**: プロジェクトに参加した日
|
||||
* **割り当て時間**: 当該プロジェクトの週あたりの時間
|
||||
|
||||
このデータにアクセスするには、ジャンクションオブジェクトに直接移動するか、API 経由でクエリします。
|
||||
|
||||
## 制限事項
|
||||
|
||||
* **CSV インポート/エクスポート**: 多対多リレーションの直接インポートには対応していません。 代わりに、ジャンクションオブジェクトにレコードをインポートしてください。
|
||||
* **フィルター**: 多対多リレーションでのフィルタリングには制限がある場合があります。
|
||||
|
||||
## 関連
|
||||
|
||||
* [リレーションフィールド](/l/ja/user-guide/data-model/capabilities/relation-fields) — リレーションタイプの解説
|
||||
* [カスタムオブジェクトの作成](/l/ja/user-guide/data-model/how-tos/create-custom-objects) — オブジェクトの作成方法
|
||||
* [リレーションフィールドを作成](/l/ja/user-guide/data-model/how-tos/create-relation-fields) — 基本的なリレーションの設定
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user