マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

第 5 回<object>を極める
この連載ではこれまでCSSのテクニックを中心に紹介してきたが、今回は趣向を変えてHTML 4のobject要素について解説しよう。
HTML 4は最初に仕様が定められてから5年も経つが、いまだに完全サポートしているブラウザーはない。今回は代表的なブラウザー
でobject要素の対応がどこまで進んでいるかをマニアックにチェックしてみよう。
文：佐藤和人HTML MANIAXで紹介したテクニックはinternet.impress.co.jp/maniax/でソースを公開！

IE 6も対応していないHTML 4の奥義

object要素と言えば、ActiveXコントロー①<object data="tama.mpeg" type="application/mpeg">②<object data="tama.gif" type="image/gif">③帷子川に出現したアザラシのタマちゃん。

ルを埋め込むためのIE専用の要素だと思ってはいないだろうか。HTML 4で定義されているobject 要素は、画像、プラグイン、</object>

Javaアプレットなどなど、何でもウェブページ</object>に埋め込める強力な機能を持っているのだ。ただし、ウィンドウズ版のIEは、その機能の一部しかサポートしていない。今月の記事を読めば、ネットスケープ6以降とマッキントッシュ版IE 5のほうがobject要素を正確に実装していることが分かるだろう。
object 要素がこれまでの img 要素やapplet 要素よりも優れているのは、左の図
帷子川に出現した……のような何重もの代替コンテンツを表現できる点だ。
「Flashが表示できなければ画像、それでもだめならテキスト」のような指定が①MPEGを表示できるブラウザ
ーはMPEGを表示②MPEGを表示できないブラウ
ザーはGIFを表示。

③MPEGもGIFも表示できなけ
ればテキストを表示。

シンプルに記述できる。残念ながら、ウィン
ドウズ版IEはobject要素を入れ子にすると表示がおかしくなる。

160 +++ internet magazine +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D1［ 何でも埋め込めるobject ］
object要素は、ActiveXコントロールを埋め込むためだけにあるのではない。HTMLや画像など、ブラウザーで表示できるファイルなら何でも埋め込める。まずはobject要素の基

object要素でインラインフレーム本的な使い方を見てみよう。

object要素でほかのページを埋め込む

object 要素の基本的な使い方はこうだ。
（1）data属性に埋め込みたいファイルへのURLを指定する。
（2）
そのファイルのMIMEタイプをtype属性で指定する。
（3）
そのファイルを表示できないブ
ラ ウ ザ ー の た め に <object> 〜</object>の間に代替テキストを記述する。
ソース①のように、data属性にHTMLファイルを指定してみよう。iframe要素

object要素でHTMLや画像を埋め込むと、IEでは枠線とスクロールバーが出るで作ったインラインフレームのようにほかのページが埋め込まれる。ただし、① tips1-1.html

object要素の場合は、target属性を使っ<object data="embed.html" type="text/html"
width="240" height="180"><a href="embed.html">tips1-1e.htmlを参照</a></object>てインラインフレームの URL を切り替えることはできない。
ウィンドウズ版IEでは、マッキントッ
シュ版 IE 5やネットスケープ 6以降と違い、埋め込んだページに枠線とスクロールバーが付いてしまう。埋め込まれるHTMLでhtml { border-style: none; }object要素で画像を埋め込むというCSSを指定し、body要素にIE独自の属性scroll="no"を加えれば表示を統一できる。

IE 6は入れ子がダメ
ソース②のように、data 属性に画像ファイルを指定すると、img要素と同じように画像を表示できる。ただし、やはobject要素を入れ子にすると、IEは画像を2つ表示してしまう。

② tips1-2.html

りウィンドウズ版IEでは枠線とスクロールバーが付いてしまう。これを避ける方法はない。
object 要素と画像の組み合わせで、<object data="title.png" type="image/png"
width="227" height="67">HTML Maniax</object>HTML 4の仕様をテストしてみよう。ソース③のようにobject要素の内容にさらに object 要素を入れて、外側の要素にはPNG画像を、内側の要素にはGIF画③ tips1-3.html

像を指定する。IEはPNGをサポートしているから、PNG画像が表示されるは<object data="title.png" type="image/png"
width="227" height="67"><object data="title.gif" type="image/gif"
width="227" height="67">HTML Maniax</object></object>

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ずだ。ところがウィンドウズ版IEは2つのobject要素を並べて表示してしまう。
これはバグとしか言いようがない。マッキントッシュ版 IE 5とネットスケープ 6以降はうまくいく。

+++ internet magazine +++161

2［ プラグインもobjectでOK ］
Flashのようなプラグインを指定するのはめんどうだ。object要素やembed要素を組み合わせてややこしいHTMLを書かなければならない。ところがプラグインの埋め込みを劇的に簡単にする方法があるのだ。

Flashを簡単に埋め込む

object要素でFlashを埋め込む

