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 ページをナビゲーションバーに追加する

前の例で説明したように、Visualforce タブをアプリケーションに追加し、アプリケーションのナビゲーションバーに項目として表示することができます。

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

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

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

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

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

Visualforce ページを Lightning アプリケーションビルダーで使用できるようにするには、そのページの [Available for Lightning Experience, Lightning Communities, and the mobile app (Lightning Experience、Lightning コミュニティ、そしてモバイルアプリケーションで利用可能)] を有効にする必要があります。

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

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

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

オブジェクトで使用可能なアクションを Visualforce ページで上書きできます。上書きされたボタンやリンクをユーザーがクリックすると、標準ページではなく、作成したページが表示されます。この設定は Salesforce Classic とほぼ同じです。実際、override アクションを定義しているうちに Lightning Experience だったか迷うほどです。

カスタムボタンまたはリンクを使用して Visualforce ページを表示する

オブジェクトにアクションを定義すれば、オブジェクトの新しいアクションをボタンやリンクとして作成できます。Lightning Experience では JavaScript のボタンやリンクがサポートされていませんが、Visualforce (および URL) の項目はサポートされています。Visualforce のボタンやリンクを定義する手順は Salesforce Classic の場合と同じため、ここでは割愛します。

リソース

• Trailhead: 「Lightning Experience の機能」の「見つけ方: Lightning Experience のナビゲーションと設定」
• Trailhead: アプリケーションの簡易カスタマイズ
• Trailhead: Lightning アプリケーションビルダー
• Trailhead: Visualforce の基礎
• Visualforce 開発者ガイド
• Build Apps Visually with Lightning App Builder (Lightning アプリケーションビルダーを使用したアプリケーションの視覚的な構築)