[62] 外部コンテンツを組み込もう object要素・param要素

<object>要素は、外部コンテンツをHTML上に組み込む要素です。
画像、音声、動画、HTML、PDFファイルなどを表示することができます。

画像なら<img>要素、音声なら<audio>、動画なら<video>、HTMLなら<iframe>といった具合に、それぞれ組み込みのための専用の要素はあるのですが、<object>要素はこれらを表示することができるんですね。

プラグインを使って再生する、動画、音声、swfなどのコンテンツを組み込んだ場合、
プラグインが必要とするパラメータを<object>で埋め込めないときは、<param>要素で指定します。<param> は <object>の子要素です。

プラグインとは、Flashファイル (.swf) を再生するFlash Player のように、ブラウザに追加インストールするものです。
代表的なプラグインには、Adobe Flash Player、Adobe Reader、Windows Media Player、Real Player、QuickTime、Microsoft Silverlightなどがあります。

使用する要素	<object> 〜 </object> <param>（空要素。終了タグは不可）

<object>の属性 （一覧はこちら）	data	：組み込むファイルのURL
	type	：組み込むファイルのMIMEタイプ
	width	：幅
	height	：高さ
	usemap	：イメージマップの名前を指定
	name	：targetで指定される名前を指定
	form	：関連づける<form>のidを指定
	typemustmatch	：type属性の値とリソースのcontent type 　が一致かどうか
	グローバル属性

<param>の属性	name	：パラメータの名前。必須
	value	：パラメータの値。必須
	グローバル属性

<object>の属性のうち、data属性か、type属性のどっちか1つは必須です。

HTML5では <object>の属性のうち、 以下の属性が廃止されました。
classid属性・ codebase属性・codetype属性・ align属性・ hspace属性・ vspace属性・border属性・ archive属性・declare属性・ standby属性。
（classid属性と codebase属性を使ったいわゆる「レガシーコード」はHTML5では使えなくなりました。）
また、HTML5から新しが追加されました。

<object>要素の最大のメリットは、代替コンテンツが詳細に作れること。
<object>と</object>の間に、テキストや他のHTML要素を使って自由に詳細に、代替コンテンツを作れて、<object>で指定した外部コンテンツが表示されれば、ブラウザはこの中身を無視します。
＊ただし、詳細な代替コンテンツが必要ない場合は、専用の要素（画像なら<img>）を使うべき、だそうです。

JAVAアプレットも、この<object>要素で指定します。
JAVAアプレットを組み込むための要素<applet>は、HTML5から廃止されたので。

<object>で扱える外部コンテンツの種類

<object>で指定したモノは、下記の3種のうちどれかとして扱われるのだそうです。
それぞれに該当する外部コンテンツは下記のとおりです。

画像

画像（gif, jpeg, png, svgなど）

プラグインに処理されるデータ

動画（AVI, MPEG, MP4, QuickTime など）

音声（MP3, AAC, MIDI, RealAudio, WAVE など）

その他コンテンツ（swf, JAVAアプレット(.class) ）

入れ子の閲覧コンテンツ（インラインフレーム風なモノ）

他のHTMLファイルやPDFなど

「入れ子の閲覧コンテンツ」とは、「ネストされたブラウジング・コンテキスト（nested browsing contexts）」のこと。（ネストとは「入れ子」のこと）
ウィンドウやタブなど、HTMLが表示される場所を、HTML5から「ブラウジング・コンテキスト」と呼ぶようになりました。
で、インラインフレームや、今回の<object>要素を使う場合のように、画面にさらに窓があってHTML文書などが「入れ子（ネスト）」になってる場合を「ネストされたブラウジング・コンテキスト（nested browsing contexts）」と言うんだそうです。

<object>で画像を組み込もう

注意：<object>要素での「usemap属性」は HTML5.1で廃止になりました。
ですので、画像ファイルを表示することはできますが、この項のようにイメージマップを作ることはできません。イメージマップは <img>要素で作ろう。

●サンプル1：代替コンテンツに、リスト要素を使ったサンプル

<object>で画像を組み込んだイメージマップです。
（イマージマップについては、 [61] イメージマップ（リンク領域）を作ろう<map> <area> をご覧ください。）

HTMLはこちら 。