ソース①を見てほしい。object 要素に ActiveX のややこしい CLSID はない
し、embed 要素もない。data 属性にFlashのファイルを指定し、type属性に「application/x-shockwave-flash」を指定すればいいのだ。この書き方には、IE とネットスケープ 6 以降だけでなく、古いネットスケープナビゲーター4も対ネットスケープナビゲーター4では代替テキストが表示されてしまう。

応している。ただし、ネットスケープナ① tips2-1.html

ビゲーター4では、object要素の内容の代替テキストが表示されてしまう。
IE では data 属性に Flash ファイルをá<object data="hello.swf"
type="application/x-shockwave-flash"width="300" height="100"><param name="movie" value="hello.swf">
Flashアニメーションです。
</object>

指定するだけでなく、param要素を使って Flash ファイルを指定する必要がある。一方で、ネットスケープナビゲータ
ー4やネットスケープ6以降はparam要
素を読まないので、object 要素ではプラグインのパラメーターを指定できないという制限がある。

MIDIは無理っぽい…

MIDIを埋め込む実験

BGM を鳴らす MIDI も、embed やbgsoundのような独自要素を使わずにobject 要素で済ませられるのではないだろうか。まず、ソース②のように単純に data 属性と type 属性で MIDI を指定してみた。マッキントッシュのIEやネットスケープでは、QuickTimeプラグイン
ウィンドウズ版IEではソース②が、マッキントッシュ版IEではソース③がうまくいかない。

が呼び出されて、MIDIが再生できた。しかし、ウィンドウズではIEに妙なメッセ② tips2-2.htmlージが表示されてしまうし、ネットスケープは反応しない。

<object data="K330-3.mid" type="audio/midi"
width="300" height="60"></object>

次に、ソース③のように type 属性にメディアプレーヤーを指定してみた。今
度はウィンドウズ版のIEとネットスケープでうまくいった。しかし、マッキントッ
シュでは、エラーメッセージが表示され③ tips2-3.htmlる（そもそもマッキントッシュではメディ
アプレーヤーをユーザーがインストール<object data="K330-3.mid" type="application/x-mplayer2"
width="300" height="60"><param name="FileName" value="K330-3.mid"></object>162 +++ internet magazine +++する必要がある）。object要素でMIDIを鳴らすのはあきらめたほうがよさそうだ。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

3［ Javaアプレットとイメージマップ ］
HTML 4のobject要素に関する仕様を読むと、いろいろと面白いソースの例が見つかる。
現在のブラウザーはそうした例をどこまで実現しているのだろうか。ここではさらに突っ込ん

Javaアプレットの正しい埋め込み方

でobject要素の機能を調べてみよう。

HTML 4に準じたアプレットの埋め込みHTML 4では、applet要素は廃止予定とされ、推奨されていない。Java アプレットを埋め込むにも、やはりobject
要 素 を 使 うことが 推 奨 されて い る 。
object 要素で Java アプレットを埋め込
むには、ソース①のように classid 属性に「java:クラスファイル」を指定する。
codetype属性には「application/java」を指定するが、この属性は省略しても問題どのブラウザーでも問題なくアプレットが動く。

ない。
object 要素で埋め込んだアプレット① tips3-1.html

は、ウィンドウズでもマッキントッシュでも、IEでもネットスケープでも動く。ネ<object codetype="application/java"classid="java:sample.class" width="480" height="60"><param name="message" value="HTML Maniax"><param name="backcolor" value="FFFFAA"><param name="forecolor" value="FF0000">
Javaアプレットでテキストアニメーション。
</object>ットスケープナビゲーター4でも大丈夫だ。もっとも、ネットスケープナビゲー
ター 4やウィンドウズ版 IEでは Java 2が動かないので、JDK 1.1以前のアプレットを使う必要はあるが。

イメージマップもobject要素でHTML 4では、object要素にusemap

object、map、aでイメージマップ属性を付けてイメージマップを作ることができる。また、a要素にshape属性とcoords属性を付けて、area要素の代わりにできる。ソース②は、object、map、aの各要素を組み合わせて作ったHTML4方式のイメージマップだ。この方式の利点は、アクセシビリティーの点で優れていること。画像を表示したりマウスで操作したりできない環境（テキストブラウザーや音声読み上げソフト）では、aウィンドウズ版IEはこの方式のイメージマップに対応していない。

要素が通常のリンクとして機能するためだ。img、map、areaを組み合わせたイ② tips3-2.html

メージマップは、画像とマウスを前提とした環境に限定される。

<object data="map.png" type="image/png"
width="400" height="140" usemap="#map1"><map name="map1"><p><a href="http://www.watch.impress.co.jp/"
shape="circle" coords="70,70,60"
title="impress Watch">impress Watch</a> |（中略）……</p></map></object>

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dといっても、ウィンドウズ版のIEがまったくサポートしていないのが悔しいところだ。マッキントッシュ版IE 5やネットスケープ6以降なら正確にイメージマップとして機能する。ウィンドウズ版IEの次期バージョンがHTML 4やCSS 2などのウェブ標準への対応を進めてくれることを期待したい。

+++ internet magazine +++163

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.