テンプレートからサイトを作成

サイトテンプレートを使用して新しい AEM サイトをすばやく作成する方法を説明します。

これまでの説明内容

AEM クイックサイト作成ジャーニーの前のドキュメントである Cloud Manager とクイックサイト作成ワークフローについて では、Cloud Manager と、Cloud Manager が新しいクイックサイト作成プロセスをどのように結び付けるかについて説明しました。ここで、次のことを行う必要があります。

  • AEM Sites と Cloud Manager が連携してフロントエンド開発を容易にする仕組みを理解する。
  • フロントエンドのカスタマイズ手順が AEM から完全に切り離されており、AEM に関する知識を必要としない仕組みを確認する。

この記事では、これらの基礎に基づいて作られているので、最初の設定手順を実行してテンプレートから新しいサイトを作成し、後でフロントエンドツールを使用してカスタマイズできます。

目的

このドキュメントは、サイトテンプレートを使用して新しい AEM サイトをすばやく作成する方法を理解するのに役立ちます。読み終えると、次のことができるようになります。

  • AEM Site テンプレートの取得方法を理解する。
  • テンプレートを使用して新しいサイトを作成する方法を学ぶ。
  • 新しいサイトからテンプレートをダウンロードして、フロントエンド開発者に提供する方法を確認する。

担当する役割

このジャーニーの部分は、AEM 管理者に適用されます。

サイトテンプレート

サイトテンプレートを使用すると、基本的なサイトコンテンツを組み合わせて、便利で再利用可能なパッケージを作成できます。サイトテンプレートには、通常、基本的なサイトのコンテンツと構造、および新しいサイトをすばやく開始するためのサイトのスタイル設定情報が含まれています。 実際の構造は次のとおりです。

  • files：UI キット、XD ファイル、およびその他のファイルを含むフォルダー
  • previews：サイトテンプレートのスクリーンショットを含むフォルダー
  • site：ページテンプレート、ページなど、このテンプレートから作成される各サイト用にコピーされるコンテンツのコンテンツパッケージ。
  • theme：CSS や JavaScript など、サイトの外観を変更するテンプレートテーマのソース。

テンプレートは、コンテンツ作成者が再利用してサイトをすばやく作成できるため非常に便利です。また、AEM のインストールで複数のテンプレートを使用できるので、様々なビジネスニーズに柔軟に対応できます。

メモ

サイトテンプレートをページテンプレートと混同しないでください。ここで説明するサイトテンプレートは、サイトの全体的な構造を定義します。ページテンプレートは、個々のページの構造と初期コンテンツを定義します。

サイトテンプレートの取得

最も簡単に使い始める方法は、AEM 標準サイトテンプレートの最新リリースを GitHub リポジトリからダウンロードすることです。

ダウンロードが完了したら、他のパッケージと同様に AEM 環境にアップロードできます。このトピックに関する詳細情報が必要な場合は、 その他のリソース を参照し、パッケージの操作方法を確認してください。

ヒント

AEM 標準サイトテンプレートは、プロジェクトのニーズに合わせてカスタマイズできるため、さらにカスタマイズする必要がなくなります。ただし、このトピックはこのジャーニーの範囲外です。詳しくは、標準サイトテンプレートの GitHub ドキュメントを参照してください。

ヒント

また、プロジェクトワークフローの一部として、ソースからテンプレートを作成するように選択することもできます。ただし、このトピックはこのジャーニーの範囲外です。詳しくは、標準サイトテンプレートの GitHub ドキュメントを参照してください。

サイトテンプレートのインストール

テンプレートを使用して新しいサイトを簡単に作成できます。

  1. AEM オーサリング環境にサインインし、サイトコンソールに移動します

    • https://<your-author-environment>.adobeaemcloud.com/sites.html/content

  2. 画面の右上にある「作成」をタップまたはクリックし、ドロップダウンメニューから「テンプレートのサイト」を選択します。

    テンプレートからの新しいサイトの作成

  3. サイトの作成ウィザードで、左側の列の上部にある「読み込み」をタップまたはクリックします。

    サイトの作成ウィザード

  4. ファイルブラウザーで 以前ダウンロードした テンプレートを見つけて、「アップロード」をタップまたはクリックします。

  5. アップロードが完了すると、使用可能なテンプレートのリストに表示されます。タップまたはクリックして選択し（右側の列にテンプレートに関する情報も表示されます）、「次へ」をタップまたはクリックします。

    テンプレートを選択

  6. サイトのタイトルを指定します。サイト名を指定できます。省略した場合はタイトルからサイト名が生成されます。

    • サイトのタイトルは、ブラウザーのタイトルバーに表示されます。
    • サイト名が URL の一部になります。

  7. 「作成」をタップまたはクリックすると、サイトテンプレートから新しいサイトが作成されます。

    新しいサイトの詳細

  8. 表示される確認ダイアログで、「完了」をタップまたはクリックします。

    成功ダイアログ

  9. サイトコンソールでは、新しいサイトが表示され、テンプレートで定義されている基本構造を参照するために移動できます。

    新しいサイト構造

