Javascript

【Javascript】.js外部ファイル編　[9] Flash等をIE仕様変更に対応1

Javascript関連情報

更新日：2003年11月06日

.js外部ファイル編　[9] Flash等をIE仕様変更に対応1

高橋登史朗

Microsoft社(MS)が、Eolas社の特許を侵害したとして提訴された訴訟の影響で行われるIEの仕様変更に対応するスクリプト。

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回になりましたからほんのわずかですが負荷も減っているはずです(ってほどのことでもないですね^^;)。

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

回答募集中のトピック（お題）

男のカバン完全カタログ

ビジネススタイルは、スーツの着こなしのルールを遵守しつつ、小物で個性を打ち出すのがセオリー。だからこそ、比較的自由度の高いバッグが重要だ。そこで今回は、「ブリーフケース」と「トートバッグ」という今おすすめのタイプから15点ずつアイテムをピックアップ。品質や素材が秀でているだけでなく、機能面も優れる才色兼備な逸品を厳選した。バッグを新調するだけで、不思議なほど心躍る。

For M タブレット版アプリvol.16配信中！

フライパン一つの超簡単男メシ

楽しく痩せるスポーツアイテム

速報！メンズファッションニュース

人気Javascriptランキング

【Javascript】.js外部ファイル編 [9] Flash等をIE仕様変更に対応1

.js外部ファイル編 [9] Flash等をIE仕様変更に対応1

【Javascript】.js外部ファイル編　[9] Flash等をIE仕様変更に対応1

.js外部ファイル編　[9] Flash等をIE仕様変更に対応1