SalesforceのApex/Visualforceにiframeを組み込む

（最終更新月: 2024年3月）

✔以下の疑問をお持ちの方へ向けた記事です

「Salesforce ApexでIframeをどのように使用するのか？」
「VisualforceページでのIframeの組み込み方は？」
「Iframeを使って外部サイトをSalesforce内に表示させる際のベストプラクティスは？」

✔当記事を読むことで得られる知識

Salesforce ApexとVisualforceを用いたIframeの基本的な使い方
Visualforceページ内でIframeを組み込む方法
Iframeのセキュリティに関する考慮事項とベストプラクティス

Iframeは、ひとつのWebページ内に別のWebページを埋め込む際に使用されるHTML要素であり、SalesforceのVisualforceページ内で外部サイトや別のVisualforceページを表示するのに便利です。

Salesforceの開発者や管理者が、Salesforceアプリケーションをより機能的でユーザーフレンドリーにするためのガイドとなるでしょう。

ぜひ最後までご覧ください。

定義や属性などは公式ガイドを必ず参考にしましょう。

当記事では、主にその使い方を具体例とともに解説します。

筆者プロフィール

【現職】プロダクトマネージャー

プロダクトマネージャーとして、Apex・Visualforceの開発エンジニアとして、以下のようなプロジェクトに従事してきました

新規事業の立ち上げに伴うビジネスプロセス構築とSalesforceのカスタマイズ
SFDXを活用した大規模リリース
Visualforce等による一般ユーザー向けサイト・アプリケーションの構築

相談・業務の依頼も承ります。ご質問・ご希望をお問い合わせください。

iFrameの基本

こちらでは、iFrameの基本について解説していきます。

異なるオリジンのコンテンツをあなたのWebサイトに安全に組み込む方法を学べるでしょう。

iFrameとは何か？
Salesforce環境でiFrameを使用する利点
iFrameを使用する際の基本的なセキュリティ考慮事項

iFrameとは何か？

iFrame、正式にはインラインフレームは、HTML文書内に別のHTML文書を埋め込むための要素です。

具体的には <iframe> タグを使用し、その src 属性に表示したいページのURLを指定することで、外部コンテンツを現在のページにインラインで表示できます。

以下はその例です。

<iframe src=""https://www.example.com"" width=""600"" height=""400""></iframe>

iFrameを利用することで自らのウェブページ内に、他サイトのページやビデオなどのコンテンツを簡単に表示させられます。

これにより、サイトをリッチにすることができますが、使い方には注意が必要です。

Salesforce環境でiFrameを使用する利点

Salesforce環境でiFrameを使用すると、多くの利点があります。

最大の利点は、外部のアプリケーションやカスタムページをSalesforce内に組み込める点です。

これにより、ユーザーは異なるサービス間でナビゲートする手間を省き、生産性を高められます。

例えば、Googleドキュメントやマーケティングツールなどの外部サービスをSalesforceページのiFrame内に表示し、簡単にアクセスが可能。

以下のようなコードスニペットで実現可能です。

<iframe src=""https://service.example.com"" width=""100%"" height=""500px""></iframe>

ただし、SalesforceはClickjacking保護など特有のセキュリティ機能を提供しているため、この環境内でiFrameを安全に使用するためには特別な配慮が求められます。

iFrameを使用する際の基本的なセキュリティ考慮事項

iFrameを使用する際には、セキュリティ面での考慮が必須。

iFrameにより、以下のリスクが増加する可能性があるため、以下のセキュリティプラクティスを忘れずに守るべきです。

X-Frame-Options ヘッダーの設定: このHTTPヘッダーを使用して、他ページがあなたのページをiFrame内で表示することを許可するかどうかを管理できます。例えば X-Frame-Options: DENY とすることで、全てのiFrameの埋め込みを拒否します。
サンドボックス属性の使用: <iframe> タグの sandbox 属性を使用することで、埋め込まれたページの許可された動作を制限できます。例: <iframe sandbox=""allow-scripts"" src=""...""></iframe>
コンテンツセキュリティポリシー（CSP）: CSPヘッダーを使用して、どのオリジンからのリソースがWebページ上で実行されても良いかをブラウザに指示します。

これらの設定は、攻撃者がXSS攻撃やClickjacking攻撃などの悪意ある行為を行うのを防ぐのに役立ちます。

VisualforceページでのiFrameの使用

次に、VisualforceページでiFrameをどのように使用するかについて説明します。

VisualforceはSalesforce上で独自のユーザーインターフェースを構築できる強力なツールです。

iFrameを適切に使用することで、Salesforce開発者はページ上で外部コンテンツの統合や、よりシームレスなユーザーエクスペリエンスを実現できます。

iFrameをVisualforceページに埋め込む方法
VisualforceとiFrameの間でのデータの受け渡し
iFrameのサイズと表示オプションのカスタマイズ

