[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を指定
グローバル属性
<param>の属性 name :パラメータの名前。必須
value :パラメータの値。必須
グローバル属性

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

HTML5では <object>の属性のうち、 以下の属性が廃止されました。
classid属性・ codebase属性・codetype属性・ align属性・ hspace属性・ vspace属性・
border属性・ archive属性・declare属性・ standby属性

(classid属性と codebase属性を使ったいわゆる「レガシーコード」はHTML5では使えなくなりました。)
また、HTML5から新しくform属性が追加されました。

<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>で画像を組み込もう

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

<object>で画像を組み込んだイメージマップです。
<object>なら、代替コンテンツに「リスト要素」を使うこともできます。<img>要素では不可能なことですね。

イマージマップについては [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">
<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を実寸の3倍に拡大して貼っています。それでも鮮明です。
(←これはただのGIF)
クリックで別ウィンドウで開きます。

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

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

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

動画を組み込もう

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

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

*ファイルサイズは約1.2MBです。
*この動画は NHKクリエイティブ・ライブラリーからダウンロード使用。

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" 
   autoplay="false" controller="true" pluginspage="http://www.apple.com/jp/quicktime/download/">
</object>

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

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

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

音声ファイル(WAVEファイル(.wav))を<object>で組み込んだサンプルを、別ウィンドウで開きます。

*ファイルサイズは約870KBです。
*この音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。

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

<object data="audio/SPACE9.wav" type="audio/wav" width="320" height="50">
   <param name="src" value="audio/SPACE9.wav">
   <param name="autostart" value="false">
   <param name="controller" value="true">
   <param name="loop" value="false">
   <embed src="audio/SPACE9.wav" type="audio/wav" autostart="false" controller="true"
   loop="false" pluginspage="http://www.apple.com/jp/quicktime/download/"
    pluginspage="http://www.apple.com/jp/quicktime/download/">
</object>

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

●サンプル5:フラッシュファイル(.swf)を組み込んだサンプル

HTMLはこのようになっています ↓ こんなにシンプルでもOK。

<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" quality="high"
    pluginspage="https://get.adobe.com/jp/flashplayer/">
</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ファイルを組み込むと、インライン・フレームのようになります。
(インライン・フレームに関しては次回予定)
ここでは W3Cの object要素のページを表示してみました。

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

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

<object data="https://www.w3.org/TR/html5/embedded-content-0.html#the-object-element" type="text/html" width="570" height="200">
  <a href="https://www.w3.org/TR/html5/embedded-content-0.html#the-object-element" target="_blank">
   W3Cサイトを別ウィンドウで開く
  </a>
</object>

<object>と</object>の間のリンクは代替コンテンツです。

●サンプル8:PDFファイルを組み込んだサンプル
東京都営バスの「渋谷エリア発着バス路線図PDF」を組み込んでみました。
ターゲットウィンドウの仕込みもしています。

渋谷エリア発着バス路線図PDFをダウンロード
品川エリア発着バス路線図PDFをダウンロード

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

<object data="http://www.kotsu.metro.tokyo.jp/bus/areamap/pdf/other_shibuya.pdf" 
type="application/pdf" name="target_box2" width="570" height="250" style="margin-bottom:0.5em;">
  <a href="http://www.kotsu.metro.tokyo.jp/bus/areamap/pdf/other_shibuya.pdf" target="_blank">
  渋谷エリア発着バス路線図PDFをダウンロード</a><br />
  <a href="http://www.kotsu.metro.tokyo.jp/bus/areamap/pdf/other_shinagawa.pdf" target="_blank">
  品川エリア発着バス路線図PDFをダウンロード</a>
</object>
<ul style="margin:0;">
  <li><a href="http://www.kotsu.metro.tokyo.jp/bus/areamap/pdf/other_shinagawa.pdf" target="target_box2">
  品川エリア発着バス路線図PDF</a></li>
  <li><a href="http://www.kotsu.metro.tokyo.jp/bus/areamap/pdf/other_shibuya.pdf" target="target_box2">
  渋谷エリア発着バス路線図PDF</a></li>
</ul>

<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="イメージマップの名前"
<map>要素の name属性で指定したイメージマップの名前を指定して関連づけます。
<object data="shapes.gif" type="image/gif"  width="525" height="150" usemap="#shapes">
</object>
<map name="shapes">
<area shape=rect coords="25,25,125,125" href="rect.html" alt="四角">
</map>
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からの変更点」もご覧ください。

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

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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 31 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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