1. アーキテクチャの概要

JSSでの多言語アプリケーションのサポート

Version:
日本語翻訳に関する免責事項

このページの翻訳は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レイアウト サービスのインターフェイスをモックします。Disconnected Layout Serviceは、単一言語のJSSマニフェスト データを利用しています。

ただし、アプリによって別の言語が要求されると、サービスはマニフェストを自動的に再生成します。このユースケースをサポートするには、データを複数の言語で利用できる必要があります。

メモ

Disconnected Layout Serviceは、Sitecoreファーストの開発ワークフローを使用して開発する場合には使用されません。

サンプル アプリには、lang.ymlファイルまたはJSONファイルを使用して、さまざまな言語のコンテンツとレイアウト データの定義を有効にする既定の規則があります。

Content and layout data definitions for multiple languages in disconnected mode

これは、/sitecore/definitions/routes.sitecore.jsで定義されている、サンプル アプリの多言語コンテンツの既定の規則にすぎません。独自の規則と、好みやニーズに合った多言語データの保存方法を定義できます。

翻訳されたコンテンツと切断モードのインポート

ほとんどの場合、Sitecoreインスタンスを使用せずに作業中に開発されたアプリケーションは、翻訳を検討する前にSitecoreデータの使用に移行する可能性があります。

ただし、Sitecoreインスタンスを使用せずに作業しながら、切断された多言語コンテンツを開発することは可能です。この手法は、サンプル アプリでは、en.yamlやes-mx.yamlなどの各言語のファイルを使用してルートを定義することで示されています。

多言語の非接続アプリケーションをデプロイするには、次の理由により、言語ごとにアプリケーションを個別にデプロイする必要があります。

  • アプリには、package.jsonファイルで定義されている1つの既定の言語があります。すべてのサンプル アプリの既定値はenです。

  • マニフェストを生成する場合、マニフェストには一度に1つの言語のみが含まれます。

  • 更新プログラム パッケージをデプロイする場合、パッケージには一度に1つの言語のみが含まれます。

  • マニフェストまたはパッケージ化時のデフォルトの言語は、で定義されている言語です。 package.json

手記

引数 --includeContentまたは --includeDictionaryを使用してコンテンツ/ルートデータをデプロイしない場合は、多言語データをデプロイしないため、1つの手順でデプロイできます。

言語のSitecoreにアイテムをデプロイするには:

  • ターミナルのJSSアプリケーションのルートディレクトリで、次のコマンドを実行します。

    jss deploy items --language=es-MX --includeContent --includeDictionary
    手記

    jss deploy itemsコマンドはファイルをデプロイしません。

    ファイルをデプロイするには、jss deploy filesコマンドを使用します。

    アイテムとファイルをデプロイするには、jss deploy appコマンドを使用します。

デプロイする言語ごとにこの手順を繰り返します。

翻訳されたコンテンツと統合レンダリング

JSSアプリケーションを統合モードで実行すると、Sitecoreは言語解決を処理し、統合サーバー側レンダリングに使用されるrenderView() 関数に提供されるレイアウト サービス コンテンツを処理するため、データは正しい言語で返されます。

コンテンツの翻訳を支援するために、JSSはviewBag引数に2つのプロパティを追加します。

  • viewBag.language - これはSitecoreによって解決される言語であり、アプリの状態を正しい言語で初期化するのに役立ちます。Sitecoreはデフォルトで言語Cookieも使用するため、URLに言語パラメーターがないリクエストは、ユーザーが最後にリクエストした言語でコンテンツを返すことができます。

  • viewBag.dictionary - Sitecore辞書サービスによって提供される現在の言語でのアプリの辞書フレーズが含まれています。これにより、サーバー側のレンダリング用にディクショナリを初期化できます。

ヘッドレスサーバー側レンダリングモードでの翻訳済みコンテンツ

JSSに含まれているヘッドレス・サーバー・サイド・レンダリングの例は、初期ルートURLをレイアウト・サービスへのリクエストに変換してプロキシーすることで、部分的に機能します。これには、ルートURLにSitecoreルート パス以外のものが含まれている場合、またはプロキシに言語パラメーターを追加させる場合は、ルートURLの構造に関するある程度のインテリジェンスが必要です。これを容易にするために、プロキシ関数は、langプロパティとsitecoreRouteプロパティを持つオブジェクトを返すと想定するオプションのparseRouteUrl関数を受け入れます。

この例では、エクスポートされた関数parseRouteUrlをこの関数に入力します。Reactのサーバーバンドルを検査し、/server/server.jsファイルまたはAngularアプリケーションの場合はserver.bundle.tsファイル内のVue.js Reactサンプルアプリケーションを検査できます。

この記事を改善するための提案がある場合は、 お知らせください!