JSSにおける多言語アプリケーションのサポート
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore JSS Sitecoreのコンテンツ言語バージョン管理機能を活用できます。
Sitecoreから翻訳されたデータをレンダリングする際には通常、2つの懸念があります。
- 主要なページの内容。
- ラベルやボタンのテキストの翻訳に使われる辞書項目。
サンプルアプリは、JSSが提供するツールを使ってアプリを完全に翻訳可能にする方法の一つを示しています。
翻訳されたSitecoreコンテンツのレンダリング
GraphQLでもRESTでも、Sitecoreからコンテンツを取得する際は、リクエストは舞台裏でSitecoreレイアウトサービスに送られます。
レイアウトサービスはルートおよびコンテキストデータを取得する際に言語コンテキストSitecoreを尊重するため、レイアウトサービスへのリクエストはsc_langパラメータを利用して特定の言語でコンテンツを要求できます。例えば、http://JssReactWeb/sitecore/api/layout/render/jss?item=/Services&sc\_lang=es-MX&sc\_apikey={YOUR\_API\_KEY}。
レイアウトサービスの呼び出し方法や言語変更の処理方法を選べます。
サンプルアプリケーションのいずれかを使ってJSSプロジェクトをセットアップした場合、アプリケーションはすでにレイアウトデータの取得を処理しています。
Sitecore辞書フレーズの取得
Sitecore JSSは、JSSアプリで翻訳されたフレーズを取得するための辞書APIを提供しています。
サンプルアプリケーションのいずれかを使ってJSSプロジェクトをセットアップした場合、そのアプリケーションはすでに辞書のフレーズ取得を処理しています。
切断モードでの翻訳されたルートおよびコンテキストデータ
切断モードでアプリケーションを実行する際の翻訳内容をシミュレートするため、JSSサンプルアプリケーションが提供するDisconnected Layout Serviceは、言語データを含むSitecoreレイアウトサービスのインターフェースをモックします。Disconnected Layout Serviceは、単一言語であるJSSマニフェストデータによって駆動されます。
しかし、アプリが異なる言語を要求すると、サービスは自動的にマニフェストを再生成します。このユースケースをサポートするには、複数の言語で利用可能なデータが必要です。
!注Disconnected Layout Serviceは、Sitecoreファースト開発ワークフローで開発する場合には使用されません。
サンプルアプリは、異なる言語のコンテンツやレイアウトデータの定義を可能にするために、lang.ymlまたはJSONファイルを使うデフォルトの慣例があります。
これはサンプルアプリの多言語コンテンツのデフォルト慣例であり、/sitecore/definitions/routes.sitecore.jsで定義されています。ご自身の好みやニーズに合った多言語データの保存方法や慣習を定義できます。
翻訳されたコンテンツと切断モードのインポート
ほとんどの場合、Sitecoreインスタンスなしで開発されたアプリケーションは、翻訳が考慮される前にSitecoreデータを使うことに移行するでしょう。
しかし、Sitecoreインスタンスを使わずに作業しながら、切り離された多言語コンテンツを作成することも可能です。この技術はサンプルアプリで示されており、en.yamlやes-mx.yamlなどの各言語のファイルを使ってルートを定義します。
多言語の切り離されたアプリケーションを展開するには、各言語ごとに別々にアプリケーションを展開する必要があります。理由は以下の通りです:
- アプリは package.json ファイルで定義された単一のデフォルト言語を持っています。すべてのサンプルアプリはデフォルトで enです。
- マニフェストを生成する際、マニフェストには一度に1つの言語のみが含まれます。
- アップデートパッケージを展開する際は、一度に1つの言語のみがパッケージに含まれます。
- マニフェストやパッケージング時のデフォルト言語は、以下で定義されているものです package.json
!注 --includeContentまたは --includeDictionaryの引数を使ってコンテンツやルートデータをデプロイしなければ、多言語データを展開することはできず、単一のステップで展開できます。
言語のSitecoreにアイテムをデプロイするには:
-
ターミナル内のJSSアプリケーションのルートディレクトリで、次のコマンドを実行します。
jss deploy items --language=es-MX --includeContent --includeDictionary
!注jss deploy itemsコマンドはファイルを展開しません。
ファイルを展開するにはjss deploy filesコマンドを使用します。
アイテムやファイルを展開するにはjss deploy appコマンドを使用します。
展開したい各言語ごとに同じ手順を繰り返します。
翻訳コンテンツと統合レンダリング
JSSアプリケーションが統合モードで動作する場合、Sitecoreが言語解像度やLayout Serviceのコンテンツを処理し、統合サーバー側レンダリングに使われるrenderView()関数に提供されるため、データは正しい言語で返されます。
内容翻訳を助けるために、JSSはviewBagの議論に2つの性質を加えています:
- viewBag.language - これはSitecoreによって解決される言語であり、アプリ状態を正しい言語で初期化するのに役立ちます。Sitecoreはデフォルトで言語クッキーも使用しているため、URLに言語パラメータのないリクエストは、ユーザーが最後に要求した言語の内容を返すことができます。
- viewBag.dictionary - Sitecore辞書サービスが提供する現在の言語でアプリの辞書フレーズを含みます。これにより、サーバー側レンダリングのために辞書の初期化が可能になります。
ヘッドレスサーバーサイドレンダリングモードで翻訳されたコンテンツ
JSSに含まれるヘッドレスサーバーサイドレンダリングの例は、初期のルートURLをLayout Serviceへのリクエストに変換・プロキシすることで部分的に機能します。これには、ルートURLの構造やSitecoreルートパス以外のものが含まれているか、または言語パラメータを付け加えたいかについての知能が必要です。これを可能にするために、プロキシ関数はlangおよびsitecoreRouteプロパティを持つオブジェクトを返すことを期待するオプションのparseRouteUrl関数を受け入れます。
この例はエクスポートされた関数をparseRouteUrlで埋めています。Reactのサーバーバンドルを検査し、/server/server.jsファイルでサンプルアプリVue.js、Angularアプリの場合はserver.bundle.tsファイルで確認できます。