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 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 ページを簡単に作成できます。このツールの各部の詳細を次に示します。
Lightning アプリケーションビルダーの UI
ヘッダー (1)
Lightning ページで作業を行うときに、ヘッダーにはその表示ラベルが表示され、最近更新した 10 個のページを参照できる [ページ] リストが含まれます。保存せずに [設定] に戻るか、Lightning アプリケーションビルダーの詳細ヘルプを表示することもできます。

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

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

Lightning コンポーネントペイン (3)
コンポーネントペインには、Lightning ページでサポートされている Lightning の標準およびカスタムコンポーネントがすべて含まれます。コンポーネントをクリックして、追加するページまでドラッグします。

メモ

メモ

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

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

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

Lightning ページの種別

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

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

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

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

ホームページから開始しましょう。