著者 Amy Pearson (IDRsolutions) 翻訳 BuildVu日本チーム
PDFファイルをHTMLで表示するために使用できるHTMLタグはいくつかあります。<embed>タグ、<object>タグ、<iframe>タグは、いずれもPDFファイルをWebアプリケーションの中に表示することができます。それぞれ動作は似ていますが、一番いいのはどれでしょうか？また、ほかに良い方法はあるのでしょうか？
ブラウザでPDFを開くHTMLサンプルコード
<link rel="stylesheet" id="urlslab_youtube_loader-css" type="text/css" media="all" href="https://www.intwk.co.jp/wp-content/plugins/urlslab/public/build/css/urlslab_youtube_loader_decorated.css"><embed src="doc.pdf" type="application/pdf" width="400px" height="400px">
<noembed>
<p>
Your browser does not support PDF files.
Download the file instead
</p>
</noembed>
</embed>
<object data="doc.pdf" type="application/pdf" width="400px" height="400px">
<p>
Your browser does not support PDF files.
Download the file instead
</p>
</object>
<div class="youtube_urlslab_loader" data-ytid="doc.pdf" width="400px" height="400px"><div class="youtube_urlslab_loader--inn"><div class="youtube_urlslab_loader--wrapper"><strong class="youtube_urlslab_loader--title"> | </strong><strong class="youtube_urlslab_loader--duration"></strong><img class="youtube_urlslab_loader--img" data-src="https://i.ytimg.com/vi/doc.pdf/hqdefault.jpg" urlslab-lazy="yes" data-urlslabstyle="" style="opacity: 0; transition: opacity .5s;"></div><div class="youtube_urlslab_loader--bottom"><strong></strong><time datetime="2025-11-04T13:24:54+00:00">2025年11月4日</time></div></div></div>
なぜ3つのタグがあるのですか？
これは、JavaアプレットやAdobe Flashの時代までさかのぼります。当時は、<iframe>は他のHTMLページのためのもので、<object>タグはレンダリングを引き継ぐためのシステムアプリケーションのためのもので した。最近では、セキュリティ上の理由から、ブラウザがこの種のプラグインを許可しなくなってきたのです。
<embed>タグは、HTML5規格に採用されるまでは非標準でした。この歴史については、MDN Web Docs の有用な記事で詳しく説明されています(英文)： From object to iframe — other embedding technologies
すべてのブラウザがPDFの埋め込みに対応しているのですか？
いいえ。デスクトップ用ブラウザのサポートは非常に充実していますが、モバイルおよびタブレット用ブラウザのサポートは貧弱です。特に、AndroidのChromeはPDFを表示しませんし、iOSのSafariはPDFファイルの最初のページしか表示しません。
インナータグとは何ですか？
インナータグは、提供されたソースファイルやファイルタイプをどのように処理したらよいかわからない場合に、ブラウザにレンダリング内容を伝えるものです。
公式には、<noembed>タグ（上記の例では<embed>タグの中に含まれています）は仕様の一部ではありません。実際、<embed>タグは、フォールバックコンテンツにまったく対応していない唯一のものです。
現実には、ブラウザがフォールバックコンテンツを無視することがあります。たとえば、AndroidのChromeでは、<embed>タグと<iframe>タグに対して独自のフォールバックコンテンツが表示されました。上記のコード例を使って、ご自身でテストしてください。
勝者 <object>タグ！
<object>タグを勝者に選んだのは、Android版Chromeが提供するフォールバックコンテンツを使用した唯一のタグだからです。これは、PDFがレンダリングできないときにユーザーが見るものを制御したい場合に重要です!
この方法でPDFファイルを埋め込むことの長所と短所？
長所
- シンプルかつ簡単
- Googleはコンテンツの一部をランク付けする可能性があります
- デスクトップ上でも動作します
短所
- 表示が遅い（1ページを見るためにウェブサイト全体をダウンロードすることを想像してみてください。）
- SEO対策に不向き
- PDFコンテンツはブラックボックスであり、プログラムで操作できない
- それぞれのデバイスで異なるユーザーエクスペリエンス
もっと良い方法があります
PDFファイルをHTMLに変換して、ウェブページはHTMLを表示することで、どのようなデバイスを使用しても一貫したエクスペリエンスを提供することができます。また、インタラクティブ性を追加し、コンテンツと新しい方法でやり取りするソリューションを構築することもできます。
開発者としては、コントロールできないブラックボックスではなく、HTMLのままコンテンツとインタラクトできるようになりました。
私たちは、無料のオンラインPDF HTML5コンバータを提供しており、実際に試してみることができます。私たちがどのようにお手伝いできるのか、ぜひご覧ください。
取り扱い製品について
PDF規格は複雑なうえに、過去からの積み重ねで非常にわかりにくくなっています。PDF連携ソフトウェアの開発では、英国IDRsolutions 社のPDF関連製品(変換ツール、ライブラリ、ソフトウェア部品など)を、ぜひご検討ください。
IDRsolutions はPDF関連ツールを20年以上に渡って開発・提供し続けています。PDF分野の老舗企業として、世界中の企業や公的機関にご活用いただいています。
日本では株式会社インターワークがIDRsolutions社の日本総代理店として取り扱っていますので、お気軽にご相談ください。
VIEWING PRODUCTS
PDFをHTML5やSVGに変換
PDFのフォームをHTML5に変換
SDK PRODUCTS
PDFファイルの表示、変換、抽出
多くの画像ファイル形式を読み書き、変換、操作、処理
