Salesforce 管理者向け：Lightning アプリケーションビルダーで強力な UI を構築するための完全ガイド

日付:

背景と応用シナリオ

Salesforce の世界では、ユーザーエクスペリエンス (User Experience) が生産性に直結します。かつての Salesforce Classic 環境では、ページのカスタマイズは Page Layouts (ページレイアウト) に大きく依存しており、UI の柔軟性には限界がありました。しかし、Lightning Experience の登場により、その状況は一変しました。そして、その変革の中核を担うのが Lightning App Builder (Lightning アプリケーションビルダー) です。

Lightning App Builder は、コーディングの知識がなくても、ドラッグ＆ドロップの直感的な操作で、ユーザーのニーズに合わせた柔軟で動的なページを構築できる、管理者にとって最も強力なツールの一つです。このツールを使えば、単なる情報の表示場所としてだけでなく、ユーザーの業務プロセスをガイドし、必要な情報を適切なタイミングで提供する「スマートな作業空間」を作り出すことが可能になります。

Salesforce 管理者として、以下のようなシナリオで Lightning App Builder を活用できます。

アプリケーションホームページの作成

特定の業務やチームに特化した情報を集約したポータルページを作成します。例えば、営業チーム向けに「今日の行動」「重要なお知らせ」「パフォーマンスダッシュボード」「最近参照したリード」などを一つのページにまとめることで、ログイン直後から効率的に業務を開始できます。

動的なレコードページのカスタマイズ

商談レコードページを例にとってみましょう。商談フェーズが「初期段階」の時は、競合情報や主要な連絡先コンポーネントを強調表示し、フェーズが「最終交渉」に進んだら、承認履歴や見積もり関連のコンポーネントを自動的に表示させる、といった動的な制御が可能です。これにより、ユーザーは現在の状況に応じて最も関連性の高い情報に集中できます。

特定用途のアプリケーションページの作成

レコードに紐付かない、独立したカスタムページを作成できます。例えば、四半期ごとの目標達成状況を複数のレポートやダッシュボードを組み合わせて可視化する「業績レビューページ」や、新規従業員向けのオンボーディング情報を集約した「新人向けスタートページ」などが考えられます。

このように、Lightning App Builder は、管理者がユーザーの業務を深く理解し、それを Salesforce の UI に直接反映させるための強力な武器となります。

原理説明

Lightning App Builder の強力な機能は、いくつかの重要なコンセプトに基づいています。これらを理解することで、ツールのポテンシャルを最大限に引き出すことができます。

３つのページタイプ

前述の通り、Lightning App Builder では主に３種類のページを作成できます。

  • アプリケーションページ (App Page): 特定のオブジェクトに紐付かない、独立したページです。ダッシュボードやレポート、カスタムコンポーネントを自由に配置して、情報集約型のポータルを作成するのに適しています。
  • ホームページ (Home Page): ユーザーがログインした際や、ナビゲーションメニューの「ホーム」をクリックした際に表示されるページです。プロファイルごとに異なるホームページを割り当てることで、役割に応じた最適なスタート画面を提供できます。
  • レコードページ (Record Page): 取引先や商談といった、特定のオブジェクトのレコードを表示するためのページです。このページをカスタマイズすることで、従来のページレイアウトだけでは実現できなかった、リッチでインタラクティブなレコードビューを作成できます。

コンポーネントベースのアーキテクチャ

Lightning App Builder のインターフェースは、左側の「コンポーネントパネル」、中央の「キャンバス」、右側の「プロパティパネル」の３つで構成されています。ページは、パズルのようにコンポーネント (Components) を組み合わせて構築されます。

  • 標準コンポーネント (Standard Components): Salesforce が標準で提供しているコンポーネントです。「レコードの詳細」や「関連リスト」、「Chatter」、「レポートグラフ」など、すぐに使える便利な部品が多数用意されています。
  • カスタムコンポーネント (Custom Components): 開発者が Lightning Web Components (LWC) や Aura Components を用いて作成した、組織独自のコンポーネントです。特定の業務要件を満たすために開発されたコンポーネントを、管理者はドラッグ＆ドロップでページに追加できます。
  • AppExchange コンポーネント: Salesforce の公式マーケットプレイスである AppExchange からインストールしたサードパーティ製のコンポーネントです。これにより、開発リソースがなくても多機能なコンポーネントを簡単に追加できます。

