ドキュメントAEM as a Cloud Serviceユーザーガイド

Edge Delivery Servicesを使用した WYSIWYG オーサリングの開発者向けスタートガイド edge-dev-getting-started

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 管理者
  • 開発者

このガイドでは、Edge Delivery Servicesと WYSIWYG コンテンツオーサリング用ユニバーサルエディターを使用して、新しいAdobe Experience Manager サイトを使い始める方法を説明します。

前提条件 prerequisites

このガイドを始める前に、Edge Delivery Services に関する基本事項を理解し、Edge Delivery Services にアクセス可能な状態にしておく必要があります。次の項目について確認してください。

適切なエディタを選択 editor-choice

AEM には 2 種類の異なるコンテンツエディターが用意されており、状況に応じて、適切なコンテンツエディターを選択して使用します。

  • ユニバーサルエディター - 新しいサイトのデフォルトの選択肢です。
  • AEM ページエディター - 既存の AEM Sites から Edge Delivery Services に移行する場合に選択します。

このガイドでは、ユニバーサルエディターを活用して、Edge Delivery Services を使用した AEM プロジェクトに焦点を当てます。適切なエディターの選択および既存の AEM サイトの Edge Delivery Services への移行について詳しくは、AEM での Edge Delivery Services の使用ドキュメントを参照してください。

Edge Delivery Services 向けに開発する場合の中心概念 core-concepts

Edge 配信サービスは、ブロックの概念に基づいています。AEM には、プロジェクトのニーズに合わせて拡張できる事前定義済みのブロックの包括的なライブラリが付属しています。Edge 配信サービスプロジェクトのコードは、GitHub で管理されます。

ブロック blocks

ブロックは、Edge Delivery Services で配信されるページの最も基本的な部分です。ブロックは、コンテンツページの論理コンポーネントを駆動するスタイルとコードをカプセル化します。

AEM では、プロジェクトのボイラープレート内の製品の一部として標準ブロックが用意されています。このようなブロックには、見出し、テキスト、画像、リンク、リストなどが含まれます。

TIP
ブロックの詳細と Edge Delivery Services 向けの開発方法については、Edge Delivery Services ドキュメントのビルドの節を参照してください。

Edge Delivery Services と GitHub github-edge

Edge Delivery Services では GitHub を活用しているので、GitHub リポジトリから直接コードを管理およびデプロイできます。

作成者は、ドキュメントベースのオーサリングを使用するか、ユニバーサルエディターを使用して AEM のコンテンツを作成できます。開発者は、作成者がコンテンツをどのように作成したかに関係なく、GitHub で CSS と JavaScript を使用してサイトの機能をカスタマイズできます。

コンテンツのプレビューから実稼動環境まで、ブランチごとに web サイトが自動的に作成されます。GitHub リポジトリに配置したすべてのリソースは、ビルドプロセスなしで web サイト上で使用できます。

TIP
ブロックの詳細と Edge Delivery Services 向けの開発方法については、Edge Delivery Services ドキュメントのビルドの節を参照してください。

WYSIWYG オーサリングおよびEdge Delivery Servicesの概要 getting-started

前提条件を満たし、ユニバーサルエディターの使用を選択したら、独自のプロジェクトを開始できます。

GitHub プロジェクトを作成 create-github-project

まず、アドビのテンプレートに基づいて、GitHub に新しいプロジェクトを作成する必要があります。

  1. https://github.com/adobe-rnd/aem-boilerplate-xwalk に移動して「このテンプレートを使用」をクリックし、「新しいリポジトリを作成」を選択します。

    • このオプションを表示するには、GitHub にログインする必要があります。

    リポジトリプロジェクトをコピー

  2. デフォルトでは、リポジトリが割り当てられます。必要に応じてこれを変更し、リポジトリの名前と説明を入力して、「リポジトリを作成」をクリックします。

    リポジトリの作成

  3. 同じブラウザーの新しいタブで https://github.com/apps/aem-code-sync に移動し、「設定」をクリックします。

    Code Sync

  4. 前の手順で新しいリポジトリを作成した組織の「設定」をクリックします。

    Code Sync の組織の選択

  5. AEM Code Sync GitHub ページの​ リポジトリアクセス ​の下で、「リポジトリのみを選択」を選択し、前の手順で作成したリポジトリを選択して、「保存」をクリックします。

    AEM Code Sync アクセス権の付与

  6. AEM Code Sync がインストールされると、確認画面が表示されます。新しいリポジトリの「ブラウザー」タブに戻ります。

    Code Sync のインストールの確認

  7. fstab.yaml ファイルをクリックして開き、次に、「このファイルを編集」アイコンをクリックしてファイルを編集します。

    fstab.yaml

  8. fstab.yaml ファイルを編集して、プロジェクトのマウントポイントを更新します。デフォルトの Google ドキュメント URL を AEM as a Cloud Service オーサリングインスタンスの URL に置き換えて、「変更をコミット…」をクリックします。

    • https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
    • マウントポイントを変更すると、Edge Delivery Services がサイトのコンテンツの場所を特定します。

    fstab の更新

  9. 必要に応じてコミットメッセージを追加し、「変更をコミット」をクリックして、変更を main 分岐に直接コミットします。

    変更のコミット

  10. リポジトリのルートに戻り、paths.json をクリックして、「このファイルを編集」アイコンをクリックします。

    paths.json

  11. デフォルトのマッピングでは、リポジトリの名前が使用されます。プロジェクトの必要に応じて、デフォルトのマッピングを /content/<site-name>/:/ に更新し、「変更をコミット…」をクリックします。

    • 独自の <site-name> を入力します。後の手順で必要になります。
    • マッピングは、Edge Delivery Services に対して、AEM リポジトリ内のコンテンツをサイトの URL にマッピングする方法を指示します。

    paths.json の更新

  12. 必要に応じてコミットメッセージを追加し、「変更をコミット」をクリックして、変更を main 分岐に直接コミットします。

    変更のコミット

