Experience Manager GuidesとEdge Delivery Services（Beta）

Experience Manager Guides ボイラープレートテンプレートリポジトリ aem-guides-boilerplate ージを開きます。

このテンプレートを使用して新しいリポジトリを作成します。 ​ テンプレートからのリポジトリの作成 ​ について説明します。 EDS からアクセスできるように、リポジトリの表示が 公開 に設定されていることを確認します。

AEM コード同期 ​ ページに移動して、「インストール」を選択します。

AEM コード同期 は、リポジトリの変更を監視し、更新が GitHub に正しくプッシュされていることを確認します。

次のページで、作成したリポジトリへのアクセス権を付与します。 これを行うには、「リポジトリの選択のみ」オプションを選択し、ドロップダウンからリポジトリを選択します。

{width="350"}

インストールして認証 を選択します。

GitHub で、左側のサイドバーに移動し、「開発者設定」を選択します。

左側のサイドバーで、「GitHub アプリ」を選択します。

「新規 GitHub アプリ」を選択します。

{width="650"}

新しい GitHub アプリを登録 ページで、次の詳細を入力します。

• GitHub アプリ名：アプリの名前を入力します。 例えば、USERNAME-eds-app の場合、USERNAME は GitHub のユーザー名です。

• ホームページ URL:Experience Manager Guides インスタンスへの URL を入力します。

  サンプル URL （形式）: https://<aem-author-url>/libs/fmdita/clientlibs/xmleditor/page.html

  サンプル URL: https://author-p16602-e335172-cmstg.adobeaemcloud.com/libs/fmdita/clientlibs/xmleditor/page.html

• コールバック URL：ホームページ URL と同じです。

• Webhook URL：このオプションを無効にします。

• リポジトリ権限:アクション、管理、アテステーション の 読み取りおよび書き込み 権限を設定します。

「GitHub アプリを作成」を選択します。

GitHub で、左側のサイドバーに移動し、「開発者設定」を選択します。

左側のサイドバーで、「OAuth アプリ」を選択します。

「新規 OAuth アプリ」を選択します。

{width="650"}

次の必須詳細を入力して、アプリケーションを登録します。

• アプリケーション名:EDS リポジトリの名前を入力します
• ホームページ URL:Experience Manager Guides インスタンスへの URL を入力します。 （サンプル URL 形式については、「​ 新しい GitHub アプリの作成 ​」のステップ 4 を参照してください。
• 認証コールバック URL：ホームページ URL と同じ

「デバイスフローを有効にする」オプションを選択し、「アプリケーションを登録」を選択して登録を完了します。

{width="650"}

リポジトリで fstab.yaml ファイルを開き、以下を更新します。

• your-user-name
• your-repo-name

{width="650"}

「変更をコミット」を選択し、コミットの詳細を入力して確認します。

​ 開発者設定 ​ に戻り、アプリを探して 編集 を選択します。

{width="650"}

「アプリをインストール」ページに移動し、「インストール」を選択します。

{width="650"}

AEM コード同期を使用して GitHub をAdobeに接続する ​ セクションの手順 2 と 3 を繰り返して、リポジトリを認証します。

Workspace設定 > プロファイルを公開 に移動します。

+ アイコンを選択して新しい公開プロファイルを作成し、次の詳細を入力します。

• サーバータイプ：ドロップダウンから GitHub Edge Delivery Services （Beta） を選択します。
• 名前：このプロファイルの名前を入力します。
• リポジトリ名：ボイラープレートから作成した GitHub リポジトリ名を使用します。
• ユーザー名:GitHub のユーザー名を入力します。
• Branch main:main （デフォルト）に設定します。
• ルートフォルダー:docs に設定します（デフォルト）。
• クライアント ID とクライアントシークレット:GitHub アプリからこれらを取得します（詳しくは、​ 新しい OAuth アプリの作成 ​ の節を参照してください）。

「ログイン」を選択して認証します。

{width="650"}

認証に成功したら、「保存」を選択します。

マップ コンソールでマップを開きます。

「出力プリセット」タブで、「+」を選択して新しい出力プリセットを作成します。

新しい出力プリセット ダイアログで、次の詳細を入力します。

• 種類: Edge Delivery サービス （Beta）を選択してください
• 名前：このプリセットの名前を指定します

「追加」を選択します。

{width="650"}

新しく作成した EDS （Beta）出力プリセットを開き、「Config」タブに移動します。

• 前の手順で作成したパブリッシュプロファイルを選択します。
• プッシュをライブに を有効にします。

ライブにプッシュ が有効な場合、生成された出力は GitHub にコミットされ、対応する更新がライブ web サイトに直ちに反映されます。

{width="650"}

保存 を選択し、次に 出力を生成 を選択します。

GitHub リポジトリに移動し、blocks フォルダーを開きます。

パンくず ブロックを選択します。

{width="650"}

css ファイルを開き、テキストの色を更新します。

変更内容を GitHub にコミットします。

ライブ web サイトを更新して、更新内容を表示します。

トピックファイルを開き、タグ要素内のテキストを選択します。

次のスクリーンショットでは、example タグ内のコンテンツが選択されています。
{width="650"}

example タグ内のテキストを設定するには：

• コンテンツのプロパティ に移動します。
• outputclass 属性を追加します。
• その値を example eds-force-block に設定します。
• 「追加」を選択します。
  {width="650"}

出力を保存して再生成します。

outputclass ディレクトリ内に、blocks と同じ名前の新しいフォルダーを作成します。 ​ リポジトリへのファイルの追加 ​ について説明します。

{width="650"}

必須の css ファイルとオプションの js ファイルを追加します。

{width="650"}

変更をコミットして出力を再生成します。