JavaScript Tips
外部ファイル編
jsファイルでメンテナンスを楽にする



■  [9] FlashなどをIE仕様変更に対応させる

Microsoft社(MS)が、Eolas社の特許を侵害したとして提訴された訴訟でMSが敗訴した影響が大きな広がりをみせようと しています。MSは来春、これに対処したブラウザをリリースする予定ですが、このブラウザは、 「object、embed、および applet タグが読み込まれるたびに確認ダイアログを出す」というユーザーに苦痛を強いる ものになりそうだからです。

W3Cなどもこの判決には危機感を持ち、2003年10月23日に無効の申立書を提出しており、米連邦取引委員会も2003年10月30日 特許異議申立ての新たな手続きを提案するなどIT特許をめぐる環境も大きく動きつつあるので、このIE仕様変更が先行き どのように決着するかはまだ確定とは言いきれない状況でもあります。

とはいえ、MSはすでにこの仕様変更IEのベータ版をダウンロード開始しており、 来春以降FlashやQuickTimeの埋め込まれたページを開くたびにうっとうしいダイアログに悩まされる可能性は 限りなく高まってきています。

そこでいまのところ、JavaScriptで.js外部ファイルを使うことが、この問題に対処する最もシンプルな回避策のようなので今回はこれを簡単に紹介します。

来春というのは準備するのにはそれほど遠い未来ではありません。仮に敗訴が覆ったとしても これを機会にFlashやQuickTime、Applet、ActiveXなどの多くをhtmlの外へ分離してしまえば 来年以降のあなたのサイト管理は格段にメンテナンス性の高いサイトに変身していることでしょう(^^?。

ちなみに、これにより 大きな打撃を受けると思われるFlashのMacromediaがFAQアクティブコンテンツデベロッパーセンターにてテクニックなどを紹介しているので参考になると思います。





  • 1: FlashやAppletを.js外部ファイルで書き出す

    HTMLをJavaScriptで書き出すやり方はいろいろありますが、最も簡単でブラウザ依存の少ない安全な方法はdocument.write()メソッドを 使う方法です。

    たとえば、下記のように書けば
    
     サンプル document.write()メソッド
    test1.htm test1.htm
    <script language='JavaScript'> document.write("これは<b>HTML</b>なんですわ"); </script>
    「これは<b>HTML</b>なんですわ」というHTMLが書き出される、という仕組みになっています。 ただ、このまま同一ページ内にFlashなどのタグを書き出すdocument.write()を書いても この特許にひっかかるので、この連載のテーマである.js外部ファイルの出番となるのです。

    では、今のスクリプトをとりあえず.js外部ファイルにしてみましょう。
    
     サンプル test1.htmを.js外部ファイルで書き直す
    test2.htm test2.htm
    <script language='JavaScript' src='./test2.js'></script>
     
    test2.js←.js外部ファイル
    document.write("これは<b>HTML</b>なんですわ");
    test2.htmの中のscriptタグのsrcでtest2.jsを読み込んでいます。動作はtest1.htmと同じです。 これでHTMLとスクリプトが分離されました。

    さて、ここまできたらあとは、FlashやAplletタグを書き出すdocument.write()文を書くだけです。やってみましょう。 まず、簡単なFlash用のタグをみてみます。
    
     サンプル Flash
    flash1.htm flash1.htm
    <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab' width=96 height=96> <param name=movie value='./aro.swf'>
    <param name=quality value=high>
    <embed src='./aro.swf' quality=high
    width=96 height=96
    type='application/x-shockwave-flash'
    pluginspage='http://www.macromedia.com/go/getflashplayer'>
    </embed>
    </object>
     
    objectタグとemmbedタグを2重に使ったいわゆるIE/NN共用型のコードです。赤文字の部分がFlashファイル名になっています。  では、これをdocumentt.write()で書いて.js外部ファイルにしてみましょう。
    
     サンプル flash1.htmを.js外部ファイルで書き直す
    flash2.htm flash2.htm
    <script language='JavaScript' src='./flash2.js'></script>
     
    flash2.js←.js外部ファイル
    document.write("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'") document.write(" codebase='http://download.macromedia.com/pub/shockwave/cabs/") document.write("flash/swflash.cab'") document.write(" width=96 height=96>") document.write("<param name=movie value='./aro.swf'>")
    document.write("<param name=quality value=high>")
    document.write("<embed src='./aro.swf' quality=high ")
    document.write(" width=96 height=96")
    document.write(" type='application/x-shockwave-flash' ")
    document.write("pluginspage='http://www.macromedia.com/go/getflashplayer'>")
    document.write("</embed>")
    document.write("</object>")
     
    こんな感じです。でも、このままではどうにも読みにくいので少しだけ整形してみましょう。
    
     サンプル flash2.htmの.js外部ファイルを書き直す
    flash3.htm flash2.htm
    <script language='JavaScript' src='./flash3.js'></script>
     
    flash2.js←.js外部ファイル
    htm = "" htm+="<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'" htm+=" codebase='http://download.macromedia.com/pub/shockwave/" htm+="cabs/flash/swflash.cab'" htm+=" width = 96 " htm+=" height = 96 >" htm+="<param name = movie value='./aro.swf'>"
    htm+="<param name = quality value=high>"
    htm+="<embed src = './aro.swf' "
    htm+=" quality = high "
    htm+=" width = 96"
    htm+=" height = 96"
    htm+=" type = 'application/x-shockwave-flash' "
    htm+=" pluginspage='http://www.macromedia.com/go/getflashplayer'>"
    htm+="</embed>"
    htm+="</object>"

    document.write(htm)
     
    これでwidthやheightなどのパラメーターもいじりやすくなりましたね。 document.write()も13回も実行していたのが1回になりましたからほんのわずかですが 負荷も減っているはずです(ってほどのことでもないですね^^;)。

    というわけで、今回はここまでです。 次回はこれを関数化してもう少し使いやすくしてみましょう。











※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。