[観] 右クリックで「A8.NET経由楽天市場・画像付き」改定版

« 右クリックで「A8.NET経由楽天市場・画像付き」 | トップページ | 右クリックで「A8.NET経由楽天市場・画像付き」楽天トラベル対応版 »

2004.09.20

右クリックで「A8.NET経由楽天市場・画像付き」改定版

注意: この記事で紹介しているスクリプトを使用するときは、必ずご自分のアフィリエイトID(a8mat番号)に書き換えてから使ってください。そのまま使うのはやめてください。よろしくお願いします。 (2008年4月28日追記)

ROCAさんのコメントをヒントに改定版を作ってみました。

ただし、楽天の場合、画像と引用したいテキストを同時にマウスで選択すると、目的の画像以外に、アクセス解析用の1px×1pxの画像や表示位置調整用の透明なgif画像など、目的の画像以外の(目には見えない)画像も含まれてしまう可能性があるため、どれが本当に必要な画像なのか、見極める手段が必要になります。
いろいろ悩んだ挙句、結局、アドホックな方法で対応してしまいました。ってことで、楽天以外には使えない、汎用性に乏しい物になってしまいました。
汎用的なのを作るのは、難しいですね。Amazon Web Services のような仕組みを、他のアフィリエイトでも用意して欲しいです。

この改訂版を使っても、期待している画像とは違う画像を拾ってしまう可能性があります。万一、期待していない画像を拾ってしまった場合は、生成された html ソースを手で修正してください。また、余分な <br /> は、適宜削除してください。

それでは、ソース、行きます。

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC_JP">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<SCRIPT language="JavaScript" type="text/javascript">
// 右クリックで「A8.NET経由で楽天のアフィリエイトのリンク」を作成する
// Copyleft 2004 by H.Tsujimura (tsupo@na.rim.or.jp)
// Ver 1.0  19 Sep 2004  最初の公開バージョン
// Ver 1.1  20 Sep 2004  改訂版
// 注意: A8.NET経由の場合、楽天本体、楽天ブックス、楽天トラベル(旅の窓口)はそれぞれ別途、契約をする必要があります。
//       このスクリプトがサポートするのは、楽天本体(楽天市場)のアフィリエイトリンクに限ります。
//       A8.NET経由で楽天ブックスにアフィリエイトリンクを貼りたい場合は、
//         “右クリックで「A8.NET経由で楽天ブックスのアフィリエイトのリンク」を作成する”
//             (http://watcher.moe-nifty.com/memo/2004/09/a8net.html)
//       スクリプトを使ってください。楽天トラベル用のスクリプトは、まだ作成していません。

function translateString(str) {
    result = "";
    len    = str.length;
    for ( i = 0; i < len; i++ ) {
        if ( str.charAt(i) == '?' )
	    result += "%3F";
        else if ( str.charAt(i) == '>' )
	    result += "%3E";
        else if ( str.charAt(i) == '=' )
	    result += "%3D";
        else if ( str.charAt(i) == '<' )
	    result += "%3C";
        else if ( str.charAt(i) == ':' )
	    result += "%3A";
        else if ( str.charAt(i) == '/' )
	    result += "%2F";
        else if ( str.charAt(i) == '&' )
	    result += "%26";
        else if ( str.charAt(i) == '%' )
	    result += "%25";
        else if ( str.charAt(i) == '#' )
	    result += "%23";
        else if ( str.charAt(i) == ' ' )
	    result += "&nbsp;";
        else if ( str.charAt(i) == '\n' )
	    result += '<br />';
        else
	    result += str.charAt(i);
    }

    return ( result );
}

obj = external.menuArguments;   // 右クリック時の引数オブジェクト
page_url  = obj.document.URL;   // いま見ているサイト(ページ)のURL
title_txt = obj.document.title; // いま見ているサイト(ページ)のタイトル
str  = obj.document.selection.createRange().text;  // 選択されている文字列
str2 = obj.document.body;
inn  = str2.innerHTML;
img  = obj.document.images;
num  = img.length;

// ↓↓ 自分のa8mat番号に書き換えてください
var a8mat = "X6X6A+6S3QSX+5WS+BWXXD";
// ↑↑ 自分のa8mat番号に書き換えてください

