取引先の地図表示の作成とすべての連携

• プロジェクトをスクラッチ組織と同期するために使用する Salesforce CLI コマンドについて説明する。
• 権限セットを作成する Salesforce CLI コマンドについて説明する。
• Aura コンポーネントを使用してアプリケーションを作成する方法を理解する。

取引先地図 Aura コンポーネントの作成

このコンポーネントでは、<lightning:map> コンポーネントを使用して、地図上に取引先を表示します。

1. aura フォルダーに AccountMap コンポーネントを作成します。

   sf lightning generate component --name AccountMap --output-dir force-app/main/default/aura

2. force-app/main/default/aura/AccountMap/AccountMap.cmp を開き、内容を次のコードに置き換え、ファイルを保存します。

   <aura:component>
       <aura:handler event="c:AccountsLoaded" action="{!c.onAccountsLoaded}"/>
       <aura:attribute name="mapMarkers" type="Map[]"/>
       <lightning:card title="Account Map" iconName="action:map">
           <lightning:map mapMarkers="{!v.mapMarkers}"/>
       </lightning:card>
   </aura:component>

   このコンポーネントは AccountsLoaded イベントをリスンし、イベントデータを地図マーカーとして表示します。
   
   
3. force-app/main/default/aura/AccountMap/AccountMap.cmp を開き、内容を次のコードに置き換え、ファイルを保存します。

   ({
       onAccountsLoaded: function( component, event, helper ) {
           var mapMarkers = [];
           var accounts = event.getParam( 'accounts' );
           for ( var i = 0; i < accounts.length; i++ ) {
               var account = accounts[i];
               var marker = {
                   'location': {
                       'Street': account.BillingStreet,
                       'City': account.BillingCity,
                       'PostalCode': account.BillingPostalCode
                   },
                   'title': account.Name,
                   'description': (
                       'Phone: ' + account.Phone +
                       'Website: ' + account.Website
                   ),
                   'icon': 'standard:location'
               };
               mapMarkers.push( marker );
           }
           component.set( 'v.mapMarkers', mapMarkers );
       }
   })

   クライアント側コントローラーの onAccountsLoaded 関数は、イベントデータを <lightning:map> コンポーネントで想定される形式に変換します。
   
   
4. 新しいコードをスクラッチ組織にデプロイします。

   sf project deploy start

取引先ロケーター Aura コンポーネントの作成

これはメインコンポーネントです。このコンポーネントを使用して Lightning ページ、Salesforce モバイル、カスタムタブでエンドユーザーにアプリケーションを表示します。また、これはこのプロジェクトで作成する最後のコンポーネントでもあります!

1. aura フォルダーに AccountLocator コンポーネントを作成します。

   sf lightning generate component --name AccountLocator --output-dir force-app/main/default/aura

2. force-app/main/default/aura/AccountLocator/AccountLocator.cmp を開き、内容を次のコードに置き換え、ファイルを保存します。

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
       <lightning:layout horizontalAlign="space" multipleRows="true">
           <lightning:layoutItem size="12"
                                 mediumDeviceSize="12"
                                 padding="around-small">
               <c:AccountSearch/>
           </lightning:layoutItem>
           <lightning:layoutItem size="12"
                                 mediumDeviceSize="6"
                                 padding="around-small">
               <c:AccountList/>
           </lightning:layoutItem>
           <lightning:layoutItem size="12"
                                 mediumDeviceSize="6"
                                 padding="around-small">
               <c:AccountMap/>
           </lightning:layoutItem>
       </lightning:layout>
   </aura:component>

   このコンポーネントは、このプロジェクトで作成してきた他のコンポーネントで構成されています。Lightning コンポーネントフレームワークの 2 つの強力な機能が、コンポーネントのカプセル化とコンポーネントの再利用です。コンポーネントを、細分化された複数のコンポーネントで構成することで、さまざまなコンポーネントとアプリケーションを作成できます。
   
   
3. 新しいコードをスクラッチ組織にデプロイします。

   sf project deploy start

[Account Locator (取引先ロケーター)] カスタムタブの作成

Lightning Experience デスクトップと Salesforce モバイルの両方で Aura コンポーネントを表示する簡単な方法は、カスタムタブを使用することです。このステップを実行すると、このカスタムタブに移動することでアプリケーションにアクセスできるようになります。

1. スクラッチ組織を開きます。

   sf org open

2. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] をクリックします。
3. [Lightning コンポーネントタブ] セクションで、[新規] をクリックして、詳細を入力します。
   
   
   • Lightning コンポーネント: c:AccountLocator
   • タブの表示ラベル: Account Locator (取引先ロケーター)
   • タブ名: Account_Locator
   • タブスタイル: 虫眼鏡アイコンをクリックして、タブアイコンに [地図] を選択します。
   • 説明: Custom tab for Account Locator (取引先ロケーターのカスタムタブ)。
     
     
4. [次へ] をクリックします。
5. [1 つのタブ表示をすべてのプロファイルに適用する] で、[タブを隠す] を選択します。
6. [保存] をクリックします。

地理位置情報権限セットの作成

地理位置情報アプリケーションにアクセスできるユーザーを制御するために、権限セットを作成し、[Account Locator (取引先ロケーター)] タブの表示を許可します。

1. [設定] から、[クイック検索] ボックスに「権限セット」と入力し、[権限セット] をクリックします。
2. [新規] をクリックして、次の詳細を入力します。
   
   
   • 表示ラベル: Geolocation (地理位置情報)
   • API 参照名: Geolocation
   • 説明: Grants access to the Account Geolocation app (取引先地理位置情報アプリケーションへのアクセス権を付与します)
3. [保存] をクリックします。
4. [アプリケーション] で、[オブジェクト設定] をクリックします。
5. [Account Locator (取引先ロケーター)] をクリックします。
6. [編集] をクリックします。
7. [タブの設定] で [選択可能] と [参照可能] の両方を選択し、[保存] をクリックします。

次に、権限セットを自分に割り当てます。後のステップで、Salesforce CLI を使用して権限セットの割り当てを自動化する方法について説明します。

1. [設定] から、[クイック検索] ボックスに Users と入力し、[ユーザー] をクリックします。
2. テーブルで User, User というフルネームのユーザーをクリックします。
3. [権限セットの割り当て] をクリックします。
4. [権限セットの割り当て] セクションで、[割り当ての編集] をクリックします。
5. 地理位置情報権限セットを [有効化された権限セット] に追加します。 
6. [保存] をクリックします。 

User User は、スクラッチ組織のシステム管理者に与えられるデフォルトの氏名です。別の名前に変更したい場合は、[設定] で変更してください。  

メタデータのマジック: プロジェクトへの変更の取り込み

このモジュールでまでは、ローカルで作業して、メタデータをスクラッチ組織に転送していました。このステップでは、スクラッチ組織で直接いくつかの変更を行います。ここからがマジックです。1 つのコマンドで、スクラッチ組織で変更したすべてのメタデータをローカルプロジェクトに取り込みます。

ただし、それを行う前に、一部のメタデータの同期を無視するように .forceignore ファイルを設定する必要があります。[Account Locator (取引先ロケーター)] タブを作成し、すべてのプロファイルにその表示設定を割り当てたときに、スクラッチ組織の自動変更追跡によって、プロファイルが変更されたことが検出されています。そのため、次回、スクラッチ組織からローカルプロジェクトに同期するためにメタデータを取得するときには、CLI はプロファイルメタデータを取得しようとします。プロファイルは、地理位置情報アプリケーションに関連がなく、このプロジェクトのソース制御リポジトリで追跡すべきものではないため、Salesforce CLI がプロファイル変更を無視するように指定する必要があります。

地理位置情報プロジェクトのルートディレクトリで、.forceignore ファイルを開き、ファイル内の新しい行として **/profiles を追加し、ファイルを保存します。.forceignore ファイルは次のようになります。

# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
#
package.xml
# LWC configuration files
**/jsconfig.json
**/.eslintrc.json
# LWC Jest
**/__tests__/**
# Profiles
**/profiles

これでメタデータを取り込む準備ができました。コマンドウィンドウで、スクラッチ組織で行った変更をローカルプロジェクトに取り込みます。

sf project retrieve start

project retrieve start コマンドからの出力は、次のようになります。

Retrieving v58.0 metadata from test-t7e5za@example.com using the v58.0 SOAP API
Preparing retrieve request... Succeeded
Retrieved Source
================================================================================================================
| State   Name            Type          Path
| ─────── ─────────────── ───────────── ────────────────────────────────────────────────────────────────────────
| Created Account_Locator CustomTab     force-app/main/default/tabs/Account_Locator.tab-meta.xml
| Created Geolocation     PermissionSet force-app/main/default/permissionsets/Geolocation.permissionset-meta.xml

プロファイルの変更は .forceignore で無視されるため、取り込まれていません。