タイトル: オブジェクト
SEOタイトル: HTML object 要素完全ガイド|PDF/SVG/動画/外部 HTML 埋め込みと iframe/embed との違い
| この記事の要点 |
|
は HTML で「外部リソース」を埋め込むための汎用要素です。PDF / SVG / 画像 / 動画 / 別 HTML / Flash(歴史的)など、多様なメディアを 1 つのタグで扱えるように設計されました。現代では用途別に専用要素(<video> / <audio> / <picture> / <iframe>)が出揃ったため出番は減っていますが、PDF / SVG 埋め込みでは今も使われます。
基本構文
<object data="document.pdf" type="application/pdf" width="600" height="400">
<!-- フォールバック(object が表示できないとき) -->
<p>PDF を表示できません。
<a href="document.pdf">こちらからダウンロード</a>してください。</p>
</object>
| 属性 | 意味 |
|---|---|
data | 埋め込むリソースの URL(必須に近い) |
type | MIME タイプ。指定すると読み込み前判定に使われる |
width / height | 表示サイズ。CSS でも可 |
name | フォーム送信時の名前(ほぼ使わない) |
form | 所属フォーム ID |
usemap | 画像マップ参照 |
主な用途別の書き方
PDF 埋め込み
<object data="report.pdf#page=2&zoom=100"
type="application/pdf" width="100%" height="600">
<p>PDF が表示できません。
<a href="report.pdf">ダウンロード</a></p>
</object>
<!-- ブラウザ依存。Chrome / Edge / Firefox は内蔵ビューアで表示、
Safari は表示するがコントロールが少ない -->
SVG 埋め込み(外部ファイル)
動画埋め込み(歴史的)
外部 HTML 埋め込み
Flash(歴史的・現在は動作しない)
<!-- 2020 年末で Adobe Flash Player サポート終了 -->
<object data="game.swf" type="application/x-shockwave-flash" width="800" height="600">
<param name="movie" value="game.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<p>Flash 廃止。動作しません</p>
</object>
要素
<object> 内でプラグインに渡すパラメータを指定。Flash 時代の遺物で、現代の用途ではほぼ不要です:
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="movie" value="movie.swf"> <!-- 旧 IE 用 -->
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="FlashVars" value="autostart=true&volume=80">
</object>
| 要素 | 得意 | フォールバック | 現代度 |
|---|---|---|---|
<object> | 汎用、PDF / SVG | 子要素として書ける | ★★ |
<embed> | PDF / プラグイン | 無し | ★★(PDF で広く使う) |
<iframe> | HTML 埋め込み、YouTube | 無し(src 内へ) | ★★★ 標準 |
<img> | 静的画像 | alt のみ | ★★★ 標準 |
<picture> | 解像度別画像、WebP/AVIF | ★★★ 標準 | |
<video> / <audio> | 動画 / 音声 | 子要素 | ★★★ 標準 |
レスポンシブ対応
/* aspect-ratio で縦横比固定 */
object.pdf-viewer {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 1px solid #ccc;
}
/* 古典的パディングハック */
.embed-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 */
}
.embed-wrapper > object,
.embed-wrapper > iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
セキュリティ上の注意
Same-Origin Policy
埋め込み元と data の URL が同一オリジンでないと、JavaScript からの操作(contentDocument 等)はブロックされます。
CSP (Content Security Policy)
# 何を object/embed/applet で読み込ませるかを制限
Content-Security-Policy: object-src 'self' https://cdn.example.com;
# iframe で埋め込まれることを制限
Content-Security-Policy: frame-ancestors 'self';
X-Frame-Options(古い、frame-ancestors 推奨)
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
SVG ファイルの XSS
SVG はJavaScript を含めることができるため、ユーザ投稿 SVG をそのまま object で読み込むと XSS の温床になります。サニタイズが必須:
- サーバ側で SVG Sanitizer(PHP: enshrined/svg-sanitize)を通す
- ユーザ投稿はラスタライズ(PNG 化)して保存
<img>で読み込むと JS は実行されない(こちらが安全)
JavaScript からの操作
// オブジェクトの中身 (同一オリジンのみ)
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
const doc = obj.contentDocument;
// doc.querySelector('h1').textContent
});
// 表示切替
obj.data = 'other.pdf';
// width 変更
obj.style.width = '800px';
アクセシビリティ
- フォールバックテキストを必ず提供(読み上げソフト対策)
- PDF 埋め込みのときは「ダウンロード」リンクを必ず別途置く
- 装飾用 SVG は
aria-hidden="true"を付与 - 意味のある SVG には
role="img"+aria-label
FAQ
Q: PDF 埋め込みなら object と embed どちらが良い?
A: 実用ではembed の方が広く使われることが多いです。Chrome / Edge の挙動が安定。古い IE 互換が必要なら object。両方を組み合わせる手法もあります。
Q: モバイルで PDF が表示されない
A: iOS Safari は <object> 内 PDF を新規タブで開く挙動。「ダウンロード」リンク + サムネ画像を提示するのが UX 的に確実です。
Q: SVG は object と img どちらが良い?
A: JS を動かしたいなら object(インタラクティブな図表)、単なるロゴ・アイコンなら img(軽量で安全)、CSS で色を変えたいならインライン
Q: 外部サイトの HTML を埋め込みたい
A: <iframe> を使ってください。<object> でも可能ですが、現代のセキュリティ機能(sandbox / CSP)は iframe に最適化されています。
Q: Flash の代替は?
A: 用途別に Canvas / WebGL / Web Animations / CSS Animations / Lottie / WebAssembly 等。古い Flash コンテンツの再生には Ruffle(オープンソース Flash エミュレータ)。