画像の埋込みには、<img>要素が一般に用いられますが、HTMLの現行規格では<img>要素以外のマルティメディア埋込み要素が用意されております。
後発の要素ですので、<img>要素に較べて代替コンテンツの書き方などが良く考えられております。
オブジェクトとは耳慣れない方もいるかも知れませんが、要するに"モノ"と言う事です。
具体的には、
など、HTML文書に埋め込み可能な"モノ"の事を指します。
こう言った"モノ"を文書中に埋め込むための要素は旧式のブラウザにもありましたが、同じ要素でも仕様がブラウザごとに異なるとか、ごく限られたメディアにのみ有効であるなど制限が多かったため、現行の規格ではこれらを統一した<object>要素で埋込む事が推奨されております。
<object>要素は埋込みを行うインライン要素で、以下のような書き方になります。
<object width="横幅" height="高さ" type="MIMEタイプ" data="URL">(パラメータ) (代替コンテンツ)</object>
<object>要素では属性は必須のものは無く、不要なら省略も可能です。
また、メディアによっては上記以外の属性が用意されております。
は<img>要素のそれと同じピクセル単位などが使えます。
但し、埋め込むコンテンツのURLはsrc属性ではなく、data属性になります。
width属性(横幅)やheight属性(高さ)は必須属性ではありませんが、現行のウェブブラウザであってもこれらを省略すると不具合が起こるため、必ず記述して下さい。特にインターネットエクスプローラではwidth属性やheight属性を省略すると要素そのものが無視されてしまいます。
<object>要素のtype属性は埋め込むオブジェクトの種類(MIMEタイプ)を指定します。
主なものを以下に挙げておきましょう。
主に以下のものがあります。
動画にはいろいろなタイプがありますが、主に以下のものがあります。
この他、アップルコンピュータやマイクロソフトなどが独自に定めたタイプの動画もあります。
音声データにもいろいろなタイプがありますが、主に以下のものがあります。
この他、アップルコンピュータやマイクロソフトなどが独自に定めたタイプの音声データもあります。
アプレットには主に以下のものがあります。
堀北真希ちゃんがボシュロム社コンタクト用品TVCMに出演した事に因んだ、コンタクトをつけている堀北真希うさぎtext/htmlapplication/xhtml+xmlとします。
text/htmlとします。<object>要素の内容としては、
の順に記述します。
パラメータは、埋込むオブジェクトに対して<object>要素の属性では与え切れない情報を<param>要素で指定します。
一方、代替コンテンツは、当該オブジェクトが埋込めなかった場合に埋込む代わりのコンテンツを指定します。
<object>要素はインライン要素と定義されておりますが、例外的にブロックレヴェル要素を入れる事も出来ます。
仕様上、<object>要素では埋め込み可能なオブジェクトに関する<object>要素の内容については、直下にある<param>要素及び<map>要素を除いて無視するようになっております。
この事から、埋め込みたいメディア順に<object>要素を入れ子構造にする事で、対応している一番外側のオブジェクトが表示され、それより内側の<object>要素は無視されるように出来るのですが、実際にはこの通りに機能しない環境が決して少なくありません。
例えば、以下のようにする事で、
が表示される事になると言う仕様になっております。
<div class="message"><object width="320" height="240" type="video/mpeg" data="Tateyama.MPG"><object width="320" height="240" type="image/gif" data="Tateyama.GIF"><p>一年を通じて温暖な館山は、まさに「<em>冬が無い街</em>」です。</p><p>春は花摘み、夏は海水浴、秋は祭りと、館山の四季ならぬ"三季"をお楽しみ下さい。</p></object></object></div>
特にインターネットエクスプローラ及びネットスケープ 4.xでは<object>要素の入れ子の正常な処理は期待出来ません。
ネットスケープ 4.xに至っては、<object>要素が有効かどうかに拘らず、内容を全部取り扱います(この場合、下に重なるようにレンダリングされるようです)。
その結果、複数メディアで同じコンテンツが表示されたり、処理不能なメディアでもwidth属性とheight属性で指定された領域を空白領域として表示してしまいます。
インターネットエクスプローラの場合、有効な<object>要素の下位要素が<object>要素以外のインライン要素は正常に無視されるようになってはいます。
このため、インターネットエクスプローラ対策として無理矢理<object>要素の下位には<object>要素以外のインライン要素を入れるようにしている場合が多いようです。
私見ですが、
など、ブロックレヴェル要素を内容にする事が出来ない要素内の<object>要素にブロックレヴェル要素を入れるべきではありません。
例えば<address>要素内で改行させたいが<br>要素は大嫌いだと主張する者が<address>要素の直下に<object>要素を入れる事でブロックレヴェル要素を記述しているようです。
具体的には、以下のような感じにする訳です。
<address><object><ul><li>Copyright (c) 2005 ○○○, All Rights Reserved.<a href="mailto:○○@○○.ne.jp">○○@○○.ne.jp</a></li><li>公開日：平成17年○月○日/更新日：平成17年○月○日</li></ul></object></address>
ですが、そんな馬鹿な事をするくらいなら素直に<br>要素を使うべきです。
或いは<address>要素を複数並べて、それらを適切なクラス名をつけた<div>要素などでブロックレヴェル化すればいいだけの話しでしょう。
<div class="credit"><address> Copyright (c) 2005 ○○○, All Rights Reserved.<a href="mailto:○○@○○.ne.jp">○○@○○.ne.jp</a></address><address>公開日：平成17年○月○日/更新日：平成17年○月○日</address></div>
マルティメディアは<img>要素か<object>要素で埋め込む事とされておりますが、この他にもいくつかの要素があります。
いずれも非公認或いは排除すべきものとされており、利用する事は好ましいと言えませんが、<object>要素の実装が好ましい状況でない現状では、今後も使わざるを得ないかも知れません。
<embed>要素と<noembed>要素は実装がウェブブラウザにより異なる事もあってか、HTMLの公式規格には含まれておりません。
HTMLの標準に含まれていないため、実際に利用するのにはリスクがあると言えますが、主要ブラウザには大抵実装されている事、及び<object>要素の実装が正しく行われていない現状がある事から、並行して使われるのは止むを得ないようです。
<embed>要素はマルティメディアを埋め込むための非公認要素です。
インターネットエクスプローラでは内容として、当該メディアに対応しない場合の代替コンテンツが記述出来ます。
しかしながら、インターネットエクスプローラ以外では、<embed>要素は空要素と見なされ、代替コンテンツの記述は後述の<noembed>要素で行わなければなりません。
結局、<embed>要素は空要素と見なして記述するのが賢明と言う事になります。
<embed>要素を空要素とした場合、その書式は以下のようになります。
<embed type="MIMEタイプ" src="埋め込むコンテンツのURL" width="横幅" height="高さ" />
<noembed>要素は、マルティメディアに対応していない環境での代替コンテンツを指定する非公認要素です。
しかしながら、<noembed>要素には属性などを記述する事が出来ません。
このため、どのメディアに対する代替コンテンツかの指定が不可能となります。
例えば、(好ましくないのは明らかですが)フラッシュとMPEG動画を同時に利用する場合、フラッシュプラグインは入っていても、MPEG動画のプラグインは入れていないという場合、その事だけでフラッシュの代替コンテンツをそのまま表示させてしまう事になります。
恐らく<noembed>要素が<embed>要素と共に非公認要素となったのは、このような自由度の低さもあるのでしょう。
また、<noembed>要素の内容に関しては正確な定義はありませんが、インライン要素に限るとしておけば無難でしょう。
<noembed>要素の書式は以下の通りになります。
<noembed>代替コンテンツ</noembed>
<applet>要素はJAVAアプレットの記述を行います。
<applet>要素は<object>要素に置き換えるべきものとされ、排除勧告が出ております(非推奨要素)。
従って、HTML 4.01/XHTML 1.0のトランジッショナル型かフレームセット型でのみ記述が可能になります。
<applet>要素の内容としては、以下の順に記述する事が出来ます(いずれも任意です)。
また、<applet>要素の代替コンテンツとしては、ブロックレヴェル要素も記述出来ます。
<applet>要素の書式は以下のようになります。
<applet code="埋め込むコンテンツのURL" width="横幅" height="高さ">(代替コンテンツ)</applet>
それでは、以下に具体的なマルティメディアの記述例をいくつか紹介しましょう。
画像の場合、ネットスケープ 4.x以降で<object>要素で表示が可能になります。
type属性(埋め込むオブジェクトの種類)に画像のタイプを指定し、<img>要素のsrc属性の代わりにdata属性(オブジェクトのURL)で指定します。
<img>要素のalt属性値となる文字列は<object>要素の内容として記述します。ブロックレヴェル要素の記述も可能であり、代替コンテンツが長すぎる場合も難無く記述出来ます。
画像の場合、今も<img>要素が標準で使える事もあり、ネットスケープ 3.x以前などの旧型ブラウザで表示出来ない<object>要素をわざわざ持ち出すのはどうかと思う方もいるかも知れませんが、どんなに内容が複雑な画像でも代替コンテンツを適切に記述する事が可能になり、アクセシビリティは向上させる事が出来ます。
以下に具体例として、平成17年度の売上グラフを<object>要素で埋め込む場合の記述例を挙げてみましょう。
<div><object type="image/gif" data="Sales2005.GIF" width="320" height="200" /><p>平成17年度の売上は、以下のようになりました。</p><dl><dt>平成17年 4月</dt><dd>…</dd>…<dt>平成18年 3月</dt><dd>…</dd></dl></object></div>
フラッシュの埋め込み方については、フラッシュのHTML文書への埋め込みについてにて解説しましたので、そちらをご覧下さい。
<object>要素を用いる事で、HTML文書の中に別の文書を表示させる事が出来ます。
但し、<object>要素でHTML文書を埋め込む場合、以下の点に注意して下さい。
このため、実は余り役に立たないと思いますが、以下のようにする事で実現します。
<div><object type="text/html" data="埋め込み文書URL" width="横幅" height="高さ">(代替コンテンツ)</object></div>
実際のところ、HTML文書を埋め込むのであれば、インラインフレームを利用するのが便利でしょう。
しかしながら、インラインフレームは、ストリクトHTMLでは定義されておりません。
