object要素の汎用的な使い方

object要素の汎用的な使い方を説明してみようと思う。

まず、画像を描画するには、img要素を使う。

<img width="165" height="50" src="http://www.aozora.gr.jp/images/noextension.png" alt="著作権保護期間延長に反対します" />

このように描画される

しかし、imgというのは、どうも限定的だ。これは画像しか描画できない。第一、画像とはなんだろうか。PDFは画像か？　SVGは画像か？　WMFやXPMは？　そもそもHTMLは描画できるコンテンツだ。ここで、なんでも描画する、汎用的な要素がほしいところだ。object要素は、まさにそういう理想のもとに作られた。

<object width="165" height="50" type="image/png" data="http://www.aozora.gr.jp/images/noextension.png" > </object>

この下に、画像が描画されているはず。なぜかIEが、</object>がないと意味不明な描画をする。どうも、object要素は、そのコンテンツとして、等価なテキストを入れておくことが推奨されているようだ。

まあ、現実は、理想とは違う。IEが非常に奇妙な描画をする。objectはとても汎用的なので、画像のほかにも、動画やテキストファイル、HTMLなど、およそ描画できるものは何でも描画できる規格になっている。現実は、理想とは違うが。

例えば、今度はHTML/XHTMLを描画してみよう。これには、従来iframeが用いられてきた。

<iframe width="500" height="200" src="http://www.nicovideo.jp/thumb/sm9" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"> <a href="http://www.nicovideo.jp/watch/sm9"> 【ニコニコ動画】新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師 </a> </iframe>

これを描画すると、次のようになる。

しかし、またここで思う。iframeとは、(X)HTMLしか描画できない、限定的な要素だ。もっと汎用的にはいかないものか。そこで、object要素が登場する。

<object width="400" height="200" type="text/html" data="http://www.nicovideo.jp/thumb/sm9" style="border:solid 1px #CCC; " >l <a href="http://www.nicovideo.jp/watch/sm9"> 【ニコニコ動画】新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師 </a> </object>

描画できるかな？

まあ、理想と現実は、だいぶ違う。しかし、IE7だけはありえない。object要素はその他にも、動画なども表示できそうなものだが、唯一対応していたFireFoxでも、QuickTimeのプラグインが必要ときたものだ。QuickTimeは嫌いなので、動画の再生はできない。やれやれ。