- 2008年1月17日 10:12
- flash
タイトル通りの事ができないかなーと、やってみたら少し手こずったという話（FitFlash を使えば何も問題はなかった）。
※ここに載せているサンプルは、全て公開識別子を XHTML1.0 Transitional にしています。
※この記事には続きがあります。必ず読むようにしてください。
swfobject v2.0 + FitFlash
まずは flash 側の準備をします。画面サイズが変動してもいいように、stage のプロパティを設定しておきます。
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;次に swfobject v2.0（swfobject_2_0_rc1.zip）をダウンロードします。使い方は寺井さんの記事を参照。
更に、ピッチリ表示させるため FitFlash をダウンロード。
一番シンプルに書けそうなオプション2を選択。embedSWF メソッドの第 3 引数が width（幅）、第 4 引数が height（高さ）なので、それぞれを 100% にしてやります。FitFlash メソッドは、第一引数に swfobject で指定したIDを、第2第3引数には縦横の最小値を指定してやります。
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject.js"></script> <!-- swfobject の読み込み -->
<script type="text/javascript" src="fitflash.js"></script> <!-- FitFlash の読み込み -->
<script type="text/javascript">
// <![CDATA[
swfobject.embedSWF("myContent.swf", "myContent", "100%", "100%", "9.0.0");
FitFlash ("myContent", 640, 480);
// ]]>
</script>swfobject v2.0 + FitFlash であれば、Window 内に問題なく全画面表示ができているはずです。
swfobject v2.0 + スタイルシート
先程の方法であればスムーズにでまきすが、swfobject のみの場合は height を 100% にしてしまうと Firefox（使用しているバージョンは 2.0.0.11）Gecko系のブラウザだけが flash を表示できないようです（IE, Safari, Opera は表示可能）。試しに片方だけ 100 % にしてみると、width の場合だけ表示することができた。
以下のコードの width, height を変化させた 3 パターンのサンプルが下の3つです。
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject.js"></script> <!-- swfobject の読み込み -->
<script type="text/javascript">
// <![CDATA[
swfobject.embedSWF("myContent.swf", "myContent", "100%", "100%", "9.0.0");
// ]]>
</script>
<style type="text/css">
<!--
body{
margin: 0;
padding: 0;
}
-->
</style>このバグを解消する解決法があるそうで、body 要素の縦横のサイズを指定してやり、position を absolute にすることで、body 要素の子にあたる要素のサイズを有効にできるようです。
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject.js"></script> <!-- swfobject の読み込み -->
<script type="text/javascript">
// <![CDATA[
swfobject.embedSWF("myContent.swf", "myContent", "100%", "100%", "9.0.0");
// ]]>
</script>
<style type="text/css">
<!--
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
-->
</style>Firefox のバグかな？と思ったが、 Bugzilla-jp には載っていなかったのでバグかどうかは不明。flash 側の設定ミスも考えられるけど、Flashplayer 上で動いているのでそれが原因とは考えられない。原因不明。
swfobject v1.5 + FitFlash
試しに swfobject v1.5 を使ってみると、FitFlash を併用すればこちらもうまく表示することができました。
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject_1_5.js"></script> <!-- swfobject の読み込み -->
<script type="text/javascript" src="fitflash.js"></script> <!-- FitFlash の読み込み -->
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("myContent.swf", "myContent", "100%", "100%", "9", "#000000");
so.write("myContent");
FitFlash ("myContent", 640, 480);
// ]]>
</script>swfobject v1.5 + スタイルシート
swfobject v1.5 を利用した場合でも、swfobject v2.0 と同様の処置をしてやる必要がありますが、それに加えて代替コンテンツボックスの height を 100% にしなければなりません。これは、v2.0 がコンテンツボックス自体を置き換えているのに対し、v1.5 はコンテンツボックスの中身を置き換えていることによるものです。
Firebug で置換後の状態を調べたものが以下のコードです。v1.5 ではコンテンツボックスが置換されていないことが分かります。
<object width="100%" height="100%" type="application/x-shockwave-flash" data="myContent.swf"/><div id="myContent">
<embed id="myContent" width="100%" height="100%" quality="high" bgcolor="#000000" name="myContent" style="" src="myContent.swf" type="application/x-shockwave-flash"/>
</div>これを考慮したものが以下のコードになります。
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject_1_5.js"></script> <!-- swfobject の読み込み -->
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("myContent.swf", "myContent", "100%", "100%", "9", "#000000");
so.write("myContent");
FitFlash ("myContent", 640, 480);
// ]]>
</script>
<style type="text/css">
<!--
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div#myContent {
height: 100%;
}
-->
</style>まとめ
swfobject を使って window 内に全画面表示する場合は、現状では v1.5 を使った方がいいのかもしれない。ただ、僕のミスである可能性も否定できないので、確証は持てません。FitFlash を併用すれば問題ないと思います。ただ、どうしてもスタイルシートを使いたい場合は上で書いた方法にすれば大丈夫だと思います。
記事を修正するにあたり、Twitter で cellfusion の Mk-10 さんにいろいろ教えて頂きました。ありがとうございました！
2008-01-17T19:00:00+09:00 大幅に修正。
- Newer: 続・swfobject で flash を Window 内に全画面表示
- Older: 移転メモ（３）Feed と FeedBurner
