@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/ja/formatters.md

@@ -56,44 +56,14 @@ Intlayerは、ネイティブの`Intl` APIの上に構築された軽量なヘ
 
 エクスポートされる`Intl`は、グローバルな`Intl`の薄いキャッシュラッパーです。`NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`、`ListFormat`、`DisplayNames`、`Collator`、および`PluralRules`のインスタンスをメモ化し、同じフォーマッターを繰り返し再構築するのを防ぎます。
 
-フォーマッターの構築は比較的コストが高いため、このキャッシュは動作を変えずにパフォーマンスを向上させます。ラッパーはネイティブの`Intl`と同じAPIを公開しているため、使用方法は同一です。
-
-- キャッシュはプロセス単位で行われ、呼び出し元には透過的です。
-
 > 環境に`Intl.DisplayNames`が存在しない場合、開発者向けの警告が一度だけ表示されます（ポリフィルの検討を推奨）。
 
 例：
 
-```ts
-import { Intl } from "intlayer";
-
-// 数値のフォーマット
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// 言語、地域などの表示名
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// ソート用の照合
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0（等しい）
-
-// 複数形ルール
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## ロケールユーティリティ
 
 ### `getLocaleLang(locale?)`
 
-ロケール文字列から言語コードを抽出します：
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -102,28 +72,15 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: 言語コードを抽出する対象のロケール（省略時は現在のロケール）
-
 ### `getLocaleFromPath(inputUrl)`
 
 URLまたはパス名からロケール部分を抽出します：
 
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en"（デフォルトのロケール）
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
 - **inputUrl**: 処理する完全なURL文字列またはパス名
 - **returns**: 検出されたロケール、またはロケールが見つからない場合はデフォルトのロケール
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-現在のロケールに対応したローカライズされたURLを生成します：
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -132,12 +89,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**: ローカライズする元のURL
-- **currentLocale**: 現在のロケール
-- **locales**: サポートされているロケールのオプション配列（デフォルトは設定されたロケール）
-- **defaultLocale**: オプションのデフォルトロケール（設定されたデフォルトロケールが使用されます）
-- **prefixDefault**: デフォルトロケールにプレフィックスを付けるかどうか（設定された値が使用されます）
-
 ### `getHTMLTextDir(locale?)`
 
 ロケールに対するテキストの方向を返します：
@@ -150,15 +101,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**: テキスト方向を取得するロケール（デフォルトは現在のロケール）
-- **returns**: `"ltr"`、`"rtl"`、または `"auto"`
-
 ## コンテンツ処理ユーティリティ
 
 ### `getContent(node, nodeProps, locale?)`
 
-すべての利用可能なプラグイン（翻訳、列挙、挿入など）を使ってコンテンツノードを変換します：
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -169,36 +115,16 @@ const content = getContent(
 );
 ```
 
-- **node**: 変換するコンテンツノード
-- **nodeProps**: 変換コンテキストのプロパティ
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 言語コンテンツオブジェクトから特定のロケールのコンテンツを抽出します：
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**: ロケールをコンテンツにマッピングしたオブジェクト
 - **locale**: 対象のロケール（デフォルトは設定されたデフォルトロケール）
 - **fallback**: デフォルトロケールにフォールバックするかどうか（デフォルトは true）
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-キーによって辞書からコンテンツを取得し変換します：
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -206,10 +132,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**: 取得する辞書のキー
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-- **plugins**: オプションのカスタム変換プラグインの配列
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 遠隔の辞書から非同期にコンテンツを取得します：
@@ -220,25 +142,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**: 取得する辞書のキー
-- **locale**: オプションのロケール（デフォルトは設定されたデフォルトロケール）
-- **plugins**: オプションのカスタム変換プラグインの配列
-
 ## フォーマッター
 
 以下のすべてのヘルパーは `intlayer` からエクスポートされています。
 
 ### `percentage(value, options?)`
 
-数値をパーセンテージ文字列としてフォーマットします。
-
-動作: 1より大きい値は全体のパーセンテージとして解釈され正規化されます（例：`25` → `25%`、`0.25` → `25%`）。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-例:
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -434,13 +343,6 @@ pluralRules.select(11); // "many"
 
 ### `units(value, options?)`
 
