AEM Sites の概要 - WKND チュートリアル

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

概要

この複数パートから成るチュートリアルは、Adobe Experience Manager(AEM)の最新の標準やテクノロジーを使用して Web サイトを実装するための手順を開発者に教えることを目的としています。このチュートリアルを完了した後、開発者は、プラットフォームの基本を理解し、AEMの一般的なデザインパターンに関する知識を持つ必要があります。

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

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

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

AEMプロジェクトアーキタイプのチュートリアルを開始する

AEMサイトテンプレート — 事前に定義されたサイトテンプレートを使用してAEMサイトを生成する低コードのアプローチです。すぐに使用できるコンポーネントとテンプレートを使用して、サイトをすぐに起動および実行できます。 テーマの設定ワークフローを使用して、CSSとJavaScriptのみでブランド固有のスタイルとカスタマイズを適用します。 新しいプロジェクトおよび開発者に推奨されます。 現在、AEM as aCloud Serviceでのみ使用できます。

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

Adobe XD UIキット

このチュートリアルを実際のシナリオに近づけるために、Adobeの才能あるUXデザイナーは、Adobe XDを使用してサイトのモックアップを作成しました。 チュートリアルの過程で、様々なデザインが完全に作成可能なAEMサイトに実装されます。 WKNDサイトの美しいデザインを作った​Lorenzo Buosi​と​Kilian Amendola​に特に感謝します。

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

参照サイト

WKNDサイトの完成版も参照用として利用できます。https://wknd.site/

このチュートリアルでは、AEM開発者に必要な主な開発スキルについて説明しますが、サイト全体をエンドツーエンドで構築するのではなく、**​構築します。 完成したリファレンスサイトは、すぐに使用できるAEMの機能をさらに詳しく調べ、確認するためのもう1つの優れたリソースです。

このチュートリアルに進む前に最新のコードをテストするには、GitHub🔗​から​最新リリースをダウンロードしてインストールします。

Adobe Stockを利用

WKNDリファレンスWebサイトの画像の多くは、Adobe Stockのもので、https://www.adobe.com/legal/terms.htmlにある「Demo Asset Additional Terms」で定義されているサードパーティの資料です。 Adobe Stockの画像をWebサイトやマーケティング資料などで取り扱うなど、このデモWebサイトを閲覧する以外の目的で使用する場合は、Adobe Stockでライセンスを購入できます。

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

次の手順

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

このページ