PR

フローティング型のブログパーツを作ろう

2009年2月20日(金)
山下 美緒

フローティング型ブログパーツのファイル構成について

 それでは、フローティング型のブログパーツを制作する際に準備するファイルをみてみましょう。

 今回のサンプルで準備するファイルやソースは下記のような構成になります。

(a)サイドバー表示用の画像ファイル(sidebar.jpg)
(b)フローティング型のブログパーツ本体のFlashファイル一式(clock.fla、外部asファイル)
(c)ブログパーツを表示するJavaScriptファイル(kuru2_sample_base.js)
(d)フローティング用のブログパーツを表示するJavaScript(kuru2_sample_float.js)
(e)レイヤーの生成やサイズ調整を行うJavaScriptライブラリ(js_lib/SWFLayer.js)
(f)ブログページへの貼(は)り付け用HTMLタグ(blog.html)

 今回、サイドバーは画像バナーにしていますが、Flashのブログパーツを設置することも可能です。

 第1回のシンプルなブログパーツに比べて、フローティングタイプの場合は、フローティング用のブログパーツとサイドバー表示用のブログパーツの両方を準備する必要がありますので、準備するファイルの数なども多くなります。

画面全体を使ってFlashを表示させる仕組み

 ブログパーツのflashを、ブログページ全体を覆う形で表示させるためには、まず、フローティング用のswfファイルを表示するブロック要素を生成し、その生成したブロックをウィンドウサイズに対して100%の大きさにし、一番上のレイヤーに配置します。

 また、ユーザーがウィンドウサイズを変更したときや、スクロールしたときには、その都度、位置やサイズを再設定する処理を実行します。

 それでは、実際に今回のサンプルファイルを使い、イベントが発生した時の具体的な仕組みを確認してみましょう。

 最初にページを読み込んだときの流れは次のようになります。

・ブログページ上へ、サイドバー用のブログパーツ(clock.jpg)を表示
・フローティングのFlashを表示するブロック(Kuru2_float)を動的に生成
・フローティング用のFlash(clock.swf)を読み込む
・ブログパーツを表示する位置を、絶対配置(position:absolute)で左上に指定
・ウィンドウサイズに対して幅:100%、高さ:100%のサイズに変更
・レイヤーの重なり順(z-index)を指定し、HTML要素よりも上のレイヤーに設定

 この段階では、このフローティングのFlashを配置したレイヤーは、非表示にしておきます(visibilityをfalseにします)。

 サイドバーのバナーをクリックした時は、showKuru2Sampleを実行し、フローティングFlashのブロックを表示します(visibilityをtrueにします)。

 フローティングFlash内の「閉じる」ボタンをクリックした時は、hideKuru2Sampleを実行し、フローティングFlashのブロックを非表示にします(FlashからJavaScriptのhideKuru2Sampleを呼び出しています)。

 ウィンドウサイズが変わった時は、フローティングレイヤー(Kuru2_float)のサイズを再度ウィンドウサイズに設定し、表示位置も再設定します。

 ウィンドウがスクロールされたときは、フローティングレイヤーの表示位置を修正します(常に、表示中の領域に対して左上基準で配置されるようにしています)。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

フローティング型のブログパーツを作ろう | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。