<object> - オブジェクトの張りつけ

目次

概要

形式
<object>～</object>
サポート
https://caniuse.com/mdn-html_elements_object
カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
インタラクティブコンテンツ(usemap属性を持つ場合) (HTML Living Standard)
リステッド, サブミッタブル, リアソシエイタブル(HTML 5.1のみ), フォーム関連
パルパブルコンテンツ
親要素
エンベデッドコンテンツ を子要素に持てるもの
子要素
param要素, トランスペアレント
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性
data
type
name
form
width
height

説明

<object> は、<applet>、<embed>、<bgsound> などに代わり、Java アプレットやマルチメディアリソースなどをページ上に貼り付けるための汎用的な要素タグです。

<object> の動作は、ブラウザやそのバージョン、インストールされているプラグインの種類などによって動作が大きく異なるので注意してください。

オブジェクトに対する詳細パラメータは <param> で指定していましたが、現在の HTML 標準である HTML Living Standard から <param> 要素が削除されました(2022年6月追記)。

属性

重要属性

グローバル属性
詳細は グローバル属性 を参照してください。
data=url
LS/H4/e3/Ch/Fx/Sa/Op/N4/i3。埋め込むデータファイルの URL を指定します。
type=type
LS/H4/e3/Ch/Fx/Sa/Op/N4。data 属性で指定したデータの MIMEタイプを指定します。i-modeでは application/x-jam(iアプリ/i3)、audio/3gpp(iモーション/i4)、video/3gpp(iモーション/i4)、application/x-shockwave-flash(Flash/i5)、application/x-ir(タグ指定送信/i5)などを指定することができます。
name=name
LS/H4/e3/Ch/Fx/Sa/Op。名前を指定します。
form=id
LS/H5。関連付けたい form要素のidを指定します。

固有属性

alt=alt
[非推奨] e6。テキストブラウザなどでオブジェクトの代わりに表示される文字列を指定します。
archive=archive
[非推奨] H4-4/e6。オブジェクトに関連するリソースがアーカイブされている時に、そのアーカイブファイルの URL リストをスペースで区切って指定します。
border=n
[非推奨] H4T-4T。<a href="...">～</a> で囲まれている時の枠線の太さをピクセルで指定します。
classid=classid
[非推奨] H4-4/e3/N4。実行ファイルの URL を指定します。データの形式に応じて data 属性と併用したり代用されたりします。IE で Active X コントロールを貼り付ける場合は、clsid:class-identifierを指定します。codebase を基準とします。
code=url
[非推奨] e4。コードの URL を指定します。
codebase=url
[非推奨] H4-4/e3/N4。classid、data、archive 属性の URL を探す際の基準となる URL を指定します。
codetype=codetype
[非推奨] H4-4/e3。classid で指定したプログラムの MIMEタイプを指定します。
declare
[非推奨] H4-4/i3。この属性があると、オブジェクトはダウンロードされてもすぐには実行されず、他の方法で起動されるまで待機状態になります。
standby=standby
[非推奨] H4-4。オブジェクトをダウンロード中に表示しておくテキストを指定します。

位置・大きさ属性

width=n
LS/H4/e3/N4/i5。横幅をピクセルかパーセンテージで指定します。
height=n
LS/H4/e3/N4/i5。高さをピクセルかパーセンテージで指定します。
hspace=n
[非推奨] H4T-4T/e3。オブジェクトの周りの横方向の余白をピクセル単位で指定します。
vspace=n
[非推奨] H4T-4T/e3。オブジェクトの周りの縦方向の余白をピクセル単位で指定します。
align=align
[非推奨] H4T-4T/e3/N4。周りのテキストとの位置関係を、abcbottom、absmiddle、baseline、bottom、center、left、middle、right、texttopのいずれかで指定します。HTML4.0ではbottom, middle, topのみが定義されています。

データバインド関連

datasrc=datasrc
[非推奨] e4。データバインド機能を用いる際の、データソースの ID を指定します。

廃止属性

