進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

取引先の地図表示の作成

学習の目的

この単元を完了すると、次のことができるようになります。
  • プロジェクトをスクラッチ組織と同期するために使用する Salesforce CLI コマンドについて説明する。
  • 権限セットを作成する Salesforce CLI コマンドについて説明する。
  • Aura コンポーネントを使用してアプリケーションを作成する方法を理解する。

作成する内容

このステップでは、地理位置情報アプリケーションのすべての機能をまとめた最終的なコンポーネントを作成します。取引先の住所を地図上のマーカーとして視覚化する Aura コンポーネントを作成し、アプリケーションに移動するためのカスタムタブも作成します。さらに、権限セットを使用して、ユーザにアプリケーションへのアクセス権を付与します。

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

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

  1. aura フォルダに AccountMap コンポーネントを作成します。
    sfdx force:lightning:component:create -n AccountMap -d force-app/main/default/aura
  2. 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. AccountMapController.js を開き、内容を次のコードに置き換え、ファイルを保存します。
    ({
        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 +
                        '<br/>' +
                        'Website: ' + account.Website
                    ),
                    'icon': 'standard:location'
                };
                mapMarkers.push( marker );
            }
            component.set( 'v.mapMarkers', mapMarkers );
        }
    })

    クライアント側コントローラの onAccountsLoaded 関数は、イベントデータを <lightning:map> コンポーネントで想定される形式に変換します。

  4. 新しいコードをスクラッチ組織に転送します。
    sfdx force:source:push

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

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

  1. aura フォルダに AccountLocator コンポーネントを作成します。
    sfdx force:lightning:component:create -n AccountLocator -d force-app/main/default/aura
  2. 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. 新しいコードをスクラッチ組織に転送します。
    sfdx force:source:push

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

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

  1. スクラッチ組織を開きます。
    sfdx force:org:open
  2. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] をクリックします。
  3. [Lightning コンポーネントタブ] セクションで、[新規] をクリックして、詳細を入力します。
    • Lightning コンポーネント: c:AccountLocator
    • タブの表示ラベル: Account Locator (取引先ロケータ)
    • タブ名: Account_Locator
    • タブスタイル: 虫眼鏡アイコンをクリックして、タブアイコンに [地図] を選択します。
    [新規 Lightning コンポーネントタブ] ダイアログ
  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. [割り当ての管理] をクリックし、[割り当てを追加] をクリックします。
  2. スクラッチ組織ユーザ名 (User, User) の横にあるチェックボックスをオンにして、[割り当て] をクリックし、[完了] をクリックします。

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

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

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

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

package.xml
**/jsconfig.json
**/.eslintrc.json
**/profiles

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

sfdx force:source:pull

force:source:pull コマンドからの出力は、次のようになります。

=== Pulled Source
STATE FULL NAME       TYPE          PROJECT PATH
───── ─────────────── ───────────── ────────────────────────────────────────────────────────────────────────
Add   Account_Locator CustomTab     force-app/main/default/tabs/Account_Locator.tab-meta.xml
Add   Geolocation     PermissionSet force-app/main/default/permissionsets/Geolocation.permissionset-meta.xml

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

アプリケーションの検証

開発で使用したスクラッチ組織を使用してテストを行うことももちろんできますが、常に新しいスクラッチ組織で開始することをお勧めします。新しいスクラッチ組織を使用することで、すべてのソースが組織の外部に適切に置かれていることを確認できます。

  1. 新しいスクラッチ組織を作成します。
    sfdx force:org:create -f config/project-scratch-def.json -a GeoTestOrg
  2. ローカルのソースとメタデータをスクラッチ組織に転送します。
    sfdx force:source:push -u GeoTestOrg
  3. 権限セットを割り当てます。
    sfdx force:user:permset:assign -n Geolocation -u GeoTestOrg
  4. 組織にサンプルデータを読み込みます。
    sfdx force:data:tree:import -f data/Account.json -u GeoTestOrg
  5. 組織を開きます。
    sfdx force:org:open -u GeoTestOrg
  6. [Account Locator (取引先ロケータ)] タブをテストし、期待どおりに動作することを確認します。アプリケーションランチャーで、[Account Locator (取引先ロケータ)] を見つけて選択します。
[Account Search (取引先検索)] コンポーネント、[Account List (取引先リスト)] コンポーネント、[Account Map (取引先地図)] コンポーネントを備えた [Account Locator (取引先ロケータ)] コンポーネント

おめでとうございます。スクラッチ組織と Salesforce CLI を使用して、新しいアプリケーションの作成とテストに成功しました。すべてをソース制御リポジトリに追加することを忘れないでください。