テックブログ

Lightning Experience再入門(2)

こんにちはアピリオ北嵐です。前回のブログではLEX(Lightning Experience)環境でのLightningコンポーネント・ベースの開発スタイルについて紹介しました。今回は大きく変わったデザイン以外の、Salesforce開発者が押さえておくべきClassic環境とLEX環境の違いについて見ていきたいと思います。本ブログの情報はWinter'17時点になります。
 

レコード詳細画面

Classic環境では1枚のPlainな画面上に、上からChatter、詳細データ、関連リストの順に表示領域が並んでいて、下にスクロールしながらデータを参照するようになっています。
image2-1
[Classic環境のページレイアウト]
 
LEX環境でのレコード詳細画面は固定的なレイアウトではなく、前回のブログで説明したようにLightningレコードページの仕組みを使って自由にコンポーネントの配置を変えられるようになっています。デフォルトのレイアウトは下記のようになっており、タブを使って複数の機能を効率的に切り替えて使うことができます。
image2-2
[LEX環境でのデフォルトのページレイアウト]
 
LEX環境はSPA(Single Page Application)ですので、できるだけ画面を切り替えず1つの画面上で処理が行えるように工夫されています。例えば、ユーザー、取引先、商談といった主要なオブジェクトに対しては、リンクをマウスオーバーするとデータ内容を表示するためのポップアップが表示されます(項目はコンパクトレイアウトを使ってカスタマイズ可能)。
image2-3
[商談情報の表示]
 
また現在表示しているデータに紐付く新規のレコードを、同じ画面上で手軽に作成できるコンポーネントも準備されていて、この機能はカスタムアクションを定義するだけで利用することができます。
image2-4

[活動におけるToDoや行動の作成]

標準コンポーネントとカスタムコンポーネントをLightningアプリケーションビルダ上で組み合わせることで、手軽に使い勝手のよいレコード詳細ページを作成できるようになったことは、LEX環境の大きな特長と言えるでしょう。
 

編集画面

レコード詳細画面でのデータ編集時の挙動は、SPA化されたLEX環境では大きく変更されています。従来のClassic環境では、 [編集] ボタンを押すと参照画面から編集画面へと画面が切り替わります。
image2-5
[Classic環境での編集画面の表示]
 
またインライン編集用の鉛筆アイコンをクリックすると、編集対象の項目のみを編集できるようになり、画面が切り替わる [編集] ボタンとは明らかに挙動が異なっています。
image2-6
[Classic環境でのインライン編集]
 
一方、LEX環境では [編集] ボタンを押すと画面が切り替わるわけではなく、編集用のモーダルダイアログが表示されます。
image2-7
 [LEX環境で編集用のモーダルダイアログが表示された状態]
 
LEX環境でもインライン編集は準備されており、鉛筆アイコンをクリックすると下記のようにその場でページレイアウト領域全体が編集モードに切り替わります。
image2-8
 [LEX環境でのインライン編集時の状態]
 
編集用ダイアログとインライン編集時では編集用パネルとしては同じものが表示されるため、 [編集] ボタン押下時とインライン編集時の挙動にClassic環境の時のような大きな差異はなく、画面の見た目が異なるぐらいです。
 
大きな差異がないのであれば、 [編集] 用のアクションボタンを省略しても問題ないように思えますが、Salesforce1側ではインライン編集がサポートされていないため、 [編集] 用のアクションボタンを非表示にしてしまうとSalesforce1で表示した際にデータを編集できなくなってしまうことに注意して下さい。
 

カレンダー

カレンダー機能はデザインがLightning用のフラットな見た目になっているだけではなく、Classic環境とLEX環境でサポートされる機能が大きく異なっています。LEX環境ではカレンダー機能はタブ要素として提供されるため、Classic環境のようにタブ表示させるためにVisualforceページを準備する必要はありません。Winter'17ではClassic環境同様に日/週/月でビューの切り替えができます。また任意のオブジェクトをカレンダー要素として追加できる点はClassic環境ではサポートしていなかった機能です。
image2-9-1024x672
[LEX環境のカレンダー]
 
一方、Classic環境で提供されていた下記の機能がサポートされていないため、カレンダーとしての機能はまだまだ不足しています。
 
・ミーティングの招集
・マルチユーザービュー
・繰り返し(定期的な行動を作成)
・アラーム
 
残念ながら現時点では、Lightningコンポーネント版の多機能カレンダーはAppExchangeでも提供されていませんので、標準カレンダーを使うか自前でカレンダーを開発する方法しか選択肢がありません(とはいえ、自前でカレンダーを開発するのはあまり勧められるソリューションではありません)。新たにGoogleカレンダーやMicrosoft Exchangeと連携できるLightning Syncが提供されており、外部カレンダーとSalesforceカレンダーとの連携機能は拡張されてきていますので、Salesforce側のカレンダーだけで全てを満たすのではなく、外部カレンダーとの併用を考えるのも有効なソリューションと考えられます。
 