/*
 * 生成例 (http://www.a8.net/a8v2/rakuten/g-top.jsp を使用)
 *   <a href="http://px.a8.net/svt/ejp?a8mat=O6H6A+6S3QSY+5WS+BWVTD&a8ejpredirect=http%3A%2F%2Fwww.rakuten.co.jp%2Fedigi%2F802797%2F813693%2F" target="_blank">
 *   <img border="0" alt="Click Here!" src="http://image.www.rakuten.co.jp/edigi/img10011630153.jpeg"></a>
 *   <img border="0" width="1" height="1" src="http://ad.a8.net/0.gif?a8mat=O6H6A+6S3QSY+5WS+BWVTD" alt="">
 *
 * つまり、以下のような html ソースを生成すれば OK
 *   <a href="http://px.a8.net/svt/ejp?a8mat=A8mat番号&a8ejpredirect=商品ページのURL" target="_blank">
 *   <img border="0" alt="Click Here!" src="表示させたい画像のURL"></a>
 *   <img border="0" width="1" height="1" src="http://ad.a8.net/0.gif?a8mat=A8mat番号" alt="">
 *
 * 問題は、どうやって画像のURLを取得するか?
 *   →
 *      同一ページで扱っている商品が1つだけの場合は、いちばん最後の jpeg ファイルが目的の画像である場合が多い
 *      という経験則に基づき、いちばん最後の jpeg ファイルをとりあえず採用。駄目だったら、生成したhtmlソース
 *      を手で書き換えてね、って方法を採用します (^^;
 *      同一ページで複数商品を扱ってる場合は、ほとんど手書きでの修正が必要になってしまいますが、ごめんなさい。
 *
 *      ほとんどの楽天ショップでは、ナビゲーション用に gif 画像、商品は jpeg 画像を使っているので、上記でいう
 *      経験則が適用できることが多い。ただし、一部の楽天ショップはナビゲーション用に jpeg 画像、商品に gif 画
 *      像を使っていることがあり、その場合は、ナビゲーション用の画像を拾ってしまうことになる。
 */

img_url = "";
if ( str != "" ) {
  /* 大抵の場合は以下の処理で選択中の画像のURLが取れると思われる(gif画像の場合も含む) */
  srcEvent = obj.event;
  eventElement = obj.document.elementFromPoint( srcEvent.x, srcEvent.y );
  eObj = eventElement;
  str3 = inn.substring(0,inn.lastIndexOf(eObj.innerHTML));
  if ( str3 == "" )
    str3 = inn.substring(0,inn.lastIndexOf(str));
  str4 = str3.substring(0,str3.lastIndexOf("<IMG") - 4); // アクセス解析用のダミー
  str5 = str4.substring(str4.lastIndexOf("<IMG"));       // 画像を読み飛ばす
  str6 = str5.substring(str5.indexOf("src=")+5);
  img_url = str6.substring(0,str6.indexOf('"'));  // 選択されている画像の URL
  if ( img_url.indexOf("http:") < 0 )
    img_url = "";
}

cnt     = 0;
w       = 0;
h       = 0;
if ( (img != "") && (num > 0) ) {
  if ( img_url == "" ) {
    /* 経験則に基づく画像URL取得処理 (商品にgif画像を使っているショップの場合、うまくいかない) */
    for ( i = 0; i < num; i++ ) {
      if ( img[i].src.lastIndexOf('.jpeg') > 0 )
        cnt = i;
    }
    w       = img[cnt].width;
    h       = img[cnt].height;
    img_url = img[cnt].src;
  }
  else {
    img = new Image;
    img.src = img_url;
    w       = img.width;
    h       = img.height;
  }
  window.open(img_url, 'Image',
              'scrollbars=no,width=' + (w+20) + ',height=' + (h+20) + ',left=100,top=100,status=yes,resizable=yes');
  // ↑ ・ここで表示された画像が期待している画像と違う場合は、生成された html を手書きで修正してください (_o_)
  //    ・画像は期待しているものだが画像のサイズがおかしい(小さい)場合は、もう一度本スクリプトを実行し直すと、
  //      正しいサイズになります。
}

linkString = title_txt.substring(title_txt.indexOf('：')+1,title_txt.length);
target_url = 'http://px.a8.net/svt/ejp?a8mat=' + a8mat + '&amp;a8ejpredirect=' + translateString( page_url );
link = '<a href="' + target_url + '" target="_blank">' + linkString + '</a>';

img_str = "";
if ( img_url != "" ) {
    if ( (w > 0) && (h > 0) )
      img_str = '<img border="0" alt="' + linkString + '" src="' + img_url + '" width="' + w + '" height="' + h + '" />';
    else
      img_str = '<img border="0" alt="' + linkString + '" src="' + img_url + '" />';
    img_str = '<a href="' + target_url + '" target="_blank">' + img_str + '</a>';
}
acc_str = '<img border="0" width="1" height="1" src="http://ad.a8.net/0.gif?a8mat=' + a8mat + '" alt="" />';

if ( str == "" ) {
    if ( img_url == "" )
        prompt('', link + acc_str);
    else
        prompt('', link + '<br />' + img_str + acc_str);
}
else {
    gTag = "";
    str  = translateString( str );
    if ( img_url == "" )
        qTag = '<blockquote cite="' + page_url + '"><p>' + str + '</p><cite>' + link + acc_str + '</cite></blockquote>';
    else
        qTag = '<blockquote cite="' + page_url + '" style="width: 88%; padding: 3px;"><p style="float: left; width: 65%;">' + str + '</p><p style="float: right; width: 34%; background-color: #FFF;">' + img_str + '</p><p style="float: left; width: 75%; background-color: #FFF;"><cite>' + link + acc_str  + '</cite></p></blockquote>';
    prompt('',qTag);
}
</SCRIPT>