Lightning Experience での Visualforce の使用
学習の目的
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 のアプリケーションやカスタムタブはすべてアプリケーションランチャーから使用できます。アプリケーションランチャーを開くには、ナビゲーションバーにある
をクリックします。すべてのアプリケーションと項目を表示するには、[すべて表示] を選択します。
![アプリケーションランチャーアイコン](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lex_dev_visualforce/lex_dev_visualforce_intro/images/ja-JP/e6120201e337a074968776f872138d8d_lex-icon-app-launcher.png)
![アプリケーションランチャーのアプリケーションおよびタブ](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lex_dev_visualforce/lex_dev_visualforce_intro/images/ja-JP/0cb4bba5cb04f515a0c520d71671859d_lex-dev-vf-launcher-custom-app-new.png)
カスタムアプリケーション (1) をクリックして有効にします。アプリケーションに追加した Visualforce タブを含め、アプリケーションの項目はナビゲーションバーに表示されます。アプリケーションランチャーでアクセスできるようにするには、Visualforce ページをタブに追加する必要があります。Visualforce のタブがアプリケーションにない場合は、[すべての項目] (2) に表示されません。
Visualforce ページをナビゲーションバーに追加する
(ところで、「ForceUI」ユーティリティページに興味はありますか? このモジュールで後ほど説明します。)
標準ページレイアウト内に Visualforce ページを表示する
ページレイアウトに Visualforce ページを埋め込んで拡張し、標準ページに完全なカスタムコンテンツを表示します。この動作は Salesforce Classic と同じですが、ページレイアウトを確認するためにレコードの [詳細] を表示する必要のある点が異なります。
![Lightning Experience ページレイアウト上の Visualforce](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lex_dev_visualforce/lex_dev_visualforce_intro/images/ja-JP/d21117f45ffd6d2445c7cf9403f0d683_lex-dev-vf-page-layout-on.png)
Lightning アプリケーションビルダーで Visualforce ページをコンポーネントとして追加する
Lightning アプリケーションビルダーでカスタムアプリケーションページを作成するときに、Visualforce コンポーネントを使用してそのページに Visualforce ページを追加できます。
![Lightning アプリケーションビルダーのページに Visualforce ページを追加](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/lex_dev_visualforce/lex_dev_visualforce_intro/images/ja-JP/4095ad79634d15d369651fbd8e94241e_lex-dev-vf-use-add-as-component-in-lab.png)
リソース
- Trailhead: 「Lightning Experience の機能」の「見つけ方: Lightning Experience のナビゲーションと設定」
- Trailhead: アプリケーションの簡易カスタマイズ
- Trailhead: Lightning アプリケーションビルダー
- Trailhead: Visualforce の基礎
- Visualforce 開発者ガイド
- Build Apps Visually with Lightning App Builder (Lightning アプリケーションビルダーを使用したアプリケーションの視覚的な構築)