Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jサードパーティフレームワークの使用
アプリケーションには起動ページが必要であり、このページは、lightning:container src 属性で指定します。通常、起動ページは index.html ですが、マニフェストファイルを静的リソースに追加することで別の起動ページを指定できます。次の例は、index.html の起動ページを使用する myApp (静的リソースとしてアップロードされたアプリケーション) を参照する簡単な Aura コンポーネントを示しています。
1<aura:component>
2 <lightning:container src="{!$Resource.myApp + '/index.html'}" />
3</aura:component>静的リソースのコンテンツはユーザ次第です。静的リソースには、アプリケーションを構成する JavaScript、関連付けられたすべてのアセット、および起動ページが含まれている必要があります。
他の Aura コンポーネントと同様に、カスタム属性を指定できます。この例は、同じ静的リソース (myApp) を参照し、3 つの属性 (messageToSend、messageReceived、error) を使用します。このコンポーネントには implements="flexipage:availableForAllPageTypes" が含まれるため、Lightning アプリケーションビルダでこのコンポーネントを使用して Lightning ページに追加できます。
1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2 <aura:attribute access="private" name="messageToSend" type="String" default=""/>
3 <aura:attribute access="private" name="messageReceived" type="String" default=""/>
4 <aura:attribute access="private" name="error" type="String" default=""/>
5
6 <div>
7 <lightning:input name="messageToSend" value="{!v.messageToSend}" label="Message to send to React app: "/>
8 <lightning:button label="Send" onclick="{!c.sendMessage}"/>
9 <br/>
10 <lightning:textarea value="{!v.messageReceived}" label="Message received from React app: "/>
11 <br/>
12 <aura:if isTrue="{! !empty(v.error)}">
13 <lightning:textarea name="errorTextArea" value="{!v.error}" label="Error: "/>
14 </aura:if>
15
16 <lightning:container aura:id="ReactApp"
17 src="{!$Resource.SendReceiveMessages + '/index.html'}"
18 onmessage="{!c.handleMessage}"
19 onerror="{!c.handleError}"/>
20 </div>
21</aura:component>コンポーネントには lightning:input 要素が含まれており、これによりユーザは messageToSend の値を入力できます。ユーザが [Send (送信)] を押すと、コンポーネントはコントローラメソッド sendMessage をコールします。このコンポーネントは、メッセージとエラーを処理するためのメソッドも提供します。
このスニペットにコンポーネントのコントローラや他のコードは含まれませんが、心配はいりません。メッセージとエラー処理の詳細と実装方法については、「Lightning コンテナコンポーネントからのメッセージの送信」および「コンテナのエラーの処理」で説明します。