Lightning Out のマークアップ
Lightning Out では、ページ上にシンプルなマークアップがいくつか必要です。また、有効化には簡単な JavaScript 関数を 2 つ使用します。
Lightning Out に固有のものは、マークアップと Lightning Out ライブラリの JavaScript 関数のみです。その他のすべては、すでにご存じで愛用されている Lightning Web コンポーネントコードです。
Lightning Out と使用するために発信元サーバを有効にするには、スタンドアロン Aura 連動関係アプリケーションを提供しているアプリケーションまたはページに Lightning Out JavaScript ライブラリを含めます。ライブラリを含めるには、1 行のマークアップが必要です。
ホストには自分のカスタムドメインを使用します。サンプルソースコードから他者のインスタンスをコピーして貼り付けることはやめてください。これを行うと、Salesforce インスタンスと Lightning Out ライブラリの読み込み元のインスタンスとの間でバージョンの不一致があるたびにアプリケーションが破損します。これは、Salesforce の定期アップグレード中に、年間 3 回以上起こっています。そうならないようにしてください。
$Lightning.use() 関数を使用して、Lightning コンポーネントフレームワークとスタンドアロン Aura 連動関係アプリケーションの読み込みと初期化を行います。
$Lightning.use() 関数は 4 つの引数を取ります。
| 名前 | 型 | 説明 |
|---|---|---|
appName | string | 必須。スタンドアロン Aura 連動関係アプリケーションの名前 (名前空間を含む)。例: "c:expenseAppDependencies" |
callback | function | Lightning コンポーネントフレームワークとアプリケーションが完全に読み込まれた後にコールされる関数。コールバックは引数を受信しません。通常、このコールバックで $Lightning.createComponent() をコールしてアプリケーションをページに追加します (次のセクションを参照)。また、別の方法で表示を更新するか、他の方法で連動関係アプリケーションの準備が整ったことに応答する場合もあります。 |
lightningEndPointURI | string | Salesforce インスタンス上の Lightning ドメインの URL。例: https://myDomainName.lightning.force.com。 |
authToken | string | 有効な Salesforce セッションのセッション ID または OAuth アクセストークン。独自のコード内でこのトークンを取得する必要があります。Lightning Out では認証は処理されません。「Lightning Out からの認証」を参照してください。 |
appName は必須です。他の 3 つのパラメータは省略可能です。通常、4 つのパラメータすべてを指定します。
ページ上で、複数のスタンドアロン Aura 連動関係アプリケーションを使用することはできません。$Lightning.use() を複数回コールすることはできますが、どのコールでも同じ連動関係アプリケーションを参照する必要があります。
$Lightning.createComponent() 関数を使用して、ページにコンポーネントを追加し、有効にします。
$Lightning.createComponent() 関数は 4 つの引数を取ります。
| 名前 | 型 | 説明 |
|---|---|---|
componentName | string | 必須。ページに追加する Lightning Web コンポーネントの名前 (名前空間を含む)。例: "c:newExpenseForm" |
attributes | Object | 必須。作成時にコンポーネントに設定する属性。例: { name: theName, amount: theAmount }コンポーネントに属性が必要ない場合は、空のオブジェクト { } を渡します。 |
domLocator | Element または string | 必須。作成したコンポーネントを挿入するページ上の位置を示す DOM 要素または要素 ID。 |
callback | function | コンポーネントが追加されてページ上で有効になった後にコールされる関数。コールバックは、作成されたコンポーネントを唯一の引数として受信します。 |
ページに複数の Lightning Web コンポーネントを追加できます。つまり、複数の DOM ロケータを使用して $Lightning.createComponent() を複数回コールすることによって、ページの異なる部分にコンポーネントを追加できます。この方法で作成された各コンポーネントは、ページのスタンドアロン Aura 連動関係アプリケーション内で指定する必要があります。
内部的には、$Lightning.createComponent() は Aura で標準の $A.createComponent() 関数をコールします。DOM ロケータ以外の引数は同じです。さらに、コールを Lightning Out セマンティックでラップしている以外は動作も同じです。
関連トピック