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

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

Last update: Wed Sep 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 管理者
  • 開発者

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

前提条件 prerequisites

このガイドを始める前に、Edge Delivery Services に関する基本事項を理解し、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 分岐に直接コミットします。

    変更のコミット

TIP
Edge Delivery Servicesマッピングについて詳しくは、「パスのパスマッピング のドキュメントを参照してください。

新しい 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