[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> |
---|
<object>の属性 (一覧はこちら) |
data | :組み込むファイルのURL |
---|---|---|
type | :組み込むファイルのMIMEタイプ | |
width | :幅 | |
height | :高さ | |
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">
<!--以下↓代替えコンテンツ-->
<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>要素にリンクが開きます。
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ファイルを組み込む要素です。
- 関連記事
-
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ(リンク領域)を作ろう map要素・area要素
- (ちょっとメモ)属性の「引用符」や「値」の省略について
- (ちょっとメモ)HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう(CSS使用)
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク