github-actions[bot]
15c0c3b773
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22413?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
110 lines
5.5 KiB
Plaintext
110 lines
5.5 KiB
Plaintext
---
|
|
title: 翻訳
|
|
description: 複数の言語でアプリを提供できます — 単一の locales カタログで、マニフェストのラベルと UI 文字列を翻訳します。
|
|
icon: language
|
|
---
|
|
|
|
Twenty のアプリは **英語** で作成されています。ソースやマニフェスト内の文字列は英語のソーステキストであり、`en` は翻訳の元となるソースロケールです。未翻訳のロケールは `en` にフォールバックします。
|
|
|
|
アプリには 2 種類の翻訳可能なテキストがあり、どちらも同じ `locales/` カタログを通じて処理されます。
|
|
|
|
* **Manifest labels** — オブジェクト名とフィールド名、ビュータイトル、メニュー項目、その他アプリのメタデータで宣言される文字列。
|
|
* **Front-component strings** — React のフロントコンポーネントがレンダリングするUIテキスト。
|
|
|
|
翻訳可能な文字列にマークを付けてロケールごとのカタログに抽出し、それらのカタログを翻訳すれば、ビルドが現在のユーザーに適切な言語を提供します — 追加の設定は不要です。
|
|
|
|
## フロントコンポーネント文字列のマーク
|
|
|
|
`20-sdk/front-component` から翻訳ヘルパーをインポートします。
|
|
|
|
```tsx
|
|
import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';
|
|
|
|
const STATUSES = [
|
|
{ id: 'draft', label: msg('Draft') },
|
|
{ id: 'sent', label: msg('Sent') },
|
|
];
|
|
|
|
const Card = ({ count, name }: { count: number; name: string }) => {
|
|
const { t } = useTranslate();
|
|
|
|
return (
|
|
<section>
|
|
{/* Static text — reactive to the user's locale */}
|
|
<Trans>Loading postcard…</Trans>
|
|
|
|
{/* Disambiguate identical sources with a context */}
|
|
<Trans context="card-title">Untitled</Trans>
|
|
|
|
{/* Interpolation: pass values explicitly */}
|
|
<p>{t('Hi {name}', { name })}</p>
|
|
<p>{t('Saved {count} cards', { count })}</p>
|
|
|
|
{/* Resolve a lazily-declared descriptor */}
|
|
<ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
|
|
</section>
|
|
);
|
|
};
|
|
```
|
|
|
|
### When to use which
|
|
|
|
* **`<Trans>…</Trans>`** — JSX の静的テキスト。 `message` と `values`
|
|
プロパティを使用して補間（`<Trans message="Hi {name}" values={{ name }} />`); 子要素に直接補間する
|
|
は静的に抽出できません。
|
|
* **`useTranslate().t`** — コンポーネント内の動的文字列。
|
|
ユーザーが言語を切り替えたときに再レンダリングします。 これをレンダリング内で好みます。
|
|
* **`t(...)`** (imported directly) — eager translation used **anywhere** ,
|
|
including event handlers, helpers, module scope — だけでなく、render内だけでなく。
|
|
* **`msg(...)`** — dataとして宣言された文字列の遅延記述子 (定数、
|
|
config)。 後で`t(descriptor)`で解決します。
|
|
|
|
### コンテキスト
|
|
|
|
異なる変換元文字列を曖昧にするために `context` を渡します。
|
|
|
|
```tsx
|
|
t({ message: 'Open', context: 'door' });
|
|
t({ message: 'Open', context: 'window' });
|
|
<Trans context="card-title">Untitled</Trans>
|
|
```
|
|
|
|
## 抽出と翻訳
|
|
|
|
アプリディレクトリから抽出コマンドを実行します。
|
|
|
|
```bash
|
|
twenty dev:translations-extract # collect strings into locales/en.json
|
|
twenty dev:translations-extract --locale fr-FR # also scaffold a target locale
|
|
```
|
|
|
|
抽出処理では、マニフェストのラベルとフロントコンポーネントのソース内にある `t()`/`msg()`/`\<Trans>` の文字列の両方が収集され、ソース文字列をキーとして `locales/\<locale>.json` にまとめられます。 翻訳を入力：
|
|
|
|
```json
|
|
// locales/fr-FR.json
|
|
{
|
|
"Loading postcard…": "Chargement de la carte…",
|
|
"Hi {name}": "Bonjour {name}",
|
|
"Saved {count} cards": "{count} cartes enregistrées"
|
|
}
|
|
```
|
|
|
|
`{name}`のようなプレースホルダは、実行時に置き換えられます —
|
|
翻訳でそれらを維持します。 空の文字列はすべて元のテキストに戻ります。
|
|
|
|
## 動作方法
|
|
|
|
`twenty dev:build` はカタログをコンパイルし、現在のユーザーに対して適切な言語を提供します。マニフェストのラベルはサーバー側で解決され、フロントコンポーネントのカタログは各コンポーネントバンドルに組み込まれます。 実行時には、コンポーネントが実行コンテキスト（ホストの現在の言語）からロケールを読み取り、そのカタログに対して各文字列を解決し、翻訳が存在しない場合はソースにフォールバックします。 ホストの再レンダリングで言語を切り替えます。`\<Trans>` と
|
|
`useTranslate().t` 文字列は動作します。
|
|
|
|
カタログはビルド時にコンパイルされるため、翻訳を更新すると、他の変更と同じように、
|
|
`20dev:build` を再実行(および再デプロイ)することになります。
|
|
|
|
<Note>
|
|
翻訳は `20dev:build` によってコンパイルされています (そして、`20の適用`)。
|
|
連続した `20dev` ウォッチはソース文字列を表示するため、ワンオフビルドでローカライズされた出力
|
|
をテストします。
|
|
</Note>
|
|
|
|
`<Trans>` のテキスト子要素は複数行にまたがってもかまいません — 空白は JSX と同じように折りたたまれるため、`<Trans>Welcome\n back</Trans>` と抽出されたキーはどちらも `Welcome back` になります。
|