Platform デベロッパー向けの新機能の学習

学習の目的

この単元を完了すると、次のことができるようになります。

• 地図マーカーやコントロールをカスタマイズする。
• Apex でカスタムメタデータを取得する新しいメソッドを実装する。
• スタイルを更新して BEM 表記を削除する。
• SOQL FIELDS 関数を使用してスキーマを調べる。
• Lightning Web コンポーネントクイックアクションを作成する。
• Lightning アプリケーションビルダーでイベントを設定する。

Salesforce 認定資格の概要

認定 Salesforce Platform デベロッパー資格を保有している場合、その認定資格を維持するためには期日までにこのモジュールを修了する必要があります。資格を維持するためのもう 1 つ重要な点は、Trailhead アカウントと Webassessor アカウントをリンクさせておくことです。

認定資格にご興味がございましたら、Salesforce Platform デベロッパーの資格を参照してください。

この 1 年間 (Spring '21、Summer '21、Winter '21) に多数の機能が強化されています。その中で特に重要なものについて説明します。

メモ

だれもがこのバッジを取得できますが、このモジュールは 認定 Platform デベロッパーの資格を持つ開発者向けに設計されています。以降の指示は、このレベルの知識と経験があることが前提となっています。 

lightning-map 基本コンポーネントでマーカーをカスタマイズして地図動作を制御する

地図のデザインと動作を自由に設定できます。地図ロケーションをカスタマイズして、標準の Google マップマーカーではなく SVG 画像を使用したり、ロケーションの周囲に影付きの円、長方形、または多角形を定義したりできます。ズームとドラッグ動作を変更または無効化したり、地図コントロールをすべて無効にして静的地図を作成したりできます。

対象: この変更は、Lightning Experience、Lightning エクスペリエンスビルダーサイト、Salesforce モバイルアプリケーションに適用されます。

理由: たとえば、会社の場所を顧客に示す簡単な位置表示地図を作成するとします。ズームと [地図] | [衛星写真] ボタンを削除し、ドラッグを無効化し、独自の SVG を追加してマーカーとして星を使用することができます。

方法: コンポーネントで、新しい options 属性を使用して、ユーザインターフェースコントロールを有効化または無効化するプロパティを指定します。この例では、コンポーネントの JavaScript で mapOptions オブジェクトを使用して、プロパティ値を設定しています。

<template>
  <lightning-map
    map-markers={mapMarkers}
    options={mapOptions}
  ></lightning-map>
</template>

mapOptions で disableDefaultUI プロパティを設定します。これにより、ズームが無効化され、[地図] | [衛星写真] ボタンが削除されます。地図のパン操作を無効化するには、draggable プロパティを設定します。

mapMarkers で、mapIcon プロパティをマーカー定義に追加し、星の SVG の path プロパティを指定します。fillColor および fillOpacity プロパティを追加して、画像の塗りつぶしの色と透明度を設定します。strokeWeight プロパティを追加して、SVG 画像の周囲に描かれるストロークの線の太さを設定します。必要に応じて、画像のサイズを決定するには、scale プロパティを設定します。

import { LightningElement } from 'lwc';
  
export default class LightningExampleMapCustomMarker extends LightningElement {
  mapOptions = {
    'disableDefaultUI': true // when true disables Map|Satellite, +|- zoom buttons
    'draggable': false, // when false prevents panning by dragging on the map
  };
  
  mapMarkers = [
    {
      location: {
        City: 'San Francisco',
        Country: 'USA',
        PostalCode: '94105',
        State: 'CA',
        Street: '425 Mission St',
      },
      mapIcon : {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
        fillColor: '#CF3476',
        fillOpacity: .5,
        strokeWeight: 1,
        scale: .10,
      }
    }
  ];
}

地図機能は lightning:map Aura 基本コンポーネントでも使用できます。

1 つの カスタムメタデータ型に対してすべてのカスタムメタデータレコードが含まれる対応付けまたは 1 つのレコードの sObject を取得する

Apex でカスタムメタデータレコードにアクセスするために Salesforce Object Query Language (SOQL) を記述する必要がなくなりました。カスタム設定へのアクセスに似た新しいメソッドが追加されました。これによって SOQL 制限がなくなるため、コードがクリーンで高速なものになります。

方法: 新しい Apex getAll()、getInstance(recordId)、getInstance(qualifiedApiName)、getInstance(developerName) メソッドを使用して、カスタムメタデータ型レコードを取得します。

• getAll()
  特定のカスタムメタデータ型のカスタムメタデータレコードが含まれる対応付けを返します。対応付けのキーはレコードの ID であり、対応付けの値はレコードの sObject です。
• getInstance(recordId)
  指定したレコード ID の 1 つのカスタムメタデータ型レコードの sObject を返します。
• getInstance(developerName)
  カスタムメタデータ型オブジェクトの、指定した developerName 項目の 1 つのカスタムメタデータ型レコードの sObject を返します。
• getInstance(qualifiedApiName)
  修飾された API 参照名の 1 つのカスタムメタデータ型レコードの sObject を返します。

例: 次の例では、developerName に FirstRecord が指定された Games_mdt という名前のカスタムメタデータ型の 1 つのレコードの sObject を返します。

Games__mdt mc = Games__mdt.getInstance('FirstRecord');

ダブルダッシュの BEM 表記が廃止

Lightning Design System でのダブルダッシュ (--) の BEM 表記は Summer '21 で廃止され、1 つのアンダースコア表記 (_) に置き換えられます。

理由: ダブルダッシュは、コメントを含む XML ファイルではサポートされません。この表記の変更は最初に 2017 年 5 月 25 日の Salesforce Lightning Design System (SLDS) リリース 2.3.1 で発表され、Winter '21 リリースノートでもう一度発表されました。

方法: Summer '21 では、ダブルダッシュのすべての BEM 表記が SLDS 2.13.0 以降のバージョンで使用できなくなります。SLDS 2.13.0 以降のバージョンで引き続きスタイルを機能させるには、CSS 内の -- を _ に置き換えます。たとえば、slds-button--brand を slds-button_brand に置き換えます。SLDS 2.12.2 以前のバージョンを使用している場合、そのバージョンに対しては何も変更が行われないため、スタイルは引き続き機能します。

VSCode を使用して開発している場合、SLDS Validator 拡張機能を使用してコード内の BEM 表記を修正してください。この拡張機能はスタンドアロンとしてだけでなく、Salesforce Extension Pack の一部としても使用できます。

SOQL FIELDS() 関数を使用してスキーマを調べる

Salesforce Object Query Language (SOQL) で、新しい FIELDS() 関数を使用して、クエリステートメント内に定義済みの項目のグルーピングを簡単に含めることができるようになりました。

理由: 以前のバージョンの SOQL では、取得する全項目のすべての名前を指定しないと項目を取得できませんでした。通常、この作業を行うには、まずオブジェクトを記述して項目のリストを取得するための API コールを実行 (またはオブジェクトマネージャを使用) し、次にそれらのすべての項目を選択するための SOQL クエリを作成するという手間が必要でした。さらに、そのようなクエリでは、多くのデータを取得する大規模で複雑なクエリの場合には文字制限を超える可能性がありました。新しい FIELDS() 関数を使用すると、事前に名前を把握していなくてもすべての項目を選択できます。これにより、サーバを往復して SOQL ステートメントを用意する必要がなくなり、調査や多くの入力作業も不要になります。また、クエリステートメントが簡素化され、オブジェクトのシェイプを簡単に探索できるようになります。

方法: SELECT ステートメントで FIELDS(ALL)、FIELDS(STANDARD)、FIELDS(CUSTOM) を使用します。 

• FIELDS(ALL)
  オブジェクトのすべての項目を選択します。
• FIELDS(CUSTOM)
  オブジェクトのすべてのカスタム項目を選択します。
• FIELDS(STANDARD)
  オブジェクトのすべての標準項目を選択します。

それぞれのケースにおいて、FIELDS() では、項目レベルのセキュリティが考慮されるため、自分にアクセス権がある項目しか表示されません。

メモ

• FIELDS() で返せるレコードは 200 件に制限されています。
• FIELDS(ALL) と FIELDS(CUSTOM) は無制限で API が事前に項目を特定できないため、Apex ではサポートされていません。

詳細は、『SOQL および SOSL リファレンス』の「FIELDS()」を参照してください。

Lightning Web コンポーネントを呼び出すクイックアクションを作成する

ユーザの時間を節約し、クリックの回数を減らすには、Lightning Web コンポーネントを呼び出すクイックアクションを作成します。レコードページで、ウィンドウにコンポーネントを表示する画面アクションを作成するか、クリックで実行されるヘッドレスアクションを作成します。

対象: この変更は、Developer Edition、Enterprise Edition、Essentials Edition、Professional Edition、Unlimited Edition の Lightning Experience デスクトップに適用されます。クイックアクションは Experience Cloud サイトでは使用できません。

理由: ユーザのワークフローに不可欠なカスタムコンポーネントに簡単にアクセスできるようにします。たとえば、ユーザが頻繁に領収書をレコードにアップロードする場合、.png ファイルのアップロードを促すカスタム lightning-file-upload コンポーネントを作成します。このコンポーネントは適切に機能しますが、ユーザはこのコンポーネントにアクセスするにはオブジェクトのページを開く必要があります。コンポーネントを画面アクションとして定義すると、ユーザはクイックアクションをクリックすることで、ページから移動することなくポップアップウィンドウで領収書をアップロードできます。

方法: Lightning Web コンポーネントをレコードページのクイックアクションとして設定するには、<component>.js-meta.xml でメタデータを定義します。lightning__RecordAction 対象を定義し、actionType に、ウィンドウで開く画面アクション場合は ScreenAction、クリックしたときに実行されるヘッドレスアクションの場合は Action を指定します。次に、ヘッドレスアクションの設定を示します。

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

ヘッドレスアクションを使用するには、公開された invoke() メソッドをコンポーネントに追加します。

import { LightningElement, api } from "lwc";
  
declare default class HeadlessSimple extends LightningElement {
  @api invoke() {
    console.log("Hi, I'm an action.");
  }
}

メモ

• 現在、LWC クイックアクションは、レコードページでのみサポートされています。
• Lightning Web コンポーネントのクイックアクションとしての使用は、Salesforce モバイルアプリケーションではサポートされていません。

Lightning アプリケーションビルダーでイベントを公開する

動的インタラクションの一環として、ページの Lightning Web コンポーネントのイベントを定義し、Lightning アプリケーションビルダーでそのイベントを公開できるようになりました。その後、システム管理者はアプリケーションビルダー UI で直接ソースコンポーネントとその対象のインタラクションを設定することで、イベントを設定できます。

対象: この変更は、Group Edition、Essentials Edition、Professional Edition、Enterprise Edition、Performance Edition、Unlimited Edition、Developer Edition の Lightning Experience に適用されます。

方法: コンポーネントからイベントを公開するには、コンポーネントの .js ファイルで標準 JavaScript CustomEvent を起動します。イベントを検出できるようにするには、コンポーネントの js-meta.xml ファイルで、動的インタラクションに関連する targetConfig サブタグを使用し、対象を lightning__AppPage に設定します。

event

動的インタラクションのイベントを公開し、Lightning アプリケーションビルダーのコンポーネントで使用できるようにします。event サブタグでは、name、label、description 属性がサポートされています。

• name
  コンポーネントの .js ファイルで定義されるイベントの名前。label 属性が定義されていない場合、Lightning アプリケーションビルダーのコンポーネントの使用可能なイベントのリストに name の値が表示されます。
• label
  管理しやすくするためのイベントの表示ラベル。
• description
  イベントの説明。Lightning アプリケーションビルダーのイベントの表示ラベルの i バブルに表示されます。

schema

イベントの形状を指定します。schema サブタグのコンテンツは、JSON 形式である必要があります。

カスタム取引先リストソースコンポーネントのサンプル js-meta.xml 設定ファイルを次に示します。これには itemselected イベントが含まれ、そのスキーマには .js ファイルで定義される apiName および recordId が含まれます。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Account List</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="apiName" type="String"/>
            <property name="listViewApiName" type="String"/>
            <event name="itemselected" label="Item Selected" description="This event fires when an item is selected.">
                <schema>
                    {
                        "type": "object",
                        "properties": {
                            "recordId": {
                                "type": "string",
                                "title": "Record ID",
                                "description": "Enter an 18-digit record ID."
                            },
                            "apiName": {
                                "type": "string"
                            }
                        }
                    }
                </schema>
            </event>
        </targetConfig>
    </targetConfigs>
    <description>Defines an event for an Account List component</description>
</LightningComponentBundle>

リソース

• Salesforce Spring '21 リリースノート: lightning-map 基本コンポーネントでのマーカーのカスタマイズおよび地図動作の制御
• Salesforce Spring '21 リリースノート: Apex: 新規および変更された項目
• Apex リファレンスガイド: カスタムメタデータ型のメソッド
• Salesforce Spring '21 リリースノート: ダブルダッシュの BEM 表記の廃止
• Salesforce Spring '21 リリースノート: SOQL
• SOQL および SOSL リファレンス: Fields()
• Salesforce Summer '21 リリースノート: Lightning Web コンポーネントを呼び出すクイックアクションの作成
• Lightning Web コンポーネント開発者ガイド: クイックアクション
• Salesforce Winter '22 リリースノート: Lightning アプリケーションビルダーでのイベントの公開

ハンズオン Challenge の準備

下記のハンズオン Challenge では、新しいカスタムメタデータ getInstance メソッドを使用して SOQL を置き換えます。

ハンズオン Challenge に使用する組織を起動し、次の手順を実行します。

1. カスタムメタデータ型を作成します。
   • 表示ラベル: Country Code (国コード)
   • 表示ラベル (複数形): Country Codes (国コード)
2. カスタム項目を追加します。
   • データ型: テキスト
   • 項目の表示ラベル: Country Code (国コード)
   • 文字数: 3
3. 国コードを入力します。
   • 表示ラベル: Canada (カナダ)
   • Country Code (国コード): CAN

これで設定は完了です。

Apex クラスの以下のコードブロックを使用してハンズオン Challenge に取り組みます。このコードでは、SOQL を使用して [Country Code (国コード)] カスタムメタデータから国コードを取得しています。そこで、新しい getInstance メソッドを使用するようにコードを変更します。

CountryCodeHelper Apex クラス:

public class CountryCodeHelper {
  public static string getCountryCode(String country) {
    Country_Code__mdt countryCode = [
      SELECT Id, MasterLabel, Country_Code__c
      FROM Country_Code__mdt
      WHERE MasterLabel = :country
      LIMIT 1
    ];
  
    return countryCode.Country_Code__c;
  }
}