ベースページと編集可能テンプレートの作成について説明します。コアコンポーネントはプロジェクト内でプロキシ化されます。テキスト、画像、およびタイトルのコアコンポーネントは、初期ページを作成する際に使用します。

前提条件

これは、複数のパートで構成されているチュートリアルの第 2 章です。第 1 章はこちらから概要はこちらから確認できます。

Eclipse または IDE セットアップが必要になります。開発環境の設定手順は、第 1 章をご覧ください。

GitHub の第 1 章の完成済みコードを参照するか、ソリューションパッケージをダウンロードできます。

ダウンロード

ページのベースコンポーネントを調べる

アーキタイプにより、作成されたすべてのページの基礎として使用するコンポーネントが作成されました。ベースページは、サイトのグローバルエリアの一貫性を確保するためのものです。これにはグローバル CSS および Javascript の読み込みや、ページを AEM オーサリングツールで編集可能にするためのコードが含まれます。

Eclipse(または任意の IDE)で、ui.apps プロジェクトの /apps/wknd の下にあるノードを確認します。

  1. /apps/wknd/components の下で、structure という名前のフォルダーを確認します。

    AEM プロジェクトアーキタイプにより、page という名前のコンポーネントが作成されます。編集可能テンプレートは、WKND サイトで使用されます。structure という名前は、編集可能テンプレート特定のモードと同じです。また、編集可能テンプレートを使用しているときの一般的なコンバージョンです。structure フォルダーに追加されたコンポーネントは、それがページの作成時ではなく、テンプレートの構築時に使用するコンポーネントあることを示します。

    base-page
  2. ページコンポーネントを選択してプロパティを確認します。

    base-pageprops
    名前 説明
    componentGroup .hidden 作成可能なコンポーネントではないことを示します
    jcr:title WKND Site Page タイトル
    sling:resourceSuperType core/wcm/components/page/v2/page
    コアページコンポーネントの機能を継承します
    jcr:primaryType cq:Component プライマリノードタイプ(読み取り専用)

    sling:resourceSuperType プロパティは、WKND のページコンポーネントにコアコンポーネントページコンポーネントのすべての機能を継承させる、重要なプロパティです。これは、プロキシコンポーネントパターンと呼ばれるものの最初の例です。詳しくは、こちらを参照してください。

ヘッダーコンポーネントの作成

次に、ベースページに統合するヘッダーコンポーネントを作成します。目標は、コードを最小限に抑えるよう、基本構造のみを確立することです。このチュートリアルの後半では、コンポーネントを完全に構築します。

  1. /apps/wknd/components/structure の下に、名前が header、ノードタイプが cq:Component のノードを作成します。

    header-cmp
  2. 次のようなエラーが表示される場合があります。プロジェクト aem-guides-wknd.ui.apps がサーバーと関連付けられていないか、サーバーが起動していないので、ノードタイプを検証できません

    unable-validate2

    aem-guides-wknd.ui.apps プロジェクトが AEM eclipse サーバーと関連付けられており、サーバーが起動していることをダブルチェックして確認します。

    引き続きエラーが発生する場合は、次の手順をおこないます。

    1. プロジェクトエクスプローラーで aem-guides-wknd.ui.apps プロジェクトを右クリックする
    2. プロパティプロジェクトファセットを開く
    3. 動的 Web モジュールのチェックマークをオフにする

    これによってエラーが解決し、新しいノードを作成する際にはノードタイプのドロップダウンが表示されます。

    動的 Web モジュールのチェックマークをオフにする
    プロパティ/プロジェクトファセットで、動的 Web モジュールのチェックマークをオフにします。

    また AEM タブの下の content sync ルートディレクトリが jcr_root フォルダーを指していることを確認します。

    2018-11-15_at_9_17am
  3. 追加 JCR プロパティを使用してヘッダーコンポーネントを更新します。ヘッダーコンポーネントを選択してから、JCR プロパティパネルを右クリックして新しいプロパティを追加します。

    ヘッダーコンポーネントに次のプロパティを追加します。

    header-props
    名前 タイプ チュートリアルの説明
    (情報のみ。コピーしないでください)
    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"/>
  4. header コンポーネントの下に、名前が cq:dialog、タイプが nt:unstructured のノードを追加します。

    2018-11-15_at_9_11am
    cq:Dialog

    ダイアログは、コンテンツ作成者が UI ダイアログからコンポーネントのプロパティ/ロジックを更新できるメカニズムです。完全なダイアログおよびフィールドは、チュートリアルで後から定義します。ベースライン作成機能に対応するには、少なくともダイアログプレースホルダーは必要です。

  5. header コンポーネントの下に、header.html という名前のファイルを追加します。

    header.html ファイル

    このファイルは、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>
  6. AEM へのデプロイ

    コード変更を検証/テストするために、コードを定期的に AEM に公開するのは良い考えです。Eclipse AEM 開発ツールを使用すれば、Eclipse 内で ui.apps プロジェクトを公開することができます。

    また、Maven を使用して公開することも常に可能です。Maven を使用してデプロイすると、最終的にこれが開発/実稼動環境へのデプロイ方法となり、Maven でもインストール前に単体テストや他のコードスタイルチェックが実行されて便利です。

    IDE と AEM インスタンスの間のプッシュコードの詳細については、第 1 章をご覧ください。

    $ mvn -PautoInstallPackage -Padobe-public clean install
    CRXDE Lite のページ
    コード変更をデプロイした後で、CRXDE Lite のページノードを確認する

    CRXDE-Lite で、ヘッダーコンポーネントがローカル AEM インスタンスにプッシュされていることを検証します。

プロキシコンポーネントを調べる

AEM コアコンポーネントは、コンテンツ作成の基本的な構成要素をいくつか提供します。これには、テキスト、画像、タイトルやその他複数のコンポーネントが含まれます。AEM プロジェクトアーキタイプは、WKND プロジェクトにこれらを自動的に含めます。追加された各コンポーネントは、コアコンポーネントを指す sling:resourceSuperType プロパティがあります。これは、プロキシコンポーネントの作成として知られ、プロジェクトでコアコンポーネントを使用する際に推奨される方法です。

チュートリアルの最初の部分では、次のコアコンポーネントを使用します。

コアコンポーネント自体は、 /apps/core/wcm/components の下にある CRXDE Lite から確認できます。

  1. /apps/wknd/components/content を展開する

    プロジェクトには、いくつかのコアコンポーネントが既に含まれていることに注意してください。含まれている各コンポーネントには、同等のコアコンポーネントを指す sling:resourceSuperType プロパティがあります。サンプルコンポーネントである helloworld コンポーネントは例外です。

    パンくずコンポーネント
    ナビゲーションのパンくずを作成するためのパンくずコンポーネント
  2. /apps/wknd/components/form を展開する

    また、コアコンポーネントには HTML フォームを構築するためのコンポーネントセットも含まれます。/content 配下のコンポーネントのように、これらのプロジェクトもプロジェクトにプロキシ化されます。これらのコンポーネントには一意の componentGroup があります。

    テキストコンポーネント
    RTE コンテンツ作成用テキストコンポーネント
  3. 画像コンポーネントの下で cq:editConfig を調べる

    cq:editConfig は、Sites Editor のアセットファインダーからのドラッグアンドドロップ機能など、様々なビヘイビアーを定義します。画像コンポーネントに必要な設定です。

    1. 名前が cq:editConfig、タイプが cq:EditConfig の画像コンポーネントの下でノードを確認します。

    2. cq:dropTargets/image/parameters ノードを確認します。このノードは、AEM に対し、画像をページにドラッグしたときに使用するコンポーネントリソースタイプを指定します。カスタムコンポーネント用に画像コンポーネントを拡張する場合は、cq:editConfg を更新することが重要です。

    2018-04-05_at_5_00pm

空ページテンプレートタイプを調べる

テンプレートタイプは有効なテンプレート用テンプレートです。このテンプレートは、AEM の編集可能テンプレートの機能を活用するために必要です。テンプレートとテンプレートのタイプは /conf の配下に保存されます。AEM プロジェクトアーキタイプにより、使用を開始するためのテンプレートタイプが作成されます。/conf のノードは、UI 経由で AEM ディレクトリから更新できます。そのため、テンプレート関連のすべてのノードは ui.content プロジェクトに保存されます。

編集可能テンプレートの主なエリアは 3 つです。

  1. 構造 - テンプレートの一部であるコンポーネントを定義します。コンテンツ作成者はこれらを編集できません。
  2. 初期コンテンツ - テンプレート開始時のコンポーネントを定義します。コンテンツ作成者はこれらを編集/削除できます。
  3. ポリシー - コンポーネントの動作、および作成者が利用可能なオプションに関する設定を定義します。

テンプレートタイプはテンプレート用テンプレートと考えることができるので、テンプレートタイプと同じ構造になります。/libs/settings/wcm/template-types/ の下には、テンプレートタイプ構造の例があります。

