テキストのカスタマイズ

フロントエンドフレームワークは、国際化とローカライゼーションのためにi18nextライブラリを使用しています。これにより、アプリケーション内のテキストの翻訳が簡単にできるだけでなく、カスタム翻訳キーを使用してテキスト自体をカスタマイズすることも可能です。

テキストのカスタマイズ方法

アプリケーションのテンプレート内では、i18nOptions プロパティを使用してi18nextライブラリを設定できます。このプロパティは、i18next.init メソッドに渡され、指定されたオプションでi18nextライブラリを初期化します。詳細については、i18nextのドキュメントを参照してください。

フロントエンドフレームワークの場合、resources プロパティを使用してアプリケーションで使用されるテキストを指定できます。私たちは、アプリケーションのデフォルトの翻訳を読み込む loadDefaultTranslations メソッドを提供しています。

{
  ...
  i18nOptions: {
    resources: loadDefaultTranslations(),
  }
}

次に、独自の翻訳を指定して、この翻訳リストに結合することで、デフォルトの翻訳を上書きできます。

import { merge } from 'lodash';
import { loadDefaultTranslations } from '@basaldev/blocks-frontend-framework';

{
  ...
  i18nOptions: {
    resources: merge(loadDefaultTranslations(), {
      ja: {
        keyToOverride: 'My custom translation text'
      }
    }),
  }
}

翻訳の管理

コード内でのテキストの翻訳は面倒になることがあるため、上書きされた翻訳を管理するためにyaml形式で指定された翻訳ファイルを使用することをお勧めします。

ja:
  keyToOverride1: 'My custom translation text 1'
  objectToOverride:
    key1: 'My custom translation text 2'
    key2: 'My custom translation text 3'

このファイルもインポートできます。

import { merge } from 'lodash';
import { loadDefaultTranslations, loadTranslationsFromYaml } from '@basaldev/blocks-frontend-framework';
import translationOverrides from './overrides.yaml';

{
  ...
  i18nOptions: {
    resources: merge(loadDefaultTranslations(), loadTranslationsFromYaml(translationOverrides)),
  }
}

翻訳ファイルのフォーマット

注意

フロントエンドフレームワークでは、現在翻訳用のyamlファイルについて固定のフォーマットは存在しません。

将来的には、翻訳をより構造化された方法で整理し、アプリケーションの構造に合わせて翻訳ファイルをより読みやすく、管理しやすくする予定です。 フィードバックや提案がありましたら、お気軽にご連絡ください。