AEM Sites の基本を学ぶ - WKND チュートリアル introduction

[Edge 配信サービスを使用して AEM Sites から公開するには、こちらをクリックしてください。]{class="badge positive" title="AEM から Edge 配信サービスへの公開"}

これは、Adobe Experience Manager(AEM)を初めて使用する開発者向けに設計された、複数のパートから成るチュートリアルです。このチュートリアルでは、架空のライフスタイルブランド WKND の AEM Sites の実装について説明します。このチュートリアルでは、Adobe Experience Manager Sites を使用したプロジェクトの設定、コアコンポーネント、編集可能なテンプレート、クライアントサイドライブラリ、コンポーネント開発などの基本的なトピックについて説明します。

概要 wknd-tutorial-overview

このマルチパートチュートリアルの目的は、Adobe Experience Manager(AEM) の最新の標準とテクノロジーを使用して Web サイトを実装する方法を開発者に教えることです。 このチュートリアルを修了すると、開発者はプラットフォームの基本的な基礎について理解し、AEM の一般的な設計パターンに関する知識を得ることができます。

Sites プロジェクトを開始するためのオプション

AEM Sites プロジェクトを開始するには、2 つの基本的な方法があります。

AEM プロジェクトアーキタイプ - Maven テンプレートを使用して最小限の AEM プロジェクトを生成する、AEM 開発に対する従来のアプローチ。これは、大量のカスタマイズが予想される AEM 6.5/6.4 プロジェクトおよび AEM as a Cloud Service プロジェクトで推奨されるアプローチです。このチュートリアルでは、AEM の開発について詳しく説明します。

AEM プロジェクトアーキタイプを使用したチュートリアルの開始

AEM サイトテンプレート - クイックサイト作成とも呼ばれ、事前定義されたサイトテンプレートを使用して AEM サイトを生成するローコードアプローチです。すぐに使用できるコンポーネントとテンプレートを使用して、サイトを素早く実行できます。テーマの設定ワークフローを使用して、CSS および JavaScript のみでブランド固有のスタイルとカスタマイズを適用します。新規プロジェクトやデベロッパーにお勧めです。AEM as a Cloud Service でのみ使用できます。

サイトテンプレートを使用してチュートリアルを開始する

Adobe XD UI キット

このチュートリアルを実際のシナリオに近づけるため、Adobe の UX デザイナーは Adobe XD を使ってサイトのモックアップを作成しました。このチュートリアルを通じて、モックアップの様々な部分を、完全に作成可能な AEM Sites に実装します。WKND サイトの美しいデザインを作成した Lorenzo BuosiKilian Amendola に謝意を表明したいと思います。

XD UI キットをダウンロードします。

参照サイト reference-site

WKND サイトの最終バージョン(https://wknd.site/)も参照できます。

このチュートリアルでは、AEM デベロッパーに必要な主要な開発スキルをカバーしていますが、サイト全体をエンドツーエンドで構築することは​ ありません。完成したリファレンスサイトは、すぐに使用できる AEM の機能を参照して確認するためのもう 1 つの優れたリソースです。

チュートリアルに入る前に最新のコードをテストするには、GitHub から最新リリースをダウンロードし、インストールしてください

Powered by Adobe Stock

WKND リファレンスサイトの画像の多くは Adobe Stock のもので、https://www.adobe.com/legal/terms.html のデモアセット追加条項で定義されたサードパーティーマテリアルです。Adobe Stock の画像を web サイトやマーケティング資料など、このデモ web サイトを閲覧した後に他の目的で使用する場合は、Adobe Stock でライセンスを購入できます。

Adobe Stockでは、写真、グラフィック、ビデオ、テンプレートなど、1 億 4000 万を超える高品質のロイヤリティフリー画像を利用して、クリエイティブなプロジェクトをすぐに開始できます。

次の手順 next-steps

AEM プロジェクトアーキタイプを使用して新しい Adobe Experience Manager プロジェクトを生成するまたはサイトテンプレートを使用してサイトを作成するで方法を説明します。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9