AEM プロジェクトアーキタイプは最初に使用する空ページテンプレートタイプを作成します。ui.content モジュールで、空ページテンプレートタイプのいくつかのエリアを調べます。

  1. /conf/wknd/settings/wcm/template-types/empty-page/structure/jcr:content

    jcr:content ノードでは、sling:resourceType が(このパートの前半で作成した)ベースページコンポーネントを指していることに注意してください。また、電話やタブレットのブレークポイントもここで定義されます。デスクトップは 1200 以上であると見なされます。 

    2018-04-05_at_5_13pm
  2. 電話のブレークポイントを 768 に更新する

    /conf/wknd/settings/wcm/template-types/empty-page/structure/jcr:content/cq:responsive の下には、タブレットと電話のブレークポイント用ノードがあります。デフォルトのタブレットブレークポイントは 1200 です。

    電話のブレークポイントを 768 に設定する

    2018-04-06_at_3_40pm
  3. /conf/wknd/settings/wcm/template-types/empty-page/initial/jcr:content

    また、initial ページの下にある jcr:content ノードも、先ほど作成したベースページコンポーネントを指しています。

    2018-04-05_at_5_15pm
  4. /conf/wknd/settings/wcm/template-types/empty-page/policies/jcr:content

    ポリシーページは、様々なコンポーネントにポリシーをマッピングする方法を定義します。この構造はテンプレートタイプ全体での標準であり、WKND の空ページテンプレートタイプに固有ではありません。

  5. (オプション) /conf/wknd/settings/wcm/template-types/empty-page の下にサムネールを追加する

    サムネールは非常に便利です。このサムネールは、テンプレートタイプを特定しやすくするよう、AEM 作成環境でユーザーに表示されます。推奨サイズは 460 x 460 です。

    thumbnail
  6. ui.content を AEM にデプロイする

    チュートリアルの次のパートは AEM 内でおこないます。

記事およびランディングページテンプレートの作成

AEM プロジェクトアーキタイプはサンプルコンテンツテンプレートを事前作成しています。次のいくつかの手順では、2 つの新しいテンプレートの作成について説明します。

  1. 記事ページテンプレート
  2. ランディングページテンプレート

この手順は AEM 内でおこなわれます。以下の短いビデオでは、手順の詳細について説明します。

*テンプレート作成の役割は開発タスクとしておこなわれます。ただし、実装が成熟レベルに到達すると、「power-users」のグループを選択して追加テンプレートを作成できます。


ランディングページテンプレートのサムネール
ランディングページテンプレートのサムネール

次のタスクを完了するには、上記のビデオをご覧ください。

  1. 記事ページテンプレートとランディングページテンプレートを作成する

    これらのテンプレートにはそれぞれ、固定 Header コンポーネントとロックが解除されているレイアウトコンテナが含まれます。レイアウトコンテナは、次のコンポーネントを使用して設定できます。

    • パンくず
    • 画像
    • リスト
    • テキスト
    • タイトル
    • レイアウトコンテナ

    ランディングページテンプレートの記事ページテンプレートから、レイアウトコンテナポリシーを再使用します。

    templates
  2. ホームページを作成する

    ホームページは /content/wknd/en(または任意の言語ロケール)で作成する必要があります。ランディングページテンプレートを使用して作成する必要があります。

    2018-04-06_at_6_19am
  3. 最初の記事ページを作成する

    最初の記事ページは、ホームページの下(/content/wknd/en/first-article)に作成されます。記事ページテンプレートを使用して作成する必要があります。

    2018-04-06_at_6_22am
  4. AEM からファイルシステムへテンプレートを同期させる

    これらのテンプレートを別の環境に再度デプロイする場合は、ソースコントロールの一部としておこなうことができます。ビデオで説明した Eclipse 開発ツールを使用して、AEM で作成したテンプレートを ui.content モジュールに読み込みます。

    2018-04-06_at_6_16am

コンテンツルートを調べる

AEM プロジェクトアーキタイプは、/content/wknd に、WKND サイトのコンテンツルートを自動的に作成します。コンテンツルートは、サイトで許可されているテンプレートを定義し、その他のグローバル設定に使用されます。慣例により、コンテンツルートはサイトのホームページ用ではありません。代わりに、実際のホームページへリダイレクトします。コンテンツルートのプロパティについて理解すると便利です。

  1. CRXDE Lite http://localhost:4502/crx/de/index.jsp を開き、/content/wknd/jcr:content に移動します。

  2. 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 基本リダイレクトコンポーネントを使用してリダイレクトを実行します。

    ご覧のように、コンテンツルート上では allowedTemplates などの一部のプロパティが、サイトのビヘイビアーにとって重要となります。この場合のように、多くの実装ルート設定は scm に保存され、ベースラインコンテンツ構造を提供します。また、オフラインコンテンツパッケージを作成して、同様の役割を与える場合もあります。

  3. (オプション)AEM からファイルシステムへのコンテンツルートの同期

    Eclipse 開発ツールを使用し、ui.content モジュールで、/content/wknd ページを右クリックし、「サーバーから読み込む...」をクリックします。

    2018-04-06_at_6_41am

ヘルプ

行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。

探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND プロジェクトの問題として GitHub で報告してください。

次の手順

チュートリアルの次のパート:

ダウンロード

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー