完全なフルフラッシュサイト、つまり画面全体がフラッシュで出来ていて静的な文字情報等が全く無いサイトは、SEOの観点からは好ましくないですが、やはり需要はあると思います。アニメーションやインタラクションのインパクトをフルに前面に押し出したいというコンセプトの場合などです。フルフラッシュサイトのSEOはここではひとまず取り上げないで、どのようにフラッシュを全画面化するかという方法を見てみようと思います。
要約すると、「スタイルの記述」と「フラッシュの座標の調整」という2つがポイントです。
では、まずスタイルの記述から。以下のテキストをstyle.cssという名前のファイルとします。
@charset "utf-8";
body{
margin:0;
background:#FFFFFF;
position:fixed;
width:100%;
height:100%;
overflow:hidden;
}
body要素のスタイルをいくつか指定します。
margin:0;でマージンを無くします。position:fixed;は何のためかというと、これが無いと一部ブラウザでは画面全体が3px程度スクロール可能になってしまうようです。widthとheightを100%にします。そして、overflow:hidden;でスクロールバーを表示させない、という具合です。
次にhtmlにおける記述です。以下をヘッダに記述します。
<script src="./swfobject.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript">
var flashvars = {};
var params = {scale: "noscale"};
var argue = {};
swfobject.embedSWF("./myflash.swf?" + Math.random(), "myContent",
"100%", "100%", "8.0.0", "expressInstall.swf",flashvars,params,argue);
</script>
今回はフラッシュをhtmlに配置する際のデファクトスタンダードであるswfobject(日本語訳http://www.trick7.com/blog/2006/06/15-135235.php)というライブラリを使用することにします。2行目は、先ほど作成したCSSのファイルを使用するための記述です。3行目からはswfobjectを使ったフラッシュの配置方法です。noscaleを指定しているのは、フラッシュの中身を拡大縮小させないためです。これは目的によっては不必要かもしれませんね。ファイル名に付いているMath.random()は、クライアントに保存されているキャッシュからファイルを読み込まないための記述。expressInstallはフラッシュプレーヤーのアップグレードを即席的に行える仕組み(詳細http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html)。そして、必要とするフラッシュプレーヤーのバージョンもここで指定できます。ここでは8.0.0としてやります。フラッシュの大きさは縦横共に100%です。「myContent」についてですが、これはbody要素内に記述するdivタグのidと同じであればよいので、任意の文字列でOKです。そして、以下がそのdivタグの記述です。このdivタグの部分がswfobjectによってフラッシュに置き換えられます。
<div id="myContent">
flash player required.
<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>
さて、ここからはフラッシュのActionScriptを使って、「フラッシュの座標の調整」を行います。何がしたいかというと、画面の左上を常に(0,0)という座標にするための方法です。もちろん、必要ない場合はとばしてもらってもよいのですが、その場合はブラウザのクライアント領域の中央にフラッシュが表示されます（そのような場合が目的な場合もあり得ると思います）。ここでは左上を基点としてフラッシュの大きさが拡大縮小されるようにしましょう。使用している言語はActionScript2.0です。記述する場所はルートのフレームです。
var nWidth:Number = 900;
var nHeight:Number = 600;
var oListener:Object = new Object();
function OListenerOnResize(){
this._x = Math.floor((this.nWidth - Stage.width) * 0.5);
this._y = Math.floor((this.nHeight - Stage.height) * 0.5);
}
var owner:MovieClip = this;
this.oListener.onResize = function(){owner.OListenerOnResize();}
Stage.addListener(this.oListener);
this.OListenerOnResize();
1、2行目の数値は、「ドキュメントのプロパティ」で指定しているデフォルトのフラッシュのサイズです。3行目はウィンドウの大きさが変更されたときに実行されるonResizeハンドラを登録するためのリスナーオブジェクトを作成します。そして4から7行目がonResizeで実行したい処理をOListenerOnResizeという関数に記述してします。その次の2行でリスナーオブジェクトのonResizeに、OListenerOnResizeを実行する関数を記述して、その参照を渡しています。ちょっと冗長的な感じがしますね。でもフラッシュがブラウザに一番初めに表示されるタイミングでOListenerOnResizeを手動で実行して位置を調整する必要があるので、こういう方法にしました。画面が一番初めに表示されるタイミングではonResizeは呼ばれないのです。OListenerOnResizeの中で、ルートのムービークリップの位置を移動させて、画面左上が座標(0,0)になるようにしてやります。ムービーに含まれるパーツに不必要なアンチエイリアスをかけない為に、位置の小数点以下をMath.floorで切り捨てています。下から2行目ではステージにリスナーオブジェクトを登録し、最後の行でOListenerOnResizeを初めに一回だけ手動で実行します。
以上です。スタイル、swfobject、ActionScriptの3つを使っての合わせ技ですね。
