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

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

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

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

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

Lightning アプリケーションビルダーは現在、パイロットプログラムを通じて一部のお客様が使用できます。このパイロットプログラムに参加する方法については、Salesforce にお問い合わせください。パイロットプログラムへの参加には、追加の契約条件が適用される場合があります。パイロットプログラムは変更される可能性があるため、このパイロットプログラムへの参加や、特定の期間にこの機能を有効化することは保証できません。このドキュメント、プレスリリース、または公式声明で参照されている未リリースのサービスまたは機能は、現在利用できず、提供が遅れたり中止されたりする可能性があります。サービスのご購入をご検討中のお客様は、現在利用可能な機能に基づいて購入をご決定ください。

メモ

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

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

シンプルな「Hello World」コンポーネントのサンプルコードを次に示します。
1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component implements="flexipage:availableForAllPageTypes">
2    <aura:attribute name="greeting" type="String" default="Hello" />
3    <aura:attribute name="subject" type="String" default="World" />
4
5    <div style="box">
6      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7    </div>
8</aura:component>

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

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

Lightning コンポーネントの属性をシステム管理者が Lightning アプリケーションビルダーで編集できるようにするには、属性の design:attribute ノードをデザインリソースに追加します。

コンポーネント定義で必須とマークされた属性は、デフォルト値が割り当てられている場合を除き、Lightning アプリケーションビルダーで自動的にユーザに表示されます。コンポーネント定義内のデフォルト値が設定された必須属性と必須とマークされていない属性は、デザインリソースで指定する必要があります。指定しないとユーザには表示されません。

「Hello World」コンポーネントと一緒にバンドルするデザインリソースを次に示します。
1swfobject.registerObject("clippy.codeblock-1", "9");<design:component>
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" type="picklist" datasource="Hello,Hola,Bienvenue,Shalom" />
4</design:component>

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

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

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

「Hello World」コンポーネントと一緒に表示するシンプルな赤い円の SVG リソースの例を次に示します。
1swfobject.registerObject("clippy.codeblock-2", "9");<?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 にする必要があります。