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

ユニバーサルエディターで使用するために実装されたブロックの作成 create-block

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

作成対象：

  • 管理者
  • 開発者

Edge Delivery Services プロジェクトでの WYSIWYG オーサリングのユニバーサルエディターで使用するために実装されたブロックを作成する方法を説明します。

前提条件 prerequisites

このガイドでは、Edge Delivery Servicesプロジェクトを使用した WYSIWYG オーサリングでユニバーサルエディター用に実装されたブロックを作成する手順を説明します。 ここでは、コンポーネントの追加、ユニバーサルエディターでのコンポーネント定義の読み込み、ページの公開、ブロック装飾とスタイルの実装、実稼動環境への変更の反映および検証について説明します。このガイドを完了すると、独自のプロジェクト用に新しいブロックを作成してデプロイできます。

このガイドには、Edge Delivery Servicesプロジェクトでの WYSIWYG オーサリングと、ユニバーサルエディターに関する十分な知識が必要です。 このガイドを始める前に、Edge Delivery Services へのアクセス権を持ち、次の項目について基本事項を理解しておく必要があります。

このガイドは、Edge Delivery Servicesを使用した WYSIWYG オーサリングの開発者向けスタートガイドガイドで行われる作業に基づいています。

プロジェクトへの新しいブロックの追加 add-block

このガイドでは、記憶に残る引用をページ上にレンダリングするブロックを作成します。

この例を簡素化するために、すべての変更はプロジェクトリポジトリの main ブランチに対して行われます。実際のプロジェクトでは、main に結合する前に、別のブランチで開発し、プルリクエスト経由ですべての変更を確認するという、開発のベストプラクティスに従う必要があります。

アドビでは、次の 3 段階の方法でブロックを開発することをお勧めします。

  1. ブロックの定義とモデルを作成し、確認した上で、実稼動環境に導入します。
  2. 新しいブロックを使用してコンテンツを作成します。
  3. 新しいブロックの装飾とスタイルを実装します。

次の引用ブロックの例は、この方法に従っています。

ブロック定義とモデルの作成 create-block-model

1. Edge Delivery Services🔗 ガイドを使用した WYSIWYG オーサリング向け 開発者向けスタートガイドで作成した GitHub プロジェクトをローカルにクローンし、選択したエディターで開きます。

  • ここでは、説明のために Microsoft のコードを使用しています。

プロジェクトのクローン

2. プロジェクトのルートにある component-definition.json ファイルを編集し、新しい引用ブロックに次の定義を追加して、ファイルを保存します。

JSON の例
code language-json 
{
  "title": "Quote",
  "id": "quote",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "Quote",
          "model": "quote",
          "quote": "<p>Think, McFly! Think!</p>",
          "author": "Biff Tannen"
        }
      }
    }
  }
}
スクリーンショット
component-definitions.json ファイルを編集して引用ブロックを定義

3. プロジェクトのルートにある component-models.json ファイルを編集し、新しい引用ブロックに次の モデル定義を追加して、ファイルを保存します。

JSON の例
code language-json 
{
  "id": "quote",
  "fields": [
     {
       "component": "text-area",
       "name": "quote",
       "value": "",
       "label": "Quote",
       "valueType": "string"
     },
     {
       "component": "text-input",
       "valueType": "string",
       "name": "author",
       "label": "Author",
       "value": ""
     }
   ]
}
スクリーンショット
component-models.json ファイルを編集して、引用ブロックのモデルを定義

4. プロジェクトのルートにある component-filters.json ファイルを編集し、引用ブロックを フィルター定義に追加して、ブロックを任意のセクションに追加できるようにして、ファイルを保存します。

JSON の例
code language-json 
{
  "id": "section",
  "components": [
    "text",
    "image",
    "button",
    "title",
    "hero",
    "cards",
    "columns",
    "quote"
   ]
}
スクリーンショット
component-filters.json ファイルを編集して、引用ブロックのフィルターを定義

5. Git を使用して、これらの変更を main ブランチにコミットします。

  • main へのコミットは、説明のみを目的としています。ベストプラクティスに従って、実際のプロジェクト作業にはプルリクエストを使用します。

ブロックを使用したコンテンツの作成 create-content

基本的な引用ブロックが定義され、サンプルプロジェクトにコミットされたので、既存のページに引用ブロックを追加できます。

  1. ブラウザーで、AEM as a Cloud Service にログインします。Sites コンソールを使用、Edge Delivery Servicesによる WYSIWYG オーサリング向け 開発者向けスタートガイドで作成したサイトに移動て、ページを選択します。

    • この場合、説明のために index を使用しています。

    Sites コンソールでのインデックスページの選択

  2. コンソールのツールバーで「編集」をタップまたはクリックすると、ユニバーサルエディターが開きます。

    • ページを読み込むには、ユニバーサルエディターで「Adobe でログイン」をタップまたはクリックして AEM を認証する必要がある場合があります。

  3. ユニバーサルエディターでセクションを選択します。プロパティパネルで、追加 ​アイコンをタップまたはクリックし、メニューから新しい​ 引用 ​ブロックを選択します。

    • 追加 ​アイコンは、プラス記号です。
    • 選択したオブジェクトの青色のアウトラインに「セクション」というラベルの付いたタブがある場合、セクションが選択されていることがわかります。
    • この例では、Lorem Ipsum 見出しの少し上をタップまたはクリックすると、見出しと lorem ipsum テキストを含むセクションが選択されます。

    ユニバーサルエディターでセクションを選択

  4. ページがリロードされ、選択したセクションの下に引用ブロックが、component-definitions.json ファイルで指定したデフォルトのコンテンツと共に追加されます。

    • 引用ブロックは、他のブロックと同様に、インプレースまたはプロパティパネル内で選択および編集できます。
    • スタイル設定は、後の手順で適用します。

    選択したセクションの新しい引用ブロックを含むページ

  5. 引用のコンテンツが満たされたら、ユニバーサルエディターのツールバーにある「公開」ボタンをタップまたはクリックしてページを公開できます。

  6. 公開済みのページに移動して、コンテンツが公開されたことを確認します。リンクは、https://<branch>--<repo>--<owner>.hlx.page のようになります

    公開済みの引用

