よくある原因
AI生成HTMLでPDF埋め込みが失敗する一番の原因はファイルパス問題です。AIはローカルで動作するパス(例:`./documents/report.pdf`)を生成しますが、ギガサイト便やその他のホスティングサービスに単体のHTMLをアップロードした場合、PDFが同じサーバーに存在しないためリンク切れになります。共有前チェックとして「PDF埋め込みのsrc属性値がローカルパスになっていないか」の確認を必ず行います。
次点はブラウザのPDF設定の個人差です。Chromeはデフォルトでインライン表示しますが、設定変更(設定→プライバシーとセキュリティ→サイトの設定→PDFドキュメント)でダウンロードに切り替えている場合、`<embed>`タグが空白表示になります。自分のChromeでは正常でも相手の設定が違うと非表示になるため、テスト用に設定をいったんダウンロードに変えてから確認すると相手環境を擬似的に再現できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック1:HTMLのソースを開き(ブラウザで右クリック→ページのソースを表示)`embed`または`iframe`を検索します。src属性の値が絶対URLでなく相対パスや`file://`から始まる場合、公開環境では機能しません。ギガサイト便にアップロードする場合はHTMLとPDFをzipで一緒にアップロードし、HTMLのsrcを`相対パス`のまま使うか、PDFだけを別サービス(Google Drive、OneDrive等)にアップして絶対URLをsrcに指定します。
チェック2:公開URL(ギガサイト便の共有URLなど)をChromeのシークレットウィンドウで開き、DevTools(F12)のNetworkタブでPDFファイルのリクエスト結果を確認します。404なら「PDFのパスが存在しない」、200なら「PDFは届いているが表示設定に問題がある」と判断できます。200でも表示されない場合はConsoleタブのCSPエラー(`Refused to load`)を確認します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
共有先が複数人の場合、事前に「PCのChrome/Edge/Firefoxのどれで閲覧予定ですか?またスマホ(iOS/Android)も使いますか?」と確認します。iOSは`<embed>`によるPDFインライン表示が不安定なため、iOSユーザーが含まれる場合はPDF.jsかリンクボタン方式に変更しておきます。事前確認するだけで共有後のトラブル件数を大幅に減らせます。
相手がPDFを見られない状態で連絡してきた場合の確認依頼に備えて「①ブラウザ名とバージョン、②スクリーンショット、③F12→Consoleに赤いエラーが出ているか」の3点をセットにしたメッセージテンプレートを手元に持っておきます。この3点が揃えば原因の8割は特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
PDFを含むHTMLを作る際の標準化として「PDFはHTMLと同じzipに同梱するか、Google Drive等の絶対URLで参照すること」「iOSユーザーが含まれる配布先にはPDF埋め込みでなくリンクボタンにすること」の二つをルール化します。これをチームのWiki(Notionなど)に記載しておくと、担当者が変わっても再発しにくくなります。
AIにHTMLを生成させる際に「PDFは外部URLで参照するか、PDFのURLをプレースホルダー(YOUR_PDF_URL)として記載すること」と指示を追加するだけで、生成物のsrc属性が絶対URL前提のコードになります。後からURLだけを差し替えれば使える状態になるため、毎回ローカルパス問題に対処する手間がなくなります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
PDFをHTMLとは別のGoogleドライブにアップして埋め込む場合、共有設定はどうすればよいですか?
GoogleドライブのPDFを「リンクを知っている全員が閲覧可」に設定し、共有リンクのIDをiframeのsrcに組み込む形式(`https://drive.google.com/file/d/ファイルID/preview`)で埋め込みます。ただしGoogleアカウントでログインしていないと表示できない場合があるため、相手のアカウント状況を事前に確認します。
PDFをBase64でHTMLに直接埋め込む方法はありますか?
可能です。`<embed src="data:application/pdf;base64,(Base64文字列)">`の形式で埋め込めばPDFファイルを外部参照せずに動かせます。ただし10MB超のPDFでは変換後のHTMLが40MB超になり、ギガサイト便などのアップロード制限に引っかかる場合があります。
共有後にPDFの内容を更新した場合、HTMLも差し替える必要がありますか?
PDFをギガサイト便に同梱(zip)している場合はHTMLとPDFをセットで再アップロードします。PDFをGoogle Drive等の外部URLで参照している場合はPDFだけを上書きアップロードすれば、HTMLは差し替えなくても自動的に最新PDFが表示されます。