-`Intl.NumberFormat` の `style: 'unit'` を使って数値をローカライズされた単位文字列としてフォーマットします。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - 共通フィールド: `unit`（例: `"kilometer"`、`"byte"`）、`unitDisplay`（`"short" | "narrow" | "long"`）
-  - デフォルト: `unit: 'day'`、`unitDisplay: 'short'`、`useGrouping: false`
-
 例:
 
 ```ts
@@ -463,11 +365,6 @@ getLocaleLang("fr-CA"); // "fr"
 
 ### `compact(value, options?)`
 
-数値をコンパクト表記（例: `1.2K`、`1M`）でフォーマットします。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`（内部で `notation: 'compact'` を使用）
-
 例:
 
 ```ts
@@ -490,13 +387,6 @@ getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
 
 ### `list(values, options?)`
 
-`Intl.ListFormat`を使用して、値の配列をローカライズされたリスト文字列にフォーマットします。
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - 共通フィールド: `type`（`"conjunction" | "disjunction" | "unit"`）、`style`（`"long" | "short" | "narrow"`）
-  - デフォルト: `type: 'conjunction'`、`style: 'long'`
-
 例:
 
 ```ts
@@ -525,56 +415,6 @@ getHTMLTextDir("he"); // "rtl"
 
 クライアントコンポーネント:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// または Next.js アプリの場合
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-サーバーコンポーネント（または React Server ランタイム）:
-
 ```ts
 import {
   useNumber,
@@ -599,8 +439,6 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> これらのフックは `IntlayerProvider` または `IntlayerServerProvider` からロケールを考慮します
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 特定のロケールのコンテンツを抽出します：
@@ -632,8 +470,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> これらのコンポーザブルは、注入された `IntlayerProvider` からロケールを考慮します
-
 ## 注記
 
 - すべてのヘルパーは `string` 入力を受け入れます。内部的には数値または日付に強制されます。

package/docs/ja/how_works_intlayer.md

@@ -62,6 +62,8 @@ Intlayerの主なアイデアは、コンポーネントごとのコンテンツ
    - これらの辞書は、すべてのニーズに対応し、アプリケーションのパフォーマンスを最適化するために、さまざまな形式で生成されます。
 
 3. 辞書型の生成
+
+4. 辞書型の生成
    `辞書`に基づいて、Intlayerはアプリケーションで使用可能な型を生成します。
 
 - 辞書型はIntlayerの`コンテンツ宣言ファイル`から生成されます。デフォルトでは、Intlayer辞書型はプロジェクトの`.intlayer/types`ディレクトリに生成されます。
@@ -103,8 +105,13 @@ Intlayerは、視覚的にコンテンツを編集できるビジュアルエデ
   `useIntlayer`を使ってコンテンツを呼び出し、エディタが有効になっている場合、文字列は自動的に`IntlayerNode`という名前のProxyオブジェクトでラップされます。このノードは、ビジュアルエディタのインターフェースを含むラップされたiframeと通信するために`window.postMessage`を使用します。
   エディタ側では、これらのメッセージを受信してコンテンツとの実際のインタラクションをシミュレートし、アプリケーションのコンテキスト内で直接テキストを編集できるようにします。
 
+`useIntlayer`を使用してコンテンツを呼び出し、エディタが有効になっている場合、文字列は`IntlayerNode`という名前のProxyオブジェクトで自動的にラップされます。このノードは`window.postMessage`を使用して、ビジュアルエディタインターフェースを含むラップされたiframeと通信します。
+エディタ側では、エディタはこれらのメッセージをリッスンし、コンテンツとの実際のインタラクションをシミュレートして、アプリケーションのコンテキスト内でテキストを直接編集できるようにします。
+
 ## アプリビルドの最適化
 
+アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグイン(`@intlayer/babel`および`@intlayer/swc`プラグイン)を提供しています。
+
 アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグインを提供しています：`@intlayer/babel`と`@intlayer/swc`プラグイン。
 BabelおよびSWCプラグインは、アプリケーションの抽象構文木（AST）を解析してIntlayer関数の呼び出しを最適化されたコードに置き換えることで動作します。このプロセスにより、実際に使用されている辞書のみがインポートされるようになり、チャンクの最適化とバンドルサイズの削減が行われるため、本番環境での最終バンドルが軽量化されます。
 

package/docs/ja/interest_of_intlayer.md

@@ -38,36 +38,54 @@ author: aymericzip
 
 `next-intl`や`i18next`などの主要なソリューションと比較して、Intlayerは以下のような統合された最適化を備えたソリューションです：
 
+<AccordionGroup>
+
 **バンドルサイズ**
 
 ページに巨大なJSONファイルを読み込む代わりに、必要なコンテンツのみを読み込みます。Intlayerは**バンドルサイズとページサイズを最大50%削減**するのに役立ちます。
 
 **メンテナンス性**
 
+<Accordion header="保守性">
+
 アプリケーションのコンテンツのスコープを限定することで、大規模アプリケーションの**メンテナンスが容易**になります。全体のコンテンツコードベースを見直す精神的負担なしに、単一の機能フォルダを複製または削除できます。さらに、Intlayerは**完全に型定義**されているため、コンテンツの正確性が保証されます。
 
 **AIエージェント**
 
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置（コローケーション）することで、大規模言語モデル（LLM）に必要な**コンテキストが削減**されます。Intlayerには、翻訳漏れをテストするための**CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/mcp_server.md)**、**[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)**などのツールスイートも付属しており、AIエージェントの開発体験（DX）をさらにスムーズにします。
 
+</Accordion>
+
 **機能性**
 
 Intlayerは、他のi18nソリューションにはない、[Markdownサポート](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md)、[外部コンテンツの取得](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/function_fetching.md)、[ファイルコンテンツの読み込み](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/file.md)、[ライブコンテンツ更新](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/live.md)、[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)など、多くの追加機能を提供します。
 
+</Accordion>
+
 **自動化**
 
 CI/CDパイプラインでお好みのLLMを使用し、AIプロバイダーの実費で自動翻訳を行います。Intlayerはコンテンツ抽出を自動化する**コンパイラ**や、**バックグラウンドで翻訳**をサポートする[ウェブプラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)も提供しています。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 巨大なJSONファイルをコンポーネントに接続すると、パフォーマンスやリアクティビティの問題が発生する可能性があります。Intlayerはビルド時にコンテンツの読み込みを最適化します。
 
 **非開発者とのスケーリング**
 
+<Accordion header="非開発環境でのスケーリング">
+
 単なるi18nソリューションにとどまらず、Intlayerはセルフホスト可能な**[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)**と**[フル機能のCMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)**を提供し、多言語コンテンツを**リアルタイム**で管理できるようにします。これにより、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 **クロスフレームワーク設計**
 
+<Accordion header="クロスフレームワークデザイン">
+
+異なるフレームワークをアプリケーションの異なる部分に使用する場合（例えば、React、React-native、Vue、Angular、Svelte など）、Intlayer は**すべての主要なフロントエンドフレームワーク全体で一般的な構文と実装を使用する**方法を提供します。また、design-system、apps、backend などで content declaration を共有できます。
+
 アプリケーションの異なる部分で異なるフレームワークを使用している場合（例：React、React-Native、Vue、Angular、Svelteなど）、Intlayerは**すべての主要なフロントエンドフレームワークで共通の構文と実装を使用する方法**を提供します。また、デザインシステム、アプリ、バックエンドなどでコンテンツ宣言を共有することもできます。
 
 ## なぜIntlayerが作られたのか？

package/docs/ja/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+`--with` フラグを使用すると、エディターを別のコマンドと並行して開始できます:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## 設定
 
 Intlayer の設定ファイルで、エディタの設定をカスタマイズできます:
@@ -144,7 +154,9 @@ export default config;
    pnpm intlayer-editor start
    ```
 
