全画面ジャック型のblogpartsを1ファイルで作成する方法

手違いにより社員紹介ページから消滅中のagoです。

今日は全画面ジャック型のblogpartsを一つのswfのみで実装する方法を紹介したいと思います。

まず、一般的な全画面ジャック型blogpartsの場合、最初に表示されているsidebar swf(記事内に貼り付けるタイプであれば記事内のswf)と全画面ジャック用swfが分かれており、何らかのイベント(sidebar swf内のボタンクリック等)の発生後全画面swfが読み込まれる形が一般的だと思います。

//sidebar swfの読み込み
document.write((new SWFObject('mail.swf', 'blogparts_external_main_id', '160', '340', '9', '#FFFFFF')).getSWFHTML());

//全画面ジャック実行
blogparts_object.jack_swf = function () {
    $(document.body).append((new SWFObject('jack.swf', 'blogparts_external_jack_id', '100%', '100%', '9', '#FFFFFF')).getSWFHTML());

    var scroll_top = Math.max((document.body.scrollTop || 0), (document.documentElement.scrollTop || 0), 0);
    //全画面への展開
    $('#blogparts_external_jack_id').css({
        'top' : scroll_top,
        'left' : 0
    });
};

・一般的なblog parts実装例

ただ、この形式の場合sidebar swfと全画面swfで一体的な動作を行うのが難しく、たとえばsidebar swf内で映像を流しつつ、その映像がそのままsidebar swfの領域外に流れ出すような表現は実装が困難です。

(sidebar swfと全画面swfを同期させ、sidebar swfの上に全画面swfがうまく覆うように表示させる事も可能ですが、映像等を切れ目無く表示させることは非常に難しいと思います)

実装が困難な理由として、普通のimg tagであれば一時的にstyle属性をposition:absoluteに設定し、位置を調整するれば問題ないのですが、object tag(or embed tag)はそのtagと影響するすべての親tagのpositionを変更するとswfの内容がreloadされる(サーバへswfを再度読みに行く)という特殊な事情があります。

(2008/09/08追記 ちなみに、styleのoverflowを変更しても同じようにswfがreloadします)

この問題を解決するには、最初のsidebar swf表示時にはswfのサイズと同じサイズの空divを出力し、sidebar swfはposition:absoluteのまま先に出力したdivの真上に出力するこでpositionを変更しないまま位置を調整するという方法があります。

//sidebar swfの読み込み
document.write('<div id="blogparts_external_main_wrap_id" width="160" height="340"></div>');
$(document.body).prepend((new SWFObject('mail.swf', 'blogparts_external_main_id', '160', '340', '9', '#FFFFFF')).getSWFHTML());
var offset_fix = function () {
    $('blogparts_external_main_id').css($('#blogparts_external_main_wrap_id').offset());
};
offset_fix();
//window resizeに追従
$(window).resize(offset_fix);

//全画面ジャック実行
blogparts_object.jack_swf = function () {
    var scroll_top = Math.max((document.body.scrollTop || 0), (document.documentElement.scrollTop || 0), 0);
    //全画面への展開
    $('blogparts_external_main_id').css({
        'width' : '100%',
        'height' : '100%',
        'top' : scroll_top,
        'left' : 0
    });
};

・単一swf blogparts実装例

この方法であればswfのリロードが発生しないため、貼り付け後のswfの位置調整を自由に行うことができます。 (もちろん、その分swfの位置調整が難しくなる問題はありますが)

映像を使うブログパーツを作成する場合使える手法ではないかと思います。

カヤックではJSとflashの連携に詳しい方や JSでの大規模サイトの構築に興味がある方を募集しています!