Lightning Experience での Visualforce の使用

Lightning Experience の構造と Visualforce アプリケーションの実行方法は非常に優れたもので、実際の開発作業には重要です。その詳細については、「Visualforce と Lightning Experience」モジュールを参照してください。しかし、ここでは、全体的な観点で Lightning Experience 移行開発の計画に役立つように、動作する機能と動作しない機能、更新する必要があるもの、そしてその他の問題について説明します。

まず初めに、Visualforce が動作する基本的なメカニズムは変更されていません。ページで使用しているのが、標準コントローラ、カスタムコントローラ、JavaScript Remoting、リモートオブジェクトのいずれであっても、Salesforce への接続は同じように動作します。

メモ

JavaScript を幅広く使用している場合や、Salesforce へのアクセスにその他の API を使用している場合、作業が必要になることがあります。それについては、後ほど説明します。

次に、Visualforce のマークアップは変更されていません。Lightning Experience で動作が異なるタグや属性がいくつかあります。また、非常に少数ですが、使用しないことをお勧めするものや動作しないものもあります。それ以外は、Visualforce ページやコンポーネントのためにコードを記述する方法は変更されていません。

さらに、Visualforce を使用して組織をカスタマイズする方法は、Lightning Experience でもそのまま使用できます。ただし、ご想像どおり、ユーザインターフェースが一新されているため、カスタマイズの位置は変更されています。

その他に、Visualforce メールテンプレートのように、背後で Visualforce コードが使用されている機能もあります。これらは、ユーザインターフェースには直接表示されないため、変更はありません。

さまざまな機能がどこに移動したかを目で確かめるには、「Visualforce と Lightning Experience」モジュールの「Lightning Experience での Visualforce の使用」単元に、スクリーンショットを豊富に使用したツアーがあります。

この変更には多大な影響があり、その多くは JavaScript と外部アプリケーションへのアクセスに関係しています。Lightning Experience で自身の Visualforce ページが使用できることを確定する前に、コードのいくつかの点を確認します。細かな説明は「Visualforce と Lightning Experience」モジュールに譲り、ここでは全体的にとらえて、確認すべき事項を絞れるようにします。

第一に、JavaScript を使用するページやアプリケーションがある場合は、コードの動作を確認しておきます。特に、コードから window グローバルオブジェクトに直接アクセスすることはできません。どうしてもアクセスしなければならない場合は、コードを若干変更すればアクセスできますが、Lightning Experience アプリケーションの API を使ったほうがよいように思われます。とりわけ、window.location を直接設定するコードは、Lightning Experience ナビゲーションスタックと統合するように必ず書き換えておきましょう。

同様に、環境全体にアクセスできることを前提とするコードも、書き換えないと驚くことになります。こうしたコードでもドキュメントの Visualforce の部分にはアクセスできますが、Lightning Experience アプリケーション全体にアクセスすることはできません。アプリケーションの多くはそれでも問題ありませんが、全体を統括するようなアプリケーションについては一定の作業を要します。

ページ自体が <apex:iframe> か静的 HTML のどちらかで iframe を使用している場合は、別の iframe に埋め込んだときに何らかの問題が生じることがあります。多くの場合は「親亀の上に子亀、その上に孫亀」というように連ねていけば問題ありませんが、十分なテストを実施するようにします。

ページに Canvas アプリケーションを埋め込んでいる場合や、特にキャンバス API を使用してアプリケーションを Salesforce に統合している場合は、徹底したテストを行う時間を設けます。キャンバスアプリケーションは iframe を使用しますが、正しい動作のコードであればとりあえず機能するはずです。いずれにしろ完璧なコードなどめったにありませんから。

リモートオブジェクトや JavaScript Remoting を使用するページは、認証コードの更新を要求しなくても機能します。ただし、ページで他の Salesforce API を使用するときは、適切なクロスドメイン要求を行うように、あるいは新しい環境に適応するように、認証コードを調整する必要のある場合があります。

