Lightning Experience での Visualforce の使用

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning Experience でも同じ動作をする Visualforce 機能を 5 つ以上挙げる。
  • Visualforce コードを見直す必要のある 2 つ以上の Visualforce 機能について説明する。
  • Lightning Experience では動作しない Visualforce 機能を 2 つ以上挙げる。
  • Lightning Experience によって既存の Visualforce ページのビジュアルデザインがどう変わるか説明する。

Visualforce および Lightning Experience

Lightning Experience はまったく新しい世界です。ユーザの皆さんにもわくわくしていただけることを願っています。Lightning Experience ユーザインターフェースの裏には、Salesforce アプリケーションを実行するための新しい方法があり、Visualforce アプリケーションの実行方法は大きく異なります。ほとんどの場合、Visualforce アプリケーションは問題なく動作しますが、Lightning Experience を導入する前に知っておくべきことがいくつかあります

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

動作する機能

Lightning Experience で動作する Visualforce の機能のリストは非常に長くなります。Visualforce の機能リスト全体とほぼ同じ長さです。そこで、リストにないものについて説明する前に、ポジティブに考えることにして、使用できる多くの機能の一部を紹介しましょう。
まず初めに、Visualforce が動作する基本的なメカニズムは変更されていません。ページで使用しているのが、標準コントローラ、カスタムコントローラ、JavaScript Remoting、リモートオブジェクトのいずれであっても、Salesforce への接続は同じように動作します。
メモ

メモ

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

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

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

これらのカスタマイズについて、もう少し具体的に見てみましょう。次のものは、Lightning Experience ですべて正常に動作し、ユーザインターフェース内での位置だけが変更されています。
  • Visualforce ページでのカスタムタブとアプリケーションの作成。
  • Visualforce ページにつながるカスタムボタンとカスタムリンクの作成。
  • Visualforce ページで開くカスタムアクションの作成。
  • Visualforce ページでの標準アクションの上書き (これには例外が 1 つあります。それについては後で説明します)。
  • Visualforce ページを使用するフローの作成。
  • Visualforce ページとコンポーネントのパッケージ化。
ユーザインターフェースの変更は小さなものから大きなものまであります。Visualforce を使用してカスタマイズされた機能は、ユーザが Lightning Experience と Salesforce Classic を切り替えると、自動的に移動します。ユーザには、最初に説明する必要があるかもしれませんが、その後は問題なく使用できるでしょう。

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

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

動作する機能にも更新やテストが必要

Lightning Experience を有効にした場合に Visualforce ページを実行する環境は、標準の Visualforce 要求とは異なります。技術的なことを述べるとややこしくなりますが、平たく言えば、Lightning Experience では Visualforce ページが、Lightning Experience アプリケーション内に表示される HTML iframe に埋め込まれます。

この変更には多大な影響があり、その多くは 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 for Lightning Experience で使用できない機能のリストは短く、この説明はすぐに済ませることができます。

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

具体的には、Salesforce Classic の大半の標準オブジェクトおよびすべてのカスタムオブジェクトに対して上書きできる標準アクションは 6 つあります。
  • オブジェクトタブ
  • オブジェクトリスト
  • レコードビュー
  • レコード編集
  • レコード作成
  • レコード削除
Lightning Experience では、最初の 2 つのアクションは、1 つのページに統合され、オブジェクトホームになりました。オブジェクトホームは、オブジェクトリストに似ていますが、[最近使ったデータ] など、オブジェクトタブの要素がいくつか追加されています。[レポート] や [ツール] などのその他の要素は、ユーザインターフェースの別の部分に移動しました。

組織のユーザインターフェース設定に関わらず、オブジェクトタブとオブジェクトリストの両方を [設定] で上書きできます。オブジェクトタブアクションを上書きすると、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 を表示したかったとしても、今のところそれはできません。

ビジュアルデザインのこと

Lightning Experience でまず目を引くのが、刷新されたスマートなビジュアルデザインです。そして、Visualforce ページを開発してきた方なら、自身が設計した Visualforce ページが Lightning Experience でどのように表示されるのかが気になることでしょう。この点については端折らずに説明しておきましょう。

簡単に言うと、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 のデザインに合わせて大きく変えることはせず、既存のページのビジュアルデザインが維持されるようにしています。

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

リソース

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる