その他
    ホーム 技術発信 DoRuby 背景透過に対応するシム技法

    背景透過に対応するシム技法

    この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

    初めまして。新人エンジニアの はる です。

    社内では主にRuby on Rails と Flash をいじっています。

    今回は、「透過に対応するシム技法」についてご紹介します。

    Q:シム技法とは?

    例えば、FlashをWEBページの上に重ねて表示(WEBページの1つ上のレイヤーに
    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 の連携方法」について触れてみたいと思います。

    記事を共有