概要

Salesforce（Lightning）画面中に静的画像を表示する。
本方法は動作保証対象外と思われるため、恒久的な対応として行う場合は別の対応方法を検討してください。

背景

Salesforce の導入提案にて一部の AppExchange については提案採用後に購入となったため、それまでの代替として、該当機能の画面イメージを Salesforce 画面に埋め込み、動作イメージを紹介することとなった。
リッチテキストコンポーネントのみの Lightning コンポーネントを定義し、画像を表示させたが、その時の画像ファイルの扱いで、表示する画像を静的リソースに登録しなければならないという考慮事項があったため、備考として手順も含めを本投稿に記載する。

Salesforceにおけるリッチテキストについて

オブジェクトのカスタム項目としてのリッチテキスト編集フォームには画像挿入ボタンが表示されているが、Lightningコンポーネントのリッチテキスト編集フォームには画像挿入ボタンが表示されていない。よって、そもそもLightningコンポーネントのリッチテキストでは画像表示には対応していないと思われる（動作保証対象外としているのはこのためです）。

リッチテキスト項目の編集フォーム

リッチテキストコンポーネントの編集フォーム

静的リソース登録の必要性

リッチテキストフォームに画像を貼り付ける際に、静的リソースに登録したものではなく、ローカルドライブの画像などから貼り付けた場合、作業したアカウントと別のアカウントから参照した際に、正しく表示されない事があるため、静的リソースに登録する必要がある。

対応手順

1. 画像ファイルの登録（静的リソース化）

設定 → カスタムコード → 静的リソースより、静的リソース画面を表示し、画像ファイルをアップロード・登録する（この時、キャッシュコントロールを「公開」に設定する）。

2. 画像のコピー

1.でアップロードした画像をブラウザで表示し、右クリックして「コピー」する。

3. リッチテキストコンポーネントの作成

Lightningページレイアウト画面にて、リッチテキストコンポーネントを配置し

編集フォームにて右クリックし「貼り付け」を選択し、2.にてコピーした画像を設定する。

以降、編集したページを保存し作業完了となる。

完成イメージ

参考文献

Salesforce の画面に画像を配置する方法　静的リソース＆リッチテキストコンポーネント