<object data="shapes.gif" type="image/gif" width="525" height="150" usemap="#shapes">
  <!--代替えコンテンツにリストを使用
  　（という使い方ができたのですが、object要素でイメージマップは使えなくなりました。残念）-->
  <ol>
    <li><a href="#">赤い四角のメニュー</a></li>
    <li><a href="#">緑色のマルのメニュー</a></li>
    <li><a href="#">青い三角のメニュー</a></li>
    <li><a href="#">黄色い星のメニュー</a></li>
  </ol>
</object>
<map name="shapes">
  <area ><!--省略-->
</map>

●サンプル2：SVGファイルを組み込んだサンプル

SVG（Scalable Vector Graphics）とは、ベクター形式（ビットマップじゃない Illustrator とかで作るベジェ曲線のアレ）の画像ファイル。
データが軽くて、拡大しても鮮明でキレイ。WEB用に最適です。

別ファイルのサンプルでは、SVGを拡大して貼っています。それでも鮮明です。
（↓これはただのGIF）
クリックで別ウィンドウで開きます。

HTMLはこのようになっています ↓

<object data="img/svg_smp.svg" type="image/svg+xml" width="100％">
  <img src="img/svg_smp.png" alt="代替えPNG画像" width="228" height="107">
</object>

ちなみに、Adobe Illustrator で SVGに書き出す方法はこちら。
「Illustrator Help / SVG 形式で書き出す方法 」

動画を組み込もう

●サンプル3：動画ファイルを組み込んだサンプル

MP4ファイルを<object>要素で組み込んだサンプルです。
↓これは画像です。クリックで別ウィンドウで開きます。

HTMLはこちら↓

<object data="video/uchiage.mp4" type="video/mp4" width="640" height="380">
   <param name="src" value="video/uchiage.mp4">
   <param name="autoplay" value="false">
   <param name="controller" value="true">
   <!--以下↓代替えコンテンツ-->
   <embed src="video/uchiage.mp4" width="640" height="380" type="video/mp4">
</object>

<param>要素でプラグインのパラメータを指定しています。
<param>要素は、name属性の値で指定したパラメータ名に対して、value属性の値でパラメータ値を指定します。
ここでは<embed>要素も代替コンテンツとして利用。（<embed>に関しては後日詳細）

音声ファイルを組み込もう

●サンプル4：音声ファイルを組み込んだサンプル

音声ファイル（MP3ファイル（.mp3））を<object>で組み込んだサンプルを、別ウィンドウで開きます。

＊この音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。

HTMLはこちら↓

<object data="audio/sample.mp3" type="audio/mp3" width="350">
  <param name="src" value="audio/sample.mp3">
  <param name="autoplay" value="false">
  <param name="loop" value="false">
  <param name="controller" value="true">
  &lt;!--以下↓代替えコンテンツ--&gt;
  <a href="audio/sample.mp3">ブラウザによっては、再生できない場合があります。<br>
再生できない場合は、クリックして再生します。</a>
</object>

フラッシュやJAVAアプレットを組み込もう

●サンプル5：フラッシュファイル（.swf）を組み込んだサンプル

フラッシュ（.swf）は、ブラウザによっては表示されません（許可することで表示できる場合もあります）

HTMLはこちら↓

<object data="img/sample_fla.swf" width="200" height="100" type="application/x-shockwave-flash">
  <param name="movie" value="img/sample_fla.swf">
</object>

他の<param>や、代替コンテンツとして<embed>要素も加えると、ソースはこうなります。（<embed>要素は後日詳細）

<object data="img/sample_fla.swf" width="200" height="100" type="application/x-shockwave-flash">
   <param name="movie" value="img/sample_fla.swf">
   <param name="quality" value="high">
   <!--以下↓代替えコンテンツ-->
   <embed src="img/sample_fla.swf" width="200" height="100" typa="application/x-shockwave-flash">
</object>

●サンプル6：JAVAアプレットを組み込んだHTMLソース
<applet>要素（JAVAアプレットを組み込むための要素）は、HTML4の頃から非推奨とされていたそうですが、 HTML5で廃止されました。
JAVAアプレットを組み込むには<object>要素を使います。

ここではサンプル無しで、HTMLソースだけ貼っておきます。悪しからず。

<object type="application/x-java-vm" width="300" height="150">
   <param value="img/sample.class" name="code">
   <!--以下↓代替えコンテンツ-->
   <img src="img/sample.gif" width="300" height="150" alt="代替えGIFアニメーション">
</object>