typemustmatch
[非推奨] LS/H5。type属性と Content-Type の値が使用されるリソースの種別と一致している必要がある場合に指定します。HTML Living Standard でも定義されていましたが、廃止されました。
usemap=usemap
[非推奨] LS/H4-H5。クライアントサイドクリッカブルマップを使用する際の <map> タグの ID を指定します。HTML5 では定義されていましたが、HTML5.1 で廃止されました。HTML Living Standard でも当初はサポートされていましたが、後に廃止されました。

サンプル

画像を張りつける

下記のようにして画像オブジェクトを張りつけることができます。

HTML
<object data="example.gif" type="image/gif" width=100 height=100>
</object>

サポートしている画像を張りつける

次の例では、PNG 画像をサポートしていれば PNG 画像を、サポートしていなければ GIF 画像を貼り付けます。

HTML
<object data="example.png" type="image/png" height=100 width=100>
  <object data="example.gif" type="image/gif" height=100 width=100>
  </object>
</object>

動画(MP4)を張りつける

動画(MP4)を張り付けます。

HTML
<object data="example.mp4" type="video/mp4" width=100 height=100>
</object>

PDFを張り付ける

PDF を張り付けます。

HTML
<object data="example.pdf#page=10" type="application/pdf" style="width:100%; height:25rem;">
</object>

Flashを張りつける

今ではほとんど使用されておらず、ブラウザのサポートの終了してしまいましたが、Flash を張り付けるには次のようにしていました。

HTML
<object data="example.swf" type="application/x-shockwave-flash">
  <param name="foo" value="var">
</object>

RealMedia のコントロールを張りつける

これも現在では利用されていませんが、RealNetworks 社の RealMedia を再生するコントロールを張りつけるには次の様にしていました。<object> 未サポートのブラウザのために、内部で <embed> による呼び出しも記述しています。

HTML
<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
  width="260" height="30">
  <param name="SRC" value="example.rm">
  <param name="AUTOSTART" value="false">
  <param name="CONTROLS" value="ControlPanel">
  <param name="CONSOLE" value="cons">
  <param name="NOLOGO" value="true">
  <embed type="audio/x-pn-realaudio-plugin" src="xxx.rm"
    autostart="false" width="260" height="30" controls="ControlPanel"
    console="cons" name="player" nologo="true">
  </embed>
</object>

ブラウザ内蔵の機能を呼び出す

これも現在では利用されていませんが、Internet Explorer でサポートされていた ActiveX コントロールのひとつを使用して、動く画像を実現するサンプルです。

HTML
<img id="img1" src="example.gif" style="position:absolute">
<object classid="clsid:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
  <param name="AutoStart" value="-1">
  <param name="Direction" value="1">
  <param name="Repeat" value="-1">
  <param name="Bounce" value="0">
  <param name="Duration" value="5">
  <param name="Shape" value="Rect(0,0,100,100)">
  <param name="Target" value="img1">
  <param name="TimerInterval" value="0.02">
</object>

詳細

classid のいろいろ

よく使用される classid には次のようなものがあります。

説明classid
Windows Media Player22D6F312-B0F6-11D0-94AB-0080C74C7E95
RealMediaCFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
QuickTime02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
YAMAHA MIDPLUGB0C207A3-42EE-11D0-9DB3-00805F8A73C5
Crescendo0FC6BF2B-E16A-11CF-AB2E-0080AD08A326
FlashD27CDB6E-AE6D-11cf-96B8-444553540000
Shockwave166B1BCA-3F9C-11CF-8075-444553540000
Java8AD9C840-044E-11D1-B3E9-00805F499D93
JavaCAFEEFAC-0013-0001-0000-ABCDEFFEDCBA
データバインド333C7BC4-460F-11D0-BC04-0080C7055A83
Active X333C7BC4-460F-11D0-BC04-0080C7055A83
Microsoft NetShow2179C5D3-EBFF-11CF-B6FD-00AA00B4E220
VRML90A7533D-88FE-11D0-9DBE-0000C0411FC3
Copyright (C) 2000-2022 杜甫々
初版:2000年10月9日 最終更新:2022年6月19日
https://www.tohoho-web.com/html/object.htm