Web コンポーネント

アプリケーション例は、Adobe Experience Manager(AEM) のヘッドレス機能を調べる優れた方法です。 この Web コンポーネントアプリケーションでは、永続的なクエリを使用してAEM GraphQL API を使用してコンテンツをクエリし、純粋な JavaScript コードを使用して UI の一部をレンダリングする方法を示します。

AEMヘッドレスを備えた Web コンポーネント

次を表示: GitHub のソースコード

前提条件

以下のツールをローカルにインストールする必要があります。

AEM要件

Web コンポーネントは、次のAEMデプロイメントオプションと連携します。

すべてのデプロイメントには tutorial-solution-content.zip から ソリューションファイル 設置し、必要とする デプロイメント設定 が実行されます。

重要

Web コンポーネントは、 AEM パブリッシュ 環境で使用できますが、Web コンポーネントの person.js ファイル。

使用方法

  1. のクローン adobe/aem-guides-wknd-graphql リポジトリ:

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. に移動します。 web-component サブディレクトリ。

    $ cd aem-guides-wknd-graphql/web-component
    
  3. を編集します。 .../src/person.js AEM接続の詳細を含めるファイル:

    aemHeadlessService オブジェクト、 aemHost をクリックして、AEM パブリッシュサービスを指すように設定します。

    # AEM Server namespace
    aemHost=https://publish-p65804-e666805.adobeaemcloud.com
    
    # AEM GraphQL API and Persisted Query Details
    graphqlAPIEndpoint=graphql/execute.json
    projectName=my-project
    persistedQueryName=person-by-name
    queryParamName=name
    

    AEM オーサーサービスに接続している場合は、 aemCredentials オブジェクトです。ローカルのAEMユーザー資格情報を入力します。

    # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
    username=admin
    password=admin
    
  4. ターミナルを開き、次のコマンドを実行します。 aem-guides-wknd-graphql/web-component:

    $ npm install
    $ npm start
    
  5. 新しいブラウザーウィンドウが開き、Web コンポーネントを埋め込んだ静的HTMLページが次の場所に埋め込まれます。 http://localhost:8080.

  6. この 担当者情報 Web コンポーネントが Web ページに表示されます。

コード

Web コンポーネントの構築方法、GraphQL の永続クエリを使用してコンテンツを取得するAEMヘッドレスへの接続方法、そのデータの表示方法の概要を次に示します。 完全なコードは、 GitHub.

Web コンポーネントHTMLタグ

再利用可能な Web コンポーネント(カスタム要素) <person-info>../src/assets/aem-headless.html HTMLページ。 対応 host および query-param-value 属性を使用して、コンポーネントの動作を制御します。 この host 属性の値のオーバーライド aemHostaemHeadlessService オブジェクト person.js、および query-param-value を使用して、レンダリングするユーザーを選択します。

    <person-info
        host="https://publish-p65804-e666805.adobeaemcloud.com"
        query-param-value="John Doe">
    </person-info>

Web コンポーネントの実装

この person.js は Web コンポーネント機能を定義しています。主な特徴は次のとおりです。

PersonInfo 要素の実装

この <person-info> カスタム要素のクラスオブジェクトは、 connectedCallback() ライフサイクルメソッド、シャドウルートの添付、GraphQL の永続クエリの取得、カスタム要素の内部シャドウ DOM 構造を作成する DOM 操作。

// Create a Class for our Custom Element (person-info)
class PersonInfo extends HTMLElement {

    constructor() {
        ...
        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: "open" });
        ...
    }

    ...

    // lifecycle callback :: When custom element is appended to document
    connectedCallback() {
        ...
        // Fetch GraphQL persisted query
        this.fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue).then(
            ({ data, err }) => {
                if (err) {
                    console.log("Error while fetching data");
                } else if (data?.personList?.items.length === 1) {
                    // DOM manipulation
                    this.renderPersonInfoViaTemplate(data.personList.items[0], host);
                } else {
                    console.log(`Cannot find person with name: ${queryParamValue}`);
                }
            }
        );
    }

    ...

    //Fetch API makes HTTP GET to AEM GraphQL persisted query
    async fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue) {
        ...
        const response = await fetch(
            `${headlessAPIURL}/${aemHeadlessService.persistedQueryName}${encodedParam}`,
            fetchOptions
        );
        ...
    }

    // DOM manipulation to create the custom element's internal shadow DOM structure
    renderPersonInfoViaTemplate(person, host){
        ...
        const personTemplateElement = document.getElementById('person-template');
        const templateContent = personTemplateElement.content;
        const personImgElement = templateContent.querySelector('.person_image');
        personImgElement.setAttribute('src', host + person.profilePicture._path);
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

を登録します。 <person-info> 要素

    // Define the person-info element
    customElements.define("person-info", PersonInfo);

クロスオリジンリソース共有 (CORS)

この Web コンポーネントは、ターゲットAEM環境で実行されるAEMベースの CORS 設定に依存し、ホストページがで実行されることを前提としています http://localhost:8080 開発モードでは、以下に、ローカル AEM オーサーサービスのサンプル CORS OSGi 設定を示します。

確認してください デプロイメント設定 各AEMサービスの

CORS 設定

このページ