コンテンツ作成者はオーサリングを開始できるようになりました。

さらにカスタマイズが必要な場合

サイトテンプレートは非常に強力で柔軟性が高く、プロジェクト用に任意の数を作成できるので、サイトのバリエーションを簡単に作成できます。 使用するサイトテンプレートで既に実行されているカスタマイズのレベルによっては、追加のフロントエンドカスタマイズが必要ない場合もあります。

  • サイトで追加のカスタマイズが必要ない場合は、ここで完了です。ジャーニーはここで終了です。
  • さらにフロントエンドのカスタマイズが必要な場合や、将来のカスタマイズが必要な場合に備えて完全なプロセスを理解したい場合は、読み続けてください。

サンプルページ

フロントエンドのカスタマイズを追加する必要がある場合は、フロントエンド開発者がコンテンツの詳細に慣れていない可能性があることに注意してください。したがって、テーマをカスタマイズする際に参照の基礎として使用できる、典型的なコンテンツへのパスを開発者に提供することをお勧めします。典型的な例としては、サイトのマスター言語のホームページが挙げられます。

  1. サイトブラウザーで、サイトのマスター言語のホームページに移動し、ページをタップまたはクリックして選択し、メニューバーの「編集」をタップまたはクリックします。

    一般的なホームページ

  2. エディターで、ツールバーの「ページ情報」ボタンを選択してから、「公開済みとして表示」を選択します。

    ホームページを編集

  3. 開いたタブで、アドレスバーからコンテンツのパスをコピーします。次のようなパスになります。/content/<your-site>/en/home.html?wcmmode=disabled

    ホームページ

  4. パスを保存して、後でフロントエンド開発者に提供します。

テーマのダウンロード

サイトが作成されたので、テンプレートによって生成されたサイトのテーマをダウンロードし、フロントエンド開発者に提供して、カスタマイズを行うことができます。

  1. サイトコンソールで、 サイト パネルを表示します。

    サイトパネルを表示

  2. 新しいサイトのルートをタップまたはクリックしてから、サイトパネルの「テーマソースのダウンロード」をタップまたはクリックします。

    テーマソースのダウンロード

これで、ダウンロードファイルにテーマソースファイルのコピーが作成されました。

プロキシユーザーの設定

フロントエンド開発者がサイトの実際の AEM コンテンツを使用してカスタマイズをプレビューできるようにするには、プロキシユーザーを設定する必要があります。

  1. AEM のメインナビゲーションから、 ツール／セキュリティ／ユーザー に移動します。

  2. ユーザー管理コンソールで「作成」をタップまたはクリックします。

    ユーザー管理コンソール

  3. 新しいユーザーを作成 ウィンドウで、少なくとも次の情報を指定します。

    • ID - この値は、フロントエンド開発者に提供する必要があるので、メモしておきます。
    • パスワード - この値は、フロントエンド開発者に提供する必要があるので、パスワードコンテナに安全に保存します。

    新しいユーザーの詳細

  4. 「グループ」タブで、プロキシユーザーを contributors グループに追加します。

    • contributors という用語を入力すると、AEM のオートコンプリート機能がトリガーされ、グループを簡単に選択できます。

    グループに追加

  5. 「保存して閉じる」をタップまたはクリックします。

これで設定が完了しました。 コンテンツ作成者は、サイト準備開始のコンテンツ作成に取りかかれるようになり、ジャーニーの次のステップでフロントエンドのカスタマイズができるようになります。

次の手順

これで、AEM クイックサイト作成ジャーニーのこのステップが完了しました。次のことを行う必要があります。

  • AEM Site テンプレートの取得方法を理解する。
  • テンプレートを使用して新しいサイトを作成する方法を学ぶ。
  • 新しいサイトからテンプレートをダウンロードして、フロントエンド開発者に提供する方法を確認する。

この知識に基づいて、次は パイプラインの設定 のドキュメントを確認して、AEM クイックサイト作成ジャーニーを続行してください。そこでは、サイトテーマのカスタマイズを管理するフロントエンドパイプラインを作成します。

その他のリソース

パイプラインの設定 のドキュメントを確認して、クイックサイト作成ジャーニーの次のパートに進むことをお勧めしますが、以下のリソースではこのドキュメントで取り上げた概念についてより詳しく説明しています。追加的なオプションであり、ジャーニーを続ける上で必須のリソースではありません。

  • AEM 標準サイトテンプレート - これは AEM 標準サイトのテンプレートの GitHub リポジトリです。
  • ページの作成と整理 - このガイドでは、テンプレートから作成した AEM サイトのページをさらにカスタマイズしたい場合の管理方法について詳しく説明します。
  • パッケージの操作方法 - パッケージを使用すると、リポジトリコンテンツの読み込みと書き出しが可能になります。このドキュメントでは、AEM 6.5 でのパッケージの操作方法を説明します（AEMaaCS にも適用）。
  • サイト管理ドキュメント - クイックサイト作成ツールの機能について詳しくは、サイト作成に関する技術ドキュメントを参照してください。

このページ