カスタム開発 Icon

Lightning デザインシステム

Lightning Experience とは、デザイン性に優れた Salesforce の新しいユーザーエクスペリエンスです。 この新しいユーザエクスペリエンスは Lightning デザインシステム と呼ばれる一連の UI コンポーネント、パターンおよびガイドラインをベースに作られています。

Lightning デザインシステムと Lightning コンポーネント

美しく作られたこの新しい Salesforce Lightning Experience をカスタムコードで拡張する必要が生じても、ネイティブのインターフェースに似せようと苦労する必要はありません。 Salesforce のエンジニアが Salesforce のアプリやコアコンポーネントを構築するために使用したのと同じスタイルシート、アイコン、フォント、UI パターンがそろった Lightning デザインシステムを利用することができます。 これにより、見た目も機能も一貫したエクスペリエンスを実現できます。

ベース Lightning コンポーネント はLightningデザインシステムを利用したコアとなるコンポーネントセットで、自身のコンポーネントを開発する際の部品として利用できます。 もちろんもしあなたが開発しているコンポーネントがベース Lightning コンポーネントに存在しない場合は、Lightning デザインシステムをあなたのマークアップを直接利用することも可能です。

DreamHouse の機能群は、このベースコンポーネントとLightning デザインシステムのスタイルを活用したカスタムマークアップのコンビネーションによってビルドされています。 以下のビデオでコンポーネントの挙動を確認することができます:

Lightning デザインシステムとその他のフレームワーク

エンタープライズシステムの特徴の 1 つとして、異種混在環境になっていることがあります。年月を経る中で、さまざまな理由から多種多様な機器やシステムが集まっています。その結果、ワークフローが継ぎはぎになり、ユーザーの混乱を招くことも少なくありません。ユーザーのワークフローが複数のシステムにまたがっている場合、それらのシステムは背後に隠して、Lightning デザインシステムで統一された UX を実現することができます。Lightning デザインシステムは、言語やフレームワーク、ベンダーに依存しません。そのため、ある部分は Salesforce で実行されていて、別の部分は Heroku 上の Java や Node.js で実行されていても、統一感のある UX をユーザーに提供するアプリケーションを簡単に作成することができます。

複数のシステムを背後に持ちながら統一の取れたユーザーエクスペリエンスを実現するために、Lightning デザインシステムを活用した実際の例として、ある物件管理アプリがあります。このアプリは Heroku 上で実行され、React、Node.js、および Postgres を使用して構築されています。既存のアプリケーションを統合して、統一の取れたインターフェースを実現する方法を示す一例です。しかし、新規にアプリケーションを作成する場合は、標準の Salesforce 機能と新しい Lightning Experience を使って、コードを書かずに同じことを実現できます。

GitHub Logo

React と Node.js を使用したアプリケーション(このビデオで紹介しているバージョン)のソースコードは、リポジトリで入手できます。