ブロックのスタイル設定 style-block

作業用の引用ブロックを作成したので、スタイル設定を適用できます。

1. プロジェクトのエディターに戻ります。

2. blocks フォルダーの quote フォルダーを作成します。

引用フォルダーの作成

3&period；新しい quote フォルダーに、次のJavaScriptを追加してブロックデコレーションを実装する quote.js ファイルを追加し、保存します。

JavaScript の例
code language-javascript 
export default function decorate(block) {
  const [quoteWrapper] = block.children;

  const blockquote = document.createElement('blockquote');
  blockquote.textContent = quoteWrapper.textContent.trim();
  quoteWrapper.replaceChildren(blockquote);
}
スクリーンショット
ブロックを装飾する JavaScript の追加

4. quote フォルダーに quote.css ファイルを追加し、次の CSS コードを追加してブロックのスタイル設定を定義し、ファイルを保存します。

CSS の例
code language-css 
.block.quote {
    background-color: #ccc;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.block.quote blockquote {
    margin: 16px;
    text-indent: 0;
}

.block.quote > div:last-child > div {
    margin: 0 16px;
    font-size: small;
    font-style: italic;
    position: relative;
}

.block.quote > div:last-child > div::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 5px;
    width: 30px;
    background-color: darkgray;
}
スクリーンショット
ブロックのスタイル設定を定義する CSS の追加

5. Git を使用して、これらの変更を main ブランチにコミットします。

6. プロジェクトのページを編集していたユニバーサルエディターのブラウザータブに戻り、ページをリロードして、スタイル設定されたブロックを表示します。

7. ページのスタイルが設定された引用ブロックを参照してください。

ユニバーサルエディターのスタイル設定された引用ブロック

8&period；公開済みページに移動して、変更が実稼動環境にプッシュされたことを確認します。 リンクは、https://<branch>--<repo>--<owner>.hlx.page のようになります。

公開およびスタイル設定された引用ブロック

これで完了です。完全に機能し、スタイル設定された引用ブロックが作成されました。この例を基礎として、独自のプロジェクト固有のブロックを設計できます。

ブロックオプション block-options

特定の状況に基づいてブロックの外観や動作を少し変更する必要があるが、それ自体が新しいブロックになるほどの違いがない場合は、作成者がブロックオプションから選択できます。

ブロックに classes プロパティを追加すると、このプロパティは、単純なブロックの場合はテーブルヘッダーに、コンテナブロック内にある項目の場合は値リストとしてレンダリングされます。

{
  "id": "simpleMarquee",
  "fields": [
    {
      "component": "text",
      "valueType": "string",
      "name": "marqueeText",
      "value": "",
      "label": "Marquee text",
      "description": "The text you want shown in your marquee"
    },
    {
      "component": "select",
      "name": "classes",
      "value": "",
      "label": "Background Color",
      "description": "The marquee background color",
      "valueType": "string",
      "options": [
        {
          "name": "Red",
          "value": "bg-red"
        },
        {
          "name": "Green",
          "value": "bg-green"
        },
        {
          "name": "Blue",
          "value": "bg-blue"
        }
      ]
    }
  ]
}

他の作業用ブランチの使用 other-branches

このガイドでは、わかりやすくするために main ブランチに直接コミットするようにしました。サンプルリポジトリでの実験の場合、これは通常問題になりません。実際のプロジェクト作業では、main に結合する前に、別のブランチで開発し、プルリクエスト経由ですべての変更を確認することで、開発のベストプラクティスに従う必要があります。

main ブランチで開発していない場合は、ユニバーサルエディターのロケーションバーに ?ref=<branch> を追加して、ブランチからページを読み込むことができます。<branch> は、プロジェクトのプレビューまたはライブ URL（例：https://<branch>--<repo>--<owner>.hlx.page）に使用されるブランチ名です。

新しいモデルを使用したコンテンツの公開は、モデルを main ブランチに結合した場合にのみサポートされます。

次の手順 next-steps

これでブロックの作成方法がわかったので、コンテンツのセマンティックモデルを作成して効率的な開発者エクスペリエンスを実現する方法を理解することが不可欠です。

Edge Delivery Servicesプロジェクトでの WYSIWYG オーサリング向けコンテンツモデリングの仕組みについては、Edge Delivery Servicesプロジェクトでの WYSIWYG オーサリング向けコンテンツモデリングを参照してください。

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