-->

2011-10-05

Amazonの商品リンクのテスト

記事が長い場合のサイドバーの隙間を埋めるテストです。
試しにこのサイトで使っています。
IE6の場合画像とタイトルの間に他よりも隙間が入ります。
IE5.5の場合動作しません。
動作がおかしい場合があるので、もし利用する場合は自己責任でご利用ください。

ヘッダーに追加する。
$ diff -w -u template-6143936844695013686.xml.2011-10-05.8 template-6143936844695013686.xml.2011-10-05.9
--- template-6143936844695013686.xml.2011-10-05.8       2011-10-05 19:34:30.900375000 +0900
+++ template-6143936844695013686.xml.2011-10-05.9       2011-10-05 19:35:49.322250000 +0900
@@ -1219,6 +1219,8 @@

 ]]></b:skin>

+<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
+
 <base target='_top'/>

 <script type='text/javascript'>

サイドバーに追加する。
<div id="amazontest002" style="border-width: 0; margin: 0; padding: 0;width: 182px;">
<script type="text/javascript">
//<![CDATA[<!--
try{(function(){
    var
    // 本のリスト。
    bookList = [
        // 技術書
        ["4777514897", "jQueryプラグインブック―「軽量」「高機能」 JavaScriptライブラリの導入と活用! (I・O BOOKS)"],
        ["4798028622", "Linuxネットワークプログラミングバイブル"],
        ["4798123358", "PostgreSQL徹底入門 第3版"],
        ["4048684116", "Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)"],
        ["4774142948", "エキスパートのためのMySQL[運用+管理]トラブルシューティングガイド"],
        ["4774144371", "パーフェクトPHP (PERFECT SERIES 3)"],
        ["4797361190", "体系的に学ぶ 安全なWebアプリケーションの作り方　脆弱性が生まれる原理と対策の実践"],
        // マンガ
        ["4592144368", "ベルセルク 36 (ジェッツコミックス)"],
        ["4434152637", "十字道 1 (アルファポリスCOMICS)"],
        ["4903421384", "異邦人たち (1) (コミホリコミック)"],
        ["4047273228", "デビルサマナー葛葉ライドウ対コドクノマレビト(4) (ファミ通クリアコミックス)"],
        ["4896373669", "蒼い世界の中心で 完全版6 (マイクロマガジン・コミックス) (マイクロマガジン☆コミックス)"],
        // パソコン
        ["B0055ADPI4", "acer Aspire One 722シリーズ ブルー AO722-N52C/B"],
        ["B0055ADQ0Q", "acer Aspire One 722シリーズ ブラック AO722-N52C/K"],
        // ゲーム
        ["B002B9XB0E", "BUFFALO USBゲームパッド 8ボタン スーパーファミコン風 グレー BSGP801GY"],
        ""];
    // デバッグ表示ON/OFF。
    var debugFlag = false;
    if (debugFlag)
    {
        // </body>と</html>の間。
        $("body").append("<div id='debug'></div>");
    }
    var
    // サイドバーの方が長いが1件目は表示する。
    firstDisplay = true,
    // メインコンテンツのID。
    mainId = "#main",
    // サイドバーのID。
    sidebarId = "#sidebar",
    // サイドバーの中の本を出す部分のID。
    sidebarInnerContentsId = "#amazontest002",
    // 1件目を処理するまでのミリ秒。
    sleepNumFirst = 500,
    // 2件目以降を処理する間隔のミリ秒。
    sleepNum = 2500,
    // だんだん遅くする。
    delayTimeNum = 100,
    // 本を追加＝＞サイドバーの方が長くなる。場合があるので1回追加するより少し多い値。ピクセル。
    sidebarHeightMargin = 360,
    // 本の間の隙間のタグのスタイル。
    separationStyle = "<div style='border-width: 0; margin: 0; height: 1.2em; clear: both;'></div>",
    // 本とタイトルの間。テキストがある場合。
    separationStyleText = "<div style='border-width: 0; margin: 0; height: 0.2em; clear: both;'></div>",
    //separationStyleText = "",
    // Aタグのスタイル。
    aStyle = "border-width: 0; margin: 0; padding: 0; color: #676767; text-decoration: none; font-size: 95%; line-height: 1.2em; font-family: verdana,arial,sans-serif; letter-spacing: 0; word-spacing: 0; word-wrap: break-word; display: block; float: left;",
    // Aタグのスタイル。テキストがある場合。
    aStyleText = aStyle,
    // IMGタグのスタイル。
    imgStyle = "border: 1px solid #676767; margin: 0; padding: 0; float: left;",
    // イメージとテキストを包むDIVタグのスタイル。
    imgAndTextIncludeStyle = "border-width: 0; margin: 0;",
    // 一緒に表示する小さい画像にスタイルを追加。
    dummyImageStyle = "float: left;",
    // 一緒に表示する小さい画像にスタイルを追加。テキストがある場合。
    dummyImageStyleText = "float: left;",
    // Aタグにターゲットを追加。
    aTarget = "_blank",
    // Aタグにターゲットを追加。テキストがある場合。
    aTargetText = aTarget,
    // 表示順をシャッフルするか？
    shuffleFlag = true,
    // 本の画像サイズ。(_SX180_ => 横幅180ピクセル)
    imageSize = "_SX180_",
    // アソシエイトID。
    associateId = "xxx-22",
    // HTMLタグのテンプレート。
    htmlTemplate = '<a target="' + aTarget + '" style="' + aStyle + '" href="http://www.amazon.co.jp/gp/product/__productId__/ref=as_li_tf_il?ie=UTF8&tag=__associateID__&linkCode=as2&camp=247&creative=1211&creativeASIN=__productId__"><img style="' + imgStyle + '" border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&Format=__imageSize__&ASIN=__productId__&MarketPlace=JP&ID=AsinImage&WS=1&tag=__associateID__&ServiceVersion=20070822" ></a><img src="http://www.assoc-amazon.jp/e/ir?t=__associateID__&l=as2&o=9&a=__productId__" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;' + dummyImageStyle + '" />',
    // HTMLタグのテンプレート。テキストがある場合。
    htmlTemplateText = '<a target="' + aTargetText + '" style="' + aStyleText + '" href="http://www.amazon.co.jp/gp/product/__productId__/ref=as_li_tf_tl?ie=UTF8&tag=__associateID__&linkCode=as2&camp=247&creative=1211&creativeASIN=__productId__">__htmlTemplateText__</a><img src="http://www.assoc-amazon.jp/e/ir?t=__associateID__&l=as2&o=9&a=__productId__" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;' + dummyImageStyleText + '" />';

    (function(){
        if (debugFlag) {$("#debug").append("start!!<br />");}
        $(bookList).each(function(i){
            if (bookList[i] == "")
            {
                bookList.splice(i, 1);
            }
        });
        var listTmp = bookList,
        listKey = 0,
        firstFlag = true,
        addBook = function(){
            var ret = false, buf;
            if (listTmp.length > 0)
            {
                if (firstFlag !== false)
                {
                    firstFlag = false;
                }
                else
                {
                    $(sidebarInnerContentsId).append(separationStyle);
                }
                if (shuffleFlag)
                {
                    listKey = Math.floor(Math.random() * 1000000) % listTmp.length;
                }
                if (debugFlag) {$("#debug").append("listKey = " + listKey + "<br />");}
                if (debugFlag) {$("#debug").append("listTmp.length = " + listTmp.length + "<br />");}
                if (debugFlag) {$("#debug").append("productId = " + listTmp[listKey][0] + "<br />");}
                if (debugFlag) {$("#debug").append("title = " + listTmp[listKey][1] + "<br />");}
                buf = htmlTemplate
                    .replace(/__productId__/g, listTmp[listKey][0])
                    .replace(/__imageSize__/g, imageSize)
                    .replace(/__associateID__/g, associateId);
                if (listTmp[listKey][1] != "")
                {
                    buf += separationStyleText + htmlTemplateText
                        .replace(/__productId__/g, listTmp[listKey][0])
                        .replace(/__htmlTemplateText__/g, listTmp[listKey][1])
                        .replace(/__associateID__/g, associateId);
                }
                $(sidebarInnerContentsId).append("<div style='" + imgAndTextIncludeStyle + "'>" + buf + "</div>");
                listTmp.splice(listKey, 1);
                ret = true;
            }
            return ret;
        },
        debugTime = new Date().getTime(),
        debugLoopNum = 0,
        sleepNumTmp = sleepNum,
        timeoutId = -1,
        scheduler = function(){
            var mainHeight = $(mainId).height() + $(mainId).offset().top,
            sidebarHeight = $(sidebarId).height() + $(sidebarId).offset().top + sidebarHeightMargin,
            ret = false, tmpTime = new Date().getTime();
            if (debugFlag) {$("#debug").append("<hr />");}
            if (debugFlag) {$("#debug").append("num = " + (++debugLoopNum) + "<br />");}
            if (debugFlag) {$("#debug").append("time = " + ((tmpTime - debugTime) / 1000) + "<br />");}
            debugTime = tmpTime;
            if (debugFlag) {$("#debug").append("mainHeight = " + mainHeight + "<br />");}
            if (debugFlag) {$("#debug").append("sidebarHeight = " + (sidebarHeight - sidebarHeightMargin) + "<br />");}
            if (debugFlag) {$("#debug").append("mainHeight - sidebarHeight = " + (mainHeight - (sidebarHeight - sidebarHeightMargin)) + "<br />");}
            if ((firstFlag && firstDisplay) || mainHeight > sidebarHeight)
            {
                ret = addBook();
            }
            if (ret && mainHeight > sidebarHeight)
            {
                timeoutId = setTimeout(scheduler, sleepNumTmp);
                sleepNumTmp += delayTimeNum;
            }
            else
            {
                if (debugFlag) {$("#debug").append("End!!<br />");}
                clearTimeout(timeoutId);
            }
        };
        timeoutId = setTimeout(scheduler, sleepNumFirst);
    })();
})();}catch(e){window.document.write("<"+"pre>Error: " + e + "<"+"/pre>");}
//-->]]>
</script>
</div>
<br clear="all" style="clear: both; font-size: 1px; line-height: 1px; height: 1px;" />
投稿者
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)