この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

Lightning ページと Lightning アプリケーションビルダーのコンポーネントの設定

Lightning ページまたは Lightning アプリケーションビルダーでカスタム Lightning コンポーネントを使用する前に、3 つのステップを実行する必要があります。

1. 組織で [私のドメイン] を有効化する

Lightning コンポーネントを Lightning タブ、Lightning ページ、またはスタンドアロンアプリケーションとして使用する場合は、組織で [私のドメイン] を有効にする必要があります。

[私のドメイン] についての詳細は、「私のドメイン」を参照してください。

2. 新規インターフェースをコンポーネントに追加する

コンポーネントを Lightning アプリケーションビルダーまたは Lightning ページに表示するには、コンポーネントに flexipage:availableForAllPageTypes インターフェースを実装する必要があります。

シンプルな「Hello World」コンポーネントのサンプルコードを次に示します。

1<aura:component implements="flexipage:availableForAllPageTypes" access="global">
2    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
3    <aura:attribute name="subject" type="String" default="World" access="global" />
4
5    <div style="box">
6      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7    </div>
8</aura:component>

コンポーネントなどのリソースを access="global" としてマークし、リソースを自分の組織外で使用できるようにします (インストール済みパッケージや、他の組織の Lightning アプリケーションビルダーユーザまたはコミュニティビルダーユーザがコンポーネントを使用できるようにするなど)。

メモ

3. デザインリソースをコンポーネントバンドルに追加する

Lightning コンポーネントを Lightning ページおよび Lightning アプリケーションビルダーで使用できるようにするには、コンポーネントバンドルにデザインリソースを含める必要があります。デザインリソースには、Lightning コンポーネントの設計時の動作 (ページまたはアプリケーションへのコンポーネントの追加を可能にするためにビジュアルツールが必要とする情報) が記述されます。

Lightning コンポーネントの属性をシステム管理者が Lightning アプリケーションビルダーで編集できるようにするには、属性の design:attribute ノードをデザインリソースに追加します。コンポーネント定義で必須とマークされた属性は、デフォルト値が割り当てられている場合を除き、Lightning アプリケーションビルダーで自動的にユーザに表示されます。コンポーネント定義内のデフォルト値が設定された必須属性と必須とマークされていない属性は、デザインリソースで指定する必要が��ります。指定しないとユーザには表示されません。

「Hello World」コンポーネントと一緒にバンドルするデザインリソースを次に示します。

1<design:component label="Hello World">
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" />
4</design:component>

項目を選択リストとして表示するには、次のように、datasource をデザインリソースの属性に追加します。

1<design:attribute name="Name" datasource="value1,value2,value3" />

デザインリソースに datasource が設定された文字列属性はすべて選択リストとして処理されます。

デザインリソースでは、属性のデフォルトを次のように設定できます。

1<design:attribute name="Name" datasource="value1,value2,value3" default=”value1” />

デザインリソースでは、int、string、または boolean 型の属性のみがサポートされます。

デザインリソースの名前は、componentName.design にする必要があります。

省略可能: SVG リソースをコンポーネントバンドルに追加する

SVG リソースを使用して、コンポーネントが Lightning アプリケーションビルダーのコンポーネントペインに表示されるときのカスタムアイコンを定義できます。リソースをコンポーネントバンドルに追加するだけです。

「Hello World」コンポーネントと一緒に表示するシンプルな赤い円の SVG リソースの例を次に示します。

1<?xml version="1.0"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 
5<svg xmlns="http://www.w3.org/2000/svg"
6     width="400" height="400">
7  <circle cx="100" cy="100" r="50" stroke="black"
8    stroke-width="5" fill="red" />
9</svg>

SVG リソースの名前は componentName.svg にする必要があります。

Lightning コンポーネント開発者ガイド

Lightning ページと Lightning アプリケーションビルダーのコンポーネントの設定

1. 組織で [私のドメイン] を有効化する

2. 新規インターフェースをコンポーネントに追加する

3. デザインリソースをコンポーネントバンドルに追加する

省略可能: SVG リソースをコンポーネントバンドルに追加する

関連項目: