b log

そんなもの腐るほどあるわ！…かもしれないけどあえて探さず、以前作った画像サイズを変えるだけのスクリプトをベースに作ってみました。モダンな書き方を知らないので非常にベタな書き方だし、それぞれの要素の取得にはもっとスマートな方法がありそう…というか確実にある。でもまぁ、動いているのでとりあえず完成。ちなみにOSX版SafariとFirefoxのみで動作確認。IE6は実行できるブックマークレットの文字数に制限があるらしいので動かないはず（※そういう時は本来圧縮するらしい）。

【使い方／仕様】

• 下のリンクをブックマークとして登録し、Amazon商品ページで実行。アラート画面に最終的に出力された文字列をコピーして使用。
• 最後の()内にアソシエイトIDとデフォルト画像サイズを記入。
• 入力画面で画像サイズ指定可能。キャンセルor空欄にするとオリジナルのサイズで表示。
• テキスト情報あり／無しを選択可能。無しの場合は画像＆リンクのみ。
• テキスト情報はタイトル／著者（アーティスト）名／価格／レーティング。
• メインの商品画像以外も使用可能。

Amazonアソシエイトリンク作成

※ 2009.2.14 「価格」を取得できないタイプのページがあったので対応

マークアップをどうするかが意外と難しい。冗長な気もするけど、一応テキスト要素それぞれをspanタグで囲いクラス名をつけておく。Wordpressは段落ごとに勝手にpタグを追加するのでpタグは使えないし、でも半端に改行タグを入れるのもなぁ…という事でそれらを半角スペースでつないでみた。良いのか悪いのかいまいちわからないが、しばらくはこれでいってみよう。

現状はこんな記述。

危機 [Limited Edition] イエス ￥ 2,300

<div class="am_goods">
     <a href="xxx">
          <img src="xxx" class="am_photo" />（商品画像）
          <span class="am_title">タイトル</span>
     </a>
     <span class="am_auther">著者名</span>
     <span class="am_price">価格</span>
     <img src="xxx" class="am_star" />（レーティング画像）
</div>

.am_goods {
	margin-top:20px;
	}
	.am_goods:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
	}
	/*\*/
	* html .am_goods {
    height:1em;
    overflow:visible;
	}
	/**/
	.am_goods a img{
	float:left;
	margin-right:12px;
	}
	.am_goods a:link, .am_goods a:visited {
	text-decoration:none;
	}
	.am_goods a:hover {
	text-decoration:underline;
	}
	.am_goods span {
	display:block;
	font-size:0.8em;
	line-height:1.4em;
	}
	.am_star {
	margin-top:0.8em;
	}

（↑SyntaxHighlighterを入れてみた。）

アフィリエイト云々より、ラクに画像の引用がしたいだけという噂も…