SWFObjectのFAQはいけてますね、FlashをHTMLにembedするにあたっての陥りやすい罠が網羅されている印象です。実質、FAQの項目の多くが SWFObject自体の問題というよりはブラウザのバグ等が原因のため、同ライブラリを使う使わないに関わらず起こるもののような気がするのですが、SWFObjectが非常に多くの人達に使われているため、ここにそのあたりの質問とその応答の結果として蓄積されたノウハウが一番端的に集まっているように思います。日々様々な（時にはいわれのない）「おい、これ動かんぞ」の問い合わせに開発者の方やコミュニティーのみなさんが反応してくれている状況を想像するに、様々なライブラリ一般を公開して維持してくれている全てのみなさんへの尊敬の念が深まります。
最近はじめてFlex Frameworkを用いた小さなテストツールの作成に関わったのですが、ひととおり形になりdeploy用のファイルを構成するにあたって、Flex Buliderが生成するごちゃごちゃしたHTMLが嫌でSWFObjectを使った自前のものを使ったら、Firefox 3で.swfが表示されずに多少悩んでしまいました。原因はSWFObject FAQの1番;
because Firefox (or: any Gecko based browser) in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly):
だったのですが、これ自分も過去に経験してたのにまた忘れてました。Gecko系のブラウザで標準モードのときは、object(embed)要素のheightを100%にするだけでは駄目で、その祖先要素(html, body含む)の全てのheightをCSSで明示的に指定しないと表示がおかしくなります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="history/history.css" />
<style type="text/css">
html, body {height:100%;}
body {margin:0; padding:0; background-color:#869ca7; overflow:hidden;}
img {border-style:none;}
#container {width:100%;height:100%;}
#altContents {margin:1em;}
#altContents div {margin-bottom:0.5em;}
</style>
<script type="text/javascript" src="history/history.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
var swfUrl = "Main.swf";
var containerID = "container";
var w = "100%";
var h = "100%";
var requiredVersion = "9.45.0";
var expressInstallSwfUrl = "expressInstall.swf";
var flashvars = {};
flashvars.userAgent = navigator.userAgent;
var params = {};
params.quality = "high";
params.bgcolor = "#869ca7";
params.allowScriptAccess = "sameDomain";
var attributes = {};
attributes.id = "main";
attributes.name = "main";
swfobject.embedSWF(swfUrl, containerID, w, h, requiredVersion, expressInstallSwfUrl, flashvars, params, attributes);
//]]>
</script>
</head>
<body>
<div id="container">
<div id="altContents">
<div>To view the contents of the page, please turn JavaScript on, and install the latest version of Adobe Flash Player from the link below.</div>
<div><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></div>
</div>
</div>
</body>
</html>新しいことを学んでいるときは昔はまったこともぽろっと忘れてしまうものですね。自分の過去の経験から、個人的にはFAQの6番、24番等も要チェックかと思います。
Leave a comment