- 2008年1月18日 00:38
- flash
swfobject で flash を Window 内に全画面表示では、swfobject（v2.0 のオプション2 または v1.5）と FitFlash（2.4） またはスタイルシートを使って全画面表示をしていました。その後でもう少し詳しく調べてみた結果、実は特定の公開識別子のみ全画面表示可能であったり、縦スクロールバーが出てしまうことが分かりました。
公開識別子によって縦スクロールバーが出てしまうブラウザがある
前回のサンプルコードは、公開識別子を全て XML 宣言付きの XHTML1.0 Transitional にしていたため、IE6, 7 以外では全画面表示されていました。そこで、15種類の公開識別子に変えて各ブラウザで表示テストを行った結果、以下の表（リンク先）のようになりました。
※Win環境（IE6, IE7, Firefox2.0.0.11, Opera9, Opera10, Safari3.0.4）しか確認できなかったので、Macは未確認です。すみません(-_-;)。
この表は、2xup の kaminogoya さんの「標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有」にある "各ブラウザの DOCTYPE スイッチ対応表" を参考にして、Google ドキュメントを利用して ローカルの Excel ファイルを変換し表示したものです。こういう大量の表を Web 上で表示させたい時はホント役立ちますね。
一応、表示テストに使ったサンプル集も載せておきます。
この結果を見ると、IE6, 7 では常に縦スクロールバーが表示され、それ以外のブラウザでは、公開識別子が XHTML1.1, XHTML1.0 Strict, XHTML4.01 Strict の場合、縦スクロールバーに加えて数 px の余白ができてしまうことが分かります。
とりあえず縦スクロールバーを消してやる
前回のコードに以下のスタイルシートを加えます。overflow を hidden にすることで、はみだした領域の有無に関わらずスクロールバーを消すことができるようになります。で、なぜ html 要素と body 要素の両方を hidden にするのかというと、これは DOCTYPE スイッチによって標準準拠モードになると、表示するブラウザによって適用する要素が異なる(例えば IE7 は html に適用される）ためです。
html, body {
overflow: hidden;
}- swfobject v2.0 + FitFlash + overflow
- swfobject v2.0 + スタイルシート + overflow
- swfobject v1.5 + FitFlash + overflow
- swfobject v1.5 + スタイルシート + overflow
overflow: hidden にしても余白が消えない
overflow を hidden にすることで、IE6, 7, Firefox2 の縦スクロールバーは消えましたが、Opera と Safari3 の余白は依然として消えないまま残っています。
そこで考えたのが、position を absolute から fixed に変更してやるという方法。absolute も fixed も絶対位置に固定するという意味では同じですが、表示方法が少し違います。
Part 1. Let's begin CSS : Chapter 3. "要素の整形" 3.15 要素の配置(3)position プロパティを fixed に指定された要素は，position: absolute; の場合と同様な配置のされ方をするが，配置の基準（収容ブロック）が，ブラウザの画面出力に対してはブラウザの表示領域になる。すなわち，この配置方法では，ボックスは表示領域のスクロールに対しても移動せず，表示領域に対して固定される。ページ出力の場合，要素はすべてのページの指定された位置に出力される。これらは，background-attachment プロパティを fixed に指定した背景画像に似ている。
サンプルをみると分かりますが、今回の場合、表示領域内にちゃんと全画面表示されているがスクロールすると余白が出てくるという状態になっています。そのため、position を fixed にしてやることで、ブラウザの画面出力を表示領域に固定し、余白を表示させないようにしたというわけです。
更に、body 要素の width を 指定してやらないと表示されないようなので、width を 100% にしておきます。
body {
position: fixed;
width: 100%;
}- swfobject v2.0 + FitFlash + overflow + fixed
- swfobject v2.0 + スタイルシート + overflow + fixed
- swfobject v1.5 + FitFlash + overflow + fixed
- swfobject v1.5 + スタイルシート + overflow + fixed
最終的なコード
<div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject.js"></script> <!-- swfobject v2.0 の読み込み -->
<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>
<style type="text/css">
<!--
html, body {
overflow: hidden;
}
body {
position: fixed;
width: 100%;
}
-->
</style><div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject.js"></script> <!-- swfobject v2.0 の読み込み -->
<script type="text/javascript">
// <![CDATA[
swfobject.embedSWF("myContent.swf", "myContent", "100%", "100%", "9.0.0");
// ]]>
</script>
<style type="text/css">
<!--
html, body {
overflow: hidden;
}
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
-->
</style><div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject_1_5.js"></script> <!-- swfobject v1.5 の読み込み -->
<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>
<style type="text/css">
<!--
html, body {
overflow: hidden;
}
body {
position: fixed;
width: 100%;
}
div#myContent {
height: 100%;
}
-->
</style><div id="myContent"> <!-- 代替コンテンツボックス -->
<p>Alternative content</p>
</div>
<script type="text/javascript" src="swfobject_1_5.js"></script> <!-- swfobject v1.5 の読み込み -->
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("myContent.swf", "myContent", "100%", "100%", "9", "#000000");
so.write("myContent");
// ]]>
</script>
<style type="text/css">
<!--
html, body {
overflow: hidden;
}
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div#myContent {
height: 100%;
}
-->
</style>表示テストでわかったこと
FitFlash はbody 内で呼び出さないと動作しない。swfobject はバージョンアップによって head 内に記述できるようになりましたが、FitFlash は body 内でしか呼び出せません。もし併用するなら、javascript を body 内に記述すべきだと思います。そうしないと、script 要素が head と body の2箇所に書かれることになり、煩雑なコードになってしまいますので、注意してください。
まとめ
実験として公開識別子と使用例を分けて表示テストをやったんですが、少しサンプルを作りすぎてしまって疲れました。本当は、swfobject v2.0 のオプション1もテストした方がいいんですけどど、疲れたので今はやめておきます（暇があったらそのうち...）。あと、Mac での表示テストをしていないので、この記事を見かけた人の中で「ココおかしい」っていう所を見つけた人は、コメントで教えてやってください。できるだけ対処いたします。
2008-02-05T00:49:10+09:00 v1.5 のコードが v2.0 になっていた箇所を修正。
