テンプレートとコンポーネントの作成および追加

メモ

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報

AEM Mobile On-Demand には、完全に設定されたアプリテンプレート、記事テンプレートおよび記事コンポーネントが用意されています。

We.Unlimited アプリは、完全に設定可能で管理が容易な AEM Mobile On-Demand アプリケーションのシェルを表すサンプルのテンプレートです。

新しいアプリの作成時にこのサンプルテンプレートを選択すると、様々な機能を含んだ AEM Mobile ダッシュボードが提供されます。

chlimage_1-70

メモ

AEM Mobile アプリコントロールセンターからアプリケーションおよびモバイルアプリコンテンツを管理するには、AEM Mobile アプリケーションダッシュボードを参照してください。

アプリテンプレートの作成

アプリテンプレートは、新しいアプリの作成時に使用されるもので、アプリのベースラインまたは基盤となるページテンプレートおよびコンポーネントの集まりです。テンプレートは、アプリを適切な方法で導くために、いくつかの基本的なプロパティをスタンプアウトします。 通常、ユーザーがアプリを作成する機会はあまり多くありません。

アプリテンプレートにより、AEM での新しいアプリの作成に使用される、開発者が作成した既存のデザインを利用する簡単な方法が提供されます。

新規アプリを別のアプリのテンプレートに基づいて作成すると、作成元アプリと同じ開始点からアプリを作成することができます。

アプリテンプレートに基づいて新しいアプリを作成する手順は次のとおりです。

  1. AEM Mobileアプリカタログに移動します。<server-url>/aem/apps.html/content/mobileapps
  2. 以下に示すように、アプリ選択​を選択します。

このテンプレートを使用してアプリを作成すると、記事、バナーおよびコレクションをアプリに追加できます。記事、バナーおよびコレクションの作成に再度アクセスするには、コンテンツ管理アクションを参照してください。

メモ

または、サンプルのアプリテンプレート(AEM開発者が提供する​We.Unlimited​アプリなど)を選択することもできます。 アプリにこのサンプルのテンプレートを使用した場合は、サンプルの記事やコレクションが用意されているので、それらを利用できます。テンプレートやコンポーネントは、サンプルをそのまま使用することも、既存のものをカスタマイズすることも、アプリ用に新しいものを作成することもできます。

注意

redirectTarget​プロパティを設定しています

いずれかのアプリテンプレートを使用するときは、開発者がアプリケーションのコンテンツを定義します。ただし、開発者は、アプリケーションが jcr 内のどこに作成されるかと、redirectTarget プロパティの値に注意する必要があります。

redirectTarget はアプリ作成プロセスの中で処理され、redirectTarget プロパティがアプリテンプレートの一部として利用可能で、redirectTarget の値が相対パスとして定義されている場合に、パスの解決を試みます。アプリテンプレート内の redirectTarget に相対パスの値が定義されているときは、その値が、解決されたアプリ作成場所のパスの後ろに付加されます。

例えば、アプリテンプレート内で redirectTarget の値が「lanugage-masters/en」と定義されていて、アプリが「/content/mobileapps/fooApp」に作成される場合は、アプリ作成後の最終的な redirectTarget の値は「/content/mobileapps/fooApp/language-masters/en」になります。

コンテンツテンプレートの作成

各エンティティタイプには、2 種類の既製のテンプレートがあります。以下のとおりです。

  • デフォルトテンプレート: 適用可能なデフォルトのプロパティ/構造を持つコンテンツの作成に使用
  • インポートされたテンプレート: 適切なデフォルトのプロパティ/構造を持つAEM Mobileからコンテンツをインポートするために使用されます。

記事テンプレート

