Blog Parts Changerその8：マクパペットを表示する(複数マクパペットの切り替え表示も可能)

「マクパペット」は、ホームページに表示できる「着せ替え人形」のようなものです。
多くのBlogで見かけますので、今回はマクパペットをBlog Parts Changerで表示できるようにする手順を紹介します。
他のBlogパーツと切り替えて表示できるだけでなく、複数のマクパペットを切り替えて表示することもできます。
また、シネバネさんの「maku dresser」を使ったものにも対応しています。
なお、マクパペットの改良版として「話すマクパペット」や「歩くマクパペット」もありますが、そちらには対応していません。

●0.導入準備
Blog Parts Changerを初めて導入される方は、まず以下のエントリーをお読みになって、導入の流れをつかんでください。

Blog Parts Changerその1：スクリプトの骨格の設置
 Blog Parts Changerその2：メロを表示する(3種切り替え表示も可能)
Blog Parts Changerその5：パーツを複数ブロックに分けて表示する

●1.マクパペット表示プログラムの追加
Blog Parts Changer本体（function show_blog_parts() { ・・・ }の部分）と、その前の「<!--」の前に、以下のスクリプトを追加してください。

function show_maku_puppet(param)
{
    html = '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"';
    html += ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"';
    html += ' ID="maku" WIDTH="82" HEIGHT="94" ALIGN="">';
    html += ' <PARAM NAME=movie VALUE="http://maku.jp/maku.swf?' + param + '"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src="http://maku.jp/maku.swf?' + param + '" quality=high bgcolor=#ffffff  WIDTH="82" HEIGHT="94" swLiveConnect=true ID="maku" NAME="maku" ALIGN=""';
    html += ' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><' + '/EMBED>';
    html += '<' + '/OBJECT>';
    return html;
}

●2.マクパペットのタグの一部コピーと削除
すでにマクパペットを表示している場合、そのためのタグとして、HTMLに以下のような部分を追加していると思います。
このHTMLの中で、「p=・・・」から、「"」の前までの間の部分（赤色になっている部分）をコピーして、メモ帳等に貼り付けておきます。
その後、このタグ全体（<script・・・>～</script>）をHTMLから削除します。

<script type="text/javascript" src="http://maku.jp/maku.php?p=・・・"></script>

●3.Blog Parts Changer本体の書き換え
Blog Parts Changerの「// 1つ目のパーツを表示する処理」等の部分を、以下に置き換えます。
「2.の手順でコピーした部分」は、先程の2.の手順でコピーしたもの（「p=・・・」の部分）に置き換えます。

parts_html += show_maku_puppet("2.の手順でコピーした部分");

●4.Blog Parts Changerの設置
Blog Parts Changer本体をサーバーにアップロードし、HTMLにパーツ切り替え用のaタグ等を入れます。

●5.複数のマクパペットを切り替え表示する
上記の3.の手順を複数回行うことで、複数のマクパペットを切り替えて表示することができます。
具体的な例は以下を参照してください。

●6.例
2つのブロックにBlogパーツを表示し、1つ目のブロックにさすらいペットとケロール、2つ目のブロックには2種類のマクパペットを表示する場合、スクリプトは以下のようになります。
赤い文字の部分は、ご自分の環境に合わせて書き換えることを意味します。

function show_maku_puppet(param)
{
    html = '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"';
    html += ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"';
    html += ' ID="maku" WIDTH="82" HEIGHT="94" ALIGN="">';
    html += ' <PARAM NAME=movie VALUE="http://maku.jp/maku.swf?' + param + '"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src="http://maku.jp/maku.swf?' + param + '" quality=high bgcolor=#ffffff  WIDTH="82" HEIGHT="94" swLiveConnect=true ID="maku" NAME="maku" ALIGN=""';
    html += ' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><' + '/EMBED>';
    html += '<' + '/OBJECT>';
    return html;
}

function show_blog_parts(block_no, parts_no)
{
    parts_html = "";
    if (block_no == 0) {
        if (parts_no == -1) {
            parts_html += "<p>ただいま工事中です。</p>";
        }
        else if (parts_no == 0) {
            var ncut = Math.round((new Date()).getTime() / 1000);
            var furl = "http://○○○.sasurai.com/○○○/file/main.swf?uid=あなたのID&fbase=http%3A%2F%2F○○○.sasurai.com%2F○○○"; //&ncut="+ncut;
            var iurl = "http://○○○.sasurai.com/○○○/file/counter.php?uid=hjfuji&ncut="+ncut;
            parts_html += "<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' \n";
            parts_html += "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' \n";
            parts_html += " width='135' height='180'>\n";
            parts_html += "<PARAM NAME=movie VALUE='"+furl+"'>\n";
            parts_html += "<PARAM NAME=loop VALUE=true>\n";
            parts_html += "<PARAM NAME=quality VALUE=high>\n";
            parts_html += "<PARAM NAME=bgcolor VALUE=#FFFFFF>\n";
            parts_html += "<EMBED src='"+furl+"' loop=true quality=high bgcolor=#FFFFFF TYPE='application/x-shockwave-flash' \n";
            parts_html += " PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer' width='135' height='180'>\n";
            parts_html += "</EMBED>\n";
            parts_html += "</OBJECT>\n";
            parts_html += "<div style='display : none;'><IMG SRC='"+iurl+"' width=1 height=1 alt=''></div>\n";
        }
        else if (parts_no == 1) {
            parts_html += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="127" height="149">';
            parts_html += '<param name="movie" value="http://ticker.pingpon.net/ticker.swf?cat=ytopics&ref=' + document.referrer + '">';
            parts_html += '<param name="quality" value="high">';
            parts_html += '<param name="LOOP" value="false">';
            parts_html += '<embed src="http://ticker.pingpon.net/ticker.swf?cat=ytopics&ref=' + document.referrer + '" width="127" height="149" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';
            parts_html += '</object>';
        }
    }
    else if (block_no == 1) 
        else if (parts_no == 0) {
            parts_html += show_maku_puppet("1つ目のマクパペットのp=・・・の部分");
        }
        else if (parts_no == 1) {
            parts_html += show_maku_puppet("2つ目のマクパペットのp=・・・の部分");
        }
    }
    document.getElementById('blog_parts_changer_' + block_no).innerHTML = parts_html;
}

お知らせ

Blog Parts Changerその8：マクパペットを表示する(複数マクパペットの切り替え表示も可能)

おすすめ