Skip to main content

Lightning Experience での Visualforce の使用

メモ

Salesforce で UI を構築する場合の推奨方法は Lightning Web コンポーネントであるため、「Visualforce から Lightning Web コンポーネントへの移行」トレイルに移動して LWC の使用方法を学習し、現在の Web 標準に準拠してください。上記のトレイルを受講しない場合は、このモジュールを続行して Visualforce について学習します。

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning Experience で Visualforce ページを使用する前に検討すべき要点を 2 つ挙げる。
  • Lightning Experience で Visualforce を使用できる場所を 5 つ以上挙げる。

Lightning Experience での Visualforce の使用

Lightning Experience によって Salesforce 組織にまったく新しいユーザーインターフェースが導入されますが、Visualforce アプリケーションが使えなくなるわけではありません。Visualforce ページの大半は、コードを書き換えることなく Lightning Experience で機能します。新しいインターフェースでは色々と配置換えされているため、ユーザーが Lightning Experience と Salesforce Classic を切り替えたときに Visualforce ページが確実に機能するよう多少の処理が必要になることがあります。さらに、ごく少数ながら Lightning Experience では動作しない機能もあります。このモジュールでは、こうした機能をすべて確認していきます。
では基本的な点から見ていきましょう。これらのトピックについてはこの後で詳しく説明しますが、ここでは重要な項目をいくつか見ていきましょう。
  • 一部の重要な例外を除き、Visualforce は Lightning Experience で「とりあえず機能」します。組織向けの Visualforce アプリケーションを記述している場合、通常はユーザーが Lightning Experience と Salesforce Classic のどちらでアクセスしても、それらのアプリケーションを機能させることができます。
  • Visualforce ページで組み込みの標準コンポーネントを使用している場合、ユーザーが Lightning Experience と Salesforce Classic のどちらでアクセスしても、Salesforce Classic とよく似たデザインで表示されます。ページを Lightning Experience のスタイルで表示する場合は、いくつかの作業が必要です。
  • Visualforce ページで JavaScript を利用している場合は、確認すべき点があります。Lightning Experience に表示されるときは Visualforce がページ全体を「所有」していません。そのため JavaScript コードはいくつかの新しいルールに従う必要があります。
  • Visualforce を Lightning Experience 内で実行している場合、他にも変更点があります。その大半は「とりあえず機能」させるためですが、それでも認識しておいたほうがよいでしょう。

前述のとおり、新しいユーザーインターフェースでは色々と配置換えになっています。Lightning Experience は Salesforce の使い方を一新するもので、依然として発展途中ではありますが、当社はその方向性に多大な期待を寄せています。新しい環境における Visualforce の位置付けを確認するために、Lightning Experience で Visualforce を使用できる場所をいくつか簡単にご紹介します。

Lightning Experience で Visualforce を使用できる場所

Salesforce Classic の場合と同様に、Lightning Experience も Visualforce のカスタムページやアプリケーションを使用して拡張できます。ただし、カスタムページやアプリケーションの配置場所が変更されている他、依然として Visualforce を配置できない場所もあります。

Visualforce を Lightning Experience 組織に追加する方法を次にいくつか示します。ただし、ここでは簡単に説明するだけです。Visualforce ページを使用した組織のカスタマイズ方法についての詳細は、この単元の末尾に記載のリソースを参照してください。

アプリケーションランチャーから Visualforce ページを開く

Visualforce のアプリケーションやカスタムタブはすべてアプリケーションランチャーから使用できます。アプリケーションランチャーを開くには、ナビゲーションバーにある アプリケーションランチャーアイコン をクリックします。すべてのアプリケーションと項目を表示するには、[すべて表示] を選択します。
アプリケーションランチャーのアプリケーションおよびタブ

カスタムアプリケーション (1) をクリックして有効にします。アプリケーションに追加した Visualforce タブを含め、アプリケーションの項目はナビゲーションバーに表示されます。アプリケーションランチャーでアクセスできるようにするには、Visualforce ページをタブに追加する必要があります。Visualforce のタブがアプリケーションにない場合は、[すべての項目] (2) に表示されません。

Visualforce ページをナビゲーションバーに追加する

(ところで、「ForceUI」ユーティリティページに興味はありますか? このモジュールで後ほど説明します。)

標準ページレイアウト内に Visualforce ページを表示する

ページレイアウトに Visualforce ページを埋め込んで拡張し、標準ページに完全なカスタムコンテンツを表示します。この動作は Salesforce Classic と同じですが、ページレイアウトを確認するためにレコードの [詳細] を表示する必要のある点が異なります。
Lightning Experience ページレイアウト上の Visualforce

Lightning アプリケーションビルダーで Visualforce ページをコンポーネントとして追加する

Lightning アプリケーションビルダーでカスタムアプリケーションページを作成するときに、Visualforce コンポーネントを使用してそのページに Visualforce ページを追加できます。
Lightning アプリケーションビルダーのページに Visualforce ページを追加
メモ

Visualforce ページを Lightning アプリケーションビルダーで使用できるようにするには、そのページの [Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能] を有効にする必要があります。

Visualforce ページをクイックアクションとして起動する

Lighning Experience のグローバルアクション
Lightning Experience のユーザーインターフェースは Salesforce Classic とかなり配置が異なりますが、クイックアクションを追加する手順はほとんど同じです。クイックアクションをオブジェクトのページレイアウトの適切なパブリッシャー領域に追加します。
クイックアクションをページレイアウトに追加

標準ボタンまたはリンクを上書きして Visualforce ページを表示する

オブジェクトで使用可能なアクションを Visualforce ページで上書きできます。上書きされたボタンやリンクをユーザーがクリックすると、標準ページではなく、作成したページが表示されます。この設定は Salesforce Classic とほぼ同じです。実際、override アクションを定義しているうちに Lightning Experience だったか迷うほどです。
取引先責任者オブジェクトの [編集] アクションの上書き
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない