Lightning コンポーネント開発者ガイド
jLightning ページと 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>3. デザインリソースをコンポーネントバンドルに追加する
Lightning コンポーネントを Lightning ページおよび Lightning アプリケーションビルダーで使用できるようにするには、コンポーネントバンドルにデザインリソースを含めます。デザインリソースを使用して、Lightning アプリケーションビルダーに公開する属性を制御します。デザインリソースは .cmp リソースと同じフォルダに存在します。このリソースには、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>デザインリソースの名前は、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 にする必要があります。