ユーザインターフェース開発の考慮事項
学習の目的
このモジュールを完了すると、次のことができるようになります。
- 2 つの Web アプリケーション開発モデルの違いを挙げて説明する。
- Visualforce を使用した、2 つの異なる Web アプリケーション開発方法について説明する。
- Web アプリケーションの開発に Visualforce を使用する場合と、Lightning コンポーネントを使用する場合のそれぞれの強みとトレードオフについて説明する。
- 少なくとも 3 つの異なるシナリオを挙げて Lightning コンポーネントと Visualforce のどちらを使用するのが妥当かを説明する。
Web アプリケーションのユーザインターフェースのレベルアップ
この 10 年ほど、Web アプリケーションのユーザエクスペリエンスに求められるレベルは上昇し続けています。ユーザが期待しているのは、フル機能を備えた高度にインタラクティブな反応型かつ没入型の操作を文字どおり指先でできることです。
これはまず、単機能のアプリケーションで実現されました。Google マップのようなサービスでは、ユーザインターフェース要素の直接操作が導入されました。分析アプリケーションでは、動的でインタラクティブなグラフのドリルダウンが可能になりました。地味なサインアップフォームやログインフォームでさえ、動的に無効なデータ入力へのエラーフィードバック、アニメーション表示、ページ推移などを行う機能を備えています。双方向性はもう目新しいものではなく、ごく普通のことなのです。
そして規模がさらに拡大しました。適用対象が個別のコンポーネントからすぐにコアアプリケーションのエクスペリエンスへと広がりました。今日の Web アプリケーションには、スライドメニュー、アニメーションでのページ推移、動的な主従関係が搭載されています。フロート表示やモーダルウィンドウのようなアプリケーションスタイルの要素もあります。ネイティブアプリケーションと Web アプリケーションの違いはかつてなく小さくなっています。
これは Salesforce にとってどのような意味があるのでしょうか。
従来の Salesforce エクスペリエンス (Salesforce Classic) は、ページ中心の Web アプリケーションの一例です。基本機能には適していますが、ユーザが期待する新しい、より動的なエクスペリエンスを提供するのは困難です。それは、ユーザがアプリケーションとやりとりするたびに、サーバで新しいページを生成するという根本的な制約があるからです。
よりインタラクティブなエクスペリエンスを提供するには、クライアント側で JavaScript を利用する必要があります。この新しいアプリケーション中心モデルでは、一度にページのユーザインターフェース全体を置き換えるのではなく、JavaScript を使用してユーザインターフェースを作成、変更、加工、アニメーション化します。画期的でインタラクティブなうえに流動的です。これが新しい Lightning Experience です。
現在、ページ中心モデルとアプリケーション中心モデルの両方が混在しています。Web を少し見回すだけで、ほとんどのアプリケーションが両方のアプローチを利用していることがわかります。こうしたモデルを組み合わせることで、アプリケーションは適切な使用事例に適切な種類のエクスペリエンスを提供できます。
これから少し時間を取って、Salesforce プラットフォームでこれらのモデルに提供されるさまざまなオプションを見ていきましょう。
従来の Visualforce
Visualforce はページ中心のアプリケーションを構築するための堅牢で成熟したプラットフォームです。Visualforce フレームワークは、サーバで解決され、標準またはカスタムコントローラと連動してデータベースおよびその他の操作を実装しやすくする、堅牢なタグのセットを提供します。
基本情報を確認しましょう。
UI 生成- サーバ側
- Apex 標準またはカスタムコントローラ
- ユーザがページを要求する。
- サーバがページの基礎となるコードを実行し、結果の HTML をブラウザに送信する。
- ブラウザが HTML を表示する。
- ユーザがページを操作すると、ステップ 1 に戻る。
- 実証済みのモデル
- 実装しやすく生産性が向上する
- 大きなアプリケーションは自然に小さな扱いやすいページに分割される
- メタデータインテグレーションが組み込まれている
- インタラクティブな操作が制限される (JavaScript 機能を追加した場合を除く)
- 長い待ち時間により、モバイルのパフォーマンスが低下する
Visualforce は、PHP、ASP、JSP、Ruby on Rails など他のページ中心技術と概念的に類似しています。Salesforce の充実したメタデータインフラストラクチャに基づく Visualforce は、生産性の高いソリューションです。標準コントローラでは、クエリをまったく実行せずに直接またはリレーション経由で簡単にオブジェクトにアクセスできます。他のメタデータ対応コンポーネントも、ページにマークアップを追加するだけで簡単に接続できます。これらの機能は、プラットフォーム上で有効に動作し、依然として多くの使用事例に適しています。
JavaScript アプリケーションコンテナとしての Visualforce
よく考えてみると、Visualforce ページは、サーバで解決される追加のタグを含む HTML ページに過ぎません。そのため、空の Visualforce ページを JavaScript アプリケーションのコンテナとして使用できます。このシナリオでは、ユーザインターフェースの作成に Visualforce タグを使用しません。代わりに、JavaScript アプリケーションを空のページに読み込みます。読み込まれた JavaScript アプリケーションがクライアント側でユーザインターフェースを生成します。これらのアプリケーションは一般に単一ページアプリケーション (SPA) と呼ばれ、多くは AngularJS や React のようなサードパーティのフレームワークを使用して作成されます。
基本情報を確認しましょう。
UI 生成- クライアント側 (主に JavaScript)
- リモートオブジェクトまたは JavaScript Remoting、Apex コントローラ
- ユーザがページのスケルトンおよび JavaScript のインクルードが含まれる「空」の Visualforce ページを要求する。
- ページがブラウザに返される。
- ブラウザが JavaScript アプリケーションを読み込む。
- JavaScript アプリケーションが UI を生成する。
- ユーザがアプリケーションを操作すると、JavaScript が必要に応じてユーザインターフェースを変更する (前のステップに戻る)。
- 高度にインタラクティブで没入型のユーザエクスペリエンスが可能になる
- 複雑
- メタデータインテグレーションが組み込まれていない
- 統合開発者環境がない。Lightning プラットフォーム開発者コンソールでは、これらの JavaScript アプリケーションは明示的にはサポートされていません。通常は、手間のかかる操作によって静的リソースとして読み込む必要があります。
はっきり申し上げると、上記のマイナス面を許容できるなら、現在これがインタラクティブアプリケーションを作成する最適な方法です。Salesforce は、そもそもこの目的でリモートオブジェクトや JavaScript Remoting のようなツールキットを開発しました。AngularJS、React、またはその他の JavaScript フレームワークに習熟した開発者なら、専門知識を活かし、慣れたツールで Salesforce のアプリケーションを開発できます。
一方で、新しいものを受け入れられるならば、Salesforce が提供する新たなレベルの革新的な Web ベースのアプリケーション開発を利用することもできます。
Lightning コンポーネント
Lightning コンポーネントは、デスクトップとモバイルデバイス用に動的な Web アプリケーションを開発するための Salesforce ユーザインターフェースフレームワークの一部です。
メモ
Spring '19 リリース (API バージョン 45.0) では、Lightning Web コンポーネントモデルと従来の Aura コンポーネントモデルの 2 つのプログラミングモデルを使用して Lightning コンポーネントを作成できます。Lightning Web コンポーネントは、HTML と最新の JavaScript を使用して作成されるカスタム HTML 要素です。Lightning Web コンポーネントと Aura コンポーネントは、ページ上に共存可能で、同時に使用できます。
概要を確認しましょう。
UI 生成- クライアント側 (JavaScript)
- Lightning データサービス、Apex
- ユーザがアプリケーションまたはコンポーネントを要求する。
- アプリケーションまたはコンポーネントバンドルがクライアントに返される。
- ブラウザがバンドルを読み込む。
- JavaScript アプリケーションが UI を生成する。
- ユーザがページを操作すると、JavaScript アプリケーションが必要に応じてユーザインターフェースを変更する (前のステップに戻る)。
- 高度にインタラクティブで没入型のユーザエクスペリエンスが可能になる
- Salesforce ユーザインターフェース戦略と連携する
- 基盤からメタデータに基づいて構築され、開発速度が向上する
ジョブに最適なツールの選択
Visualforce は長い間使用され、十分に理解されている成熟したアプリケーション開発プラットフォームです。現在も使用され続けています。新しく加わったのが Lightning コンポーネントです。多くの利点がありますが、ユーザからすると、まだわからないことだらけです。
重要なのは、どちらか一方を選ばなくてもよいということです。
工具ベルトに差した工具のように、ページ中心モデルとアプリケーション中心モデルのどちらも開発ツールとして必要なときにすぐに使用できます。一方が常に優れているわけではありません。それぞれの強みとトレードオフを理解していれば、どちらも最大限に活用できます。とりかかっているジョブに最適なツールを使用してください。
ここでは、どちらを使うか決めるためのガイドラインを紹介します。ただし、決めるのはあくまでもあなたです。最終的には、自分にぴったりだと感じるツールを使用してください。さらに、ツールは進化することにも注意してください。このガイドラインも進化します。
| ジョブ | 推奨 |
|---|---|
| Lightning Experience 向けの開発をする | Lightning コンポーネントを強くお勧めします。Lightning Experience は Lightning コンポーネントを使用して構築され、この 2 つは密接に連携しています。 既存のコードや進行中のプロジェクトがある場合は、もちろん Visualforce を使用できます。Lightning Experience 用 Visualforce は完全にサポートされていますが、いくつか制約があります。 ただし、Lightning Experience 向けのツールとして、その固有の言語で動作する Lightning コンポーネントに勝るものはありません。 |
| Salesforce モバイルアプリケーションを開発する | Lightning コンポーネントをお勧めします。Visualforce の特性、特にページ中心指向であることは、ネットワーク接続が高遅延で制限され、コンピューティングリソースが限られているモバイルアプリケーションに適していません。一方、Lightning コンポーネントは、こうしたコンテキストの処理に特化して設計されています。 Visualforce と Lightning コンポーネントはどちらも、類似のタグベースのマークアップを使用します。たとえば、入力項目の Visualforce マークアップは この 2 つのどこが違うのでしょうか? 実は、Visualforce はマークアップタグを Salesforce サーバ上で処理し、Lightning コンポーネントはクライアントでマークアップを処理します。クライアントで処理するメリットは、やりとりのたびにクライアントとサーバ間でページ全体の HTML ブロックが受け渡しされることがないという点です。 いくつかの例外はありますが、Lightning コンポーネントの方が Salesforce モバイル開発に適しています。JavaScript アプリケーションとして Visualforce が必要になる場合もあります。詳細は、『Lightning コンポーネント開発者ガイド』を参照してください。 |
| 限られたクライアント側ロジックを使用してページ中心エクスペリエンスを構築する | 開発のベロシティと管理可能性を確保するために、Visualforce ページを使用します。 |
| ユーザエクスペリエンス要件を満たすために JavaScript を使用してインタラクティブなエクスペリエンスを構築する | Lightning コンポーネントを使用しますが、まず制限事項のドキュメントを参照してください。 |
| AngularJS や React などの JavaScript フレームワークを使用したい | Visualforce ページを、AngularJS や React などのサードパーティのフレームワークおよび作成するアプリケーションのコンテナとして使用します。 |
| 標準コンポーネントとカスタムコンポーネントを組み合わせて開発者以外がアプリケーションを作成できるようにする | Lightning コンポーネントを使用して、Lightning アプリケーションビルダーで使用できるカスタムコンポーネントを作成します。 |
| JavaScript でインタラクティブなエクスペリエンスを構築中で、サードパーティのフレームワークが必要である | Visualforce ページを、AngularJS や React などのサードパーティのフレームワークおよび作成するアプリケーションのコンテナとして使用します。 |
| ユーザインターフェース要素を追加する | たとえば、タブをレコードのホームに追加するとします。Lightning アプリケーションビルダーでは、この作業をドラッグアンドドロップで簡単に行うことができます。Lightning コンポーネントを使用してカスタムユーザインターフェース要素を作成します。 |
| 顧客またはパートナーのコミュニティを作成する | エクスペリエンスビルダーを使用して、Lightning コンポーネントを利用するサイトを作成します。 |
| 一般向けの認証のない Web サイトを公開する | エクスペリエンスビルダーを使用して、Lightning コンポーネントを利用する Lightning ベースのサイトを作成します。 |
| アプリケーションでページを PDF として表示する | Visualforce を使用します。Lightning コンポーネントでは、PDF 出力としての表示はまだサポートされていません。 |
| 既存のプロジェクトに多くの Visualforce ページを追加する | 引き続き Visualforce を使用します。折を見て Visualforce 向けの Lightning コンポーネントを使用して、要素を Lightning コンポーネントに移行することを検討してください。 |
| 最新テクノロジへの投資を検討している | ぴったりのものがあります。Lightning コンポーネントをお選びください。 |
| まったく新しいプロジェクトを開始する | Lightning コンポーネントを使用します。Lightning コンポーネントについて知らない場合、今が学習するのに最適なタイミングです。 |
| ビジネスプロセスに従うユーザを誘導するフローを構築する | Lightning コンポーネントを使用して、フローの画面の機能やデザインをカスタマイズします。 |
組織に最適なツールの選択
ツールの選択について検討するとき、重要なのは目下のジョブ以外にも目を向けることです。組織全体と組織内での自分の役割も考慮する必要があります。ここでは、いくつかの異なる役割について、どうすれば Salesforce の開発モデルを最大限に活用できるかを見ていきましょう。
| 役割 | 推奨 |
|---|---|
| ISV パートナー | 新規アプリケーションと既存アプリケーションの新規機能で Lightning コンポーネントの使用を開始します。Salesforce Classic と Lightning Experience の両方で登録者が使用できるようにこれらのユニットをパッケージ化します。 |
| SI | 新しい実装で Lightning コンポーネントの使用を開始します。進行中の実装については、引き続き Visualforce を使用します。 |
| JavaScript に詳しく Visualforce の経験が豊富な熟練の開発者 | 引き続き Visualforce と適した JavaScript フレームワークを併用します。Lightning コンポーネントについて調査し、いずれは切り替えを検討します。 |
| ページに標準 Visualforce コンポーネントを使用する一般的な開発者 | 引き続き Visualforce を使用し、Lightning アプリケーションビルダーについて調査することも検討してください。 |
| ポイント & クリック操作でアプリケーションを作成するシステム管理者 | Lightning アプリケーションビルダーを使用してアプリケーションの作成とカスタマイズを行います。カスタム Lightning コンポーネントを作成する場合は、開発者やパートナーと協力してください。 |
Lightning コンポーネントへの移行
よいお知らせがあります。Lightning Experience にシフトし、Lightning コンポーネントにますます重点が置かれていますが、Visualforce ページはまだ Salesforce で動作します。新しいインターフェースと使い慣れた Salesforce Classic のどちらを使用していても問題ありません。Visualforce は両方で動作します。既存の Visualforce ページを変換しなくても、長期にわたって使い続けることができます。
ただし、Web アプリケーションはアプリケーション中心モデルを利用することが多いため、すべての Salesforce 開発者に少なくとも Lightning コンポーネントの基本を学習することをお勧めします。将来の開発作業でこれらのコンポーネントを使用することがあるでしょう。
今が最初の一歩を踏み出すのに最適なタイミングです。Lightning アプリケーションビルダーや Visualforce 向け Lightning コンポーネントなどの機能により、「お試し」として、新規または既存のページで Lightning コンポーネントを 1 つだけでも使ってみることができます。これらの埋め込みコンポーネントは Lightning Experience と Salesforce Classic の両方で使用できます。非常に簡単ですので、ぜひ試してみてください。
新しい開発フレームワークへの移行は手ごわい作業です。そのためにこのトレイルがあるのです。このトレイルには、Lightning Experience 開発の導入成功に必要なヒント、コツ、秘訣がすべて詰まっています。
リソース
- Trailhead: Visualforce と Lightning Experience
- Trailhead: Lightning Web Components Basics (Lightning Web コンポーネントの基本)
- Trailhead: Aura コンポーネントの基本
- コミュニティのコンポーネントの設定
- Lightning ページと Lightning アプリケーションビルダーのコンポーネントの設定
- Visualforce ページでの Lightning コンポーネントの使用
- Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド)
- Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
- スクリーンキャスト: Lightning コンポーネントの概要
- フローでの Aura コンポーネントの使用