-   > **アプリケーションは並行して実行する必要があります。** アプリケーションの URL はエディタ設定の `applicationURL` と一致している必要があります。
+> **アプリケーションを並行して実行する必要があることに注意してください。** アプリケーション URL は、エディター設定で設定した URL (`applicationURL`) と一致する必要があります。
+
+> **アプリケーションは並行して実行する必要があります。** アプリケーションの URL はエディタ設定の `applicationURL` と一致している必要があります。
 
 2. 次に、指定された URL を開きます。デフォルトは `http://localhost:8000` です。
 

package/docs/ja/intlayer_with_adonisjs.md

@@ -258,9 +258,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... その他の設定オプション
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ja/intlayer_with_analog.md

@@ -63,10 +63,14 @@ author: aymericzip
 
 **アナログを完全にカバー**
 
+<Accordion header="フルアナログカバレッジ">
+
 Intlayer は、**多言語ルーティング**、**SSR サポート**、およびスケーリング国際化 (i18n) に必要なすべての機能を提供することで、Analog と完全に連携するように最適化されています。
 
 **バンドルサイズ**
 
+<Accordion header="Bundle size">
+
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 **保守性**
@@ -75,20 +79,33 @@ Intlayer は、**多言語ルーティング**、**SSR サポート**、およ
 
 **AI エージェント**
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 **オートメーション**
 
