テックブログ

Lightning Experience再入門(3)

こんにちはアピリオ北嵐です。Lightning再入門のPart3となります。Part1Part2ではWinter'17の環境をベースにLEX(Lightning Experience)環境でのSalesforceの開発スタイルやClassic環境と画面/機能がどのように異なるのかを説明してきました。今回はLEXを使った開発を行う際に理解しておいた方が良い、Winter'17時点でのLEX環境の制約についてご紹介したいと思います。
 

Internet Explorer11の未サポート

昨年LEXが登場した時点ではIE11はLEXがサポートするブラウザに含まれていたのですが、Summer'16で今後サポート対象から外れることが発表されており、既存の組織と新規組織でLEXサポートの有無が異なります。
image3-1-1024x176
[Winter'17時点でのIE11に対するLEXのサポート状況]
 
現在SalesforceはLightningコンポーネントベースのLEX環境のセキュリティを強化するために、 LockerServiceと呼ばれる Lightningコンポーネントに対するセキュリティを向上させるための仕組みを導入しようとしています(詳しくは各セールスフォース組織の「重要な更新」の「Lightning LockerService セキュリティの有効化」を参照して下さい)。IE11は残念ながら、このLockerServiceを導入するために必要な一部の要件を満たしていないため、サポート対象から外れることになったようです。2017/12/17以降は、MS系のブラウザではEdgeのみがサポートされることになります。
 
日本の多くのお客様ではIEが標準ブラウザとして使われているため、全てのバージョンのIEがサポートされないことは、やはりLEX導入の上で最も大きな検討事項になるでしょう。現在、IEを使われているお客様の場合、LEX環境での標準ブラウザの候補としてはChromeまたはEdgeが考えられますが、Chromeは主にコンシューマー向けに提供されているブラウザであるため管理面での課題があり、一方Edgeは稼働環境としてWindows10のみをサポートするためOSのアップデートと合わせて検討する必要があり、いずれも現時点では採用のハードルが高いと考えられます。
 

IE11/Edgeでのテキストエリアの表示

複数行の文字を入力可能なカスタム項目のデータ型としては、「テキストエリア」、「ロングテキストエリア」、「テキストエリア(リッチ)」の3種類が提供されています。Classic環境では「ロングテキストエリア」、「テキストエリア(リッチ)」に関しては、設計時に項目の高さを指定することができました。
 
image3-2 
[設定画面での表示行数の設定]
 
ところが、LEX環境ではこのオプションが無視されてしまい、標準コンポーネントでは任意の高さを指定することができません。これはChromeやFirefoxでテキストエリアを表示した際には、右下にあるハンドルをドラッグすることで動的にテキストエリアのサイズを変更することができるためと思われます。
 
image3-3-1024x221
[Chrome環境で表示したロングテキストエリア]
 
このテキストエリアのサイズ変更機能は、残念ながらIE11とEdge(2016年11月時点)ではサポートされません。そのため、これらのブラウザで「ロングテキストエリア」の項目を表示すると高さが2行ほどのフィールドになってしまい、使い勝手が著しく悪い状況です。
 
image3-4-1024x164
[IE11環境で表示したロングテキストエリア]
 
IE11はともかく最新のEdgeでも同様な状況であるため、現時点では大きな制約になります。回避策として考えられるのはデータ型を「テキストエリア(リッチ)」とするか、標準の編集画面ではなくカスタム編集画面を作成して標準のテキストエリア項目を使わない方法になります。データ型を「テキストエリア(リッチ)」とした場合は、編集時には専用エディタが表示され十分な高さのエリアが表示されます。
 
image3-8-1024x355
[LEX環境でのテキストエリア(リッチ)用のエディタ画面]
 

手動共有設定画面がない

意外なところでLEX環境でまだサポートされていない機能に“手動共有設定画面”があります。Classic環境では [共有] ボタンを押すことで [共有設定] 画面が表示され、ユーザ自身でレコードに対する共有を追加することができます。残念ながらLEX環境ではこの [共有設定] 画面がまだ準備されていないため、標準機能を使って手動での共有設定を行うことができません。
 
image3-5-1024x541 
[Classic環境での共有設定画面]
 
もちろんApexコードを書くことで共有を追加することはできますので、カスタム開発を行うことでこの問題には対応できます。手動共有は全てのお客様で必ず必要というわけではありませんが、Salesforceの機能としてはかなり重要なものだと思いますので早い段階での対応が望まれます。
 

アクション・ダイアログの [保存] ボタン

Winter'17からアクションボタンで表示するダイアログの実装としてVisualforceページだけでなく、Lightningコンポーネントを利用できるようになりました。Lightningコンポーネントを使う場合、① force:lightningQuickAction と ②force:lightningQuickActionWithoutHeader の2種類の実装を選べます。①の実装の場合はVisualforceを使う実装と同じようにヘッダとフッタが表示され、一方②の実装の場合はヘッダとフッタは表示されずにダイアログ全体を自由にデザインできますので、処理の種類に応じて使い分けることができます。注意するのは①のヘッダとフッタ付きのダイアログを表示する場合に、Visualforceで実装する場合はフッタに  [キャンセル] ボタンと [保存] ボタンを表示できますが、Lightningコンポーネントで実装した場合は [キャンセル] ボタンしか表示できません。 [保存] があるような画面の場合は②の実装を選べということなのかもしれませんが、少し不可解な仕様になっています。
下記に実装例を示します。
 
image3-7-1024x743 
[Visualforceページを使ったアクション・ダイアログ]
 
Visualforceページで実装したダイアログでは、フッタ部に [キャンセル] [保存] が自動的に表示されます。
 
image3-6-1024x736 
[Lightningコンポーネントを使ったアクション・ダイアログ]
 
Lightningコンポーネントで実装したダイアログでは、フッタ部には [キャンセル] のみが表示されるため、コンポーネント内に [保存] を表示しています。
 

おわりに

今回紹介した機能以外にも、LEX環境でサポートされていない設定機能はいくつかありますが、環境をClassicに切り換えることで対応できるため、大きな問題にはならないと思います。設定画面の使い勝手や画面移動時のレスポンスはClassic環境の方がまだ上だなと感じますので、開発はClassic環境で行い、画面の確認の時だけLEX環境に切り換えるといったやり方も現時点ではお薦めです(LEX環境でしか表示されない設定機能はまだ一部ですので、ほとんど困ることはありません)。
LEX環境はリリースを重ねるごとに機能強化されていますので、今回紹介した制約についてもSpring'17以降のリリースで順次解消されていくでしょうし、IE11のサポートについても状況次第では変更が入るかもしれません。LEXの採用を検討される方は最新バージョンのリリースノートを確認するようにして下さい。
 
私個人としては、最近LEX環境を使ったプロジェクトに参画する機会を得ました。LEX環境でのSalesforce開発はこれまでのClassic環境とは異なっている部分が多くあり、苦労したこともたくさんありましたが、LEX環境で提供されるビジュアルな画面をコンポーネントベースで開発できたことは、とても楽しい体験であると同時に今後のLEXの可能性を強く感じました。
皆さんも、Lightningコンポーネントベースの新しいSalesforceの開発に触れて、新しい世界を体験してみて下さい。
 

About Kitaarashi Naoki

Kitaarashi Naoki

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

Appirio