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

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

これまでの説明内容

前のドキュメントのAEM Quick Site Creation ジャーニーでは、 Cloud Manager とクイックサイト作成ワークフローについて、 Cloud Manager と、新しいクイックサイト作成プロセスとの結び付けについて学び、次の操作をおこなう必要があります。

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

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

目的

このドキュメントでは、サイトテンプレートを使用して新しいAEMサイトをすばやく作成する方法を説明します。 ドキュメントを読めば、以下が可能です。

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

担当ロール

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

サイトテンプレート

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

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

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

メモ

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

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

最も簡単に使い始めるには、次の手順に従います。 AEM Standard Site Template の最新リリースを GitHub リポジトリからダウンロードします。

ダウンロードが完了したら、他のパッケージと同様にAEM環境にアップロードできます。 詳しくは、 「その他のリソース」セクション パッケージの操作方法の詳細については、このトピックを参照してください。

ヒント

AEM Standard サイトテンプレートは、プロジェクトのニーズに合わせてカスタマイズでき、さらにカスタマイズする必要がなくなります。 ただし、このトピックはこのジャーニーの範囲外です。 詳しくは、標準サイトテンプレートの 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 Quick Site Creation ジャーニーのこの部分が完了し、次の作業をおこなう必要があります。

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

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

その他のリソース

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

  • AEM Standard Site Template — これはAEM Standard Site テンプレートの GitHub リポジトリです。
  • ページの作成と整理 — このガイドでは、AEMサイトをテンプレートから作成した後にさらにカスタマイズする場合の、テンプレートサイトのページの管理方法について詳しく説明します。
  • パッケージの操作方法 — パッケージを使用すると、リポジトリコンテンツのインポートおよびエクスポートが可能になります。 このドキュメントでは、AEM 6.5(AEMaaCS にも適用)でのパッケージの操作方法を説明します。
  • サイト管理ドキュメント — クイックサイト作成ツールの機能の詳細については、サイト作成に関する技術ドキュメントを参照してください。

このページ