AEM ヘッドレスとローカライズされたコンテンツ
AEM は、ヘッドレスコンテンツに翻訳統合フレームワークを提供しており、コンテンツのフラグメントとサポートアセットを、ロケール間で容易に翻訳して使用できます。このフレームワークは、ページ、エクスペリエンスフラグメント、アセット、フォームなどの、その他の AEM コンテンツの翻訳に使用するフレームワークと同じです。ヘッドレスコンテンツを翻訳して、公開すると、ヘッドレスアプリケーションで使用する準備が整います。
アセットフォルダー構造 assets-folder-structure
AEM のローカライズされたコンテンツフラグメントが、推奨のローカライゼーション構造になっていることを確認します。
ロケールフォルダーは兄弟である必要があり、フォルダー名はタイトルではなく、フォルダーに含まれるコンテンツのロケールを表す有効な ISO 639-1 コードでなければなりません。
ロケールコードは、GraphQL クエリによって返されるコンテンツフラグメントのフィルタリングにも使用される値です。
GraphQL 永続クエリ
AEM は、ロケールコードごとにコンテンツを自動的にフィルタリングする _locale GraphQL フィルターを提供します。例えば、WKND Site プロジェクトのすべての英語のアドベンチャーのクエリは、次のように定義された新しい永続クエリ wknd-shared/adventures-by-locale で実行できます。
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
_locale フィルターで使用される $locale 変数には、AEM のアセットフォルダーベースのローカライゼーション規則で指定されているロケールコード（en、en_us、deなど）が必要です。
React の例
_locale フィルターを使用して、ロケールセレクターに基づき、AEM からクエリするアドベンチャーコンテンツを制御できるシンプルな React アプリケーションを作成します。
例えば、ロケールセレクターで 英語 を選択すると /content/dam/wknd/en の下にある英語のアドベンチャーのコンテンツフラグメントが返され、スペイン語 を選択すると /content/dam/wknd/es の下にあるスペイン語のコンテンツフラグメントが返されます。
LocaleContext の作成 locale-context
まず、React コンテキストを作成して、React アプリケーションのコンポーネント全体でロケールを使用できるようにします。
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
LocaleSwitcher React コンポーネントの作成 locale-switcher
次に、ユーザーの選択範囲に LocaleContext の値を設定するロケールスイッチャー React コンポーネントを作成します。
このロケール値を使用すると、GraphQL クエリを実行し、選択したロケールに一致するコンテンツのみを返すことができます。
// src/LocaleSwitcher.js
import { useContext } from "react";
import LocaleContext from "./LocaleContext";
export default function LocaleSwitcher() {
const { locale, setLocale } = useContext(LocaleContext);
return (
<select value={locale}
onChange={e => setLocale(e.target.value)}>
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="es">Español</option>
</select>
);
}
_locale フィルターを使用したコンテンツのクエリ adventures
Adventures コンポーネントは、ロケール別のすべてのアドベンチャーに関して AEM にクエリを実行し、タイトルを一覧表示します。これを実現するには、_locale フィルターを使用して React コンテキストに保存されているロケール値をクエリに渡します。
この方法はアプリケーション内の他のクエリに拡張でき、すべてのクエリにユーザーのロケール選択で指定されたコンテンツのみを含むようにすることができます。
AEM に対するクエリは、「AEM GraphQL のクエリ」ドキュメントで詳細に説明されているカスタム React フック getAdventuresbyLocale で実行されます。
// src/Adventures.js
import { useContext } from "react"
import { useAdventuresByLocale } from './api/persistedQueries'
import LocaleContext from './LocaleContext'
export default function Adventures() {
const { locale } = useContext(LocaleContext);
// Get data from AEM using GraphQL persisted query as defined above
// The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
let { data, error } = useAdventuresByLocale(locale);
return (
<ul>
{data?.adventureList?.items?.map((adventure, index) => {
return <li key={index}>{adventure.title}</li>
})}
</ul>
)
}
App.js の定義 app-js
最後に、React アプリケーションを LanguageContext.Provider にラップして、ロケール値を設定し、すべてを結合します。これにより、他の React コンポーネント、ロケールスイッチャー、アドベンチャーでロケール選択状態を共有できます。
// src/App.js
import { useState, useContext } from "react";
import LocaleContext from "./LocaleContext";
import LocaleSwitcher from "./LocaleSwitcher";
import Adventures from "./Adventures";
export default function App() {
const [locale, setLocale] = useState(useContext(LocaleContext).locale);
return (
<LocaleContext.Provider value={{locale, setLocale}}>
<LocaleSwitcher />
<Adventures />
</LocaleContext.Provider>
);
}