AEM を初めて使う開発者向けに作られた、複数のパートから成るチュートリアル。WKND で架空のライフスタイルブランドへ AEM Sites を実装するための手順について説明します。プロジェクトのセットアップ、コアコンポーネント、編集可能テンプレート、クライアントライブラリ、およびコンポーネント開発などの基本的なトピックが含まれます。

概要

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

実装は、AEM 6.4 + SP2 および AEM 6.3 + SP3 で機能します。多くのトピックはすべてのバージョンの AEM に適用されます。サイトの実装には、以下を使用します。

  • HTL
  • Sling Model
  • タッチ UI
  • Core Components v2
  • 編集可能テンプレート
  • スタイルシステム
  • Maven AEM プロジェクトアーキタイプ 15

チュートリアルの各パートの所要時間は 1~2 時間です。

注意:

このチュートリアルの以前のバージョンでは、プロジェクトに別の Maven アーキタイプを活用していました。以前のチュートリアルの完成済みコードは、こちらにあります。

GitHub

プロジェクトのすべてのコードは AEM Guide リポジトリの GitHub にあります。

GitHub:WKND サイトプロジェクト

さらに、チュートリアルの各章は、GitHub に独自のブランチを持っています。ユーザーは、前のパートに対応するブランチをチェックするだけで、どこからでもチュートリアルを開始できます。

チュートリアルで問題が発生した場合は、GitHub で問題を報告してください。

最新

チュートリアルを途中から開始する前に最新のコードをテストするには、以下のパッケージをダウンロードおよびインストールしてください。

ダウンロード

ダウンロード

WKND のデザイン

WKND は、いくつかの海外の都市のナイトライフ、アクティビティ、およびイベントに焦点を当てた架空のオンラインマガジンとブログです。このチュートリアルを現実世界のシナリオに近づけるために、アドビの才能ある UX デザイナーがサイトのモックアップを作成しました。このチュートリアルを通じて、モックアップの様々な部分を、完全に作成可能な AEM Sites に実装します。WKND サイトの美しいデザインを作成した Lorenzo Buosi に感謝します。

以下は、サイトと機能の概要を示したビデオです。


目次

チュートリアルの各パートの一般的な所要時間は約 1~2 時間です。

第 1 章

プロジェクトのセットアップ - AEM Sites のコードや設定を管理する、Maven マルチモジュールプロジェクトの作成について説明します。
Maven、Lazybones テンプレート、Eclipse IDE、コアコンポーネント、SCM、GitHub

第 2 章

ベースページとテンプレートの作成 - ベースページや編集可能テンプレートの作成について説明します。コアコンポーネントはプロジェクト内でプロキシ化されます。
編集可能テンプレート、コアコンポーネント、コンテンツオーサリング

第 3 章

クライアント側のライブラリおよびレスポンシブグリッド - AEM Sites 実装用 CSS や JavaScript をデプロイおよび管理する AEM クライアント側ライブラリの作成について説明します。また、AEM のレスポンシブグリッドおよびモバイルエミュレーターの統合について説明します。aemfed モジュールは、フロントエンドの開発を加速化させるのに使用されます。
クライアント側ライブラリ、CSS、Javascript、LESS、aemfed、レスポンシブグリッド

第 4 章

スタイルシステムの開発 - ブランド固有の CSS を拡張およびスタイルシステムを活用した、コンポーネントのバリエーションの作成について説明します。また、この章では、長い記事コンテンツでコンテンツフラグメントを使用し、テンプレートエディターのいくつかの高度なポリシーについても説明します。
CSS、スタイルシステム、テンプレートエディターポリシー

第 5 章

ナビゲーションと検索 - コンテンツ階層によって駆動される動的なナビゲーションと、コンテンツ作成者によって生成された固定ナビゲーションについて説明します。Sling Model、HTL テンプレート言語、およびダイアログは、ヘッダーやフッターナビゲーションの実装に使用されます。また、クイック検索コンポーネントもヘッダーに追加されます。
HTL、デザインダイアログ、複合コンポーネント

第 6 章

新しい AEM コンポーネントの作成 - 作成したコンテンツを表示する、カスタム署名コンポーネントのエンドツーエンドの作成について説明します。ビジネスロジックをカプセル化して署名コンポーネントおよび対応する HTL を入力し、コンポーネントをレンダリングする Sling Model の開発を含みます。
Sling Model、HTL、スタイルシステム、カスタムコンポーネント

第 7 章

ティーザーおよびカルーセル拡張動的でエキサイティングなホームページを設定するティーザーコンポーネントやカルーセルコンポーネントの実装について説明します。
高度なテンプレートエディターポリシー、スタイルシステム、コアコンポーネント v2

第 8 章

単体テスト - チュートリアルの第 6 章で作成した署名コンポーネントの Sling Model の動作を検証する、単体テストの実装について説明します。
単体テスト、io.wcm AEM モック、Mockito、JUnit