Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jカスタム Lightning ページテンプレートコンポーネントの作成
すべての標準 Lightning ページは、ページの領域とページに含まれるコンポーネントを定義するデフォルトテンプレートコンポーネントに関連付けられています。カスタム Lightning ページテンプレートコンポーネントでは、定義した構造とコンポーネントを使用して、ビジネスニーズに合ったページテンプレートを作成できます。カスタムテンプレートを実装すると、ページ作成者は Lightning アプリケーションビルダーの新規ページウィザードでそのカスタムテンプレートを使用できます。
1.テンプレートコンポーネント構造の構築
カスタムテンプレートは、少なくとも 1 つの .cmp リソースとデザインリソースが含まれている必要のある Aura コンポーネントバンドルです。.cmp リソースでは、テンプレートインターフェースを実装し、テンプレート領域ごとに Aura.Component[] 型の属性を宣言する必要があります。Aura.Component[] 型では、コンポーネントのコレクションとして属性を定義します。
次に、lightning:layout コンポーネントと Salesforce Lightning Design System (SLDS) を使用してスタイルを設定する 2 列のアプリケーションページテンプレートの .cmp リソースの例を示します。
テンプレートがデスクトップで表示される場合、右列が 30% (4 つの SLDS 列) を占めま���。左列はページ幅の残りの 70% を占めます。デスクトップ以外のフォーム要���以外の場合、列は 50/50 で表示されます。
aura:component タグの description 属性は、省略可能ですが推奨属性です。description を定義すると、Lightning アプリケーションビルダーの新規ページウィザードのテンプレート画像の下にテンプレートの説明として表示されます。
2.デザインリソースでのテンプレート領域とコンポーネントの設定
デザインリソースは、テンプレートで作成できるページの種別を制御します。デザインリソースでは以下を指定します。
- テンプレートを使用するページに必要な領域。
- ページ領域に挿入可能なコンポーネントの種別。
- 表示されるデバイス種別に基づいたページ上のコンポーネントの占有スペース。
- コンポーネントがサポートするデバイスのフォームファクタ。
領域は、.cmp リソースの設定に従って、ページ全体に設定されたインターフェースの割り当てを継承します。
次のタグを使用して、領域とコンポーネントを指定します。
- flexipage:template
- このタグには属性はなく、flexipage:region タグのラッパーとして動作します。テキストリテラルは使用できません。
- flexipage:region
- このタグには次の属性があり、テンプレートの領域を定義します。テキストリテラルは使用できません。
属性 説明 name Aura.Component[] 型としてマークされる .cmp リソースの属性の名前。領域として属性にフラグを設定します。 label 領域の表示ラベル。ユーザが領域のコンテンツを新しいテンプレートに対応付けると、この表示ラベルは Lightning アプリケーションビルダーのテンプレート切り替えウィザードに表示されます。 defaultWidth 領域のデフォルトの幅を指定します。この属性はすべての領域で必須です。有効な値は、Small、Medium、Large、Xlarge です。 - flexipage:formFactor
- このタグを使用して、表示されるデバイス種別に基づいてページ上のコンポーネントの占有スペースを指定します。このタグを flexipage:region タグの子として追加します。flexipage:region ごとに複数の flexipage:formFactor タグを使用して、フォーム要素の柔軟な動作を定義します。
属性 説明 type テンプレートが表示されるフォーム要素またはデバイス (デスクトップやタブレットなど) の種別。有効な値は、Medium (タブレット) と Large (デスクトップ) です。Small フォーム要素 (電話) の適切な幅の値は Small のみなので、Small 種別を指定する必要はありません。その関連付けは、Salesforce によって自動的に行われます。 width この領域のコンポーネントが表示される領域の使用可能なサイズ。有効な値は、Small、Medium、Large、Xlarge です。 たとえばこのコードスニペットでは、テンプレートが Large のフォーム要素に表示されるときに、領域の表示幅は Large になります。テンプレートが Medium のフォーム要素に表示されるときは、領域の表示幅が Small になります。
次に、サンプル .cmp リソースで使用するデザインファイルを示します。デザインファイルの表示ラベルテキストは、新規ページウィザードのテンプレートの名前として表示されます。
アプリケーションページのコンポーネントがサポートするデバイスは、<design:suppportedFormFactors> タグセットで指定します。アプリケーションページでカスタムテンプレートコンポーネントを作成する場合は、[Large (デスクトップ)] と [Small (電話)] の両方のフォームファクタを割り当てる必要があります。
次に、デスクトップと電話の両方をサポートするように設定された同じアプリケーションページのデザインファイルを示します。
3.(省略可能) テンプレート画像の追加
.cmp リソースに description を追加した場合、ユーザが Lightning アプリケーションビルダーの新規ページウィザードでテンプレートを選択したときに説明とテンプレート画像の両方が表示されます。
SVG リソースを使用して、カスタムテンプレート画像を定義できます。
SVG リソースのサイズは 150 KB 以下、高さは 160 ピクセル以下、幅は 560 ピクセル以下にすることをお勧めします。