@intlayer/docs 6.0.0 → 6.0.2-canary.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/blog.cjs.map +1 -1
- package/dist/cjs/common.cjs +6 -5
- package/dist/cjs/common.cjs.map +1 -1
- package/dist/cjs/generated/blog.entry.cjs +318 -1863
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +1317 -6282
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/cjs/generated/frequentQuestions.entry.cjs +197 -1182
- package/dist/cjs/generated/frequentQuestions.entry.cjs.map +1 -1
- package/dist/cjs/generated/legal.entry.cjs +43 -84
- package/dist/cjs/generated/legal.entry.cjs.map +1 -1
- package/dist/esm/blog.mjs.map +1 -1
- package/dist/esm/common.mjs +2 -5
- package/dist/esm/common.mjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +318 -1863
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +1317 -6282
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/esm/generated/frequentQuestions.entry.mjs +197 -1182
- package/dist/esm/generated/frequentQuestions.entry.mjs.map +1 -1
- package/dist/esm/generated/legal.entry.mjs +43 -84
- package/dist/esm/generated/legal.entry.mjs.map +1 -1
- package/dist/types/blog.d.ts +1 -1
- package/dist/types/blog.d.ts.map +1 -1
- package/dist/types/common.d.ts +1 -1
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -1
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +2 -1
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts +1 -1
- package/dist/types/generated/frequentQuestions.entry.d.ts.map +1 -1
- package/dist/types/generated/legal.entry.d.ts +1 -1
- package/dist/types/generated/legal.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_CMS.md +261 -85
- package/docs/ar/releases/v6.md +273 -0
- package/docs/ar/roadmap.md +1 -3
- package/docs/ar/vs_code_extension.md +94 -63
- package/docs/de/intlayer_CMS.md +247 -65
- package/docs/de/releases/v6.md +298 -0
- package/docs/de/roadmap.md +1 -3
- package/docs/de/vs_code_extension.md +89 -58
- package/docs/en/configuration.md +9 -2
- package/docs/en/intlayer_CMS.md +205 -23
- package/docs/en/intlayer_cli.md +4 -4
- package/docs/en/intlayer_visual_editor.md +7 -6
- package/docs/en/intlayer_with_nextjs_14.md +17 -1
- package/docs/en/intlayer_with_nextjs_15.md +17 -1
- package/docs/en/releases/v6.md +268 -0
- package/docs/en/roadmap.md +1 -3
- package/docs/en/vs_code_extension.md +79 -49
- package/docs/en-GB/intlayer_CMS.md +216 -52
- package/docs/en-GB/releases/v6.md +297 -0
- package/docs/en-GB/roadmap.md +1 -3
- package/docs/en-GB/vs_code_extension.md +79 -48
- package/docs/es/intlayer_CMS.md +257 -84
- package/docs/es/releases/v6.md +274 -0
- package/docs/es/roadmap.md +1 -3
- package/docs/es/vs_code_extension.md +90 -60
- package/docs/fr/intlayer_CMS.md +250 -68
- package/docs/fr/releases/v6.md +274 -0
- package/docs/fr/roadmap.md +1 -3
- package/docs/fr/vs_code_extension.md +94 -63
- package/docs/hi/intlayer_CMS.md +253 -77
- package/docs/hi/releases/v6.md +273 -0
- package/docs/hi/roadmap.md +1 -3
- package/docs/hi/vs_code_extension.md +92 -61
- package/docs/it/intlayer_CMS.md +251 -73
- package/docs/it/releases/v6.md +273 -0
- package/docs/it/roadmap.md +1 -3
- package/docs/it/vs_code_extension.md +94 -63
- package/docs/ja/intlayer_CMS.md +282 -97
- package/docs/ja/releases/v6.md +273 -0
- package/docs/ja/roadmap.md +1 -3
- package/docs/ja/vs_code_extension.md +99 -68
- package/docs/ko/intlayer_CMS.md +267 -93
- package/docs/ko/releases/v6.md +273 -0
- package/docs/ko/roadmap.md +1 -3
- package/docs/ko/vs_code_extension.md +88 -57
- package/docs/pt/intlayer_CMS.md +261 -83
- package/docs/pt/releases/v6.md +273 -0
- package/docs/pt/roadmap.md +1 -3
- package/docs/pt/vs_code_extension.md +89 -58
- package/docs/ru/intlayer_CMS.md +240 -65
- package/docs/ru/releases/v6.md +274 -0
- package/docs/ru/roadmap.md +1 -1
- package/docs/ru/vs_code_extension.md +83 -52
- package/docs/tr/intlayer_CMS.md +278 -96
- package/docs/tr/intlayer_with_nextjs_page_router.md +1 -1
- package/docs/tr/intlayer_with_tanstack.md +3 -0
- package/docs/tr/releases/v6.md +273 -0
- package/docs/tr/roadmap.md +1 -1
- package/docs/tr/vs_code_extension.md +100 -71
- package/docs/zh/intlayer_CMS.md +257 -76
- package/docs/zh/releases/v6.md +273 -0
- package/docs/zh/roadmap.md +1 -3
- package/docs/zh/vs_code_extension.md +99 -68
- package/package.json +9 -8
- package/src/blog.ts +1 -1
- package/src/common.ts +2 -6
- package/src/generated/blog.entry.ts +323 -1864
- package/src/generated/docs.entry.ts +1317 -6278
- package/src/generated/frequentQuestions.entry.ts +202 -1183
- package/src/generated/legal.entry.ts +48 -85
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-09-22
|
|
3
|
+
updatedAt: 2025-09-22
|
|
4
|
+
title: 新しい Intlayer v6 - 新機能は何ですか?
|
|
5
|
+
description: Intlayer v6 の新機能をご紹介します。パフォーマンス、開発者体験の大幅な改善と、国際化ワークフローを強化する新機能が含まれています。
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- ローカリゼーション
|
|
9
|
+
- 開発
|
|
10
|
+
- パフォーマンス
|
|
11
|
+
- 開発者体験
|
|
12
|
+
- 機能
|
|
13
|
+
- React
|
|
14
|
+
- Next.js
|
|
15
|
+
- JavaScript
|
|
16
|
+
- TypeScript
|
|
17
|
+
slugs:
|
|
18
|
+
- doc
|
|
19
|
+
- releases
|
|
20
|
+
- v6
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
# 新しい Intlayer v6 - 新機能は何ですか?
|
|
24
|
+
|
|
25
|
+
Intlayer v6 へようこそ!このリリースはパフォーマンス、開発者体験、信頼性に重点を置いています。以下にハイライト、移行ノート、コピー&ペースト可能な例を示します。
|
|
26
|
+
|
|
27
|
+
## ハイライト
|
|
28
|
+
|
|
29
|
+
- 新しいコマンド:`npx intlayer content test` で翻訳の欠落を検出
|
|
30
|
+
- 新しいグローバルオプション `autoFill` により、欠落している翻訳を自動生成
|
|
31
|
+
- Fill コマンドは既存の翻訳をスキップするのがデフォルト:`npx intlayer fill`
|
|
32
|
+
- VS Code 拡張機能:新しい Intlayer アクティビティバー(検索&辞書)、ツールバー/コンテキストアクション、自動表示、Fill/Test コマンド
|
|
33
|
+
- Promise の並列処理によりビルドが10倍高速化
|
|
34
|
+
- アプリ起動時の再取得を避けるためのリモート辞書キャッシュ
|
|
35
|
+
- ロギングの改善:動作を詳しく調査するには `log.mode: 'verbose'` を設定
|
|
36
|
+
- 辞書の問題によるアプリクラッシュを防ぐ強化されたバリデーション
|
|
37
|
+
- CMS と連携したライブアップデート:`build.importMode = 'live'` と `pnpm intlayer live` を使用
|
|
38
|
+
- 修正点:Vue.js 統合、Lynx アダプター、Windows 上のビジュアルエディター
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## 新機能:欠落翻訳のテスト
|
|
43
|
+
|
|
44
|
+
プロジェクトを素早く監査し、どのキーやロケールが欠落しているかを確認します。
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npx intlayer content test
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
出力:
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
pnpm intlayer content test
|
|
54
|
+
欠落している翻訳:
|
|
55
|
+
- blog-data - 日本語 (ja)、韓国語 (ko)、中国語 (zh)、ドイツ語 (de)、イタリア語 (it) - src/components/BlogPage/blogData.content.ts
|
|
56
|
+
- demo-page - フランス語 (fr)、イタリア語 (it) - src/components/DemoPage/demo.content.ts
|
|
57
|
+
- locale-switcher - イタリア語 (it)、ポルトガル語 (pt) - src/components/LocaleSwitcher/localeSwitcher.content.ts
|
|
58
|
+
ロケール: 英語 (en)、ロシア語 (ru)、日本語 (ja)、フランス語 (fr)、韓国語 (ko)、中国語 (zh)、スペイン語 (es)、ドイツ語 (de)、アラビア語 (ar)、イタリア語 (it)、英国英語 (en-GB)、ポルトガル語 (pt)、ヒンディー語 (hi)
|
|
59
|
+
必須ロケール: 英語 (en)
|
|
60
|
+
欠落しているロケール: 日本語 (ja)、韓国語 (ko)、中国語 (zh)、ドイツ語 (de)、イタリア語 (it)、フランス語 (fr)、ポルトガル語 (pt)
|
|
61
|
+
欠落している必須ロケール: なし
|
|
62
|
+
合計欠落ロケール数: 7
|
|
63
|
+
合計欠落必須ロケール数: 0
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
CLIの詳細オプションについては、CLIドキュメントをご覧ください: [CLIリファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md) → 「欠落翻訳のテスト」。また、[テスト](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/testing.md)ガイドも参照してください。
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 新機能: 欠落翻訳を補完するグローバルautoFill
|
|
71
|
+
|
|
72
|
+
今後は、欠落翻訳がある辞書を自動的に補完するために、グローバルでauto-fillを有効にできます。
|
|
73
|
+
|
|
74
|
+
```ts fileName="intlayer.config.ts"
|
|
75
|
+
import { type IntlayerConfig, Locales } from "intlayer";
|
|
76
|
+
|
|
77
|
+
const config: IntlayerConfig = {
|
|
78
|
+
internationalization: {
|
|
79
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
80
|
+
defaultLocale: Locales.ENGLISH,
|
|
81
|
+
requiredLocales: [Locales.ENGLISH, Locales.FRENCH],
|
|
82
|
+
},
|
|
83
|
+
content: {
|
|
84
|
+
// すべての辞書の不足している翻訳を自動生成します
|
|
85
|
+
autoFill: "./{{fileName}}.content.ts",
|
|
86
|
+
//
|
|
87
|
+
// autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",
|
|
88
|
+
//
|
|
89
|
+
// autoFill: true, // "./{{fileName}}.content.json" を使用するようにすべての辞書の不足翻訳を自動生成
|
|
90
|
+
//
|
|
91
|
+
// autoFill: {
|
|
92
|
+
// en: "./{{fileName}}.en.content.json",
|
|
93
|
+
// fr: "./{{fileName}}.fr.content.json",
|
|
94
|
+
// es: "./{{fileName}}.es.content.json",
|
|
95
|
+
// },
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export default config;
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
コンテンツファイルの `autoFill` フィールドを使用して、辞書ごとに微調整を行うことも可能です。詳細は `doc/autoFill` および `doc/dictionary/content_file` を参照してください。
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## fill コマンド: より安全なデフォルト設定
|
|
107
|
+
|
|
108
|
+
fill コマンドは現在、デフォルトで不足している翻訳のみを埋め、既存のコンテンツはスキップします。
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npx intlayer fill
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
Affected dictionary keys for processing: access-key-creation-form-schema, doc-search-metadata, doc-search-page
|
|
116
|
+
- [access-key-creation-form-schema] 辞書にファイルパスがありません。スキップします。
|
|
117
|
+
- [access-key-creation-form-schema] コンテンツ宣言を処理中: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts
|
|
118
|
+
- [access-key-creation-form-schema] 埋めるロケールがありません - 辞書をスキップします
|
|
119
|
+
- [doc-search-metadata] 辞書にファイルパスがありません。スキップします。
|
|
120
|
+
- [doc-search-metadata] コンテンツ宣言を処理中: src/app/[locale]/(docs)/doc/search/metadata.content.ts
|
|
121
|
+
- [doc-search-metadata] 翻訳対象のロケールがありません - 辞書をスキップします
|
|
122
|
+
- [doc-search-page] 辞書にファイルパスがありません。スキップします。
|
|
123
|
+
- [doc-search-page] コンテンツ宣言を処理中: src/app/[locale]/(docs)/doc/search/page.content.ts
|
|
124
|
+
- [doc-search-page] [ロシア語 (ru)] 英語 (en) からロシア語 (ru) への辞書翻訳を準備中
|
|
125
|
+
[intlayer] src/app/[locale]/(docs)/doc/search/page.content.ts に Prettier フォーマットを適用しました
|
|
126
|
+
- [doc-search-page] コンテンツ宣言が src/app/[locale]/(docs)/doc/search/page.content.ts に書き込まれました
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
CIの例は[CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/CI_CD.md)で利用可能です。
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 更新されたVS Code拡張機能
|
|
134
|
+
|
|
135
|
+
この拡張機能には、Activity Barに専用のIntlayerタブが追加され、いくつかのワークフロー改善が含まれています:
|
|
136
|
+
|
|
137
|
+
- 2つのビューを持つIntlayer Activity Bar:
|
|
138
|
+
- ライブ辞書/コンテンツ検索用の検索Webビュー(`intlayer.searchBar`)
|
|
139
|
+
- 環境、辞書、寄稿ファイルを一覧表示する辞書ツリー(`intlayer.dictionaries`)
|
|
140
|
+
- 辞書ビューのツールバー:ビルド、プル、プッシュ、フィル、更新、テスト、辞書ファイル作成
|
|
141
|
+
- コンテキストメニュー:辞書に対するプル/プッシュ;ファイルに対するフィル
|
|
142
|
+
- 自動表示: 現在のエディタファイルが該当する場合、辞書ツリーでハイライトされます
|
|
143
|
+
- コマンドパレットから利用可能な新コマンド: Fill Dictionaries と Test Dictionaries
|
|
144
|
+
|
|
145
|
+
詳細は[公式VS Code拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)のドキュメントをご覧ください。
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
## パフォーマンス: 10倍高速化
|
|
150
|
+
|
|
151
|
+
- ローカルおよびリモート辞書の並列解決
|
|
152
|
+
- アプリ起動時の再取得を避けるためリモート辞書をキャッシュ
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npx intlayer build
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
出力:
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
[intlayer] Intlayerを準備中 (v6.0.1)
|
|
162
|
+
[intlayer] 辞書:
|
|
163
|
+
[intlayer] ✓ ローカルコンテンツ: 163/163
|
|
164
|
+
[intlayer] ✓ リモートコンテンツ: 100/100
|
|
165
|
+
[intlayer] - access-key-creation-form [local: ✔ built] [distant: ✔ imported]
|
|
166
|
+
[intlayer] - access-key-creation-form-schema [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
167
|
+
[intlayer] - access-key-form [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
168
|
+
[intlayer] - ai-ab-testing-section [distant: ✔ インポート済み]
|
|
169
|
+
[intlayer] - application-not-running-view [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
170
|
+
[intlayer] - application-template-message [local: ✔ ビルド済み] [distant: ✔ フェッチ済み]
|
|
171
|
+
[intlayer] - aside-navigation [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
172
|
+
[intlayer] - ask-reset-password [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
173
|
+
[intlayer] - ask-reset-password-schema [local: ✔ ビルド済み] [distant: ✔ インポート済み]
|
|
174
|
+
[intlayer] - autocompletion-section [local: ✔ built] [distant: ✔ fetched]
|
|
175
|
+
[intlayer] - available-techno-section [local: ✔ built] [distant: ✔ imported]
|
|
176
|
+
[intlayer] - blog-data [local: ✔ built]
|
|
177
|
+
[intlayer] - blog-metadata [local: ✔ built]
|
|
178
|
+
[intlayer] - blog-nav-list [local: ✔ built] [distant: ✔ imported]
|
|
179
|
+
[intlayer] - blog-page [distant: ✔ fetched]
|
|
180
|
+
[intlayer] - blog-search-metadata [local: ✔ built] [distant: ✔ imported]
|
|
181
|
+
[intlayer] - blog-search-page [local: ✔ built] [distant: ✔ imported]
|
|
182
|
+
...
|
|
183
|
+
[intlayer] コンテンツが読み込まれました (合計: 8401ms - ローカル: 4050ms - リモート: 4222ms)
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## ロギングの改善
|
|
189
|
+
|
|
190
|
+
ビルドおよびランタイム変換中に何が起きているかについて、より詳細な情報を提供するためにログシステムが改善されました。
|
|
191
|
+
|
|
192
|
+
> ビルドおよびランタイム変換中に何が起きているかをよりよく理解するために、詳細なログを有効にしてください。
|
|
193
|
+
|
|
194
|
+
```ts fileName="intlayer.config.ts"
|
|
195
|
+
export default {
|
|
196
|
+
log: {
|
|
197
|
+
mode: "verbose", // オプション: "default" | "verbose" | "disabled"
|
|
198
|
+
},
|
|
199
|
+
};
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
すべてのログオプションについては、[Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) を参照してください。
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## より強力なバリデーション
|
|
207
|
+
|
|
208
|
+
辞書の処理はより堅牢なバリデーションを実行するようになりました。辞書の処理に失敗した場合でも、Intlayerはアプリケーションのクラッシュを防ぎ、対処可能なエラーを表示します。
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## CMSによるライブアップデート(本番環境対応)
|
|
213
|
+
|
|
214
|
+
本番環境でアプリケーションを再ビルドすることなく、ライブコンテンツの更新(例:編集更新)を提供します。
|
|
215
|
+
|
|
216
|
+
1. ライブインポートモードを有効にします:
|
|
217
|
+
|
|
218
|
+
```ts fileName="intlayer.config.ts"
|
|
219
|
+
import { type IntlayerConfig } from "intlayer";
|
|
220
|
+
|
|
221
|
+
const config: IntlayerConfig = {
|
|
222
|
+
build: {
|
|
223
|
+
importMode: "live", // "static" | "dynamic" | "live"
|
|
224
|
+
},
|
|
225
|
+
editor: {
|
|
226
|
+
liveSync: true, // サーバー側でライブ同期を有効にする
|
|
227
|
+
},
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
export default config;
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
2. アプリを実行し、ライブ処理を並行して行います:
|
|
234
|
+
|
|
235
|
+
```bash
|
|
236
|
+
npx intlayer live --process 'vite preview'
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
注意:
|
|
240
|
+
|
|
241
|
+
- ライブモードを使用するようにフラグが立てられた辞書のみがライブで取得されます。他はパフォーマンス最適化されています。
|
|
242
|
+
- ライブAPIに接続できない場合は、動的インポートにフォールバックします。
|
|
243
|
+
|
|
244
|
+
完全なガイダンスについては、[CMSとライブ同期](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)および[設定](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## マイグレーションノート
|
|
249
|
+
|
|
250
|
+
- 削除された項目: `dictionaryOutput`(以前は `i18next` または `next-intl`)。これは将来のバージョンでプラグイン可能なアダプターとして復活します。設定からこのフィールドを削除してください。
|
|
251
|
+
- 関連削除: `i18nextResourcesDir`(`doc/configuration` の変更履歴を参照)。
|
|
252
|
+
- 新しいグローバルオプション `content.autoFill` を使用して、大規模な翻訳不足を生成することを推奨します。
|
|
253
|
+
- 翻訳不足のPRを制御するために `npx intlayer content test` を使用してください。
|
|
254
|
+
- 詳細な診断を行うには、`log.mode = 'verbose'` を設定してください。
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## 修正点
|
|
259
|
+
|
|
260
|
+
- Vue.js 統合の安定性向上
|
|
261
|
+
- Lynx アダプターの改善
|
|
262
|
+
- Windows上のビジュアルエディター
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## 便利なリンク
|
|
267
|
+
|
|
268
|
+
- [CLIリファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)
|
|
269
|
+
- [自動入力](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/autoFill.md)
|
|
270
|
+
- [設定](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)
|
|
271
|
+
- [コンテンツファイルリファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)
|
|
272
|
+
- [公式VS Code拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)
|
|
273
|
+
- [CMSとライブ同期](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)
|
package/docs/ja/roadmap.md
CHANGED
|
@@ -112,18 +112,16 @@ Intlayerは、動的コンテンツの挿入と管理のためのさまざまな
|
|
|
112
112
|
Intlayer はコンテンツ宣言に **TypeScript**(および JavaScript)と **JSON** をサポートしています。
|
|
113
113
|
|
|
114
114
|
- **TypeScript**:
|
|
115
|
-
|
|
116
115
|
- コンテンツ構造が正しく、翻訳が欠落していないことを保証します。
|
|
117
116
|
- 厳密またはより柔軟な検証モードを提供します。
|
|
118
117
|
- 変数、関数、または外部APIからの動的データ取得を可能にします。
|
|
119
118
|
|
|
120
119
|
- **JSON**:
|
|
121
|
-
|
|
122
120
|
- 標準化されたフォーマットのため、外部ツール(ビジュアルエディタなど)との統合が容易です。
|
|
123
121
|
|
|
124
122
|
> リソース:
|
|
125
123
|
>
|
|
126
|
-
> - [コンテンツ宣言フォーマット](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/
|
|
124
|
+
> - [コンテンツ宣言フォーマット](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)
|
|
127
125
|
|
|
128
126
|
### 7. パージ、バンドル最適化、および動的インポート
|
|
129
127
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-03-17
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title: 公式VS Code拡張機能
|
|
5
|
-
description: VS CodeでIntlayer
|
|
3
|
+
updatedAt: 2025-09-22
|
|
4
|
+
title: 公式 VS Code 拡張機能
|
|
5
|
+
description: VS Code で Intlayer 拡張機能を使用して開発ワークフローを強化する方法を学びます。ローカライズされたコンテンツ間を素早くナビゲートし、辞書を効率的に管理できます。
|
|
6
6
|
keywords:
|
|
7
|
-
- VS Code拡張機能
|
|
7
|
+
- VS Code 拡張機能
|
|
8
8
|
- Intlayer
|
|
9
9
|
- ローカリゼーション
|
|
10
10
|
- 開発ツール
|
|
@@ -17,13 +17,13 @@ slugs:
|
|
|
17
17
|
- vs-code-extension
|
|
18
18
|
---
|
|
19
19
|
|
|
20
|
-
# 公式VS Code拡張機能
|
|
20
|
+
# 公式 VS Code 拡張機能
|
|
21
21
|
|
|
22
22
|
## 概要
|
|
23
23
|
|
|
24
|
-
[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) は、プロジェクト内のローカライズされたコンテンツを扱う際の開発者体験を向上させるために設計された、**Intlayer** の公式Visual Studio Code拡張機能です。
|
|
24
|
+
[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) は、プロジェクト内のローカライズされたコンテンツを扱う際の開発者体験を向上させるために設計された、**Intlayer** の公式 Visual Studio Code 拡張機能です。
|
|
25
25
|
|
|
26
|
-

|
|
27
27
|
|
|
28
28
|
拡張機能リンク: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
|
|
29
29
|
|
|
@@ -31,62 +31,112 @@ slugs:
|
|
|
31
31
|
|
|
32
32
|
### インスタントナビゲーション
|
|
33
33
|
|
|
34
|
-
**定義へ移動サポート** – `useIntlayer` キー上で
|
|
34
|
+
**定義へ移動サポート** – `useIntlayer` キー上で `⌘ + クリック`(Mac)または `Ctrl + クリック`(Windows/Linux)を使用して、対応するコンテンツファイルを即座に開きます。
|
|
35
35
|
**シームレスな統合** – **react-intlayer** および **next-intlayer** プロジェクトとスムーズに連携します。
|
|
36
|
-
**多言語サポート** –
|
|
37
|
-
**VS Code 統合** – VS Code
|
|
36
|
+
**多言語サポート** – 複数の言語にわたるローカライズされたコンテンツをサポートします。
|
|
37
|
+
**VS Code 統合** – VS Code のナビゲーションおよびコマンドパレットとスムーズに統合されます。
|
|
38
38
|
|
|
39
39
|
### 辞書管理コマンド
|
|
40
40
|
|
|
41
|
-
VS Code
|
|
41
|
+
VS Code から直接コンテンツ辞書を管理します:
|
|
42
42
|
|
|
43
|
-
- **辞書のビルド**
|
|
44
|
-
- **辞書のプッシュ**
|
|
45
|
-
- **辞書のプル**
|
|
43
|
+
- **辞書のビルド** – プロジェクト構造に基づいてコンテンツファイルを生成します。
|
|
44
|
+
- **辞書のプッシュ** – 最新の辞書コンテンツをリポジトリにアップロードします。
|
|
45
|
+
- **辞書のプル** – リポジトリから最新の辞書コンテンツをローカル環境に同期します。
|
|
46
|
+
- **辞書の埋め込み** – プロジェクトのコンテンツで辞書を埋めます。
|
|
47
|
+
- **辞書のテスト** – 欠落または不完全な翻訳を特定します。
|
|
46
48
|
|
|
47
49
|
### コンテンツ宣言ジェネレーター
|
|
48
50
|
|
|
49
|
-
|
|
51
|
+
異なるフォーマットで構造化された辞書ファイルを簡単に生成します:
|
|
50
52
|
|
|
51
|
-
|
|
52
|
-
- **ESモジュール (`.esm`)** – `extension.createDictionaryFile.esm`
|
|
53
|
-
- **CommonJS (`.cjs`)** – `extension.createDictionaryFile.cjs`
|
|
54
|
-
- **JSON (`.json`)** – `extension.createDictionaryFile.json`
|
|
53
|
+
現在コンポーネントを作業している場合、そのコンポーネント用の `.content.{ts,tsx,js,jsx,mjs,cjs,json}` ファイルを生成します。
|
|
55
54
|
|
|
56
|
-
|
|
55
|
+
コンポーネントの例:
|
|
56
|
+
|
|
57
|
+
```tsx fileName="src/components/MyComponent/index.tsx"
|
|
58
|
+
const MyComponent = () => {
|
|
59
|
+
const { myTranslatedContent } = useIntlayer("my-component");
|
|
57
60
|
|
|
58
|
-
|
|
61
|
+
return <span>{myTranslatedContent}</span>;
|
|
62
|
+
};
|
|
63
|
+
```
|
|
59
64
|
|
|
60
|
-
|
|
61
|
-
2. **拡張機能マーケットプレイス** に移動します。
|
|
62
|
-
3. **"Intlayer"** を検索します。
|
|
63
|
-
4. **インストール** をクリックします。
|
|
65
|
+
TypeScript形式で生成されたファイル:
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
```tsx fileName="src/components/MyComponent/index.content.ts"
|
|
68
|
+
import { t, type Dictionary } from "intlayer";
|
|
66
69
|
|
|
67
|
-
|
|
68
|
-
|
|
70
|
+
const componentContent = {
|
|
71
|
+
key: "my-component",
|
|
72
|
+
content: {
|
|
73
|
+
myTranslatedContent: t({
|
|
74
|
+
en: "Hello World",
|
|
75
|
+
es: "Hola Mundo",
|
|
76
|
+
fr: "Bonjour le monde",
|
|
77
|
+
}),
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
export default componentContent;
|
|
69
82
|
```
|
|
70
83
|
|
|
84
|
+
利用可能なフォーマット:
|
|
85
|
+
|
|
86
|
+
- **TypeScript (`.ts`)**
|
|
87
|
+
- **ESモジュール (`.esm`)**
|
|
88
|
+
- **CommonJS (`.cjs`)**
|
|
89
|
+
- **JSON (`.json`)**
|
|
90
|
+
|
|
91
|
+
### Intlayerタブ(アクティビティバー)
|
|
92
|
+
|
|
93
|
+
VS CodeのアクティビティバーにあるIntlayerアイコンをクリックしてIntlayerタブを開きます。タブには2つのビューがあります:
|
|
94
|
+
|
|
95
|
+
- **検索**:辞書とその内容を素早くフィルタリングできるライブ検索バー。入力すると結果が即座に更新されます。
|
|
96
|
+
- **辞書**:環境やプロジェクト、辞書キー、エントリを含むファイルのツリービュー。以下の操作が可能です:
|
|
97
|
+
- ファイルをクリックしてエディタで開く。
|
|
98
|
+
- ツールバーを使って以下のアクションを実行:ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成。
|
|
99
|
+
- コンテキストメニューでアイテム固有のアクションを実行:
|
|
100
|
+
- 辞書上で:プルまたはプッシュ
|
|
101
|
+
- ファイル上で:辞書のフィル
|
|
102
|
+
- エディタを切り替えると、そのファイルが辞書に属している場合はツリーが該当ファイルを表示します。
|
|
103
|
+
|
|
104
|
+
## インストール
|
|
105
|
+
|
|
106
|
+
**Intlayer**はVS Codeマーケットプレイスから直接インストールできます。
|
|
107
|
+
|
|
108
|
+
1. **VS Code**を開きます。
|
|
109
|
+
2. **拡張機能マーケットプレイス**に移動します。
|
|
110
|
+
3. **「Intlayer」**を検索します。
|
|
111
|
+
4. **インストール**をクリックします。
|
|
112
|
+
|
|
71
113
|
## 使い方
|
|
72
114
|
|
|
73
115
|
### クイックナビゲーション
|
|
74
116
|
|
|
75
|
-
1. **react-intlayer
|
|
76
|
-
2. `useIntlayer()
|
|
117
|
+
1. **react-intlayer**を使用しているプロジェクトを開きます。
|
|
118
|
+
2. `useIntlayer()`の呼び出しを見つけます。例えば:
|
|
77
119
|
|
|
78
120
|
```tsx
|
|
79
121
|
const content = useIntlayer("app");
|
|
80
122
|
```
|
|
81
123
|
|
|
82
|
-
3. キー(例: `"app"
|
|
83
|
-
4. VS Code
|
|
124
|
+
3. キー(例: `"app"`)を**Commandクリック**(macOSの場合は`⌘+クリック`)、または**Ctrlクリック**(Windows/Linuxの場合)します。
|
|
125
|
+
4. VS Codeが自動的に対応する辞書ファイル(例: `src/app.content.ts`)を開きます。
|
|
84
126
|
|
|
85
127
|
### コンテンツ辞書の管理
|
|
86
128
|
|
|
129
|
+
### Intlayerタブ(アクティビティバー)
|
|
130
|
+
|
|
131
|
+
サイドタブを使って辞書を閲覧・管理します:
|
|
132
|
+
|
|
133
|
+
- アクティビティバーのIntlayerアイコンを開きます。
|
|
134
|
+
- **検索** では、辞書とエントリをリアルタイムでフィルタリングするために入力します。
|
|
135
|
+
- **辞書** では、環境、辞書、ファイルを閲覧できます。ツールバーを使って、ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成を行います。右クリックでコンテキストアクション(辞書のプル/プッシュ、ファイルのフィル)を利用できます。現在のエディタファイルは該当する場合、自動的にツリーで表示されます。
|
|
136
|
+
|
|
87
137
|
#### 辞書のビルド
|
|
88
138
|
|
|
89
|
-
|
|
139
|
+
すべての辞書コンテンツファイルを生成するには:
|
|
90
140
|
|
|
91
141
|
```sh
|
|
92
142
|
Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
|
|
@@ -98,55 +148,36 @@ Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
|
|
|
98
148
|
|
|
99
149
|
最新の辞書コンテンツをアップロードするには:
|
|
100
150
|
|
|
101
|
-
1.
|
|
151
|
+
1. **コマンドパレット** を開きます。
|
|
102
152
|
2. **Push Dictionaries** を検索します。
|
|
103
|
-
3.
|
|
153
|
+
3. プッシュする辞書を選択して確認します。
|
|
104
154
|
|
|
105
155
|
#### 辞書のプル
|
|
106
156
|
|
|
107
|
-
|
|
157
|
+
- 最新の辞書コンテンツを同期します:
|
|
108
158
|
|
|
109
159
|
1. **コマンドパレット**を開きます。
|
|
110
160
|
2. **Pull Dictionaries** を検索します。
|
|
111
161
|
3. プルする辞書を選択します。
|
|
112
162
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
貢献したいですか?コミュニティからの貢献を歓迎します!
|
|
116
|
-
|
|
117
|
-
リポジトリURL: https://github.com/aymericzip/intlayer-vs-code-extension
|
|
118
|
-
|
|
119
|
-
### はじめに
|
|
120
|
-
|
|
121
|
-
リポジトリをクローンし、依存関係をインストールします:
|
|
122
|
-
|
|
123
|
-
```sh
|
|
124
|
-
git clone https://github.com/aymericzip/intlayer-vs-code-extension.git
|
|
125
|
-
cd intlayer-vs-code-extension
|
|
126
|
-
npm install
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
> 拡張機能のビルドと公開に使用する `vsce` パッケージとの互換性のために、`npm` パッケージマネージャーを使用してください。
|
|
130
|
-
|
|
131
|
-
### 開発モードで実行する
|
|
132
|
-
|
|
133
|
-
1. プロジェクトを **VS Code** で開きます。
|
|
134
|
-
2. `F5` キーを押して新しい **Extension Development Host** ウィンドウを起動します。
|
|
163
|
+
#### 辞書の内容を埋める
|
|
135
164
|
|
|
136
|
-
|
|
165
|
+
プロジェクトの内容で辞書を埋めます:
|
|
137
166
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
バグを見つけた場合や機能リクエストがある場合は、当社の**GitHubリポジトリ**でIssueを開いてください:
|
|
167
|
+
1. **コマンドパレット**を開きます。
|
|
168
|
+
2. **Fill Dictionaries** を検索します。
|
|
169
|
+
3. コマンドを実行して辞書を埋めます。
|
|
143
170
|
|
|
144
|
-
|
|
171
|
+
#### 辞書のテスト
|
|
145
172
|
|
|
146
|
-
|
|
173
|
+
辞書を検証し、翻訳漏れを見つけます:
|
|
147
174
|
|
|
148
|
-
|
|
175
|
+
1. **コマンドパレット**を開きます。
|
|
176
|
+
2. **Test Dictionaries** を検索します。
|
|
177
|
+
3. 報告された問題を確認し、必要に応じて修正します。
|
|
149
178
|
|
|
150
179
|
## ドキュメント履歴
|
|
151
180
|
|
|
152
|
-
|
|
181
|
+
| バージョン | 日付 | 変更内容 |
|
|
182
|
+
| ---------- | ---------- | ------------ |
|
|
183
|
+
| 5.5.10 | 2025-06-29 | 履歴の初期化 |
|