JSS での多言語アプリケーションのサポート
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecore JSS を使用すると、 Sitecore のコンテンツ言語のバージョン管理機能を利用できます。
翻訳されたデータを Sitecore からレンダリングする場合、通常 2 つの懸念事項があります。
-
プライマリ ページのコンテンツ。
-
ラベル、ボタン テキストなどの翻訳に使用するディクショナリ アイテム。
サンプル アプリは、JSS が提供するツールを使用してアプリを完全に翻訳可能にする 1 つの方法を示しています。
翻訳された Sitecore コンテンツのレンダリング
Sitecore からコンテンツを取得する場合、GraphQL でも REST でも、要求はバックグラウンドで Sitecore レイアウト サービスに対して行われます。
レイアウト サービスは、ルートとコンテキスト データをフェッチするときに Sitecore 言語コンテキストを尊重します。つまり、レイアウト サービスへの要求では、sc_lang パラメーターを使用して特定の言語でコンテンツを要求できます。例: http://JssReactWeb/sitecore/api/layout/render/jss?item=/Services&sc_lang=es-MX&sc_apikey={YOUR_API_KEY}
レイアウト サービスを呼び出し、言語の変更を処理する方法を選択できます。
サンプル アプリケーションの 1 つを使用して JSS プロジェクトをセット アップした場合、アプリケーションはすでにレイアウト データのフェッチを処理します。
Sitecore ディクショナリ フレーズの取得
Sitecore JSS には、JSS アプリで翻訳されたフレーズを取得するのに役立つ Dictionary API が用意されています。
サンプル アプリケーションの 1 つを使用して JSS プロジェクトをセット アップした場合、アプリケーションはすでにディクショナリ フレーズのフェッチを処理しています。
切断モードでの翻訳されたルートとコンテキスト データ
アプリケーションを切断モードで実行するときに翻訳されたコンテンツをシミュレートするために、JSS サンプル アプリケーションが提供する切断されたレイアウト サービスは、言語データを含む Sitecore レイアウト サービスのインターフェイスをモックします。切断されたレイアウト サービスは、単一言語の JSS マニフェス トデータを利用しています。
ただし、アプリによって別の言語が要求されると、サービスはマニフェストを自動的に再生成します。このユース ケースをサポートするには、データを複数の言語で利用できる必要があります。
切断されたレイアウト サービスは、Sitecore ファーストの開発ワークフローを使用して開発する場合は使用されません。
サンプル アプリには、lang.yml または JSON ファイルを使用して、異なる言語のコンテンツとレイアウト データを定義できるように、既定の規約があります。
これは、/sitecore/definitions/routes.sitecore.js で定義されたサンプル アプリの多言語コンテンツの既定の規約にすぎません。好みやニーズに合わせて、独自の規約や多言語データの保存方法を定義できます。
翻訳されたコンテンツと切断モードのインポート
ほとんどの場合、Sitecore インスタンスを使用せずに開発されたアプリケーションは、翻訳を考慮する前に Sitecore データの使用に移行する可能性があります。
ただし、Sitecore インスタンスを使用せずに作業しながら、切断された多言語コンテンツを開発することは可能です。サンプル アプリでは、en.yaml や es-mx.yaml などの各言語のファイルを使用してルートを定義することで、この手法を紹介しています。
多言語の切断アプリケーションをデプロイするには、次の理由により、言語ごとに個別にアプリケーションをデプロイする必要があります。
-
アプリの既定言語は 1 つで、
package.jsonファイルで定義されます。すべてのサンプル アプリの既定はenです。 -
マニフェストを生成するとき、マニフェストには一度に 1 つの言語のみが含まれます。
-
更新パッケージをデプロイするとき、パッケージには一度に 1 つの言語のみが含まれます。
-
マニフェストまたはパッケージ化するときの既定の言語は、
package.jsonで定義されている言語です。
引数 --includeContent または --includeDictionary を使用してコンテンツ/ルート データをデプロイしない場合、多言語データをデプロイしないため、1 回の手順でデプロイできます。
言語用のアイテムを Sitecore にデプロイするには:
-
ターミナルで、JSS アプリケーションのルート ディレクトリにある次のコマンドを実行します。
RequestResponsejss deploy items --language=es-MX --includeContent --includeDictionary注記jss deploy itemsコマンドは、ファイルをデプロイしません。ファイルをデプロイするには、
jss deploy filesコマンドを使用します。アイテムとファイルをデプロイするには、
jss deploy appコマンドを使用します。
デプロイする言語ごとにこの手順を繰り返します。
翻訳されたコンテンツと統合されたレンダリング
JSS アプリケーションを統合モードで実行すると、統合されたサーバーサイドレンダリングに使用される renderView() 関数に提供される言語解決とレイアウト サービス コンテンツが Sitecore によって処理されるため、データは正しい言語で返されます。
コンテンツの翻訳を支援するために、JSS は viewBag の引数に 2 つのプロパティを追加します。
-
viewBag.language- これは Sitecore によって解決された言語であり、正しい言語でアプリの状態を初期化するのに役立ちます。Sitecore は既定で言語 Cookie も使用するため、URL に言語パラメーターを指定しない要求では、ユーザーが最後に要求した言語のコンテンツを返すことができます。 -
viewBag.dictionary- Sitecore ディクショナリ サービス によって提供される現在の言語のアプリのディクショナリフレーズが含まれています。これにより、サーバーサイドレンダリング用にディクショナリを初期化できます。
ヘッドレス サーバーサイドレンダリング モードでの翻訳されたコンテンツ
JSS に含まれているヘッドレス サーバーサイドレンダリングの例は、初期ルート URL を翻訳してレイアウト サービスへの要求にプロキシすることによって、部分的に機能します。これには、ルート URL に Sitecore ルート パス以外のものが含まれている場合、またはプロキシに言語パラメーターを追加する場合に、ルート URL の構造に関する何らかのインテリジェンスが必要です。これを容易にするために、プロキシ関数はオプションの parseRouteUrl 関数を受け取り、lang プロパティおよび sitecoreRoute プロパティを持つオブジェクトを返すことを期待します。
この例では、エクスポートされた関数parseRouteUrl をこの関数に入力します。React と Vue.js のサンプル アプリのサーバー バンドルは /server/server.js ファイルで、Angular アプリのサーバー バンドルは server.bundle.ts ファイルで検査できます。