Blog Parts Changerその4：さすらいペットを表示する

「さすらいペット」も多くのBlogで見かけますので、今回はさすらいペットをBlog Parts Changerで表示できるようにする手順を紹介します。

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

Blog Parts Changerその1：スクリプトの骨格の設置
 Blog Parts Changerその2：メロを表示する(3種切り替え表示も可能)

●1.元々のJavaScriptのアドレスをコピーする
さすらいペットのサイトにログインして、「さすらいペットの遊び方」のページを開いてください。
すると、「ペットの小窓を取り付ける編」のところに、「○○さん専用のHTMLタグはこちら」として、タグが表示されます。
そのタグの中から、「http://f○○○.sasurai.com/f○○○/file/main/□□□.js」の部分をコピーします。

●2.元々のJavaScriptをダウンロードするためのHTMLファイルを作る
次に、元々のJavaScriptをダウンロードするためのHTMLファイルを作ります。
ファイルの内容は以下のようになります。「http://f○○○.sasurai.com/f○○○/file/main/□□□.js」の部分には、1.の手順でコピーしたものを貼り付けます。
ファイルができたら、「download.html」というファイル名をつけて保存します。Windowsパソコンの方なら、デスクトップに保存すると良いでしょう。

<html>
<head></head>
<body>
<a href="http://f○○○.sasurai.com/f○○○/file/main/□□□.js">JavaScriptのダウンロード</a>
</body>
</html>

●3.JavaScriptをダウンロードする
2.で作ったファイルを開きます。ファイルのアイコンをダブルクリックすれば、Internet Explorer等のWebブラウザソフトが起動して、ファイルが開くはずです。
ファイルを開くと、「JavaScriptのダウンロード」のリンクが表示されます。
Internet Explorerの場合、そのリンクを右クリックして、メニューの中の「対象をファイルに保存」を選びます。
そして、画面の指示に従って、JavaScriptをファイルに保存します。

●4.JavaScriptを編集する
3.で保存したファイルを開くと、さすらいペットを表示するためのJavaScriptが表示されます。
このファイルに対して、以下の置換を行います。

置換元	置換先
document.write("	parts_html += "
\n");	\n";

●5.Blog Parts Changerの編集と設置
次に、4.で作ったJavaScriptを、Blog Parts Changerの「// 1つ目のパーツを表示する処理」等と置き換えます。
この後、Blog Parts Changerのファイルを保存してWebサーバーにアップロードします。
また、「<a href="javascript:show_parts(○)">さすらいペット</a>」のようなリンクも入れて、さすらいペットを切り替え表示できるようにします。

●6.例
例として、メロとさすらいペットを切り替える場合のBlog Parts ChangerのJavaScriptをあげておきます（ただし、ID等は置換してあります）。

<script language="javascript" type="text/javascript" charset="UTF-8">
<!--
function show_blog_parts(parts_no)
{
    parts_html = "";
    if (parts_no == -1) {
        parts_html = "<p>ただいま工事中です。</p>\n";
    }
    else if (parts_no == 0) {
        parts_html += "<a href=\"http://meropar.jp/\" target=\"blank\"><img src=\"http://meropar.jp/img/logo_blog_1.gif\" border=\"0\" onmouseover=\"this.src='http://meropar.jp/img/logo_blog_2.gif'\" onmouseout=\"this.src='http://meropar.jp/img/logo_blog_1.gif'\" alt=\"ブログペットのメロメロパーク\" /></a>";
        parts_html += "<br /><object codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='140' height='257' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://cache.meropar.jp/swf/blog/main.swf' /><param name='quality' value='high' /><param name='bgcolor' value='ffffff' /><param name='FlashVars' value='petId=○○○' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=○○○' quality='high' bgcolor='#ffffff' width='140' height='257' name='main' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";
    }
    else if (parts_no == 1) {
        var ncut = Math.round((new Date()).getTime() / 1000);
        var furl = "http://f□□□.sasurai.com/f□□□/file/main.swf?uid=△△△&fbase=http%3A%2F%2Ff□□□.sasurai.com%2Ff□□□"; //&ncut="+ncut;
        var iurl = "http://f□□□.sasurai.com/f□□□/file/counter.php?uid=△△△&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='150' height='200'>\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='150' height='200'>\n";
        parts_html += "</EMBED>\n";
        parts_html += "</OBJECT>\n";
        parts_html += "<IMG SRC='"+iurl+"' width=1 height=1 alt=''>\n";
    }
    document.getElementById('blog_parts_changer').innerHTML = parts_html;
}
//-->
</script>

●7.おまけ
さすらいペットは横150ピクセル×縦200ピクセルで表示されますので、サイドバーが細いとはみ出すこともあります。
その場合、さすらいペットを表示する部分で、「width='150' height='200'」の部分を、縦横の比率を変えないで小さくすることで、縮小して表示することができます。
例えば、「width='135' height='180'」とすると、縦横ともに10％ずつ小さくなります。

お知らせ

Blog Parts Changerその4：さすらいペットを表示する

おすすめ