多言語サイトにおける言語フォールバックの設定

公開日 :

すでに XM Cloud で言語を追加する方法に関して紹介をしました。多言語サイトで言語を増やしていく際に効率的に管理する仕組みとして、言語フォールバックの仕組みがあります。今回はこの機能の設定と動作確認をしていきます。

ローカル環境での確認

ローカルで動いている XM Cloud のプレビューのページを開きます。デフォルトでは、https://www.sxastarter.localhost/ にアクセスをすると以下のようにページが表示されています。

random desc

URL に ja-jp を追加して日本語のページが表示されれば、前回の設定が完了して正しく動いていることになります。

random desc

言語フォールバックとは?

Sitecore のコンテンツの管理の仕組みとしては、1つのコンテンツを複数の言語に対してコンテンツ管理をするようになっています。つまり、トップページの Home に対して

  • Home(英語)

  • ホーム(日本語)

という形で、1つのアイテムで1つのコンテンツを多言語で持つことができます。そして言語間でデータがない場合、別の言語で表示をするといコンテンツの持ち方が可能となります。例えば

  • en として英語のリソースを管理

  • en-US と en-GB という形で各国のコンテンツを管理することができるようにする

  • それぞれ、コンテンツが作成されていない場合は、en のコンテンツを利用する

こうすることで、同じ言語(今回は英語)のコンテンツを、その言語を利用するロケール(地域)で利用することができます。また、各国のロケールでコンテンツを作った場合、フォールバック言語で設定しているコンテンツは参照しない形となります。

言語フォールバックを設定する

それでは早速、言語フォールバック(Language Fallback)の仕組みを有効にしていきます。今回は2つの設定を追加していきます。まず、日本語のコンテンツに対して、ローカルのコンテンツがない場合は英語のコンテンツを呼び出す、もう一つは en (英語)ではなく en-US (英語 米国)という言語を追加して、英語のコンテンツを表示する、という形です。

すでに追加している日本語に対して、英語を言語フォールバックとして設定します。

random desc

続いてサイトにおける設定が必要となります。ドキュメントを参照すると以下のページが表示されます。

この設定は Headless SXA の場合は異なります。このサイトの設定は Sitecore のアイテムとして管理しているためです。この設定は、対象となるサイト設定で、今回だと Settings/Site Grouping/sitecoredemo-jp となります。以下のように、Enable item language fallback と Enable field language fallback の項目をチェックしてください。

random desc

最後に、対象となるアイテムがフォールバックに対応できるようにしていきます。今回であれば Page テンプレートを利用して展開しているため、このテンプレートの __Standard Values の項目を変更します。Enable Item Fallback の項目は、View - Standard Field をチェックすると表示される Advanced の中に含まれています。

random desc

上記の設定を変更したあと、Home のアイテムが有効になっていればこの設定は完了です。

動作確認

以下の手順で検証用のアイテムを作成します。まず、About のページを Dupulicate を利用して Sample として複製し、日本語のコンテンツに関して削除をして英語版のみとします。

random desc

上記の画面でも、日本語のコンテンツがないため Fallback version として表示されているのがわかります。Experience Editor のプレビューモードで該当ページを表示すると、ページが表示されており、英語のコンテンツが表示されているのがわかります。

random desc

新しい言語を追加する

すでに設定してある日本語での動作確認が終わりました。続いて、en-US を追加したいと思います。ja-JP の時と同じく、Fallback language として en を設定します。

random desc

続いて、Next.js 側にも言語を追加します。設定は next.config.js ファイルの中にある言語設定となり、前回は ja-JP を追加しただけですが、en-US も追加します。

  i18n: {
    locales: ['en', 'en-US', 'ja-JP'],
    defaultLocale: jssConfig.defaultLanguage,
    localeDetection: false,
  },

言語の追加、Next.js 側にロケールを追加しただけでコンテンツはすべて en を利用することになります。実際に en-US を利用してアクセスをすると以下のように表示されています。

random desc

特にコンテンツを追加することなく、en-US のサイトを立ち上げることができました。

まとめ

言語フォールバックの機能を利用することで、まず追加の言語のベースの言語を指定して立ち上げることが可能な点を紹介しました。この仕組みを利用することで、例えばニュースリリースは日本語と英語でリリースをして、その後必要に応じて各国の言語の翻訳を提供していく、ということができるようになります。少なくとも英語のコンテンツが表示される形です。上手に使うことで、多くの国のサイトをカバーすることが可能となります。

参考ページ