テックブログ

Lightning Experience再入門(1)

こんにちはアピリオ北嵐です。時が経つのは早いものでWinter'16でデビューしたLightning Experience(以降LEXと記述)もこの秋で1周年を迎えました。リリース直後は若干不安定で機能的にも少し物足りなかったLEX環境も、3回のリリースを経て実用に耐えうる環境に進化してきたのではないでしょうか。同じくLightningコンポーネントもリリースから約2年が経過し、LEX環境で動作するコンポーネントを開発するためのプラットフォームとして着実に成長しています。
 
実際のお客様プロジェクトでもLEX環境を採用できるケースが出てきましたので、そろそろLEX環境とClassic環境での開発方法の違いや現時点での制約について、きちんと理解しておくべき時期に来ているのではないでしょうか。このシリーズでは、実際のプロジェクトにLEX環境を適用するという観点から、LEX環境の今について開発者の視点でご紹介していきたいと思います。
 

LEX環境とClassic環境での開発スタイルの違い

ご存じのようにLEX環境は単にサイトのデザインが今風にカッコ良くなっているだけではなく、Salesforceのクライアント画面自体がJavaScriptベースのSPA(Single Page Application)として構築されているため、従来型のWebアプリケーションであるClassic環境とはUI部分の構造が根底から異なっています。Classic環境でのカスタム開発の中心はVisualforceページとApexコントローラー(Visualforceコントローラを実装)でしたが、LEX環境ではLightningコンポーネントとApexコントローラー(サーバー側APIを実装)に変わります。LightningコンポーネントはJavaScriptベースのコンポーネントですので、開発にはこれまで以上にJavaScriptのスキルが必要になります。同時にApexを使ってサーバー側APIも開発するため、これまで同様にApexのスキルも必要です。
 
Lightningコンポーネントが登場した初期の時点では、アプリケーションの開発はLightningアプリケーションとLightningページの2つの方法が提供されていました。現在のLEX環境では、これから紹介する3つの方法を組み合わせてLightningコンポーネントを使ったカスタム開発を行うのが基本的な開発スタイルになります。
 

1.  Lightningコンポーネントタブ/Lightningページタブ

Classic環境ではVisualforceタブとしてカスタム画面をタブに追加できましたが、LEX環境でも同様なことができます。Lightningコンポーネントタブは単体のコンポーネントを表示するタブ、LightningページタブはLightningアプリケーションビルダを使って作成するLightningページを表示するタブになります。
 
image1-1024x180
image2
 [タブの設定画面]
 
Winter’17からLEXの見た目はClassicと似た上部のタブ形式に変更されていますので、タブを使ってカスタム機能をSalesforce組織に組み込むこの方式の使い勝手は、従来のVisualforceタブと変わらないと考えてよいと思います。
 

2. Lightningレコードページ

Lightningレコードページは、各レコードの詳細を表示する従来のページレイアウトの仕組みに代わるLEX環境での強力なページ表示の仕組みです。LEX環境では標準オブジェクト/カスタムオブジェクトの詳細ページ(レコードの詳細を表示するページ)を、Lightningアプリケーションビルダを使ってカスタマイズ可能です。
Winter'17ではアプリケーションビルダで編集できるLightningページとして下記の3種類が準備されています。
image3-1024x232
標準で準備されているヘッダー、レコードの詳細、関連リストといったコンポーネントに加えて、自分で開発したカスタムLightningコンポーネントやAppExchangeで購入した市販のコンポーネントを使用することができます。
 
image4
 [アプリケーションビルダでの選択画面]
 
image5
[アプリケーションビルダでLightningレコードページを編集]
 
従来から使ってきたページレイアウトの仕組みもこのレコードページの仕組みに取り込まれていて、「レコードの詳細」コンポーネントを貼り付けると、ページレイアウトの定義に従ってデータが表示されます(このコンポーネントではインライン編集機能もサポートされます)。
image6 image7
[ページレイアウト・コンポーネント]
 
デフォルトで準備されているページも全てLightningレコードページとして編集することができます。例えば、以下は商談ページをLightningアプリケーションビルダで開いた状態です。商談ページには「セールスパス」や「活動の表示」といった固有の要素がたくさんあるのですが、それらもコンポーネントとして準備されていることが分かります。
image8-1024x623
 [商談のレコードページ]
 
Lightningレコードページの編集は、レコードの詳細画面で右上のギアアイコンから「編集ページ」を選択するか、オブジェクトの設定画面の「Lightningレコードページ」セクション(注:LEX環境でのみ表示されます)から行います。
image9

 

3. アクション

アクションによる画面のカスタマイズはClassic環境から提供されていましたが、Classicのデスクトップ環境ではChatterパブリッシャーと呼ばれる画面上部のChatter領域にしか表示できなかったため、この機能は主にSalesforce1でボタンを表示するために使用されていたと思います。
image10-1024x213
[Classic環境でのChatterパブリッシャー領域]
 
image11-768x78
[Salesforce1での画面下部のアクションボタン]
 
LEX環境では、従来から提供されるClassic環境のボタンではなく、このアクションを使って画面上にボタンを配置します。具体的には、LEX環境のレコードページで表示される画面右上のボタンのことです。
image11
ページレイアウトの設計でも、Classic用の「標準ボタン」セクションとは別の「Salesforce1 および Lightning Experienceアクション」セクションにボタンを配置します。
 
image12-1024x207
[ページレイアウト設計画面でのSalesforce1およびLightning Experienceアクションの設定]
 
アクションを使うことで、現在表示しているレコードに関連付けた新規のレコードを簡単に作成することもできます。ページレイアウトとは別に入力レイアウトを定義できることも便利な点です。下記の例は商談に紐付く行動の作成です。
 
image13
[Chatterパブリッシャー領域での新規レコード作成の例]
 
上記の画面を実現するためには、下のような新規レコード作成アクションを定義します。
 
image14
[アクションの設定]
 
ユーザーが追加できるカスタム・アクションには、設定だけで追加可能な「新規レコードの作成」以外に、Visualforceページ/Lightningコンポーネントを使ったカスタムダイアログがあります。Summer'16まではこの機能ではVisualforceページしか利用できませんでしたが、Winter'17からLightningコンポーネントを利用できるようになりました。
例えば、アクションボタンを押して新しい行動を作成するといったダイアログを簡単に作成することができます。
 
image15
 [Lightningコンポーネントを使ったアクションによるダイアログの表示]
 
アクション設定は下記のようになり、アクション種別として「Lightningコンポーネント」を選択し、Lightningコンポーネントを指定します。
 
image16
 [アクションの設定]
 
こうしたシンプルな画面であれば、下記のように単純なコードで実装することができます。
 
image17-1024x343
[アクション用のLightningコンポーネント CMPファイルの実装コード]
  
今回はLEX環境における開発の基本ということで、カスタム開発の方法についてClassic環境と比較しながら紹介しました。開発の単位が画面からコンポーネントに代わったことにより、Classic環境と比べるとカスタマイズの自由度が上がったと感じています。
 

おわりに

最後にLEX環境とSalesforce1環境の関係について触れておきます。Salesforce1はもともとLightningアプリケーションとして動作しているためLightningコンポーネントとの親和性は高いです。上記で説明した「1. Lightningコンポーネントタブ/Lightningレコードタブ」、「3 .アクション」として作成したLightningコンポーネントは、原則としてSalesforce1でもそのまま稼働します(注1)。「2.Lightningレコードページ」についてはPCブラウザ用の機能であり、Salesforce1ではこのデザインは無視され、標準の詳細レコードページと関連リストが表示されます。Salesforce1の利用を考えているシステムではこの点は見落としがちなので注意して下さい。
注1:ブラウザの差異により一部挙動が異なる可能性はあります
 
次回は、Winter'17でのLEX環境の制約やUIデザイン以外のLEX環境とClassic環境との違いについてご紹介していきたいと思います。
 

About Kitaarashi Naoki

Kitaarashi Naoki

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

Appirio