object要素

いまさらHTML,CSS講座 > HTML5 > object要素 - 埋め込み関連 -

object要素は、外部リソースを埋め込みます。外部リソースは種類に応じて、画像として、ネストされたブラウジングコンテキストとして、またはプラグインによって処理される外部リソースとしてのいずれかで扱われます。

data属性

data属性は、埋め込むリソースのURLを指定します。

type属性

type属性は、リソースのMIMEタイプを指定します。

MIMEタイプ（拡張子）

application/x-shockwave-flash（swf）、audio/wav（wav）、video/quicktime（mov）、video/x-msvideo（avi）、video/mpeg（mpg）、video/mp4（mp4）など。

name属性

name属性は、ネストされたブラウジングコンテキストに名前を付けます。

width属性、height属性

width属性は画像の幅、height属性は画像の高さを指定します。値は負以外の整数（ピクセル）ですが、単位の（px）はつけません。なお、HTML5より値の単位にパーセントを使うことができなくなりました。また、元のリソースと異なるアスペクト比で指定し故意に引き延ばすことはできません。

例a）

<figure>
<object type="application/x-java-applet">
<param name="code" value="MyJavaClass">
<p>You do not have Java available, or it is disabled.</p>
</object>
<figcaption>My Java Clock</figcaption>
</figure>

関連：figure要素、figcaption要素、param要素。

例b）

<figure>
<object data="clock.html"></object>
<figcaption>My HTML Clock</figcaption>
</figure>

関連：figure要素、figcaption要素。

例c）

<p>Look at my video:
<object type="application/x-shockwave-flash">
<param name=movie value="http://video.example.com/library/watch.swf">
<param name=allowfullscreen value=true>
<param name=flashvars value="http://video.example.com/vids/315981">
<video controls src="http://video.example.com/vids/315981">
<a href="http://video.example.com/vids/315981">View video</a>.
</video>
</object>
</p>

例cでは、video要素の使用は、video要素をサポートするユーザー・エージェントを使用するものに対して動画を表示し、最終的にFlashもvideoをサポートしないブラウザなど表示できないユーザーのために、ビデオへのリンクを提供しています。

usemap属性

usemap属性は、map要素の形式のメージマップに関連付ることができます。値は#に続き、任意の文字列（map要素のneme属性の値と同じ文字列）です。

イメージマップの詳細はmap要素をご参照下さい。

例）

<object data="image_map.jpg" type="image/jpeg" usemap="#shapes" width="500" height="200">
<map name="shapes">
<area shape=circle coords="100,100,50" href="blue.html" alt="青い円形" target="_blank">
<area shape=rect coords="200,50,300,150" href="red.html" alt="赤い四角形." target="_blank">
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
</map>
</object>

表示）

上記のHTMLドキュメント

typemustmatch属性

typemustmatch属性は、data属性で指定されたリソースのContent-Typeが、type属性の値であるMIMEタイプと一致する場合のみ表示するブーリアン属性です。

例）234px×60pxのJPEGバナーを表示しています。MIMEタイプはimage/jpegと指定してありますので、たとえば、ここにGIFアニメーションバナーを指定した場合は、MIMEタイプが異なるので表示されません。（typemustmatch属性対応のユーザー・エージェントのみ）

<object data="example.jpg" type="image/jpeg" width="234" height="60" typemustmatch></object>

上記のHTMLドキュメント

なお、信頼しない他のオリジンからリソースを参照する場合は、typemustmatch属性を使用することが推奨されています。この属性の指定が無い場合、たとえば、FlashのallowScriptAccessパラメータなどの機能を使用した場合であっても、プラグイン・メカニズムを使って任意のスクリプトを実行できてしまうなど、リモート・ホスト上の攻撃が可能となる場合があります。

オリジン（Origin）

オリジンとは、簡単に言えば、リソース自身のスキーム、ホスト、ポートの組み合わせのことを言います。スキーム、ホスト、ポートとは、例えば、リソース（index.html）が、http://example.com/index.htmlならば、httpがスキーム、example.comがホストで、httpには80番のポート番号が割り当てられていることになります。

form属性

form属性は、リソースとフォームを関連付けます。値は、対応するform要素のid名です。

カテゴリ: フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、インタラクティブ・コンテンツ（usemap属性を持つ場合）、リスト要素、送信可能要素、再関連付け可能要素、フォーム関連要素、パルパブル・コンテンツ。
要素を使用することができる場所: エンベッディッド・コンテンツが使用できる場所。
コンテンツモデル（内容に含めることのできる要素）: 0個以上のparam要素。以降トランスペアレント。
コンテンツ属性: グローバル属性、data属性、type属性、typemustmatch属性、name属性、usemap属性、form属性、width属性、height属性。

この要素に追加された属性

form属性、typemustmatch属性。

この要素で変更があった属性

width属性、height属性。

この要素で廃止された属性

archive属性、classid属性、codebase属性、codetype属性、declare属性、standby属性。
align属性、border属性、hspace属性、vspace属性。この項の属性はCSSでより良い処理ができるため廃止されました。