+<Accordion header="自動化">
+
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 **非開発によるスケーリング**
 
+<Accordion header="none-dev でのスケーリング">
+
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## AnalogアプリケーションへのIntlayerセットアップ手順
@@ -388,6 +405,8 @@ Intlayerでの開発体験を向上させるために、公式の**Intlayer VS C
 
 拡張機能の使用方法の詳細については、[Intlayer VS Code Extensionのドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
 
+---
+
 ### さらに進める
 
 さらに進めるために、[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装するか、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化することができます。

package/docs/ja/intlayer_with_angular_19.md

@@ -41,10 +41,14 @@ author: aymericzip
 
 **Angular を完全にカバー**
 
+<Accordion header="Angular の完全なカバレッジ">
+
 Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**遅延読み込み**、および国際化 (i18n) のスケーリングに必要なすべての機能を提供することにより、Angular と完全に連携するように最適化されています。
 
 **バンドルサイズ**
 
+<Accordion header="Bundle サイズ">
+
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 **保守性**
@@ -53,20 +57,33 @@ Intlayer は、**コンポーネント レベルのコンテンツ スコープ*
 
 **AI エージェント**
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 **オートメーション**
 
+<Accordion header="Automation">
+
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 **非開発によるスケーリング**
 
+<Accordion header="none-devでのスケーリング">
+
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## AngularアプリケーションにIntlayerをセットアップするためのステップバイステップガイド

package/docs/ja/intlayer_with_angular_21.md

@@ -43,10 +43,14 @@ author: aymericzip
 
 **Angular を完全にカバー**
 
+<Accordion header="Angular の完全対応">
+
 Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**遅延読み込み**、および国際化 (i18n) のスケーリングに必要なすべての機能を提供することにより、Angular と完全に連携するように最適化されています。
 
 **バンドルサイズ**
 
+<Accordion header="Bundle size">
+
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 **保守性**
@@ -55,20 +59,33 @@ Intlayer は、**コンポーネント レベルのコンテンツ スコープ*
 
 **AI エージェント**
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 **オートメーション**
 
+<Accordion header="オートメーション">
+
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 **非開発によるスケーリング**
 
+<Accordion header="Scaling with none-dev">
+
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## AngularアプリケーションでIntlayerをセットアップするためのステップバイステップガイド

package/docs/ja/intlayer_with_astro.md

@@ -67,10 +67,14 @@ author: aymericzip
 
 **Astro を完全にカバー**
 
+<Accordion header="Full Astro coverage">
+
 Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
 
 **バンドルサイズ**
 
+<Accordion header="Bundle size">
+
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 **保守性**
@@ -79,20 +83,33 @@ Intlayer は、**多言語ルーティング**、**サイトマップ**、およ
 
 **AI エージェント**
 
+</Accordion>
+
+<Accordion header="AI Agent">
+
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 **オートメーション**
 
+<Accordion header="Automation">
+
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 **パフォーマンス**
 
+<Accordion header="パフォーマンス">
+
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 **非開発によるスケーリング**
 
+<Accordion header="none-devでのスケーリング">
+
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## AstroへのIntlayer設定ステップバイステップガイド
@@ -103,8 +120,32 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 
 <Step number={1} title="依存関係のインストール">
 
+必要なパッケージをパッケージマネージャーを使用してインストールしてください:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # オプション: Reactアイランドのサポートを追加する場合