Aura コンポーネントの作成

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Trail Together の動画

エキスパートの説明を見ながらこのステップを進めて行きたい場合は、Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 02:19 分から開始されます。)

Aura コンポーネントを作成してレコードページに追加する

Aura コンポーネントは、マークアップ、JavaScript、および CSS を組み合わせたものです。最初に、コンポーネントバンドルを作成します。

1. 開発者コンソールで、[File (ファイル)] | [New (新規)] | [Lightning Component (Lightning コンポーネント)] を選択します。
   
2. コンポーネント名に MyContactList と入力します。
   
3. [Lightning Record Page (Lightning レコードページ)] をオンにして、[Submit (送信)] をクリックします。
   
4. aura:component タグに Apex コントローラーへの参照 controller="MyContactListController" を追加します。aura:component は次のようになります。
   <aura:component controller="MyContactListController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
5. 次のコードをコンポーネントの 2 行目に追加します。
   

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="Account" type="Account" />
   <aura:attribute name="Contacts" type="Contact" />
   <aura:attribute name="Columns" type="List" />
   <force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.Account}"
                     layoutType="FULL"
                     />
   <lightning:card iconName="standard:contact" title="{! 'Contact List for ' + v.Account.Name}">
       <!-- Contact list goes here -->
   </lightning:card>

   aura:attribute は、Aura コンポーネント内にデータを保存するために使用します。この場合は現在の取引先レコードページの ID です。
   
   コードで属性にアクセスするには、値プロバイダーの v. を v.recordId または v.Account のように使用します。値プロバイダーは、関連する値を一緒にカプセル化してデータにアクセスする方法であり、オブジェクトがプロパティやメソッドをカプセル化する仕組みに似ています。
   
   このコンポーネントは Lightning Data Service の force:recordData も使用して現在のレコードの項目を取得し、Account という属性に保存するため、取引先の名前をコンポーネントのタイトルとして表示できます。
   
   Lightning フレームワークには、Lightning 基本コンポーネントと呼ばれる UI のビルディングブロックが含まれます。lightning:card は、データを表示するための基本コンポーネントです。aura 属性の Account から取引先名を v.Account.Name として取り込んだものがカードのタイトルになります。
   
6. [File (ファイル)] | [Save (保存)] を選択します。
   
7. アプリケーションランチャー で、[Accounts (取引先)] を見つけて開きます。
   
8. [Recently Viewed (最近参照したデータ)] リストから [All Accounts (すべての取引先)] に切り替え、United Oil & Gas Corp の取引先をクリックして開きます。
   
9. [Setup (設定)] 歯車をクリックし、[Edit Page (編集ページ)] を選択してアプリケーションビルダーを起動します。
   
10. カスタムコンポーネントリストからコンポーネントをドラッグして、右側の列の上部、活動コンポーネントの上にドロップします。
    
11. [Save (保存)] ボタンをクリックします。
    
12. [Activate (有効化)] をクリックし、[Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
    
13. [Desktop (デスクトップ)] をクリックして、[Next (次へ)] をクリックします。
    
14. [Save (保存)] をクリックし、左上の [Back (戻る)] をクリックしてレコードページに戻ります。