@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/it/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Estensione Ufficiale per VS Code
-description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
+description: Scopri come utilizzare l'estensione Intlayer in VS Code per migliorare il tuo flusso di lavoro di sviluppo. Naviga rapidamente tra i contenuti localizzati e gestisci i tuoi dizionari in modo efficiente.
 keywords:
   - Estensione VS Code
   - Intlayer
@@ -23,96 +23,40 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) è l'estensione ufficiale di Visual Studio Code per **Intlayer**, progettata per migliorare l'esperienza dello sviluppatore quando si lavora con contenuti localizzati nei tuoi progetti.
 
-![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Estensione Intlayer per VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Link all'estensione: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funzionalità
 
-### Navigazione Istantanea
+![Riempi dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Supporto Vai alla Definizione** – Usa `⌘ + Click` (Mac) o `Ctrl + Click` (Windows/Linux) su una chiave `useIntlayer` per aprire immediatamente il file di contenuto corrispondente.  
-**Integrazione Perfetta** – Funziona senza problemi con i progetti **react-intlayer** e **next-intlayer**.  
-**Supporto Multilingue** – Supporta contenuti localizzati in diverse lingue.  
-**Integrazione con VS Code** – Si integra fluidamente con la navigazione e la palette dei comandi di VS Code.
+- **Navigazione Istantanea** – Passa rapidamente al file di contenuto corretto cliccando su una chiave `useIntlayer`.
+- **Riempi Dizionari** – Riempi i dizionari con i contenuti del tuo progetto.
 
-### Comandi per la Gestione dei Dizionari
+![Elenca comandi](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gestisci i tuoi dizionari di contenuti direttamente da VS Code:
+- **Accesso facile ai comandi Intlayer** – Costruisci, invia, scarica, riempi, testa i dizionari di contenuti con facilità.
 
-- **Costruisci Dizionari** – Genera file di contenuto basati sulla struttura del tuo progetto.
-- **Carica Dizionari** – Carica l'ultimo contenuto del dizionario nel tuo repository.
-- **Scarica Dizionari** – Sincronizza l'ultimo contenuto del dizionario dal tuo repository al tuo ambiente locale.
-- **Riempi Dizionari** – Popola i dizionari con contenuti dal tuo progetto.
-- **Testa Dizionari** – Identifica traduzioni mancanti o incomplete.
+![Crea file di contenuto](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Generatore di Dichiarazioni di Contenuto
+- **Generatore di dichiarazioni di contenuto** – Crea file di contenuto del dizionario in vari formati (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Genera facilmente file di dizionario strutturati in diversi formati:
+![Test dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Se stai lavorando su un componente, genererà per te il file `.content.{ts,tsx,js,jsx,mjs,cjs,json}`.
+- **Test dizionari** – Testa i dizionari per traduzioni mancanti.
 
-Esempio di componente:
+![Ricostruisci dizionario](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Mantieni i tuoi dizionari aggiornati** – Mantieni i tuoi dizionari aggiornati con i contenuti più recenti del tuo progetto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-File generato in formato TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Formati disponibili:
-
-- **TypeScript (`.ts`)**
-- **Modulo ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Scheda Intlayer (Barra delle Attività)
+![Scheda Intlayer (Barra attività)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Apri la scheda Intlayer cliccando sull'icona Intlayer nella barra delle attività di VS Code. Contiene due viste:
+- **Scheda Intlayer (Barra attività)** – Naviga e cerca nei dizionari da una scheda laterale dedicata con barra degli strumenti e azioni contestuali (Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa, Crea file).
 
-- **Ricerca**: Una barra di ricerca live per filtrare rapidamente i dizionari e i loro contenuti. La digitazione aggiorna i risultati istantaneamente.
-- **Dizionari**: Una vista ad albero dei tuoi ambienti/progetti, delle chiavi del dizionario e dei file che contribuiscono con voci. Puoi:
-  - Cliccare su un file per aprirlo nell'editor.
-  - Usare la barra degli strumenti per eseguire azioni: Build, Pull, Push, Fill, Refresh, Test e Create Dictionary File.
-  - Usare il menu contestuale per azioni specifiche dell'elemento:
-    - Su un dizionario: Pull o Push
-    - Su un file: Fill Dictionary
-  - Quando cambi editor, l'albero rivelerà il file corrispondente se appartiene a un dizionario.
+## Uso
 
-## Installazione
-
-Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
-
-1. Apri **VS Code**.
-2. Vai al **Marketplace delle Estensioni**.
-3. Cerca **"Intlayer"**.
-4. Clicca su **Installa**.
-
-## Utilizzo
-
-### Navigazione Rapida
+### Navigazione rapida
 
 1. Apri un progetto che utilizza **react-intlayer**.
 2. Individua una chiamata a `useIntlayer()`, come:
@@ -122,62 +66,57 @@ Puoi installare **Intlayer** direttamente dal Marketplace di VS Code:
    ```
 
 3. **Command-click** (`⌘+Click` su macOS) o **Ctrl+Click** (su Windows/Linux) sulla chiave (ad esempio, `"app"`).
-4. VS Code aprirà automaticamente il file del dizionario corrispondente, ad esempio `src/app.content.ts`.
-
-### Gestione dei Dizionari di Contenuto
+4. VS Code aprirà automaticamente il file dizionario corrispondente, ad esempio, `src/app.content.ts`.
 
-### Scheda Intlayer (Barra delle Attività)
+### Scheda Intlayer (Barra attività)
 
 Usa la scheda laterale per navigare e gestire i dizionari:
 
-- Apri l'icona Intlayer nella Barra delle Attività.
-- In **Ricerca**, digita per filtrare dizionari e voci in tempo reale.
-- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruire, Scaricare, Caricare, Riempire, Aggiornare, Testare e Creare File Dizionario. Clic destro per azioni contestuali (Scarica/Carica sui dizionari, Riempi sui file). Il file attualmente aperto nell’editor si rivela automaticamente nell’albero quando applicabile.
+- Apri l'icona Intlayer nella Barra attività.
+- In **Cerca**, digita per filtrare dizionari e voci in tempo reale.
+- In **Dizionari**, esplora ambienti, dizionari e file. Usa la barra degli strumenti per Costruisci, Scarica, Invia, Riempi, Aggiorna, Testa e Crea file dizionario. Clic destro per azioni contestuali (Scarica/Invia sui dizionari, Riempi sui file). Il file attualmente aperto nell'editor si evidenzia automaticamente nell'albero quando applicabile.
 
-#### Costruire Dizionari
+### Accesso ai comandi
 
-Genera tutti i file di contenuto dei dizionari con:
+Puoi accedere ai comandi dalla **Command Palette**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Cerca **Costruisci Dizionari** ed esegui il comando.
-
-#### Caricare Dizionari
-
-Carica l’ultimo contenuto dei dizionari:
-
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Carica Dizionari**.
-3. Seleziona i dizionari da caricare e conferma.
-
-#### Scaricare Dizionari
+- **Costruisci Dizionari**
+- **Invia Dizionari**
+- **Scarica Dizionari**
+- **Riempi Dizionari**
+- **Testa Dizionari**
+- **Crea File Dizionario**
 
-Sincronizza l’ultimo contenuto del dizionario:
+### Caricamento delle Variabili d'Ambiente
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Scarica Dizionari**.
-3. Scegli i dizionari da scaricare.
+Intlayer consiglia di memorizzare le chiavi API AI, così come l'ID client e il segreto di Intlayer, nelle variabili d'ambiente.
 
-#### Riempire Dizionari
+L'estensione può caricare le variabili d'ambiente dal tuo workspace per eseguire i comandi Intlayer con il contesto corretto.
 
-Riempi i dizionari con contenuti dal tuo progetto:
+- **Ordine di caricamento (per priorità)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Non distruttivo**: i valori esistenti in `process.env` non vengono sovrascritti.
+- **Ambito**: i file vengono risolti dalla directory base configurata (predefinita alla radice del workspace).
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Riempi Dizionari**.
-3. Esegui il comando per popolare i dizionari.
+#### Selezione dell'ambiente attivo
 
-#### Testare Dizionari
+- **Palette dei Comandi**: apri la palette ed esegui `Intlayer: Select Environment`, quindi scegli l'ambiente (ad esempio, `development`, `staging`, `production`). L'estensione tenterà di caricare il primo file disponibile nella lista di priorità sopra indicata e mostrerà una notifica come “Caricato env da .env.<env>.local”.
+- **Impostazioni**: vai su `Impostazioni → Estensioni → Intlayer`, e imposta:
+  - **Ambiente**: il nome dell'ambiente usato per risolvere i file `.env.<env>*`.
+  - (Opzionale) **File Env**: un percorso esplicito a un file `.env`. Quando fornito, ha la precedenza sulla lista dedotta.
 
-Valida i dizionari e trova le traduzioni mancanti:
+#### Monorepo e directory personalizzate
 
-1. Apri la **Palette dei Comandi**.
-2. Cerca **Testa Dizionari**.
-3. Rivedi i problemi segnalati e correggili se necessario.
+Se i tuoi file `.env` si trovano al di fuori della radice dello spazio di lavoro, imposta la **Directory Base** in `Impostazioni → Estensioni → Intlayer`. Il loader cercherà i file `.env` relativi a quella directory.
 
 ## Cronologia Documentazione
 
-| Versione | Data       | Modifiche         |
-| -------- | ---------- | ----------------- |
-| 5.5.10   | 2025-06-29 | Inizio cronologia |
+| Versione | Data       | Modifiche                           |
+| -------- | ---------- | ----------------------------------- |
+| 6.1.5    | 2025-09-30 | Aggiunta gif demo                   |
+| 6.1.0    | 2025-09-24 | Aggiunta sezione selezione ambiente |
+| 6.0.0    | 2025-09-22 | Comandi Intlayer Tab / Fill & Test  |
+| 5.5.10   | 2025-06-29 | Inizializzazione cronologia         |

package/docs/ja/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React と Next.js でコンポーネントを多言語対応（i18n）にする方法
+description: Intlayer を使って多言語対応の React または Next.js コンポーネントを作成するために、ローカライズされたコンテンツの宣言と取得方法を学びます。
+keywords:
+  - i18n
+  - コンポーネント
+  - react
+  - 多言語対応
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer でコンポーネントを多言語対応（i18n）にする方法
+
+このガイドでは、2つの一般的なセットアップで UI コンポーネントを多言語対応にするための最小限の手順を示します：
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+まずコンテンツを宣言し、その後コンポーネント内で取得します。
+
+## 1) コンテンツを宣言する（React と Next.js 共通）
+
+コンポーネントの近くにコンテンツ宣言ファイルを作成します。これにより、翻訳が使用される場所に近くなり、型安全性も確保されます。
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+設定ファイルとして JSON を使いたい場合もサポートされています。
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "多言語対応のReactコンポーネント",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) コンテンツの取得
+
+### ケースA — Reactアプリ（Vite/SPA）
+
+デフォルトの方法：キーで取得するために `useIntlayer` を使用します。これによりコンポーネントはシンプルかつ型安全に保たれます。
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+サーバーサイドレンダリングやプロバイダー外での使用：`react-intlayer/server` を使用し、必要に応じて明示的に `locale` を渡します。
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+代替案：呼び出し元で構造をまとめておきたい場合は、`useDictionary` を使って宣言済みのオブジェクト全体を読み取ることができます。
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### ケースB — Next.js（App Router）
+
+データの安全性とパフォーマンスのためにサーバーコンポーネントを優先してください。サーバーファイルでは `next-intlayer/server` から `useIntlayer` を使用し、クライアントコンポーネントでは `next-intlayer` から `useIntlayer` を使用します。
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+ヒント: ページのメタデータやSEOのために、`getIntlayer` を使用してコンテンツを取得し、`getMultilingualUrls` を使って多言語URLを生成することもできます。
+
+## なぜIntlayerのコンポーネントアプローチが最適なのか
+
+- **コロケーション**: コンテンツの宣言がコンポーネントの近くに存在するため、ズレが減り、デザインシステム全体での再利用が向上します。
+- **型安全性**: キーや構造が強く型付けされており、翻訳の欠落は実行時ではなくビルド時に検出されます。
+- **サーバーファースト**: サーバーコンポーネントでネイティブに動作し、セキュリティとパフォーマンスを向上させます。クライアントフックは引き続き使いやすいままです。
+- **ツリーシェイキング**: コンポーネントで使用されるコンテンツのみがバンドルされるため、大規模アプリでもペイロードを小さく保てます。
+- **DX（開発者体験）＆ツール**: 組み込みのミドルウェア、SEOヘルパー、オプションのビジュアルエディター／AI翻訳が日々の作業を効率化します。
+
+Next.jsに特化した比較とパターンのまとめはこちらをご覧ください: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## 関連ガイドと参考資料
+
+- Reactセットアップ（Vite）: https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStackスタート: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js セットアップ: https://intlayer.org/doc/environment/nextjs
+- なぜ Intlayer を選ぶのか vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+これらのページには、エンドツーエンドのセットアップ、プロバイダー、ルーティング、および SEO ヘルパーが含まれています。

package/docs/ja/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: 公式 VS Code 拡張機能
-description: VS Code で Intlayer 拡張機能を使用して開発ワークフローを強化する方法を学びます。ローカライズされたコンテンツ間を素早くナビゲートし、辞書を効率的に管理できます。
+description: VS Code で Intlayer 拡張機能を使用して開発ワークフローを強化する方法を学びます。ローカライズされたコンテンツ間を素早く移動し、辞書を効率的に管理できます。
 keywords:
   - VS Code 拡張機能
   - Intlayer
@@ -23,161 +23,100 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) は、プロジェクト内のローカライズされたコンテンツを扱う際の開発者体験を向上させるために設計された、**Intlayer** の公式 Visual Studio Code 拡張機能です。
 
-![Intlayer VS Code 拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code 拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 拡張機能リンク: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## 機能
 
-### インスタントナビゲーション
+![辞書を埋める](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**定義へ移動サポート** – `useIntlayer` キー上で `⌘ + クリック`（Mac）または `Ctrl + クリック`（Windows/Linux）を使用して、対応するコンテンツファイルを即座に開きます。  
-**シームレスな統合** – **react-intlayer** および **next-intlayer** プロジェクトとスムーズに連携します。  
-**多言語サポート** – 複数の言語にわたるローカライズされたコンテンツをサポートします。  
-**VS Code 統合** – VS Code のナビゲーションおよびコマンドパレットとスムーズに統合されます。
-
-### 辞書管理コマンド
-
-VS Code から直接コンテンツ辞書を管理します：
-
-- **辞書のビルド** – プロジェクト構造に基づいてコンテンツファイルを生成します。
-- **辞書のプッシュ** – 最新の辞書コンテンツをリポジトリにアップロードします。
-- **辞書のプル** – リポジトリから最新の辞書コンテンツをローカル環境に同期します。
+- **インスタントナビゲーション** – `useIntlayer` キーをクリックすると、正しいコンテンツファイルに素早くジャンプします。
 - **辞書の埋め込み** – プロジェクトのコンテンツで辞書を埋めます。
-- **辞書のテスト** – 欠落または不完全な翻訳を特定します。
-
-### コンテンツ宣言ジェネレーター
-
-異なるフォーマットで構造化された辞書ファイルを簡単に生成します：
-
-現在コンポーネントを作業している場合、そのコンポーネント用の `.content.{ts,tsx,js,jsx,mjs,cjs,json}` ファイルを生成します。
-
-コンポーネントの例：
-
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript形式で生成されたファイル：
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![コマンド一覧](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+- **Intlayerコマンドへの簡単アクセス** – コンテンツ辞書のビルド、プッシュ、プル、埋め込み、テストを簡単に行えます。
 
-export default componentContent;
-```
+![コンテンツファイル作成](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-利用可能なフォーマット：
+- **コンテンツ宣言ジェネレーター** – さまざまな形式（`.ts`、`.esm`、`.cjs`、`.json`）で辞書コンテンツファイルを作成します。
 
-- **TypeScript (`.ts`)**
-- **ESモジュール (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+![辞書のテスト](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-### Intlayerタブ（アクティビティバー）
+- **辞書のテスト** – 翻訳漏れがないか辞書をテストします。
 
-VS CodeのアクティビティバーにあるIntlayerアイコンをクリックしてIntlayerタブを開きます。タブには2つのビューがあります：
+![辞書の再構築](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **検索**：辞書とその内容を素早くフィルタリングできるライブ検索バー。入力すると結果が即座に更新されます。
-- **辞書**：環境やプロジェクト、辞書キー、エントリを含むファイルのツリービュー。以下の操作が可能です：
-  - ファイルをクリックしてエディタで開く。
-  - ツールバーを使って以下のアクションを実行：ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成。
-  - コンテキストメニューでアイテム固有のアクションを実行：
-    - 辞書上で：プルまたはプッシュ
-    - ファイル上で：辞書のフィル
-  - エディタを切り替えると、そのファイルが辞書に属している場合はツリーが該当ファイルを表示します。
+- **辞書を最新の状態に保つ** – プロジェクトの最新コンテンツで辞書を常に最新の状態に保ちます。
 
-## インストール
+![Intlayer タブ（アクティビティバー）](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-**Intlayer**はVS Codeマーケットプレイスから直接インストールできます。
-
-1. **VS Code**を開きます。
-2. **拡張機能マーケットプレイス**に移動します。
-3. **「Intlayer」**を検索します。
-4. **インストール**をクリックします。
+- **Intlayer タブ（アクティビティバー）** – 専用のサイドタブからツールバーやコンテキストアクション（ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、ファイル作成）を使って辞書を閲覧・検索できます。
 
 ## 使い方
 
 ### クイックナビゲーション
 
-1. **react-intlayer**を使用しているプロジェクトを開きます。
-2. `useIntlayer()`の呼び出しを見つけます。例えば：
+1. **react-intlayer** を使用しているプロジェクトを開きます。
+2. 次のような `useIntlayer()` の呼び出しを見つけます。
 
    ```tsx
    const content = useIntlayer("app");
    ```
 
-3. キー（例: `"app"`）を**Commandクリック**（macOSの場合は`⌘+クリック`）、または**Ctrlクリック**（Windows/Linuxの場合）します。
-4. VS Codeが自動的に対応する辞書ファイル（例: `src/app.content.ts`）を開きます。
-
-### コンテンツ辞書の管理
+3. キー（例: `"app"`）を **Command-click**（macOSでは `⌘+Click`）、または **Ctrl+Click**（Windows/Linuxの場合）します。
+4. VS Code は対応する辞書ファイル（例: `src/app.content.ts`）を自動的に開きます。
 
-### Intlayerタブ（アクティビティバー）
+### Intlayer タブ（アクティビティバー）
 
 サイドタブを使って辞書を閲覧・管理します：
 
-- アクティビティバーのIntlayerアイコンを開きます。
-- **検索** では、辞書とエントリをリアルタイムでフィルタリングするために入力します。
-- **辞書** では、環境、辞書、ファイルを閲覧できます。ツールバーを使って、ビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成を行います。右クリックでコンテキストアクション（辞書のプル/プッシュ、ファイルのフィル）を利用できます。現在のエディタファイルは該当する場合、自動的にツリーで表示されます。
+- アクティビティバーの Intlayer アイコンを開きます。
+- **検索** でリアルタイムに辞書やエントリをフィルタリングします。
+- **辞書** では環境、辞書、ファイルを閲覧します。ツールバーからはビルド、プル、プッシュ、フィル、リフレッシュ、テスト、辞書ファイルの作成が可能です。右クリックでコンテキストアクション（辞書のプル/プッシュ、ファイルのフィル）を利用できます。現在のエディタファイルは該当する場合、ツリー内で自動的に表示されます。
 
-#### 辞書のビルド
+### コマンドへのアクセス
 
-すべての辞書コンテンツファイルを生成するには：
+コマンドは **コマンドパレット** からアクセスできます。
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Build Dictionaries** を検索してコマンドを実行します。
-
-#### 辞書のプッシュ
-
-最新の辞書コンテンツをアップロードするには：
-
-1. **コマンドパレット** を開きます。
-2. **Push Dictionaries** を検索します。
-3. プッシュする辞書を選択して確認します。
-
-#### 辞書のプル
+- **辞書をビルド**
+- **辞書をプッシュ**
+- **辞書をプル**
+- **辞書を埋める**
+- **辞書をテスト**
+- **辞書ファイルを作成**
 
-- 最新の辞書コンテンツを同期します：
+### 環境変数の読み込み
 
-1. **コマンドパレット**を開きます。
-2. **Pull Dictionaries** を検索します。
-3. プルする辞書を選択します。
+Intlayer は、AI APIキーや Intlayer クライアントIDおよびシークレットを環境変数に保存することを推奨します。
 
-#### 辞書の内容を埋める
+拡張機能は、ワークスペースから環境変数を読み込み、適切なコンテキストで Intlayer コマンドを実行できます。
 
-プロジェクトの内容で辞書を埋めます：
+- **読み込み順（優先度順）**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **非破壊的**: 既存の `process.env` の値は上書きされません。
+- **スコープ**: ファイルは設定されたベースディレクトリ（デフォルトはワークスペースのルート）から解決されます。
 
-1. **コマンドパレット**を開きます。
-2. **Fill Dictionaries** を検索します。
-3. コマンドを実行して辞書を埋めます。
+#### アクティブ環境の選択
 
-#### 辞書のテスト
+- **コマンドパレット**: パレットを開き、`Intlayer: Select Environment` を実行して環境（例：`development`、`staging`、`production`）を選択します。拡張機能は上記の優先リストで最初に見つかったファイルを読み込み、「Loaded env from .env.<env>.local」のような通知を表示します。
+- **設定**: `設定 → 拡張機能 → Intlayer` に移動し、以下を設定します：
+  - **Environment**: `.env.<env>*` ファイルを解決するために使用される環境名。
+  - （オプション）**Env File**: 明示的な `.env` ファイルへのパス。指定された場合、推測されたリストより優先されます。
 
-辞書を検証し、翻訳漏れを見つけます：
+#### モノレポおよびカスタムディレクトリ
 
-1. **コマンドパレット**を開きます。
-2. **Test Dictionaries** を検索します。
-3. 報告された問題を確認し、必要に応じて修正します。
+ワークスペースのルート外に `.env` ファイルがある場合は、`設定 → 拡張機能 → Intlayer` で **ベースディレクトリ** を設定してください。ローダーはそのディレクトリを基準に `.env` ファイルを探します。
 
 ## ドキュメント履歴
 
-| バージョン | 日付       | 変更内容     |
-| ---------- | ---------- | ------------ |
-| 5.5.10     | 2025-06-29 | 履歴の初期化 |
+| バージョン | 日付       | 変更内容                               |
+| ---------- | ---------- | -------------------------------------- |
+| 6.1.5      | 2025-09-30 | デモGIFを追加                          |
+| 6.1.0      | 2025-09-24 | 環境選択セクションを追加               |
+| 6.0.0      | 2025-09-22 | Intlayerタブ / Fill & Testコマンド追加 |
+| 5.5.10     | 2025-06-29 | 履歴を初期化                           |