ダイナミック Lightning ページ

これこそが Lightning App Builder の真骨頂です。ダイナミック Lightning ページ (Dynamic Lightning Pages) は、静的な情報表示から脱却し、ユーザーのコンテキストに応じてページの表示内容を動的に変化させる機能群です。

動的フォーム (Dynamic Forms)

従来、項目の表示/非表示や必須設定はページレイアウトで一元管理されていましたが、Dynamic Forms を使うことで、項目や項目セクションを個別のコンポーネントとしてページ上に配置できます。さらに、特定の条件（例：商談のフェーズが「完了」である）に基づいて、項目やセクション全体の表示/非表示を切り替えることが可能です。これにより、長大で複雑なページレイアウトを、ユーザーにとってシンプルで分かりやすい UI に変えることができます。

動的アクション (Dynamic Actions)

レコードページ上のアクションボタン（「編集」「削除」「カスタムアクション」など）も、条件に応じて表示/非表示を制御できます。例えば、「承認申請」ボタンは、特定のプロファイルのユーザーが、特定の条件を満たしたレコードを閲覧している場合にのみ表示させるといった設定が可能です。これにより、不要なアクションを非表示にし、ユーザーの誤操作を防ぎ、アクションバーをすっきりと保つことができます。

コンポーネントの表示ルール (Component Visibility Rules)

ページ上のあらゆるコンポーネント（標準、カスタム問わず）に対して、表示条件を設定できます。レコードの項目の値、デバイスの種類（デスクトップ or モバイル）、ユーザーのプロファイルや権限など、様々な条件を組み合わせて、「いつ、誰に、何を見せるか」をきめ細かく制御できます。これにより、単一のページでも、閲覧するユーザーやデータの状況によって、全く異なる情報を提供することが可能になります。

サンプルコード：カスタムコンポーネントの理解

Salesforce 管理者として、直接コードを書くことは少ないかもしれません。しかし、開発者が作成したカスタムコンポーネントがどのようにして Lightning App Builder で利用可能になるのかを理解しておくことは、開発者との円滑なコミュニケーションや、要件定義において非常に重要です。

開発者が Lightning Web Component (LWC) を作成する際、そのコンポーネントを Lightning App Builder で使えるようにするために、設定ファイル（メタデータ XML ファイル）を定義します。以下は、developer.salesforce.com で紹介されている、非常にシンプルな例です。

この helloWorld.js-meta.xml ファイルは、helloWorld という名前の LWC を定義し、Lightning App Builder でどのように振る舞うかを指定しています。 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>58.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
   <targetConfigs>
       <targetConfig targets="lightning__RecordPage">
           <property name="greeting" type="String" default="Hello" label="Greeting Message"/>
           <objects>
               <object>Account</object>
               <object>Contact</object>
           </objects>
       </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

コードの解説

  • <isExposed>true</isExposed>: このタグが true に設定されていることで、このコンポーネントが Salesforce 組織内で「公開」され、Lightning App Builder のコンポーネントパネルに表示されるようになります。
  • <targets>: このセクションでは、コンポーネントを配置できるページの種類を指定します。この例では、lightning__AppPage (アプリケーションページ)、lightning__RecordPage (レコードページ)、lightning__HomePage (ホームページ) の３種類すべてに配置可能であることを示しています。
  • <targetConfigs>: ここでは、特定のターゲット（この場合はレコードページ）に対して、管理者が設定できるプロパティを定義します。
  • <property>: greeting という名前のプロパティを定義しています。管理者は Lightning App Builder のプロパティパネルで、この `greeting` の値（ラベルは "Greeting Message"）を自由に変更できます。例えば、"Hello" の代わりに "Welcome" と入力できます。
  • <objects>: このコンポーネントを配置できるオブジェクトを制限しています。この例では、取引先 (Account) と取引先責任者 (Contact) のレコードページでのみ利用可能となります。

