このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "履歴の初期化"v8.0.42026/1/26
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayerを使用したAnalog (Angular) アプリの翻訳 | 国際化 (i18n)
目次
Intlayerとは？
Intlayerは、現代的なWebアプリケーションにおける多言語サポートを簡素化するために設計された、革新的でオープンソースな国際化（i18n）ライブラリです。
With Intlayer, you can:
- 翻訳の簡単な管理: コンポーネントレベルで宣言的な辞書を使用します。
- メタデータ、ルート、コンテンツの動的なローカライズ。
- TypeScriptサポートの確保: 自動生成された型により、オートコンプリートとエラー検出が向上します。
- 高度な機能の活用: 動的なロケール検出や切り替えなど。
AnalogアプリケーションへのIntlayerセットアップ手順
GitHubでアプリケーションテンプレートを確認する。
ステップ1: 依存関係のインストール
npmを使用して必要なパッケージをインストールします：
コードをクリップボードにコピー
npm install intlayer angular-intlayer vite-intlayernpx intlayer initintlayer
angular-intlayer IntlayerをAngularアプリケーションと統合するパッケージ。Angularの国際化のためのコンテキストプロバイダーとフックを提供します。
vite-intlayer IntlayerをViteと統合するパッケージ。コンテンツ宣言ファイルを処理するプラグインを提供し、最適なパフォーマンスのためのエイリアスを設定します。
ステップ2: プロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
コードをクリップボードにコピー
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: Vite設定へのIntlayerの統合
AnalogとIntlayerを統合するには、vite-intlayerプラグインを使用する必要があります。
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(), // Intlayerプラグインを追加 ],}));intlayer()プラグインは、Intlayerを使用してViteを設定します。コンテンツ宣言ファイルを処理し、最適なパフォーマンスのためのエイリアスを設定します。ステップ4: コンテンツの宣言
翻訳を保存するためのコンテンツ宣言を作成・管理します：
コンテンツ宣言は、contentDirディレクトリ（デフォルトは./src）に含まれている限り、アプリケーション内のどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs}）と一致させる必要があります。
詳細については、コンテンツ宣言のドキュメントを参照してください。
ステップ5: コード内でのIntlayerの利用
Analogアプリケーション全体でIntlayerの国際化機能を利用するには、アプリケーション設定でIntlayerを提供する必要があります。
コードをクリップボードにコピー
import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = { providers: [ provideIntlayer(), // ここにIntlayerプロバイダーを追加 ],};その後、任意のコンポーネント内でuseIntlayer関数を使用できます。
コードをクリップボードにコピー
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: コンテンツの言語を変更する
コンテンツの言語を変更するには、useLocale関数によって提供されるsetLocale関数を使用できます。これにより、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
言語を切り替えるためのコンポーネントを作成します：
コードをクリップボードにコピー
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;}次に、このコンポーネントをページで使用します：
コードをクリップボードにコピー
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によって生成されたファイルを無視.intlayerVS Code拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code Extensionをインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 翻訳漏れのリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新するためのクイックアクション。
拡張機能の使用方法の詳細については、Intlayer VS Code Extensionのドキュメントを参照してください。