Blog Parts Changerその7：トラックバックピープルの切り替え表示（後編）

2005年6月9日11時1分　一部抜けている部分がありましたので追加しました。

今日は昨日の続きで、トラックバックピープルの切り替え表示を行う手順を解説します。

●5.「get_tbp.js」の書き換え
解凍したファイルの中に、「get_tbp.js」というファイルがあります。
それを開くと、1行目の以下の文があります。

var tbp_js_cgi_path = "http://www.foo.com/bar/get_tbp_js.cgi";

URLを指定している部分（「"」で囲まれた部分）を、「get_tbp_js.cgi」のアップロード先に合わせて変えてください。

●6.ファイルのアップロード
「get_tbp.js」と「xmlhttp.js」の2つのファイルを、Webサーバーにアップロードしてください。

●7.JavaScriptを取り込むタグを追加
トラックバックピープル切り替えを表示するページで、Blog Parts Changerのスクリプトの前に、以下のタグを追加します。
「○○○」の部分は、xmlhttp.jsとget_tbp_jsをアップロードした場所に合わせて変えてください。

<script language="javascript" type="text/javascript" src="http://○○○/xmlhttp.js"></script>
<script language="javascript" type="text/javascript" src="http://○○○/get_tbp.js"></script>

●8.Blog Parts Changerの書き換え
次に、Blog Parts Changerを書き換えます。
「// 1つ目のパーツを表示する処理」等の部分を、以下のようなスクリプトに置き換えます。

parts_html += get_tbpeople("トラックバックピープルのID");

例えば、IDが01234のトラックバックピープルを表示する場合だと、以下のようにします。

parts_html += get_tbpeople("01234");

なお、Blog Parts Changerを始めて導入される方は、以下のエントリーもお読みください。

Blog Parts Changerその1：スクリプトの骨格の設置
 Blog Parts Changerその5：パーツを複数ブロックに分けて表示する

●9.トラックバックピープルを切り替えるためのリンクを作る
次に、「<div id="blog_parts_changer"></div>」の行の後に、トラックバックピープルを切り替えるためのリンクとして、以下のようなものを入れます。

・Blogパーツを1箇所にまとめて表示する場合

<a href="javascript:show_blog_parts(○)">トラックバックピープルの名前</a>

・Blogパーツを複数ブロックに分けて表示する場合

<a href="javascript:show_blog_parts(□, ○)">トラックバックピープルの名前</a>

「○」の部分には、Blog Parts Changerのif文の部分で、それぞれのトラックバックピープルに割り当てた番号を入れます。
また、「□」の部分には、表示先のブロックの番号を入れます。

●10.例
Blogパーツを2つのブロックに分けて表示し、1つ目にメロとケロール、2つ目にトラックバックピープルを表示するものとします。
また、表示するトラックバックピープルのIDは、01384（Movable Type）と00093（Blogカスタマイズ）の2つだとします。
この場合のBlog Parts Changerのスクリプトは、以下のようになります。

function show_blog_parts(block_no, parts_no)
{
    parts_html = "";
    if (block_no == 0) {
        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=ペットのID' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=ペットのID' 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) {
            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 += get_tbpeople("01234");
        }
        else if (parts_no == 1) {
             parts_html += get_tbpeople("02345");
        }
    }
    document.getElementById('blog_parts_changer_' + block_no).innerHTML = parts_html;
}

また、これらのパーツを切り替えるためのリンクは以下のようになります。

<a href="javascript:show_blog_parts(0, 0)">メロ</a><br />
<a href="javascript:show_blog_parts(0, 1)">ケロール</a><br />
<a href="javascript:show_blog_parts(1, 0)">Movable Type</a><br />
<a href="javascript:show_blog_parts(1, 1)">Blogカスタマイズ</a><br />

●11.制限事項
こちらでテストした限りでは、以下のブラウザで動作を確認しています。

・Windows
Internet Explorer 6、Firefox、Netscape Navigator 7.1、Opera 8.0
・Mac
Firefox、Netscape Navigator 7.1

なお、MacではSafari／Internet Explorer／Operaでは、正しく動作しませんでした。

お知らせ

Blog Parts Changerその7：トラックバックピープルの切り替え表示（後編）

おすすめ