Intlayerを使用したAnalog (Angular) アプリの翻訳 | 国際化 (i18n)

目次

代替手段ではなく Interlayer を使用する理由

「ngx-translate」や「​​angular-l10n」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

AnalogアプリケーションへのIntlayerセットアップ手順

GitHubでアプリケーションテンプレートを確認する。

1. 1

   依存関係のインストール

   npmを使用して必要なパッケージをインストールします：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npx intlayer init --interactive
   

   --interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

   このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npm install intlayer angular-intlayer vite-intlayer
   

   • intlayer

     設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。

   • angular-intlayer IntlayerをAngularアプリケーションと統合するパッケージ。Angularの国際化のためのコンテキストプロバイダーとフックを提供します。

   • vite-intlayer IntlayerをViteと統合するパッケージ。コンテンツ宣言ファイルを処理するプラグインを提供し、最適なパフォーマンスのためのエイリアスを設定します。

2. 2

   プロジェクトの設定

   アプリケーションの言語を設定するための設定ファイルを作成します：

   intlayer.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // その他のロケール
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子の設定、コンソールでのIntlayerログの無効化などが可能です。利用可能なパラメータの全リストについては、設定ドキュメントを参照してください。

3. 3

   Vite設定へのIntlayerの統合

   AnalogとIntlayerを統合するには、vite-intlayerプラグインを使用する必要があります。

   vite.config.tsファイルを修正します：

   vite.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { defineConfig } from "vite";
   import { intlayer } from "vite-intlayer";
   import analog from "@analogjs/platform";
   
   // https://vitejs.dev/config/
   export default defineConfig(() => ({
     plugins: [
       analog(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   }));
   

   intlayer()プラグインは、Intlayerを使用してViteを設定します。コンテンツ宣言ファイルを処理し、最適なパフォーマンスのためのエイリアスを設定します。

4. 4

   コンテンツの宣言

   翻訳を保存するためのコンテンツ宣言を作成・管理します：

   コンテンツ宣言は、contentDirディレクトリ（デフォルトは./src）に含まれている限り、アプリケーション内のどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）と一致させる必要があります。

   詳細については、コンテンツ宣言のドキュメントを参照してください。

5. 5

   コード内でのIntlayerの利用

   Analogアプリケーション全体でIntlayerの国際化機能を利用するには、アプリケーション設定でIntlayerを提供する必要があります。

   src/app/app.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { ApplicationConfig } from "@angular/core";
   import { provideIntlayer } from "angular-intlayer";
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideIntlayer(), // ここにIntlayerプロバイダーを追加
     ],
   };
   

   その後、任意のコンポーネント内でuseIntlayer関数を使用できます。

   src/app/pages/index.page.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Component } from "@angular/core";
   import { useIntlayer } from "angular-intlayer";
   
   @Component({
     selector: "app-home",
     standalone: true,
     template: `
       <div class="content">
         <h1>{{ content().title }}</h1>
         <p>{{ content().congratulations }}</p>
       </div>
     `,
   })
   export default class HomeComponent {
     content = useIntlayer("app");
   }
   

   IntlayerのコンテンツはSignalとして返されるため、シグナルを呼び出すことで値にアクセスします：content().title。

6. 6

   コンテンツの言語を変更する

   オプション

   コンテンツの言語を変更するには、useLocale関数によって提供されるsetLocale関数を使用できます。これにより、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。

   言語を切り替えるためのコンポーネントを作成します：

   src/app/locale-switcher.component.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Component } from "@angular/core";
   import { CommonModule } from "@angular/common";
   import { useLocale } from "angular-intlayer";
   
   @Component({
     selector: "app-locale-switcher",
     standalone: true,
     imports: [CommonModule],
     template: `
       <div class="locale-switcher">
         <select
           [value]="locale()"
           (change)="setLocale($any($event.target).value)"
         >
           @for (loc of availableLocales; track loc) {
             <option [value]="loc">{{ loc }}</option>
           }
         </select>
       </div>
     `,
   })
   export class LocaleSwitcherComponent {
     localeCtx = useLocale();
   
     locale = this.localeCtx.locale;
     availableLocales = this.localeCtx.availableLocales;
     setLocale = this.localeCtx.setLocale;
   }
   

   次に、このコンポーネントをページで使用します：

   src/app/pages/index.page.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Component } from "@angular/core";
   import { useIntlayer } from "angular-intlayer";
   import { LocaleSwitcherComponent } from "../locale-switcher.component";
   
   @Component({
     selector: "app-home",
     standalone: true,
     imports: [LocaleSwitcherComponent],
     template: `
       <app-locale-switcher></app-locale-switcher>
       <div class="content">
         <h1>{{ content().title }}</h1>
         <p>{{ content().congratulations }}</p>
       </div>
     `,
   })
   export default class HomeComponent {
     content = useIntlayer("app");
   }
   

TypeScriptの設定

Intlayerは、TypeScriptの利点を活かしてコードベースを強力にするためにモジュール拡張を使用します。

TypeScriptの設定に自動生成された型が含まれていることを確認してください。

{
  // ... 既存のTypeScript設定
  "include": [
    // ... 既存のTypeScript設定
    ".intlayer/**/*.ts", // 自動生成された型を含める
  ],
}

Gitの設定

Intlayerによって生成されたファイルは無視することをお勧めします。これにより、Gitリポジトリへのコミットを避けることができます。

これを行うには、.gitignoreファイルに以下の指示を追加してください：

#  Intlayerによって生成されたファイルを無視
.intlayer

VS Code拡張機能

Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code Extensionをインストールできます。

VS Code Marketplaceからインストール

この拡張機能は以下を提供します：

• 翻訳キーのオートコンプリート。
• 翻訳漏れのリアルタイムエラー検出。
• 翻訳されたコンテンツのインラインプレビュー。
• 翻訳を簡単に作成・更新するためのクイックアクション。

拡張機能の使用方法の詳細については、Intlayer VS Code Extensionのドキュメントを参照してください。

さらに進める

さらに進めるために、ビジュアルエディタを実装するか、CMSを使用してコンテンツを外部化することができます。

よくある質問