Unlimited の記事は、AEM Mobile On-Demand の一般的な記事レイアウトを表すサンプルテンプレートです。

  1. 記事を管理​の「+」をクリックして、新しい記事を作成します。「Unlimited の記事」または「リッチテキスト記事」を選択できます。以下の図は、これら 2 つの記事テンプレートの選択肢を示しています。

  2. 次へ」をクリックして、記事名/タイトル、説明、作成者、要約、部門、サムネール画像、記事アクセスなどの記事のメタデータを定義します。

  3. 次へ」をクリックして、広告プロパティを入力します。

  4. 次へ」をクリックして、「記事の画像」または「ソーシャルメディアの画像」を入力します。

  5. 次へ」をクリックして、この新しい記事へのコレクションリンクを選択します。

  6. 次へ」をクリックして、ソーシャルシェアの詳細を入力します。

  7. 作成」をクリックして、サンプルを使用した記事の作成プロセスを終了します。「完了」をクリックするか、「記事を編集」をクリックしてこの記事のプロパティを編集します。

chlimage_1-71

記事へのコンポーネントの追加

作成者は記事を作成したら、テキストや画像などのコンポーネントを追加して内容を編集できます。記事は、AEM ページテンプレートの拡張です。

編集する記事を選択し、「編集」をクリックして、記事にコンポーネントを追加します。

chlimage_1-72 chlimage_1-73

左側のパネルにある「+」を選択して、記事にコンポーネントを追加します。

chlimage_1-74

既製のテンプレートの作成

既製の記事テンプレートはありませんが、カスタムテンプレートが拡張する必要があるデフォルトのテンプレートがあります。Geometrixx Unlimitedアプリの記事テンプレートのサンプルを参照してください。

通常の AEM テンプレートで必要なプロパティ以外の主なプロパティには次のものがあります。

dps-resourceType="dps:Article"

このプロパティは、AEM ページが AEM Mobile をターゲットにした記事ページであると認識されるためのものです。

AEMテンプレートに従って、任意のデフォルトのプロパティまたは子ノードをテンプレートの​jcr:content​に追加できます。

注意

バナーとコレクションにはコンテンツがないので、作成ではカスタムテンプレートをサポートしません。

コンポーネントの作成および追加

コンポーネントはウィジェットを使用し、ウィジェットにアクセスできます。ウィジェットはコンテンツのレンダリングに使用されます。

単純なコンポーネントがコードリポジトリに含まれており、そのソースは AEM にあります。その後、ローカルで開くこともできますCRXDE Lite。

メモ

現在、AEM Mobile には、既製のコンポーネントは用意されていません。

ページにコンポーネントを追加できます。AEM Mobile アプリでは任意のコンポーネントを使用できますが、適用された場合に適切にレンダリングされないことがあります。

ただし、AEM でレンダリングされるカスタムの書き出しコンテンツ同期ハンドラーがないと、カスタムコンポーネントを正しく書き出して AEM Mobile On-Demand Services にアップロードできない場合があります。

コンポーネントをAEMページに既に含めたら、その他のいくつかの構築ブロックコンポーネントと共に、別のコンポーネントをページに追加したり、既存のコンポーネントを編集したりできます。

ページに別のコンポーネントを追加するには:

  1. ページを選択し、エディターのヘッダーの右上にあるドロップダウンで、編集モードであることを確認します。
  2. エディターのヘッダーの一番左側にあるアイコンを使用して、サイドパネルを切り替えます。
  3. コンポーネント」タブを選択します。
  4. 利用可能ないずれかのコンポーネントをページにドラッグ&ドロップします。

chlimage_1-75

既存のコンポーネントを編集するには:

  1. ページを選択し、編集​モードであることを確認して、コンポーネントを選択します。
  2. 設定アイコンをタップして、コンポーネントを設定します。
メモ

AEMでコンポーネントを作成し、CRXDE Liteを使用して同じコンポーネントをカスタマイズできます。 要件に応じて既存のコンポーネントをカスタマイズしたら、上図のように​記事を管理​の「編集」オプションを使用して、ページにコンポーネントを追加できます。

次の手順

このページ