設定メニューでのオブジェクトの編集

これまでのClassic環境では“標準オブジェクト”は [カスタマイズ] から、“カスタムオブジェクト”は [オブジェクト] からと設定メニューがそれぞれ分かれていました。
 
image2-10image2-11
 [Classic環境でのオブジェクトの編集メニュー]
 
一方、LEX環境の設定メニューでは [オブジェクトマネージャー] から全てのオブジェクトを選択することができ、“標準オブジェクト”と“カスタマイズ・オブジェクト”間で編集画面の内容に差異はありません。
image2-12
[LEX環境でのオブジェクトの編集メニュー]
 
では商談の [セールスプロセス] といった標準オブジェクト固有の設定はどこに行ったのかと思う方もいらっしゃるかもしれません。こうした設定に関してはオブジェクトから選択するのではなく、メニュー [機能設定]  の下の [サービス] や [セールス] から行います。
 
image2-13
[LEX環境でのセールス関連の設定メニュー]
 

アプリケーション

Summer'16までは、LEX環境の画面左側に配置されたメニューはアプリケーションごとにカスタマイズすることができませんでした。Winter'17からLEX環境でもClassic環境同様にアプリケーションを作成し、表示するタブやロゴをアプリケーションごとに設定できるようになりました。
 
image2-14 
[LEX環境でのアプリケーションの管理]
 
メニュー [アプリケーション] - [アプリケーションマネージャ] には、接続アプリケーション、Classic環境で作成したアプリケーション、LEX環境で作成したアプリケーションの3種類が表示されます。Classic環境で作成したアプリケーションはLEX環境で表示させるかどうかを設定できます。
 
LEX環境でのアプリケーションの切り替えは、画面左上のアイコンをクリックして表示する [アプリケーションランチャー] から行います。
 
image2-16
[LEX環境でのアプリケーションの切り換え画面]
 

ファイル

Salesforceではオブジェクトに紐付けてファイルを管理する方法として「添付ファイル」と「ファイル」の2種類の方法が提供されています。
image2-19-1024x193
Classic環境では上記の2種類の方法はいずれもサポートされていますが、LEX環境では「添付ファイル」は参照のみとなり、登録・参照・削除がサポートされるのは「ファイル」のみとなります。関連リストには「ファイル」と「添付ファイル」のいずれも追加可能ですが、「添付ファイル」の場合は参照はできますが登録・削除はできません。Classic環境で添付ファイルの仕組みを使っている場合、LEX環境で参照するとファイルの登録・削除ができず戸惑うことがありますので注意して下さい。
 
image2-17
[Classic環境でのファイルと添付ファイル]
 
image2-18-1024x623 
[LEX環境でのファイルと添付ファイル]
 

ダッシュボード

LEX環境でのダッシュボードのデザインはWave(Analytics Cloud)を踏襲したビジュアルなものに変わっていて、グラフの大きさや配置を自由に変更できるようにもなっていてClassic環境と比べると表現力が上がっていると感じます。一方、編集機能についてはLEX環境ではまだ十分に機能が揃っておらず下記のような制限があるため、しばらくの間はダッシュボードの変更はClassic環境で行うのが現実的と思われます。
 
・動的なダッシュボードは未サポート(この設定の場合はLEX環境では編集できません)
・保存フォルダの変更不可
・API名の変更不可
・検索条件の追加はできない
 
注意して欲しいのは一度LEXモード用のダッシュボード(グラフの大きさや位置を自由に配置できるようになる)に変換するとClassic環境では参照しかできないことです。私はここにはまってしまい、何度かダッシュボードを作り直すはめになりました(苦笑)。
 

おわりに

さて今回は、Salesforce開発者が覚えておくべきClassic環境とLEX環境との違いについて紹介しました。この中でも一番大きな変更点はレコード編集画面の構成だと思います。この画面はユーザビリティーに直結する要素ですので、LEX環境での開発では標準コンポーネント、カスタムコンポーネント、アクション、ページレイアウトを組み合わせて、アプリケーションビルダを使ってどのようにページをデザインするかが重要になってきます。自由度が上がっている分、より開発者のセンスが問われる部分とも言えます。
次回は、Winter’17でのLEX環境におけるいくつかの制約について紹介したいと思います。
 

About Kitaarashi Naoki

Kitaarashi Naoki

某大手SIベンダーを退職し2015年3月からアピリオの一員としてクラウド業界に身を投じています。クラウドという広大な技術の波に翻弄されつつも一流のクラウド技術者を目指して日々悪戦苦闘中です。

Appirio