あしたから本気出す - 工作検索に引っかかるフルフラッシュサイトの作り方

9月16日
検索に引っかかるフルフラッシュサイトの作り方

フルフラッシュとHTMLテキストを融合させる技術を紹介します。フルフラッシュなのに検索にザクザクとインデックス化される、そんなページのデザイン手法です。SEOを犠牲にすることなく、ページ全体を自由に使ったインパクトのある表現を目指します。

デモページはこちら

やることは単純です。フラッシュを配置したレイヤーを全画面ぴったりの大きさにフィットさせればよいのです。ただ、各ブラウザに対応するための振り分けが必要で、ブラウザ独特のクセのようなものがあります。レイヤーの大きさを変更するところは特に重点的に見ていきましょう。大部分はjavascriptでの記述になりますが、まずはHTMLのソースから見ていきましょう。

javascriptを外部ファイルとしてHTMLに読み込みます(スクリプトの中身は後述)。

1:
2:
3:
4:
5:

ウィンドウの大きさがユーザーによって変更された場合に関数myOnResizeを実行させ、flashを配置するレイヤーを画面ぴったりの大きさに変形させるなどします。この部分は外部ファイルのjavascriptに記述しても構わないのですが、HTMLに含めた方がプログラムの大きな流れがひと目で分かります。このコードをHTMLのヘッダに追加します。

1:
2:
3:
4:

<body onload='myOnLoad()'>
<div id='idFlashLayer' style="position:absolute; top:0;left:0;">
<SCRIPT type="text/javascript">putFlash();</SCRIPT>
</div>

1行目：ページが読み込まれるタイミングで関数myOnLoadを実行。ブラウザの判定などをします。
2行目：フラッシュを貼り付けるためのレイヤーを作成。レイヤーが全画面になるように、positionをabsoluteに、位置を画面左上にします。IDの命名は任意で、ここではidFlashLayerとします。
3行目：flashを貼り付けます。関数putFlashはflashを配置するための処理をまとめてあり、これも外部ファイルにまとめてあります。

以下が外部ファイルとして読み込んでいるjavascriptの全ソースコードです。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:

78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:

1行目：ウィンドウの大きさが変更されても、常に全画面にflashが表示されるようにするには、flashが配置されているレイヤーを全画面に変形させる必要があります。ある程度の時間差（setInterval使用）をつけて多段階で変形させる必要があります。理由は「そうすると出来るから」としか言えないんです。理屈では理解できない奇妙な仕様、つまりブラウザの癖があります。 nParamInterval はsetIntervalを呼ぶときのパラメータ（単位はミリ秒）で、17行目・50行目で使用します。
2行目：HTMLで指定しておいたレイヤーのID。
4･5行目：時間差の処理（インターバル）の設定・解除に必要な変数。
6行目：ブラウザの種類を格納するための変数。以上5つの変数は、ファイルのどこからでもアクセスできるグローバル変数にしてあります。
8-11行目：HTMLが読み込まれたときに実行されます。ブラウザを判定し、レイヤーを変形させます。各関数の記述は後述。
13行目：レイヤーを変形させる関数。myOnLoadから呼んでいる他に、ウィンドウサイズが変更される際にも直接呼ばれます。
14行目：IDを指定してflashを配置したレイヤーの参照をobjLayerに格納して、
15-16行目：幅と高さをウィンドウのクライアント領域の大きさに変更します。
17行目：実はこれで完了ではなくて、画面に収まっていないスクロール領域がある場合の処理が必要なのです。15-16行目の処理が完了するのを待つ必要があるため、setIntervalで時間差をつけます。ｎParamInterval(ミリ秒)経過したあとにmyIntervalFunc0（後述）を呼びます。
20-28行目：userAgentを解析してブラウザの種類を判定します。ここでは各ブラウザのバージョン等は考慮していません。厳密に場合分けする必要がある場合はこの部分を変更してください。
30行目：レイヤーがクライアント領域の大きさに変形する処理が完了したタイミングで実行されます。17行目で指定したsetIntervalによって呼び出されます。
31･32行目：clearIntervalしないと繰り返し呼び出されてしまいます。解除します。
33･34行目：クライアント領域に納まりきらないスクロール領域がある場合、その大きさを格納します。
35行目：Firefoxの場合、
36行目：どんな場合もスクロール領域に変形すればOK。
37行目：Safari、Chromeの場合は、
38･39行目：スクロール領域の取得にbodyを使用して、
40行目：
41･42行目：クライアント領域と
43-46行目：比較し、大きいほうを採用して
47行目：レイヤーを変形させます。
48行目：IE、Operaの場合はちょっとややこしく、
49行目：ひとまず適当な大きさに変形した後で
50行目：さらに時間差で処理してやらねばなりません（なぜと聞かないで下さい。僕にも分かりません）。その処理は、
54行目：ここから60行目まで。
55･56行目：まずはclearInterval（31行目と同様）。
57･58行目：スクロール領域を取得して
59行目：レイヤーを変形します。
62行目：そしてこれがレイヤー変形の関数。
63行目：
64･65行目：数値に単位をつけるのをお忘れなく。
68-103行目：ここからはflashを配置するための関数。大きさは縦横共に100%、ファイル名は71行目で指定しています。必要に応じて他のパラメータは変更させてください。

いかがでしたか。setIntervalを使用して多段階でサイズを変更せねばならないのは、ちょっと独特ですね。

皆さまに読んでいただけるからこそ今日も記事が書けます。
ご参考になれば幸いです。m(_　_)m

ダウンロード
サンプルファイル一式はこちら