generate-translations について
Payload のコアパッケージやプラグインで翻訳を生成するためのガイドスキルです。英語の原文とクライアントキーの配置、生成スクリプトの実行方法、プラグイン翻訳の雛形作成を説明します。
主な機能
- 01コア翻訳の手順
- 02プラグイン翻訳の手順
- 03英語原文とクライアントキー
- 04プラグイン翻訳の雛形作成
- 05生成スクリプトの設定
活用シーン
- 01コア UI の翻訳追加
- 02プラグイン言語ファイルの生成
- 03新規プラグインの翻訳設定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ payloadcms/ payload --skill generate-translationsインストール後、Claude Code で/generate-translationsを入力して読み込まれたか確認します。
詳細
翻訳生成ガイド
Payload には 2 つの独立した翻訳システムがあります:
- コア翻訳 - コア Payload パッケージ (packages/ui、packages/payload、packages/next) 用
- プラグイン翻訳 - プラグイン (packages/plugin-*) 用
目次
1. コア翻訳
使用する場面: コア Payload パッケージ (packages/ui、packages/payload、packages/next) に翻訳を追加する場合
手順:
-
英語の翻訳を追加する -
packages/translations/src/languages/en.ts- 新しいキーと値を適切なセクション (例:
authentication、general、fieldsなど) に追加します - 整理のためにネストされたオブジェクトを使用します
- 例:
export const enTranslations = { authentication: { // ... existing keys newFeature: 'New Feature Text', }, }
- 新しいキーと値を適切なセクション (例:
-
クライアントキーを追加する (クライアント側での使用が必要な場合) -
packages/translations/src/clientKeys.ts- コロン記法を使用して翻訳キーのパスを追加します
- 例:
'authentication:newFeature' - クライアントキーは、ブラウザで利用可能にする必要がある翻訳に使用されます
-
すべての言語の翻訳を生成する
- ディレクトリを変更します:
cd tools/scripts - 実行します:
pnpm generateTranslations:core - これにより、新しい英語のキーがサポートされている他のすべての言語に自動翻訳されます
- ディレクトリを変更します:
2. プラグイン翻訳
使用する場面: 任意のプラグインパッケージ (packages/plugin-*) に翻訳を追加する場合
手順:
-
プラグインに translations フォルダーがあることを確認する
packages/plugin-{name}/src/translationsが存在するか確認します- 存在しない場合は、以下の「新しいプラグイン翻訳のスキャフォールディング」を参照してください
-
英語の翻訳を追加する - プラグインの
packages/plugin-{name}/src/translations/languages/en.ts- プラグイン翻訳は、プラグイン名の下に名前空間が設定されます
- plugin-multi-tenant の例:
export const enTranslations = { 'plugin-multi-tenant': { 'new-feature-label': 'New Feature', }, }
-
すべての言語の翻訳を生成する
- ディレクトリを変更します:
cd tools/scripts - プラグイン固有のスクリプトを実行します:
pnpm generateTranslations:plugin-{name} - 例:
pnpm generateTranslations:plugin-multi-tenantpnpm generateTranslations:plugin-ecommercepnpm generateTranslations:plugin-import-export
- ディレクトリを変更します:
新しいプラグイン翻訳のスキャフォールディング
プラグインにまだ translations フォルダーがない場合は、スキャフォールディングするかどうかをユーザーに確認してください。
作成する構造:
packages/plugin-{name}/src/translations/
├── index.ts
├── types.ts
└── languages/
├── en.ts
├── es.ts
└── ... (all other language files)
作成するファイル:
- types.ts - プラグインの翻訳タイプを定義します
- index.ts - すべての翻訳をエクスポートし、タイプを再エクスポートします
- languages/en.ts - 英語の翻訳 (生成のソース)
- languages/*.ts - その他の言語ファイル (最初は空で、生成されます)
作成する生成スクリプト:
-
tools/scripts/src/generateTranslations/plugin-{name}.tsを作成しますplugin-multi-tenant.tsをテンプレートとして使用します- インポートパスを新しいプラグインを指すように更新します
- targetFolder パスを更新します
-
tools/scripts/package.jsonにスクリプトを追加します:"generateTranslations:plugin-{name}": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/plugin-{name}.ts"
重要な注意事項
- すべての翻訳生成には、
OPENAI_KEY環境変数を設定する必要があります - 生成スクリプトは OpenAI を使用して英語から他の言語に翻訳します
- 常に最初に英語の翻訳を追加してください - それが信頼できる唯一の情報源です
- コア翻訳: クライアントキーは、ブラウザ/管理 UI で使用される翻訳にのみ必要です
- プラグイン翻訳: 競合を避けるために、プラグイン名の下に自動的に名前空間が設定されます