よくある原因
HTMLにPDFを埋め込む方法として`<embed src="file.pdf">`や`<iframe src="file.pdf">`を使う場合、PDFファイルが同一オリジンに存在しない、またはファイルパスが相対パスのまま公開URLでは解決できない状態になっていると、ブラウザはPDFを空白か赤い「×」アイコンで表示します。ローカルで確認したときは`./doc.pdf`が機能していても、ギガサイト便などのホスティングサービスでは別途PDFをアップロードしていないと参照できません。
ブラウザのPDFビューア設定も原因になります。ChromeとEdgeにはビルトインPDFビューアがありますが、Firefoxはバージョンや設定によってPDFを外部アプリで開こうとすることがあります。また企業のグループポリシーでブラウザのPDF表示が無効になっている環境では、`<embed>`タグのPDFが一切表示されません。この場合は「PDFを開くボタン」のリンク形式への切り替えが現実的な代替案です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
まずHTMLソース内の`<embed>`や`<iframe>`のsrc属性値を確認します。`src="/doc.pdf"`や`src="./doc.pdf"`のような相対パスがある場合、そのPDFファイルが公開先のURLルートに存在するかを確認します。ギガサイト便ではHTMLとPDFを同時にzip化してアップロードすることでパスが解決できます。PDFだけ別にアップロードしてURLを取得し、srcに絶対URLを指定する方法もあります。
Chrome DevToolsのNetworkタブでPDFファイルのリクエストを確認します。404（Not Found）ならパス問題、403（Forbidden）ならアクセス権問題、CSPエラー（Consoleに`Content Security Policy`メッセージ）なら共有サービス側のCSPヘッダーが原因です。CSPで`frame-src`や`object-src`が`none`に設定されているサービスでは`<embed>`によるPDF表示ができないため、PDFのダウンロードリンクかPDF.jsを使ったJavaScriptレンダリングに切り替えます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手のブラウザとOSを確認します。MacのSafariはiFrameによるPDF埋め込みに対応していますが、iOS Safariは`<embed>`の表示に制限があります。「スマホでアクセスしていますか？その場合はiOSですかAndroidsですか？」と確認し、iOSの場合はPDF埋め込みをやめてGoogle DriveのプレビューURLやPDF.jsのiframe埋め込みに切り替えます。
相手のブラウザにAdobe Acrobatのブラウザ拡張機能がインストールされている場合、Acrobatがビルトインビューアを上書きしてPDFを別タブや別アプリで開こうとすることがあります。その場合`<embed>`タグのPDFは「読み込み中」で止まります。「Acrobatの拡張機能が入っていますか？」と確認し、一時無効化してもらうか、拡張機能のある環境でも動くPDF.jsベースの表示方法に修正します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
PDFをHTMLに埋め込む際は、`<embed>`よりも`<iframe src="URL" width="100%" height="600px"></iframe>`の形式の方がブラウザ互換性が高い場合があります。さらに確実なのはPDF.js（Mozilla製のオープンソースPDFレンダラー）をHTMLに組み込む方法で、ブラウザのビルトインビューアに依存せず表示できます。ただしファイルサイズが増えるため、ギガサイト便のファイルサイズ制限内に収まるか確認します。
AIでHTMLを生成するときのプロンプトに「PDFは外部リンクボタンとして表示し、`<embed>`や`<iframe>`は使わないこと」と指定するか、「PDF.jsを使ったインライン表示にすること、PDFのURLはプレースホルダーとして記載し後から変更できること」と書くと、PDFアクセス問題に強い構成が生成されます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
ギガサイト便でHTMLとPDFを同時にアップロードするにはどうすればよいですか？
HTMLファイルとPDFファイルを同じフォルダに入れてzipファイルに圧縮し、zip形式でギガサイト便にアップロードします。HTMLのsrc属性はzip内の相対パスで記述すれば解決します。例：PDFがルート直下なら`src="file.pdf"`です。
CSPエラーが出ていますが、PDFを表示する別の方法はありますか？
PDFのURLをGoogle DriveやOneDriveの共有プレビューURLに差し替え、`<iframe src="Googleドライブのプレビューリンク"></iframe>`を使う方法があります。外部サービスのURLのため自社CSPに依存しません。ただし相手側でGoogleアカウントが必要になる場合があります。
iOSのSafariでPDFが表示されません。修正なしで対応できますか？
修正なしではiOS Safariでの`<embed>`PDF表示は安定しません。最も簡単な代替は`<a href="file.pdf" target="_blank">PDFを開く</a>`というリンクボタンへの差し替えです。iOSのSafariはPDFリンクをタップすると標準PDFビューアで開くため、ユーザー体験を損なわずに対応できます。