JSS Angularサンプルアプリにおける翻訳と言語
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSで作成されたAngularアプリケーションは、複数の言語でデータを表示できます。
新しい言語の追加
Angularのサンプルアプリケーションには英語とデンマーク語のサンプルコンテンツが含まれており、切断モードで は言語を簡単に切り替えることができます。他のモードで使用するためにデンマーク語レイヤーをインポートするには、以下のアイテムを展開する必要があります:
jss deploy items --language da-DK -c -d
!重要Sitecoreに代替言語を展開するには、まずその言語がSitecoreに登録されている必要があります。未登録言語をインポートするとエラーが発生します。
ngx-translateライブラリの使用
Sitecore辞書を動的に読み込み利用するために、Angularのサンプルは組み込みのコンパイル時変換サポートではなく、ngx-translateライブラリを使用しています。
他のライブラリや手法を使うこともできますが、このライブラリはカスタムTranslateLoader実装を消費できるため、Sitecore辞書とクライアントサイドでもサーバーサイドでも簡単に利用できます。
ngx-translateの初期化はsrc/app/app.component.tsのメインアプリコンポーネントで確認できます。これにはJssContextServiceの現在の言語状態に基づいて表示言語を切り替えるロジックが含まれており、ngx-translateライブラリが言語状態を現在のルートの言語と同期させることを可能にします。
ngx-translateライブラリのローダーは、クライアントレンダリングとサーバーレンダリングでそれぞれ異なる初期化されており、src/app/app.module.tsとsrc/app/app.server.module.tsです。
ngx-translateライブラリで翻訳値を用いる仕組みはいくつかあります。詳細はngx-translateのドキュメントをご覧ください。
翻訳ローダー
JSS Angularサンプルアプリケーションは複数の翻訳ローダーを定義し、使用しています。それらはsrc/app/i18nディレクトリに存在します。
JssTranslationLoaderService
この実装は、Headless Servicesが提供する辞書サービスからSitecore辞書を読み込みます。クライアントとサーバーの両方のレンダリング時にフォールバックとして機能します。
JssTranslationServerLoaderService
この実装は、サーバーレンダリング時にSitecoreが提供するviewBagデータから辞書をJSS_SERVER_TO_SSRインジェクショントークンを通じて読み込もうと試みます。JSSアプリケーションを実行する際、Sitecore便宜上デフォルトでビューバッグに辞書を提供します。辞書が見つからない場合は、ローダーはフォールバックローダー(設定通りのJssTranslationLoaderService)から辞書を取得しようとします。取得した辞書はクライアントアプリケーションが利用するためにTransferStateに入れられます。
JssTranslationClientLoaderService
この実装は、TransferStateから辞書を読み込み、指定されたフォールバックローダー(設定通りJssTranslationLoaderService)にフォールバックします。