これは、複数のパートで構成されているチュートリアルの第 2 章です。第 1 章はこちらから、概要はこちらから確認できます。
Eclipse または IDE セットアップが必要になります。開発環境の設定手順は、第 1 章をご覧ください。
GitHub の第 1 章の完成済みコードを参照するか、ソリューションパッケージをダウンロードできます。
ダウンロード
アーキタイプにより、作成されたすべてのページの基礎として使用するコンポーネントが作成されました。ベースページは、サイトのグローバルエリアの一貫性を確保するためのものです。これにはグローバル CSS および Javascript の読み込みや、ページを AEM オーサリングツールで編集可能にするためのコードが含まれます。
Eclipse（または任意の IDE）で、ui.apps プロジェクトの /apps/wknd の下にあるノードを確認します。
-
/apps/wknd/components の下で、structure という名前のフォルダーを確認します。
AEM プロジェクトアーキタイプにより、page という名前のコンポーネントが作成されます。編集可能テンプレートは、WKND サイトで使用されます。structure という名前は、編集可能テンプレート特定のモードと同じです。また、編集可能テンプレートを使用しているときの一般的なコンバージョンです。structure フォルダーに追加されたコンポーネントは、それがページの作成時ではなく、テンプレートの構築時に使用するコンポーネントあることを示します。
-
名前 値 説明 componentGroup .hidden 作成可能なコンポーネントではないことを示します jcr:title WKND Site Page タイトル sling:resourceSuperType core/wcm/components/page/v2/page コアページコンポーネントの機能を継承します jcr:primaryType cq:Component プライマリノードタイプ（読み取り専用） sling:resourceSuperType プロパティは、WKND のページコンポーネントにコアコンポーネントページコンポーネントのすべての機能を継承させる、重要なプロパティです。これは、プロキシコンポーネントパターンと呼ばれるものの最初の例です。詳しくは、こちらを参照してください。
-
次のようなエラーが表示される場合があります。プロジェクト aem-guides-wknd.ui.apps がサーバーと関連付けられていないか、サーバーが起動していないので、ノードタイプを検証できません。
aem-guides-wknd.ui.apps プロジェクトが AEM eclipse サーバーと関連付けられており、サーバーが起動していることをダブルチェックして確認します。
引き続きエラーが発生する場合は、次の手順をおこないます。
- プロジェクトエクスプローラーで aem-guides-wknd.ui.apps プロジェクトを右クリックする
- プロパティ／プロジェクトファセットを開く
- 動的 Web モジュールのチェックマークをオフにする
これによってエラーが解決し、新しいノードを作成する際にはノードタイプのドロップダウンが表示されます。
プロパティ／プロジェクトファセットで、動的 Web モジュールのチェックマークをオフにします。
-
追加 JCR プロパティを使用してヘッダーコンポーネントを更新します。ヘッダーコンポーネントを選択してから、JCR プロパティパネルを右クリックして新しいプロパティを追加します。
ヘッダーコンポーネントに次のプロパティを追加します。
名前 タイプ 値 チュートリアルの説明
（情報のみ。コピーしないでください）componentGroup String WKND.Structure テンプレートの構造を表すすべてのコンポーネントは、このグループを使用します。 jcr:description String Page Header with navigation コンポーネントの説明 jcr:title String WKND Page Header タイトル jcr:primaryType Name cq:Component プライマリノードタイプ 注意：
プロのヒント
プロジェクトエクスプローラーでコンポーネントをダブルクリックすると、XML 設定を直接編集できます。この操作は多くの編集が必要となる場合には便利ですが、エラーが発生しやすくなる可能性があります。
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" componentGroup="WKND.Structure" jcr:description="Page Header with navigation" jcr:title="WKND Page Header"/> -
このファイルは、HTL スクリプトです。グローバルオブジェクトのセットを、コンポーネント内の HTL スクリプトにいつでも使用することができます。currentPage は、現在のコンテンツページを表します。ドット表記 .title を使用すると、.getTitle() という名前のメソッドが呼び出されます。これにより、現在のページのタイトルが出力されます。ページタイトルが見つからない場合は、条件ロジックを使用して「ヘッダー」を出力できます。Sling リソースの解決では、ファイル名 header.html をコンポーネント名と照合するので、この名前が重要です。Sling リソースの解決について詳しくは、こちらを参照してください。
header.html ファイルに次のコンテンツを追加します。
<!--/* Header Component for WKND Site */--> <header class="wknd-header"> <div class="container"> <a class="wknd-header-logo" href="#">WKND</a> <h1>${currentPage.title ? currentPage.title : 'header'}</h1> </div> </header> -
AEM へのデプロイ
コード変更を検証／テストするために、コードを定期的に AEM に公開するのは良い考えです。Eclipse AEM 開発ツールを使用すれば、Eclipse 内で ui.apps プロジェクトを公開することができます。
また、Maven を使用して公開することも常に可能です。Maven を使用してデプロイすると、最終的にこれが開発／実稼動環境へのデプロイ方法となり、Maven でもインストール前に単体テストや他のコードスタイルチェックが実行されて便利です。
$ mvn -PautoInstallPackage -Padobe-public clean install
コード変更をデプロイした後で、CRXDE Lite のページノードを確認するCRXDE-Lite で、ヘッダーコンポーネントがローカル AEM インスタンスにプッシュされていることを検証します。
AEM コアコンポーネントは、コンテンツ作成の基本的な構成要素をいくつか提供します。これには、テキスト、画像、タイトルやその他複数のコンポーネントが含まれます。AEM プロジェクトアーキタイプは、WKND プロジェクトにこれらを自動的に含めます。追加された各コンポーネントは、コアコンポーネントを指す sling:resourceSuperType プロパティがあります。これは、プロキシコンポーネントの作成として知られ、プロジェクトでコアコンポーネントを使用する際に推奨される方法です。
チュートリアルの最初の部分では、次のコアコンポーネントを使用します。
コアコンポーネント自体は、 /apps/core/
-
画像コンポーネントの下で cq:editConfig を調べる
cq:editConfig は、Sites Editor のアセットファインダーからのドラッグアンドドロップ機能など、様々なビヘイビアーを定義します。画像コンポーネントに必要な設定です。
1. 名前が cq:editConfig、タイプが cq:EditConfig の画像コンポーネントの下でノードを確認します。
2. cq:dropTargets/image/parameters ノードを確認します。このノードは、AEM に対し、画像をページにドラッグしたときに使用するコンポーネントリソースタイプを指定します。カスタムコンポーネント用に画像コンポーネントを拡張する場合は、cq:editConfg を更新することが重要です。
テンプレートタイプは有効なテンプレート用テンプレートです。このテンプレートは、AEM の編集可能テンプレートの機能を活用するために必要です。テンプレートとテンプレートのタイプは /conf の配下に保存されます。AEM プロジェクトアーキタイプにより、使用を開始するためのテンプレートタイプが作成されます。/conf のノードは、UI 経由で AEM ディレクトリから更新できます。そのため、テンプレート関連のすべてのノードは ui.content プロジェクトに保存されます。
編集可能テンプレートの主なエリアは 3 つです。
- 構造 - テンプレートの一部であるコンポーネントを定義します。コンテンツ作成者はこれらを編集できません。
- 初期コンテンツ - テンプレート開始時のコンポーネントを定義します。コンテンツ作成者はこれらを編集／削除できます。
- ポリシー - コンポーネントの動作、および作成者が利用可能なオプションに関する設定を定義します。
テンプレートタイプはテンプレート用テンプレートと考えることができるので、テンプレートタイプと同じ構造になります。/libs/settings/wcm/template-types/ の下には、テンプレートタイプ構造の例があります。
AEM プロジェクトアーキタイプはサンプルコンテンツテンプレートを事前作成しています。次のいくつかの手順では、2 つの新しいテンプレートの作成について説明します。
- 記事ページテンプレート
- ランディングページテンプレート
この手順は AEM 内でおこなわれます。以下の短いビデオでは、手順の詳細について説明します。
*テンプレート作成の役割は開発タスクとしておこなわれます。ただし、実装が成熟レベルに到達すると、「power-users」のグループを選択して追加テンプレートを作成できます。
AEM プロジェクトアーキタイプは、/content/wknd に、WKND サイトのコンテンツルートを自動的に作成します。コンテンツルートは、サイトで許可されているテンプレートを定義し、その他のグローバル設定に使用されます。慣例により、コンテンツルートはサイトのホームページ用ではありません。代わりに、実際のホームページへリダイレクトします。コンテンツルートのプロパティについて理解すると便利です。
-
CRXDE Lite http://localhost:4502/crx/de/index.jsp を開き、/content/wknd/jcr:content に移動します。
-
名前 タイプ 値 チュートリアルの説明
（情報のみ。コピーしないでください）cq:allowedTemplates String[] /conf/global/settings/wcm/templates/.* WKND フォルダーの下で作成したテンプレートを使用できるようにします cq:deviceGroups String[] /etc/mobile/groups/responsive レイアウトモードで使用するデバイスグループを定義します。デフォルト設定を使用します。 jcr:title String WKND Site タイトル jcr:primaryType Name cq:pageContent プライマリノードタイプ redirectTarget String /content/wknd/en ターゲットをリダイレクト sling:redirect Boolean true sling:redirectStatus Long 302 sling:resourceType String foundation/components/redirect 基本リダイレクトコンポーネントを使用してリダイレクトを実行します。
行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。
探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND プロジェクトの問題として GitHub で報告してください。
チュートリアルの次のパート：
- AEM Sites の概要（第 3 章）- クライアント側のライブラリおよびレスポンシブグリッド
- GitHub で完成済みコードを参照するか、ソリューションパッケージをダウンロードします。
ダウンロード
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。