多言語サイトを運用する際に、未翻訳の部分があれば別の言語の情報を表示することができると、翻訳前にまずは英語でコンテンツ表示などが可能になります。今回はこの機能に関して紹介をします。
言語フォールバックとは？
多言語サイトにおいて、すべての言語の情報が翻訳されたあとに公開されるという運用は、翻訳のプロセスがボトルネックになることが考えられます。このため、まず主要言語を翻訳、そして翻訳後にページを公開するという手順を踏むことは多くあります。
この際、一時的に別の言語でページを表示する仕組みがあると、翻訳すべきページは翻訳を進める、それまでの間は別の言語で表示をする、という手順を踏むことができます。この仕組みを実現するのが、言語フォールバックという仕組みです。例えば、
- 英語のコンテンツは必ず提供される
- フランス語、スペイン語などを展開する場合は、未翻訳の場合は英語を、翻訳が終わったあと翻訳版を公開する
こういった運用ができるようになります。それでは実際に XM Cloud で言語フォールバックを有効にして、これまで en として持っていたデータを en-US という形で表示したいと思います。
なお、手順に関しては以下のページで公開されています。
言語フォールバックの設定
言語を追加する
まず最初に、Sitecore ではデフォルトで en で英語のコンテンツを持っているので、これを en-US として利用できるように言語を追加します。言語を追加する際に、Fallback Language の項目が用意されているので、ここに en を設定します。
設定を有効にする
続いて、XM Cloud の標準の設定では、以下の２つの項目が無効になっています。
XML
<setting name="ExperienceEdge.EnableItemLanguageFallback" value="false"/>
<setting name="ExperienceEdge.EnableFieldLanguageFallback" value="false"/>上記の設定を変更するために、 docker\build\cm\App_Config\Include\zzz\languagefallback.config に config を変更するためのパッチファイルを用意します。ファイルの中身は以下の通りです。
XML
<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
<sitecore>
<settings>
<setting name="ExperienceEdge.EnableItemLanguageFallback">
<patch:attribute name="value">true</patch:attribute>
</setting>
<setting name="ExperienceEdge.EnableFieldLanguageFallback">
<patch:attribute name="value">true</patch:attribute>
</setting>
</settings>
</sitecore>
</configuration>この設定ファイルを Docker コンテナにコピーをするために、docker\build\cm\Dockerfile のファイルには以下の行を追加します。
Plain Text
# Copy Config files
COPY .\App_Config \inetpub\wwwroot\App_Config変更後に config が変わっていることを確認してください。
言語フォールバックを有効する
まず最初に、サイトに対して言語フォールバックが有効になるように、サイトの設定の中の Language の項目のうち以下の2つの項目をチェックしてください。
- Enable item language fallback .
- Enable field language fallback.
続いてアイテムテンプレートに対して有効にしていきます。今回は Page アイテムの Standard Value の項目を有効にします。
最後に Page テンプレートの Advanced の中に入っている、Enable Item Fallback - Display item from fallback language if no language version exists の項目をチェックしてください。
データフィールドにあるアイテムに対して、言語フォールバックをどのように設定するのかもありますが、今回はこの部分は省略します。
検証
CMS 側の言語を追加したので、Next.js の設定に関しても変更をします。src\sxastarter\next.config.js のファイルに対して en-US を追加します。
JavaScript
i18n: {
// These are all the locales you want to support in your application.
// These should generally match (or at least be a subset of) those in Sitecore.
locales: ['en', 'ja-JP', 'en-US'],
// This is the locale that will be used when visiting a non-locale
// prefixed path e.g. `/styleguide`.
defaultLocale: jssConfig.defaultLanguage,
},これで https://www.sxastarter.localhost/en-US にアクセスをしてみましょう。以下のように英語のコンテンツが表示されています。
コンテンツエディターで Home アイテムにアクセスをして、言語のリストを参照すると以下のように Fallback version という表記になっています。
ローカルの環境でエクスペリエンスエディターを起動して、言語を en-US に切り替えると、画面の上には警告が表示されています。
この画面から対象となる言語にきりかえるか、新しいバージョンを作ることができるようになっています。
XM Cloud の環境に反映する
上記の検証はローカルの環境で設定していました。展開をするにあたって、config ファイルを展開する必要があります。そこで、上記で作成をした config ファイルを src\platform\App_Config\Include\zzz\languagefallback.config にコピーをして、src\platform\Platform.csproj にコピー対象のアイテムとして定義を追加します。
XML
<ItemGroup>
<Content Include="App_Config\Include\zzz\languagefallback.config" />
<Content Include="App_Data\items\core\localization\cmp.items.core.ja-JP.dat" />
<Content Include="App_Data\items\core\localization\dam.items.core.ja-JP.dat" />上記の変更後、コードを反映させて XM Cloud の環境を rebuild してください。新しい CMS の Show config で Docker の時と同じく設定が反映されていれば、利用できるようになっています。
まとめ
多言語サイトに関して、この言語フォールバックを上手に使うことで、複数の言語での運用を効率的に回すことができるようになります。例えば、ベースの言語は日本語と英語は必ず作成、それ以外の言語は PV が多い場合は翻訳をするといったことが可能です。多言語サイトの時に、CMS でこのような運用が可能なのかどうかは、評価ポイントでもあります。