VisualforceのPDFにQRコードを埋め込む書き方

なぜQRコードをPDFに載せるのか

配送先や訪問先の経路を、PDFを開いた人がスマートフォンでそのまま読み取れると便利です。QRコードの中身に、地図アプリで開けるURLや座標の文字列を入れておけば、PDFの中の画像を読み取るだけで地図アプリに遷移できます。ただし、VisualforceのPDFレンダリングサービスはJavaScriptを実行しません。公式ドキュメントには「JavaScriptでレンダリングするコンテンツはサポートされない」と明記されているため、画面上でJavaScriptのライブラリを使ってQRコードを描く方法は、PDFには反映されません。PDFに載せるQR画像は、あらかじめ完成した画像として用意する必要があります。

取引先に項目とアクションを用意する

1. 位置情報の項目を作成する

   取引先オブジェクトに、出発点・到着点という名前で地理位置情報（Geolocation）型のカスタム項目を作成します。地理位置情報型は緯度と経度の2つの数値をひとつの項目としてまとめて持てる項目タイプです。

2. QRコードの文字列を持つ項目を用意する

   QRコードに埋め込む文字列（地図アプリで開けるURLなど）を返す数式項目を用意します。出発点・到着点からどんな文字列を組み立てるかは、利用する地図サービスの座標URLの仕様によって変わるため、本記事では割愛します。その仕様に沿って自組織で設計してください。

3. クイックアクションを作成してページレイアウトに配置する

   作成するVisualforceページを呼び出すクイックアクションを取引先オブジェクトに追加し、ページレイアウトのアクション欄に配置します。

リモートサイト設定を登録する

外部のURLから画像を取得するVisualforceページをPDFにする場合、そのドメインをリモートサイト設定に登録しておく必要があります。公式のベストプラクティスには「リモートサーバーからのリソース参照は、許可されたリモートサイトのリストに追加する必要がある」と明記されています。

1. リモートサイト設定を開く

   設定からリモートサイト設定を開き、新規リモートサイトを作成します。

2. QR画像を提供するドメインを登録する

   名前を入力し、リモートサイトのURLにQR画像を生成するサービスのドメインを入力して保存します。

VisualforceページでQRコードを表示する

<apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false" standardController="Account">
<head>
<style>
@page {
    size: A4 landscape;
    margin-top: 1cm;
    margin-bottom: 1cm;
}
body {
    font-family: "Arial Unicode MS";
    font-size: 12px;
}
</style>
</head>
<body>
<apex:image url="https://api.qrserver.com/v1/create-qr-code/?size=90x90&data={!Account.qrcode__c}"/>
</body>
</apex:page>

renderAs="pdf"でPDFにします。QR画像は外部APIのURLをapex:imageのurlにそのまま指定しています。

日本語のフォントはArial Unicode MSを指定しています。公式ドキュメントは、PDFレンダリングでWebフォントはサポートされず、多バイト文字を含む拡張文字セットに対応するのはArial Unicode MSだけだと明記しています。このコードは、外部サーバーが生成したPNG画像のURLをapex:imageのurlにそのまま渡しているだけです。ここで注意が必要なのは、公式ドキュメントが画像形式について「data:URIスキームでエンコードした画像はサポートされない」「WebP画像やSVGマークアップはサポートされない」と明記している点です。QRコードを生成するサービスによっては出力形式をSVGやWebPに切り替えられるものもあるため、PNG形式で返すURLになっているかを確認してから使ってください。

この書き方が抱える制約

外部URLの画像をそのまま読み込む書き方には、公式ドキュメントで確認できる範囲でも次の制約があります。

毎回同じQRコードしか出さないのであれば、画像をあらかじめ静的リソースとしてアップロードし、$Resourceグローバル変数で参照する方法のほうが、外部サーバーへの依存もレンダリング時間の増加もなく確実です。

動作確認

1. 取引先レコードを開く

   出発点・到着点の項目に、緯度・経度の値を入力します。

2. アクションを押す

   作成したクイックアクションを押すと、PDFが開きます。

3. QRコードを確認する

   PDFの中にQRコードの画像が表示されていることを確認します。スマートフォンのカメラなどで読み取り、想定した内容が開くかもあわせて確認してください。

ここで間違えやすい

確認した環境

• 2026年9月 ／ Salesforce Summer '26（APIバージョン67.0）時点の公式ドキュメントで、PDFレンダリングの制約とリモートサイト設定の必要性を確認しています

まとめ

• VisualforceのPDFレンダリングはJavaScriptを実行しないため、QRコードは完成した画像として用意する必要があります
• 外部URLの画像を読み込むには、そのドメインをリモートサイト設定に登録します
• 外部サーバーの画像はレンダリング時間を増やし、Apexトリガーの中では参照できません
• data:URI、WebP、SVGの画像はPDFレンダリングでサポートされません
• 日本語を含む多バイト文字のフォントはArial Unicode MSを使います
• 毎回同じ画像で足りる場合は、静的リソースへ置き換えたほうが外部依存が減ります