新しい AEM サイトの作成と編集 create-aem-site

GitHub プロジェクトが完成したら、プロジェクトで使用できる新しい AEM サイトを作成する必要があります。

NOTE
ユニバーサルエディターを使用してサイトを編集するには、Chromium ベースのブラウザーを使用する必要があります。

  1. Edge Delivery Servicesサイトテンプレートを使用した最新の WYSIWYG オーサリングを GitHub （https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases）からダウンロードします。

  2. AEM as a Cloud Service オーサリングインスタンスにログインし、サイトコンソールに移動して、作成／テンプレートからサイト ​をタップまたはクリックします。

    コンソールから新しいサイトを作成

  3. サイトの作成ウィザードの「サイトテンプレートを選択」タブで、「読み込み」ボタンをクリックして、新しいテンプレートを読み込みます。

    テンプレートの読み込み

  4. GitHub からダウンロードした WYSIWYG オーサリングとEdge Delivery Servicesのサイトテンプレートをアップロードします。

    • テンプレートは 1 回だけアップロードする必要があります。アップロードした後は、追加サイトの作成に再利用できます。

  5. テンプレートが読み込まれると、ウィザードに表示されます。タップまたはクリックして選択し、「次へ」をタップまたはクリックします。

    テンプレートを選択

  6. 次のフィールドを入力し、「作成」をタップまたはクリックします。

    • サイトのタイトル - サイトを説明するタイトルを追加します。
    • サイトのタイトル - 前の手順で定義した <site-name> を使用します。
    • GitHub URL - 前の手順で作成した GitHub プロジェクトの URL を使用します。

    サイトの詳細

  7. AEM にダイアログが表示され、サイトの作成を確認します。「OK」をタップまたはクリックして閉じます。

    サイトの作成の確認

  8. サイトコンソールで、新しく作成したサイトの index.html に移動し、ツールバーの「編集」をタップまたはクリックします。

    新しいサイトの編集

  9. ユニバーサルエディターが新しいタブで開きます。ページを編集するには、「アドビでログイン」をタップまたはクリックして認証する必要がある場合があります。

    ユニバーサルエディター

これで、ユニバーサルエディターを使用してサイトを編集できます。詳しくは、ユニバーサルエディターのドキュメントを参照してください。

新しいサイトの公開 publishing

ユニバーサルエディターを使用して新しいサイトの編集が完了したら、コンテンツを公開できます。

  1. サイトコンソールで、新しいサイト用に作成したすべてのページを選択し、ツールバーの「クイック公開」をタップまたはクリックします。

    公開するページの選択

  2. 確認ダイアログで「公開」をタップまたはクリックして、プロセスを開始します。

    公開ダイアログ

  3. 同じブラウザーで新しいタブを開き、新しいサイトの URL に移動します。

    • https://main--<repository-name>--<owner>.hlx.page

  4. 公開されたコンテンツを確認します。

    公開されたコンテンツ

次の手順 next-steps

これで、Edge Delivery Services プロジェクトで WYSIWYG オーサリングが機能するようになったので、独自のブロックの作成とスタイル設定を開始できます。

詳細については、ユニバーサルエディターで使用するために実装されたブロックの作成ガイドを参照してください。

TIP
AEM as a Cloud Serviceをコンテンツソースとする WYSIWYG オーサリングが可能な新しいEdge Delivery Servicesプロジェクトの作成に関するエンドツーエンドのチュートリアルについては、 このAEM GEMs ウェビナーを参照してください。
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab