例: コミュニティへの HTML コンテンツの接続

たとえば、AEM を使用して「Capricorn Cafe」という名前のサイトのコンテンツを作成するとします。コミュニティで Capricorn Cafe ブランドを宣伝するため、同じデザインを再利用したいと考えています。この例では、CMS への接続を作成して、ヘッダーとフッターを取得する設定を定義する方法を示します。次に、バナーを含める CMS Connect (HTML) コンポーネントを追加します。

CMS コンテンツへのパスの特定

CMS 接続を設定する前に、コンテンツの場所を正確に特定します。これは、CMS と設定によって異なります。AEM、Drupal、SDL Tridion、Sitecore、WordPress への接続はテストされていますが、CMS 接続はプロバイダ固有ではありません。表示するデータのエンドポイントとパスを指定することで、HTML および JSON コンテンツを取得して表示できます。

CMS のコンテンツ構造を調べると、パスを見つけるのに役立ちます。この例では、コンテンツエンドポイントは https://capricorn_cafe.com/content/capricorn/en です。AEM 開発者インターフェースで、HTML ヘッダー、フッター、およびバナーのパス名をメモします。

CMS 接続の設定

1. CMS 接続を作成します。
2. [接続の詳細] で、次の情報を入力します。
   • 名前 — Capricorn
   • CMS ソース — AEM
   • 接続種別 — 公開
   • サーバ URL — https://capricorn_cafe.com

   ご使用の CMS がリスト内にない場合、CMS ソースとして [その他] を選択します。サーバ URL には、HTTPS でアクセスできる CMS サーバの完全修飾ドメイン名を入力します。

3. (省略可能) CMS コンテンツのルートパス (content/capricorn/en など) を設定します。ルートパスはサーバ名に対して相対的になります。これはショートカットであるため、後でコンポーネントを追加するときにフルパス名を入力する必要はありません。
4. (省略可能) コンテンツに複数の言語がある場合、ルートパスにその言語のプレースホルダ (content/capricorn/{language} など) を含めることもできます。複数の言語をサポートするように接続を設定するには、[言語の対応付けを有効化] を選択します。言語を選択して、AEM にある CMS 言語ディレクトリを入力します。追加する各言語がエクスペリエンスビルダーの設定で有効になっていることを確認します。
5. 接続設定を保存します。

ヘッダーおよびフッターコンテンツの再利用

HTML ヘッダーおよびフッターコンテンツを取り込むには、CMS Connect (HTML) ではなくエクスペリエンスビルダーの設定を使用します。[設定] でヘッダーとフッターを定義すると、他のページコンテンツの前に表示されます。

1. エクスペリエンスビルダーから、[設定] に移動します。
2. [CMS Connect] をクリックします。
3. ヘッダーおよびフッターコンテンツへの接続とパスを指定します。
   1. [ヘッダーソース] で、接続を選択してヘッダーパス (content/capricorn/en/header.html など) を入力します。
   2. [フッターソース] で、接続を選択してフッターパス (content/capricorn/en/footer.html など) を入力します。

      ルートパスを content/capricorn/en として定義した場合、ヘッダーパスとフッターパスに「header.html」と「footer.html」のみを入力します。

      メモ

      

      CMS コンテンツを取り込むには、若干創造性が必要になる場合があります。たとえば、SiteFinity マスタテンプレートには通常、ヘッダーとフッターに加えて他のコンテンツがすべて同じファイルに含まれます。この場合、ヘッダーコンテンツとフッターコンテンツに別々のパスはありません。回避策として、個別のテンプレートを作成できます。1 つにはヘッダーコンテンツのみを含め、もう 1 つにはフッターコンテンツのみを含めます。その後、CMS Connect で異なるパスを指定できます。

バナーコンテンツの追加

CMS のその他の HTML コンテンツ (バナーなど) を表示するには、エクスペリエンスビルダーの CMS Connect (HTML) コンポーネントを使用します。

完成です! これで、コミュニティにサイトのヘッダー、フッター、およびバナーコンテンツが表示されます。