iFrameをVisualforceページに埋め込む方法

VisualforceページにiFrameを埋め込むのは簡単です。

以下の手順で、Visualforceページ内に任意のウェブページを埋め込めます。

<apex:iframe> タグを使用して、ページ内にiFrameを追加。

src 属性には表示したいウェブページのURLを指定します。

<apex:page>
    <apex:iframe src=""https://www.example.com"" scrolling=""true"" id=""theIframe""/>
</apex:page>

必要に応じて、height や width 属性を指定してiFrameのサイズを調整します。

この手順で、Visualforceページに外部コンテンツをスムーズに組み込むことができますが、セキュリティを常に心に留めることが大切です。

VisualforceとiFrameの間でのデータの受け渡し

SalesforceとiFrameとの間でデータを受け渡すには、一般にJavaScriptの postMessage APIを使用します。

これは異なるオリジン間でも安全にメッセージを送信するための方法です。

Visualforceページに以下のJavaScriptコードを追加することで、iFrame内のページとメッセージを交換できます。

// Visualforceページでのメッセージ送信
window.addEventListener(""message"", receiveMessage, false);

function receiveMessage(event) {
    if (event.origin !== ""https://trusteddomain.com"") {
        return; // 信頼できるドメインからのメッセージであることを確認する
    }
    // ここでevent.dataを使用して処理を行う
}

// iFrame送信コード
document.getElementById(""theIframe"").contentWindow.postMessage(""Hello!"", ""https://trusteddomain.com"");

このようなコードで、セキュアなデータ交換を実現できます。

iFrameのサイズと表示オプションのカスタマイズ

iFrameの見た目をカスタマイズするには、さまざまな属性を活用します。

たとえば、width と height を使ってサイズを指定し、frameborder で外枠の有無を設定できます。

また、CSSスタイルを適用して見た目を整えることも可能です。

以下はサイズと外枠をカスタマイズしたiFrameの例です。

<apex:iframe style=""border: none; width: 100%; height: 500px;"" src=""https://www.example.com"" />

このように、属性を上手く利用することで、ユーザーにとって見やすく、組み込んであるコンテンツが自然にページに溶け込むように見せることが可能です。

実践的なiFrameの使用例

実際にiFrameを使った様々なシナリオを紹介していきます。iFrameは多様な使い方があり、Web開発において真の力を発揮するものです。

以下では、外部ウェブページの統合からSalesforce外部のアプリケーションとの連携、さらにはユーザーエクスペリエンスの向上のための活用事例まで、iFrameの様々な使用例を見ていきましょう。

外部ウェブページの統合
Salesforce外部のアプリケーションとの連携
ユーザーエクスペリエンスの向上のためのiFrameの活用事例

外部ウェブページの統合

人々がWebサイトを訪れる際、情報を簡潔な形で提供することが重要です。

iFrameを使用して外部コンテンツをWebサイトに組み込むことで、訪問者に追加情報を提供したり、関連サービスへのアクセスを容易にすることが可能です。

例えば、ニュースサイトから最新のニュースを取得して表示したい場合、以下のようにiFrameを利用できます。

<iframe src=""https://news.example.com/latest-news"" width=""800"" height=""600""></iframe>

このコードをWebページに埋め込むことで、訪問者はあなたのウェブサイトを離れずに最新のニュースを閲覧できるようになります。

Salesforce外部のアプリケーションとの連携

Salesforceは多くの企業にとって中心的なツールですが、他の多くのアプリケーションと連携が必要な場合もあります。

iFrameを使用することで、外部アプリケーションをSalesforce内部に統合し、データの一貫性を保ちながら機能を拡張できます。

例えば、顧客サポートチームが別のサポートプラットフォームを使用している場合には、次のようにiFrameの統合が可能。

<iframe src=""https://support.example.com/ticketing-system"" width=""100%"" height=""500""></iframe>

このように統合することで、Salesforceユーザーは新しいタブやウィンドウを開くことなく、サポートチケットや顧客リクエストへ迅速にアクセスできます。

ユーザーエクスペリエンスの向上のためのiFrameの活用事例

iFrameの最大のメリットのひとつは、ユーザーエクスペリエンス(UX)を向上させる柔軟性です。

例えば、ビデオチュートリアル、地図サービス、インタラクティブなフォームなど、ユーザーの興味を引くコンテンツを簡単にページに追加できます。

例えば、Google MapsをWebページに統合する場合、次のようなコードを使用します。

<iframe
  src=""https://www.google.com/maps/embed?pb=!1m18!1m12!1m3...""
  width=""600"" height=""450"" style=""border:0;"" allowfullscreen=""""></iframe>

この方法で地図をWebページに埋め込むと、ユーザーは店舗の位置をすぐに確認でき、より良いUXを提供できます。