この説明は漠然としていて難しそうに思えるかもしれませんが、実際のところ変更を要する可能性のあるコードはさほど多くありません。前述のとおり、「Visualforce と Lightning Experience」モジュールに開発者向けの詳しい説明が記載されています。

おそらく、回避するのが難しいという点で、最も大きな変更は、Visualforce による標準アクションの上書きが、Lightning Experience と Salesforce Classic でわずかに異なることです。オブジェクトリストアクションの上書きは、Lightning Experience では使用できません。

組織のユーザインターフェース設定に関わらず、オブジェクトタブとオブジェクトリストの両方を [設定] で上書きできます。オブジェクトタブアクションを上書きすると、Lightning Experience では期待どおりにオブジェクトのホームページが上書きされます。

ただし、Lightning Experience では、ユーザインターフェースでオブジェクトリストアクションにアクセスできないため、起動する手段がありません。組織で、いずれかのオブジェクトのオブジェクトリストアクションが上書きされている場合、その機能はユーザが Lightning Experience を使用しているときには利用できません。その上書きの中に重要な機能がある場合、その機能を使用する別の方法を見つける必要があります。

もう少し規模は小さくなりますが、<apex:page> の showHeader 属性と sidebar 属性は、Lightning Experience で表示した場合、Visualforce ページに影響を及ぼしません。Salesforce Classic の標準のヘッダーとサイドバーは常に抑制され、Lightning Experience ヘッダーとサイドバーを抑制する方法はありません。

Salesforce Classic で使用できるいくつかの関連リストは、Lightning Experience ではサポートされていません。残念ながら、<apex:relatedList> コンポーネントは、この制限の回避策にはなりません。

そして、これは非常に小さい問題ですが、Visualforce ページを PDF として表示すると、Lightning Experience のビジュアルデザインは使用されず、Salesforce Classic での表示とまったく同じになります。その方がよかったという場合もあるでしょう。ただし、Lightning Experience デザインが含まれた PDF を表示したかったとしても、今のところそれはできません。

簡単に言うと、Salesforce Classic のヘッダーとサイドバーが抑制される点と、画面の周囲に Lightning Experience ユーザインターフェースが固定された点を除けば、Lightning Experience でも Visualforce ページは同じように表示されます。

特に組み込みの Visualforce コンポーネントによって表示される HTML は、Lightning Experience でもそのまま表示され、デフォルトでこれらのコンポーネントが使用する Salesforce Classic のスタイルシートが読み込まれます。このため、<apex:inputField>、<apex:outputField>、<apex:pageBlock> などのコンポーネントを使用したページはそのビジュアルデザインを継承し、Salesforce Classic のビジュアルデザインにマッチさせたコンポーネントを使用したページもそのマッチ度に応じたビジュアルデザインを引き継ぎます。Lightning Experience の中に Salesforce Classic が見え隠れします。

他方、スタイル設定がさほど行われていない Visualforce コンポーネントや、独自のコンポーネントやマークアップを使用している場合、あるいは Salesforce のデフォルトスタイルを使わずに独自のスタイルシートを作成した場合は、そのままのページが表示され、苦労して開発したスタイルが維持されます。

つまり、Visualforce for Lightning Experience では、既存のページを Lightning Experience のデザインに合わせて大きく変えることはせず、既存のページのビジュアルデザインが維持されるようにしています。

とは言え、新しいビジュアルデザインが気に入った方のために、このスタイルを設定する方法も用意し、つぎ込む作業量に応じてどの程度マッチさせるかを調節できるようにしています。 スタイルの設定方法についてここでは説明しませんが、「ビジュアルデザインの考慮事項について」で単元を丸々割いて、新しいビジュアルデザインの多様な可能性とその設定手法を解説しています。

• Trailhead: 「Lightning Experience の機能」の「見つけ方: Lightning Experience のナビゲーションと設定」
• Trailhead: アプリケーションの簡易カスタマイズ
• Trailhead: UI のカスタマイズ
• Trailhead: Visualforce と Lightning Experience
• Trailhead: Visualforce の基礎
• Visualforce 開発者ガイド