このように、管理者はコード自体を触る必要はありませんが、メタデータがどのように機能するかを知ることで、「このコンポーネントに、管理画面から変更できる設定項目を追加してほしい」といった、より具体的で的確な要望を開発者に伝えることができるようになります。

注意事項

Lightning App Builder は非常に強力ですが、効果的に利用するためにはいくつかの注意点を理解しておく必要があります。

権限 (Permissions)

Lightning ページを作成・編集するには、プロファイルまたは権限セットで「アプリケーションのカスタマイズ (Customize Application)」権限が必要です。また、作成したページを有効化（ユーザーに割り当て）する際にも、適切な権限が求められます。

パフォーマンス (Performance)

ページの自由度が高いからといって、コンポーネントを無秩序に配置すると、ページの読み込み速度が著しく低下する可能性があります。特に、多くのデータを取得するカスタムコンポーネントや、複雑な表示ルールを持つコンポーネントを多用すると、ユーザーエクスペリエンスを損なう原因となります。Lightning App Builder 内にある「分析 (Analyze)」ボタンをクリックすると、ページの予測読み込み時間を評価し、パフォーマンス改善のためのヒントを得ることができます。常にパフォーマンスを意識したページ設計を心がけましょう。

リリース管理 (Deployment)

作成した Lightning ページは FlexiPage というメタデータ型として保存されます。そのため、Sandbox 環境で作成・テストしたページを本番環境に移行する際は、変更セット (Change Sets) や Salesforce DX、その他の DevOps ツールを利用してデプロイする必要があります。手動での再作成はミスを誘発しやすいため、必ず適切なリリースプロセスを経て展開してください。

制限事項 (Limitations)

Dynamic Forms は非常に便利ですが、まだすべての標準オブジェクトでサポートされているわけではありません（例えば、ToDo や行動オブジェクトなど）。利用したいオブジェクトがサポート対象であるか、事前に Salesforce のヘルプドキュメントで確認することが重要です。また、１つのページに設定できるコンポーネントの表示ルールの上限など、プラットフォーム上の制限も存在します。

まとめとベストプラクティス

Lightning App Builder は、Salesforce 管理者が宣言的（Declarative）な手法で、ユーザー中心の高度な UI/UX を実現するための不可欠なツールです。コンポーネントの組み合わせとダイナミック機能を駆使することで、あらゆる業務シナリオに最適化された、効率的で使いやすいアプリケーションを構築できます。

最後に、Lightning App Builder を最大限に活用するためのベストプラクティスをいくつか紹介します。

  1. 計画がすべて: 作成を始める前に、そのページを誰が、どのような目的で、どんな情報を見るために使うのかを明確に定義しましょう。ワイヤーフレーム（簡単な設計図）を描いて、コンポーネントの配置や情報の流れを視覚化することをお勧めします。
  2. ダイナミック機能でシンプルに: 情報を詰め込みすぎるのではなく、Dynamic Forms やコンポーネント表示ルールを活用して、ユーザーが必要とする情報だけを適切なタイミングで表示するように設計しましょう。ページをクリーンに保つことが、ユーザーの混乱を防ぎます。
  3. モバイルを忘れない: Lightning App Builder には、デスクトップとモバイルの表示を切り替えるプレビュー機能があります。多くのユーザーがモバイルデバイスから Salesforce を利用することを念頭に置き、必ずモバイルでの表示崩れがないかを確認しましょう。
  4. 徹底的にテストする: ページを有効化する前に、対象となる複数のプロファイルのテストユーザーで必ず動作確認を行ってください。表示ルールや動的アクションが意図通りに機能するか、異なるデータパターンでどのように表示されるかを検証することが不可欠です。
  5. パフォーマンスを監視する: ページをリリースした後も、定期的にパフォーマンスをチェックしましょう。ユーザーから「ページの表示が遅い」というフィードバックがあった場合は、「分析」機能を再度実行し、ボトルネックとなっているコンポーネントを特定・改善します。

これらのベストプラクティスを実践することで、あなたは Salesforce 管理者として、組織の生産性を飛躍的に向上させる、価値あるユーザーエクスペリエンスを提供できるはずです。

コメント

コメントを投稿