この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
初めまして。新人エンジニアの はる です。
社内では主にRuby on Rails と Flash をいじっています。
今回は、「透過に対応するシム技法」についてご紹介します。
Q：シム技法とは？
例えば、FlashをWEBページの上に重ねて表示(WEBページの１つ上のレイヤーに
Flashを表示するイメージ)する場合、IE6ではセレクトボックスが最前面に表示
されてしまいます。
HTMLのレイヤー構造を指定する方法としては、通常、CSSのz-indexプロパティを
使用しますが、IE6のSELECT要素にはz-indexを指定することが出来ません。
これはIE6において、SELECT要素がウィンドウコントロールとして扱われている
ために起こる現象です。
対策としては、iframe要素をSELECT要素の上に重ね、さらにiframeの上にFlashを
重ねることで、SELECT要素が最前面に表示されなくなります。
これを「シム技法」といいます。
さて、ここからが本題です。
シム技法を用いて背景が透明のFlashを表示したい場合を考えます。
iframeにはallowtransparency属性があり、
allowtransparency="true" ・・・背景を透過にする
allowtransparency="false" ・・・背景を透過にしない(初期値)
と定義されています。
しかし、背景を透過させるためにtrueを指定した場合、iframeの背景が透過されても
シムとして使用することができません。また、flaseを指定した場合は、シムとして
使用することはできるものの透過されません。
つまり、このままでは背景が透明のFlashをシム技法で表示することができない
ということになります。
これを解決するためには、iframeに少し珍しいstyle指定を行います。
<iframe frameborder="0" scrolling="no" style="filter:alpha(opacity=1);">
CSSのfilterプロパティはIE(Win)の独自プロパティであり、主に文字や画像を装飾
するために用いられます。上記のstyle指定では、不透明度を1％に指定することで
“ほぼ”透明のシムとして使用することができます。
filterプロパティは、IE独自の機能ですが、そもそもシム技法を使用しなければならない
ブラウザもIE6以下のみですので、IE6以外では表示しないよう切り分けることをお勧め
します。
また、FlashとFlashが重なるページの場合、Flashを表示しているobjectタグに、
以下の指定を行う必要があります。
<param name="wmode" value="transparent" />
<embed ...wmode="transparent" ... />
上記の指定をしていない場合、FlashがHTMLのレイヤー構造を理解することが
できませんので、ご注意下さい。
以上、長文になりましたが「透過に対応するシム技法」についてご紹介させていただきました。
次回は「Ruby on Rails と Flash の連携方法」について触れてみたいと思います。
