堀北真希うさぎ
主な作品
オリジナルキャラクタを用いたイラストの一例とアニメーション動画

ページ案内▼

フラッシュに対応しているかどうかを調べる。

フラッシュを利用しているサイト向けに、ブラウザがフラッシュに対応しているかどうかを判定するJAVAスクリプトです。

フラッシュに対応しているかどうかを調べる・目次。

なぜフラッシュ対応かどうかを確認する必要があるか。

最近ではウェブサイトにフラッシュを利用する事が多くなりました。

フラッシュはアニメーションGIFに較べて軽くなる事が多く、またより多彩な表現が可能です。

しかしながら、フラッシュはあくまでもプラグインであり、ウェブの基本的な技術とは言えません。

このため、プラグインを入れていない環境や入れられない環境では、何らかのトラブルが起こる可能性があります。

この対策としては、プラグインに対応している環境かどうかを判断して、対応している場合に限りフラッシュコンテンツを提供する事でしょう。

この目的には、JAVAスクリプトが最も簡便で確実な方法と言えます。

フラッシュに対応しているかどうかを調べるスクリプトのサンプル。

ネットスケープ 3.x以外で、スクリプトを実行出来て且つフラッシュを表示出来る環境なら、フラッシュが表示されている事でしょう。

ネットスケープ 3.xまたはフラッシュが表示出来ないグラフィカルな環境では、フラッシュの代りに静止GIF画像が表示されます。

JAVAスクリプトが使えない場合は、静止GIFとなります。

フラッシュに対応しているかどうかを調べるスクリプトのソース。

フラッシュに対応しているかどうかを調べるスクリプト「CheckIfFlashEnabled.js」は以下の通りです。

fflag=0;
if (document.layers || document.all || document.getElementById) {
    if (document.all && !window.opera && navigator.useAgent.indexOf('Win')>-1) {
        document.write('<scr' + 'ipt type="text/vbscript"\> \n');
        document.write('on error resume next \n');
        document.write('fflag=( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.6")))\n');
        document.write('</scr' + 'ipt> \n');
        }
    else if (navigator.plugins['Shockwave Flash']) fflag=1;
    }

if (fflag==0)
    document.write('<div><img alt="" src="../../../SiteBanner.GIF" width="200" height="40" /></div>');
else {
    if (document.all && !window.opera)
        document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="200" height="40">'+
            '<param name="movie" value="SiteBanner.swf" />'+
            '<param name="wmode" value="transparent" />'+
            '<param name="quality" value="high" />'+
            '</object>'+
            '');
    else
        document.write('<object type="application/x-shockwave-flash" data="SiteBanner.swf" width="200" height="40">'+
            '<param name="wmode" value="transparent" />'+
            '<param name="quality" value="high" />'+
            '</object>'+
            '');
    }

HTML文書側での準備。

一方、HTML文書側はこのようになっております(今回は、特に仕掛けがある訳ではありませんが、JAVAスクリプトに対応していない環境での対策なども示す必要があるため解説しております)。

<table summary="ネットスケープ 4.xでの表示崩れ対策のテーブルです。" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td>
    <script type="text/javascript" src="CheckIfFlashEnabled.js"></script>
    <noscript>
        <div>
            <img alt="グラフィカルな環境では、ここにフラッシュか画像が表示されます。" src="../../../SiteBanner.GIF" width="200" height="40" />
            </div>
        </noscript>
    </td></tr></tbody></table>

<noscript>要素で、スクリプトが実行出来無い場合にGIF画像を表示させているのが分かります。

尚、<table>要素の内容となっているのは、ネットスケープ4.xでのスタイル崩れ対策です。

スクリプトの流れ。

このスクリプトの流れは、以下のようになります。

  1. フラッシュ対応か判定する。
  2. 適切なHTMLを出力する。

フラッシュ対応か判定する。

fflag=0;
if (document.layers || document.all || document.getElementById) {
    if (document.all && !window.opera && navigator.useAgent.indexOf('Win')>-1) {
        document.write('<scr' + 'ipt type="text/vbscript"\> \n');
        document.write('on error resume next \n');
        document.write('fflag=( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.6")))\n');
        document.write('</scr' + 'ipt> \n');
        }
    else if (navigator.plugins['Shockwave Flash']) fflag=1;
    }

まず、フラッシュ対応かどうかの情報を変数fflagにて表す事にします。

この変数はフラッシュ対応なら0で無い数、非対応なら0となります。

ネットスケープ 3.xなどの旧いブラウザでは、現在のフラッシュを表示させようとするとブラウザごと落ちるものがあるようです。

このため、ネットスケープ 4.x以降のブラウザのみフラッシュ対応かどうかを判定する事にします。

まず、document.layers, document.allまたはdocument.getElementByIdがあれば旧式で無いブラウザだと分かります。

ところで、ウィンドウズ版のインターネットエクスプローラではVBスクリプトを用いないとプラグインに関する情報が得られません。

このため、インターネットエクスプローラの場合はVBスクリプトを用いて一律にフラッシュ対応と判断します。

VBスクリプト
インターネットエクスプローラでJAVAスクリプトとともに利用出来る、クライアントサイドスクリプト言語。プログラミング言語「Visual BASIC」をベースにした言語。

インターネットエクスプローラである事を調べるには、ブラウザとオブジェクトの関係にあるように、document.allが存在して且つwindow.operaが存在しない場合となります。

この場合、VBスクリプトをdocument.writeで書き出し、これによりフラッシュに関するオブジェクトがあるかどうかを判定します。

インターネットエクスプローラ以外では、JAVAスクリプトでプラグインを調べられます。

プラグインに関する情報は、navigator.pluginsに配列の形で納められており、'Shockwave Flash'を名前に持つ要素があれば対応している事が分かります。

適切なHTMLを出力する。

こうして得られた情報を元に、フラッシュなり画像なりを出力するHTMLを書き出しましょう。

if (fflag==0)
    document.write('<div><img alt="" src="../../../SiteBanner.GIF" width="200" height="40" /></div>');
else {
    if (document.all && !window.opera)
        document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="200" height="40">'+
            '<param name="movie" value="SiteBanner.swf" />'+
            '<param name="wmode" value="transparent" />'+
            '<param name="quality" value="high" />'+
            '</object>'+
            '');
    else
        document.write('<object type="application/x-shockwave-flash" data="SiteBanner.swf" width="200" height="40">'+
            '<param name="wmode" value="transparent" />'+
            '<param name="quality" value="high" />'+
            '</object>'+
            '');
    }

手順は以下のようになります。

  1. まず、フラッシュ非対応環境では単純に<img>要素を書き出しております。
  2. 一方フラッシュ対応環境では、ブラウザによって以下の処理の中から撰びます。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com