僕は見ていた

QuickTime ムービーを貼付けるときのマークアップを更になんとかする(多分最終回)

QuickTime の mov ファイルに対して非標準の embed 要素を使わず object 要素を使って Safari, Firefox そして Internet Explorer 6 で共通して QuickTime のプラグインが使える標準準拠のマークアップをしつこく模索してみました。

前回の「僕は見ていた : QuickTime ムービーを貼付けるときのマークアップをなんとかする」では Firefox の場合だけ JavaScript を用いることで解決しました。しかしインタラクティブでもないのに JavaScript を使うというのに少し抵抗があります。embed 要素を使うことに対する抵抗よりは小さいですが。

最初の「僕は見ていた : QuickTime ムービーを貼付けるときのマークアップで困った」で object 要素の中では param 要素達の後ろに代替のマークアップを書けるということに触れました。そこでパターンを組み合わせてどれかに引っかかるようにすればどのブラウザでもいけるのではないか、そう考えました。

ここでもう一度各パターンの表を掲載してみます。

最もましなパターン 3 では Firefox は「リンクのみ」となっています。このリンクはまさに代替のマークアップによるものです。ということは代替のマークアップとしてリンクではなく Firefox で OK なパターンを書けばめでたく三つのブラウザでインライン表示できるはずです。代替にするのはパターン 3 と相補的になっているパターン 5 がよいでしょう。というわけでやってみました。

マークアップ

<object height="16" width="170"
  codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  >
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="src" value="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov" />
    <object height="16" width="170"
      data="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov"
      type="video/quicktime"
      >
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <a href="http://homepage.mac.com/yuji_okamura/iSawIt/attach/2008-09-21/ToySymphony.mov">ToySymphony.mov</a>
    </object>
</object>

実例

意図どおり Firefox でもきちんと表示できました。が、しかし! IE6 で入れ子の中の object がテキストや HTML を object で表示させたかのような状態になっています。しかも中身空っぽ。クヤシーーーーイ!

この表示は W3C の仕様書(日本語訳)の記述から考えてどうもバグなんじゃないかと。まあそんなこと言ったら Firefox が classid 属性を親切に入れてあげるとインライン表示できなくなるというのもバグなんじゃないかと思うわけで、お互い様なんですが。それにつけてもこのあっちを立てればこっちが立たず状態は困ったものです。

Firefox に対しては JavaScript で対応するというアプローチを試してみたわけですが、その JavaScript に抵抗があって今再び考えているのだから、今度の IE6 に対しては CSS で考えてみようという方針で調べてみました。

そうしたらありましたよ、どんピシャな情報が。「XHTML Quicktime Object」です。もうどんピシャ過ぎて二回もエントリしたのがバカバカしくなってきました。というわけで CSS アプローチはそちらを見てください。

ではそれですっきりかというとそうでもありません。というのはその CSS では各ブラウザのバグに依存した変な書き方をすることでブラウザ毎に適用するスタイルの違いを引き出しているからです。そういう手法は CSS 業界(そんなもんあるのか?)では広く知られている手法のようですが、CSS やマークアップのプロではない僕にはとても抵抗が有ります。CSS として無意味な記法をするよりも、もっと論理的にやりたいのです。例えば Firefox だったらこうする、IE5 だったらこうするというようにです。同じ IT エンジニアでも出自の違いでしょうね。

このケースで JavaScript アプローチと CSS アプローチのどちらをとるかというと僕は JavaScript アプローチをとります。殆ど合理的な理由ではありませんが、こういう理由からです。

• だって自分で考えたんだもん。
• JavaScript コードを見て何がしたいかわかるけれど、CSS を見ても CSS 自体の意味として何を書いているのか意味不明なんだもん。
• コードの総量が小さいんだもん。
• JavaScript が無効だったとしても(対象の)どのブラウザでも変な表示にはならないけれど、CSS が無効だと IE6 で変な表示になっちゃうんだもん。

というわけでこの件についてはここで終了。まとめると標準準拠マークアップのみで対応できないから次の三つの選択肢から選びましょうということです。順序は僕から見た好ましい順です。

1. 「僕は見ていた : QuickTime ムービーを貼付けるときのマークアップをなんとかする」に書いた JavaScript アプローチで補う。
2. 「XHTML Quicktime Object」に書いてある CSS アプローチで補う。
3. 非標準覚悟で embed 要素を使う。

• Posted by OKAMURA Yuji at 00時13分
• Categories: Web 標準