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

最終更新日:2019年01月30日  (初回投稿日:2013年12月04日)

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

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

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

使用する要素 <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> をご覧ください。)

  1. 赤い四角のメニュー
  2. 緑色のマルのメニュー
  3. 青い三角のメニュー
  4. 黄色い星のメニュー
Red box. Green circle. Blue triangle. Yellow star.

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>要素にリンクが開きます。

W3Cサイトを別ウィンドウで開く

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ファイルを組み込んだサンプル

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ファイルを組み込む要素です。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.