2021/06/7

Salesforce PDF 表示とフレームワークの使用用途と注意点

 
  

Salesforce PDF 表示概要

Salesforce PDF 表示をさせる場合について説明させていただきます。Salesforce PDF 表示をさせる場合は、JavaScriptでUIを設定する方法があります。 JavaScriptは、webサイト上でUIに動的処理をさせたい場合用います。JavaScriptでPDF表示の際は、モーダルウィンドウで設定する事が多いです。リンクをクリックするとPDF表示することが出来る設定も出来ます。

Salesforce PDF 表示をモーダルウィンドウでする

Salesforce PDF 表示をモーダルウィンドウにするとリンクをクリックするとPDF表示をさせることができます。その際にJavaScriptでコードを書く必要があります。 モーダルウィンドウをJavaScriptで作る場合は、便利なライブラリがあります。そのライブラリを設定する事によりモーダルウィンドウを容易に設定する事が可能になります。 いくつか紹介します。

JavaScriptでモーダルウィンドウを作成

JavaScriptでモーダルウィンドウを作成する場合は、jqueryというJavaScriptのプラグインを使用する場合が多々あります。 モーダルウィンドウ以外にもUI関係のjqueryプラグインがあります。その数はかなりの数あり、便利なプラグインがいっぱいあります。モーダルウィンドウを作成する際に使用するプラグインも多々あり、ローコードで書けるので、メンテナンス性が高いコードが書けます。
  • jQuery Modal
  • animatedModal.js
  • jBox jQuery Plugin
  • SweetAlert2

jQuery Modalについて

jQuery Modalは、軽量でシンプルなモーダルウィンドウを実装する際に使用されるケースが多いjqueryプラグインになります。 フェードイン、フェードアウトが容易に設定できます。トリガーのイベント処理も容易に設定出来るので、クリック時のイベント処理に有効なプラグインになります。モーダルウィンドウを表示させる際に使用する場合にリンクをクリックさせ表示させる処理が出来ます。

指定PDFのモーダルウィンドウ表示

SalesforceでPDF表示させる場合に、このプラグインでリンクをクリックさせるのをトリガーにし、PDF表示させる処理を作る際に便利なプラグインになります。 PDF表示させた場合に指定のPDFをモーダルウィンドウにし、表示させることも出来ます。 その際にはPDFのCSSにoverflowを設定すると画面外にPDFがはみ出した場合は切れてしまいますので、画像の大きさには注意が必要です。

animatedModal.jsについて

animatedModal.jsは、アニメーション付きのモーダルウィンドウを作成する際に有効なjqueryプラグインになります。アニメーション付きだとユーザーが楽しい気持ちになったりデザイン性が上がります。 大規模なアニメーションライブラリやカスタマイズ専用のAPIが含まれるので、大規模な開発にも適したjqueryプラグインになります。

animatedModal.jsとSalesforceの相性

SalesforceでanimatedModal.jsを使用し、PDF表示させる場合にアニメーション付きだとデザイン性の高い物が出来ます。アニメーション付きだとユーザビリティの高い物も出来、ユーザーの視認性も上がります。 またanimatedModal.jsは、大規模な開発にも向いているので社内システムなどでよく採用されるSalesforceとは相性がいいです。

jBox jQuery Pluginについて

jBox jQuery Pluginは、モーダルウィンドウに複数のアニメーションを加えたり、アプリ内通知が可能になるプラグインになります。 モーダルウィンドウで、ボタンを押すと通知をする設定を加えたり通知をメールにて告知する処理をさせたり多様性のあるプラグインになります。

著作権のセキュリティ

SalesforceでPDF表示させる場合に、モーダルウィンドウでPDFのリンクを選ばせたりする処理を行いたい場合があります。その時に有効なjqueryプラグインがjBox jQuery Pluginになります。 リンクをクリックさせると、どのユーザーが指定のPDFをダウンロードしたか通知する設定を行うと著作権を守ることができ、セキュリティ面でも活躍できます。

モーダルウィンドウのマウスホバー

またjBox jQuery Pluginは、ツールチップやダイアログの設定も出来ます。モーダルウィンドウにツールチップやダイアログを設定することによりデザイン性や機能性が上がり、ユーザビリティの良いシステムの構築ができます。 モーダルウィンドウでマウスをホバーした際に、ボタンが出現したりする処理も作れたりするので、様々な処理の拡張に使用できます。

SalesforceでPDF表示させる場合の結論

SalesforceでPDF表示させる場合に、有効なプラグインについて説明しました。主にPDF表示させる場合はモーダルウィンドウが多いので、jqueryプラグインを採用しモーダルウィンドウを作成する場合が多いです。 その際に画像の大きさを気にしなければ、画面外に画像がはみ出したりするのでCSS画像の大きさはレスポンシブ対応させる必要があります。]]>

ITエンジニアへのキャリアチェンジならキャリアチェンジアカデミー

この記事の監修者・著者

株式会社オープンアップITエンジニア
株式会社オープンアップITエンジニア
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞

おすすめの動画

  • 【未経験からIT業界へ転職するなら】相談窓口とスキルの獲得はここで解決!IT転職が一気に有利に!【キャリアチェンジアカデミー】

  • 【費用一切不要】未経験からIT業界へ転職するならまずはここへ相談!【キャリアチェンジアカデミー】

  • 【何のエンジニアになれるのか?】未経験からITエンジニアを目指すとこんな道がある【キャリアチェンジアカデミー】