ちなみに、JAVAアプレットとは、JAVAプログラムの一種。
JAVAは、ざっくり分けて「JAVAアプリケーション」と「JAVAアプレット」があり、「JAVAアプレット」は、Webブラウザ上で動く JAVAプログラムといったかんじです。
JavaScript はまったく別のモノで「スクリプト言語」。ブラウザに動作を指令するもの。
JAVAは「プログラミング言語」。アプリケーションソフトとかも作れるんだそうです。

他のHTMLファイルやPDFを組み込もう

●サンプル7：別のHTMLファイルを組み込んだサンプル
他のHTMLファイルを組み込むと、インライン・フレームのようになります。
（インライン・フレームに関しては次回予定）

このサンプルでは「ターゲットウィンドウ」の仕込みもしています。
<object>要素の name属性で「name="tBox1"」としておいて、この要素をターゲットウィンドウにします。
リンクの <a>要素の target属性でこの「tBox1」を指定すれば、この<object>要素にリンクが開きます。

• param要素
• object要素

HTMLはこちら↓

<object data="https://www.w3.org/TR/html5/semantics-embedded-content.html#the-object-element"
 type="text/html" width="100%" height="250" name="tBox1">
  <!--ここから↓代替えコンテンツ-->
  <a href="https://www.w3.org/TR/html5/semantics-embedded-content.html#the-object-element" 
  target="_blank">W3Cサイトを別ウィンドウで開く</a>
</object>

  <!--以下は、ターゲットウィンドウ「tBox1」に開くリンク↓-->
<ul style="margin:0">
  <li><a href="https://www.w3.org/TR/html5/semantics-embedded-content.html#the-param-element" 
  target="tBox1">param要素</a></li>
  <li><a href="https://www.w3.org/TR/html5/semantics-embedded-content.html#the-object-element" 
  target="tBox1">object要素</a></li>
</ul>

●サンプル8：PDFファイルを組み込んだサンプル

HTMLはこちら↓

<object data="img/sample.pdf" type="application/pdf"  width="100%" height="250">
  <!--↓代替えコンテンツ-->
  <a href="img/sample.pdf" target="_blank">PDFファイル</a>
</object>

<object>の属性一覧

data="URL"

組み込むファイルのURL。

<object data="image/shapes.gif" type="image/gif"  width="525" height="150"></object>

type="MIMEタイプ"

組み込むファイルのMIMEタイプを指定。
text/html（HTML）, application/pdf（PDF）video/mpeg（MPEG）など。
MIMEタイプについては「ちょっとメモ：MIMEタイプ」を参照してください。

<object data="image/shapes.gif" type="image/gif"  width="525" height="150"></object>

width="object要素の幅" 　height="object要素の高さ"

object要素の幅や高さをピクセルや％などで指定します。

<object data="image/shapes.gif" type="image/gif"  width="525" height="150"></object>

usemap="イメージマップの名前"

注意：<object>要素の　usemap属性は HTML5.1で廃止になりました。
<map>要素の name属性で指定したイメージマップの名前を指定して関連づけます。

name="名前"

他のHTMLファイルを読み込む場合などに、target属性で指定させるための「埋め込む領域の名前」を指定。（ネスト（入れ子）時のブラウジング・コンテキスト名）

form="関連づける<form>の id"　 new

関連づける<form>要素の id名を指定。
<object>要素内に組み込んだコンテンツを、同じページ内の<form>要素に関連づけて、<form>で指定したプログラムに処理させることができます。

＊組み込みコンテンツは、フォーム部品として扱えるもの。
　例えば、swfでユーザに入力や選択をさせた値や、フォーム部品のある外部HTMLなどの場合に使えます。

<object form="exform" data="ex.swf" type="application/x-shockwave-flash"
  width="525" height="150">
<param name=movie value="ex.swf">
<embed src="ex.swf" type="application/x-shockwave-flash" width="525" height="150">
<input type="datetime-local" name="date"> ＊ご予約の年月日を入力してください
</object>
<!-- 関連づけたいform ↓ -->
<form id="exform" action="example.cgi">
<input type="submit">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

typemustmatch（値は省略可能）

リソースを使用するために「type属性」の値とリソースの実際の「content type」が一致していなければならないかを指定します。
Boolean（ブーリアン）属性（真偽属性）なので、値が true（真）のときしか使いません（falseなら指定不要）

<object data="image/shapes.gif" type="image/gif" typemustmatch></object>

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は、今回少し触れた「インラインフレーム」を作る <iframe>要素を使ってみよう。
<iframe>要素は、今回の<object>要素でもやりましたが、HTML内に他のHTMLファイルを組み込む要素です。