Lightning アプリケーションビルダー入門

学習の目的

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

• 応答性の高いアプリケーションを作成したり Lightning Experience およびモバイルアプリケーション用のカスタムページを作成したりするために、Lightning アプリケーションビルダーをどう利用したらよいかを理解する。
  
• Lightning アプリケーションビルダーのユーザーインターフェースのレイアウトを理解する。
  
• Lightning ページと Lightning コンポーネントの違いを説明する。
  

Lightning アプリケーションビルダーの紹介

ユーザーは多忙です。商談を成立させ、最高のサービスを提供し、見込み客や顧客へのマーケティングを行うなど、多忙を極めています。カスタマイズされたページを作成すれば、ユーザーは手元に主要な情報を持ったり、簡単なインターフェースを使用してレコードの更新や追加をしたりすることができます。

Lightning アプリケーションビルダーは、Salesforce モバイルアプリケーションや Lightning Experience のカスタムページを簡単に作成するためのポイント & クリックツールで、ユーザーに必要なものが 1 か所にまとめられています。

ただし、これだけではありません。[設定] のアプリケーションマネージャーから Lightning アプリケーションを編集すると、Lightning アプリケーションビルダーが開いてアプリケーションの設定を管理できます。アプリケーションのブランド設定、ナビゲーション、オプションの更新と、そのアプリケーションに割り当てられた Lightning ページの管理をすべて Lightning アプリケーションビルダーで行うことができます。

このモジュールでは、Lightning ページの作成について説明します。

Lightning アプリケーションビルダーのしくみ

Lightning アプリケーションビルダーでは、次のものを作成できます。

• 標準ページにドリルダウンする単一ページアプリケーション
  
• 四半期の上位の販売見込み客や主要なリードを追跡するアプリケーションなど、ダッシュボードスタイルのアプリケーション
  
• ユーザーが経費を入力し、送信した経費を監視する経費アプリケーションなど、特定の作業に対処する「ポイント」アプリケーション
  
• ユーザーのニーズに合わせたオブジェクトのカスタムレコードページ
  
• ユーザーがよく使用するコンポーネントや機能が含まれたカスタムホームページ
  

Lightning ページは、Salesforce モバイルアプリケーションまたは Lightning Experience で使用するページを設計できるカスタムレイアウトです。Lightning ページは、コンポーネントを含む範囲で構成されます。

ここで作成するページの一例を次に示します。

Lightning ページの構造は、表示されるデバイスに応じて適合します。特定のデバイスでの表示方法は、ページの作成時に選択したテンプレートで制御されます。Lightning ページのテンプレートにより、ページは複数の領域に分割されます。

Lightning コンポーネント

Lightning コンポーネントは設定および再利用が可能なコンパクトな要素で、Lightning アプリケーションビルダーの Lightning ページに追加できます。

Lightning ページでは次のコンポーネントがサポートされています。

• 標準コンポーネント - 標準コンポーネントとは、Salesforce が作成した Lightning コンポーネントです。
  
• カスタムコンポーネント - カスタムコンポーネントとは、各自が作成した Lightning コンポーネントです。カスタム Lightning コンポーネントは、Lightning アプリケーションビルダーで機能するように設定できます。
  
• AppExchange のサードパーティコンポーネント - AppExchange には、Lightning コンポーネントのマーケットプレイスがあります。設定済みのコンポーネントが含まれた、Lightning アプリケーションビルダーですぐに使用できるパッケージが見つかります。
  

Spring '19 リリース (API バージョン 45.0) では、Lightning Web コンポーネントモデルと従来の Aura コンポーネントモデルの 2 つのプログラミングモデルを使用して Lightning コンポーネントを作成できます。Lightning Web コンポーネントは、HTML と最新の JavaScript を使用して作成されるカスタム HTML 要素です。Lightning Web コンポーネントと Aura コンポーネントは、ページ上に共存可能で、同時に使用できます。

Lightning アプリケーションビルダーのユーザーインターフェース

Lightning アプリケーションビルダーのユーザーインターフェースを使用すると、Lightning ページを簡単に作成できます。このツールの各部の詳細を次に示します。

ヘッダー (1)

Lightning ページで作業を行うときに、ヘッダーにはその表示ラベルが表示され、最近更新した 10 個のページを参照できる [Page (ページ)] リストが含まれます。保存せずに [Setup (設定)] に戻るか、Lightning アプリケーションビルダーの詳細ヘルプを表示することもできます。

アプリケーションを編集している場合は、ヘッダーにはさらにアプリケーション名と [App Settings (アプリケーション設定)] タブが表示されます。[App Settings (アプリケーション設定)] タブでは、アプリケーションのオプション (ブランド設定、ナビゲーション、ユーティリティバーなど) を設定できます。アプリケーションの場合、[Pages (ページ)] リストには、現在のアプリケーションに関連付けられたすべての有効な Lightning ページが表示されます。

ツールバー (2)

ツールバーのボタンを使用して、ページコンテンツの切り取り 、コピー 、貼り付け を行うことができます。また、元に戻す 、やり直し 、保存、Lightning ページの有効化も実行できます。さらに、ページを異なる形式で表示したり、キャンバスを更新したり、ビューに合わせてキャンバスのサイズを調整したりすることもできます。

コンポーネントパレット (3)

コンポーネントパレットには、Lightning ページでサポートされている Lightning の標準およびカスタムコンポーネントがすべて含まれます。コンポーネントをクリックして、追加するページまでドラッグします。レコードページの場合、コンポーネントパレットの上部にある [Fields (項目)] タブに、レコードページに追加できるオブジェクト項目が含まれています。

カスタムコンポーネントが多数ある場合、検索項目にテキストを入力すると、必要なコンポーネントを簡単に検索できます。ペインの下部のボタンを使用して、AppExchange にあるサードパーティのカスタムコンポーネントにアクセスできます。

Lightning ページのキャンバス (4)

キャンバスはページを作成するエリアです。コンポーネントをドラッグして、ページ上で並び替えます。

プロパティペイン (5)

プロパティペインにはページで選択している内容に応じて、ページ全体のプロパティまたは選択したコンポーネントのプロパティのいずれかが表示されます。コンポーネントを表示中にページのプロパティにアクセスするには、ブレッドクラムの [ページ] をクリックします。

Lightning ページの種別

Lightning アプリケーションビルダーでは、さまざまな種別の Lightning ページを作成できます。ここでは次の 3 つの種別について説明します。

アプリケーションページ

アプリケーションページを使用してサードパーティアプリケーションのホームページを作成し、そのページを Salesforce モバイルアプリケーションや Lightning Experience のナビゲーションメニューに直接追加できます。このページがアプリケーションホームページになり、最も重要なオブジェクトや項目にすばやくアクセスできます。

ホームページ

特定の種別のユーザーに関連する機能を備えたホームページを作成し、カスタマイズしたページを異なるアプリケーション、またはアプリケーションとユーザープロファイルの組み合わせに割り当てます。カスタムホームページは、Lightning Experience でのみサポートされています。

レコードページ

レコードページを使用すると、オブジェクトのレコードページをユーザーのニーズに合わせて調整し、カスタマイズされたバージョンを作成できます。カスタムレコードページは、Lightning Experience と Salesforce モバイルアプリケーションでサポートされています。 

まずはホームページから始めましょう。

リソース

• Salesforce ヘルプ: Lightning アプリケーションビルダー
• Salesforce ヘルプ: Lightning ページ
• 公式: 「Lightning App Builder」Trailblazer Community