2013年12月19日 12:50

「あみあみ」のアフィリエイト画像とタイトルを取得するスクリプト作った (ブックマークレットもどき)

艦隊これくしょん -艦これ- ねんどろいど 赤城 (ノンスケール ABS&PVC 塗装済み可動フィギュア)
amazon:艦隊これくしょん -艦これ- ねんどろいど 赤城

修正版を作りました!!

「あみあみ」A8.netブックマークレット修正版【javaScriptの練習】| 絶版あかみる

「あみあみ」でしか使えないアフィリエイト画像取得スクリプト

当ブログの画像はamazonのアフィリエイト画像を中心に利用しています。各記事のトップ画像などがそれです。ちなみに、サイドバーなどに表示されてるのもそうです。amazon→各記事にアフィリエイト画像として掲載→メタデータ(og.img)に指定して各場所で呼び出しています。

最近はニュースをあまり扱ってないのですが、たまに良いグッズとか見た時紹介したい場合があります。でもamazonへの登録はちょっと遅いことが多い。

そこで、フィギュアやグッズ情報が早い「あみあみ」のアフィリエイト画像を使うことがありました。

ところが、これがメンドクサイ! A8netというアフィリエイトの中継会社のサイトをいちいち開き、ログインして、商品URLと画像URLを入力しなきゃいけないという苦行です。

スポンサードリンク

簡単に出来るようスクリプトを作ってショートカットキーにしてみた。

javascript:(function(){var ami=document.createElement('textarea');ami.style.width='100%';ami.value='<a href="http://px.a8.net/svt/ejp?a8mat=******+******+***+*****&a8ejpredirect='+location.href+'&affid=fc"target="_blank" rel="nofollow"><img src="'+window.getSelection()+'" width="480px"></a><a href="http://px.a8.net/svt/ejp?a8mat=******+******+***+*****&a8ejpredirect='+location.href+'&affid=fc" target="_blank" rel="nofollow">'+document.title+'</a>';document.body.insertBefore(ami,document.body.firstChild);
ami.focus();
ami.select();
ami.ondblclick=function(){ami.parentNode.removeChild(ami);
};
ami.oncopy=function(){setTimeout(function(){ami.parentNode.removeChild(ami);
},1);
returntrue;
}})()

*のところはA8netで自分のアカウントを示す部分になるかと思います。各自確認してください。(方法は後述)

これをGoogle chlomeの拡張機能keyconfigに登録して使っています。

私はショートカット「ctrl+i」に登録してあります。

使用方法は、まず使いたい商品のページにいきます。商品画像の下に画像のURLが記載してあるので、そこを選択状態にします。で、ショートカットキーを押します。

すると、ページ上部にこんな感じで貼り付けコードがでてくるので、コピペすれば、以下のように表示されます。

あみあみ [キャラクター&ホビー通販] | JC.COM The Muse of Range Murata 1/6 完成品フィギュア

とりあえず弄ってできたのはこんなものでした。おわり。

A8から出力した「あみあみ」のアフィリエイトURLを見る

A8標準の機能で出力するとこんな感じ。

<p><a href="http://px.a8.net/svt/ejp?a8mat=******+******+***+*****&a8ejpredirect=http%3A%2F%2Fwww.amiami.jp%2Ftop%2Fdetail%2Fdetail%3Fgcode%3DFIGURE-003966%26page%3Dtop%3Faffid%3Dfc" target="_blank">
<img border="0" alt="" src="http://img.amiami.jp/images/product/main/134/FIGURE-003966.jpg"></a>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=******+******+***+*****" alt=""></p>


*印のとこはアカウントごとに違うはずなんで上記スクリプトの*印のとこを書き換えてください。


java script読めないけど適当にやったらできた

javascriptとjQueryの勉強を今日からスタートさせるので、当ブログでも経過とか記事にしたいと思います。今はjavascriptも良く分かってません。

そんな私ですが、今回のスクリプトはとりあえずやってみたらできたっぽいので、いろいろ経緯を書いておきます。

この記事はプログラミングやってる人の役には一切立ちません。でも、javascript分からなくても、自分が便利になるものくらいなら作れるよ。という例として晒しておきます。

まず、元にしたスクリプトがこちら。コードの改行がなく見づらいですが。

<p>javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<blockquote><p><br>'+window.getSelection()+'</p><cite><font size="1">引用元:<a href="'+location.href+'" target="_blank">'+document.title+'</a></font></cite></blockquote>';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()</p>

引用部分を指定するスクリプトです。どっかで見つけたのをちょっと弄りました(改行と文字サイズ指定しただけ)。

引用スクリプトの挙動は先に示した通りで、Webサイト内で文字を選択して指定のショートカットキーを押すと、整形されたHTMLがページ上部に表示、これをコピペすれば選択部分を以下のように引用表示が可能です。(見た目はCSSで指定しています)


JC.COM The Muse of Range Murata 1/6 完成品フィギュア[アルター]《05月予約》 コミックアンソロジー『JC.COM』Vol.9 カバーイラストより

引用元:あみあみ [キャラクター&ホビー通販] | JC.COM The Muse of Range Murata 1/6 完成品フィギュア


引用スクリプト

<p>javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<blockquote><p><br>'+window.getSelection()+'</p><cite><font size="1">引用元:<a href="'+location.href+'" target="_blank">'+document.title+'</a></font></cite></blockquote>';

結果吐き出されたHTML

<blockquote><p><br>JC.COM The Muse of Range Murata 1/6 完成品フィギュア[アルター]《05月予約》
コミックアンソロジー『JC.COM』Vol.9 カバーイラストより</p><cite><font size="1">引用元:<a href="http://www.amiami.jp/top/detail/detail?gcode=FIGURE-003966&page=top" target="_blank">あみあみ [キャラクター&ホビー通販] | JC.COM The Muse of Range Murata 1/6 完成品フィギュア</a></font></cite></blockquote>


上記の部分がだいたい対応してるのがわかる。<blockquote>から始まって、</blockquote>で終わってるとこ。いわゆる引用タグですね。

document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()</p>

ってことは、引用スクリプトの続きである上記部分は、引用スクリプトを動かしたときにページ上部に表示させる為のものだと推察。

じゃぁ、上だけ変えればいいやってことになりました。

後で使えそうと思ったのは、「'+window.getSelection()+'」の部分。 ここが選択部分を意味してるのは引用スクリプト使ってれば想像できる。コードもその順番になってます。「'+location.href+'」と「'+document.title+'」が閲覧中のサイトURLとタイトルを取得するための部分だというのも予想できました。

ここまで予想できれば後は書き換えるだけ。以下のように出力されるようにと考えました。

<a href="http://px.a8.net/svt/ejp?a8mat=******+******+***+*****&a8ejpredirect='+location.href+'&affid=fc"target="_blank" rel="nofollow"><img src="'+window.getSelection()+'" width="480px"></a><a href="http://px.a8.net/svt/ejp?a8mat=******+******+***+*****&a8ejpredirect='+location.href+'&affid=fc" target="_blank" rel="nofollow">'+document.title+'</a>

すげー無理やりです。これからちゃんと勉強します。

絶版後記

当ブログはアニメや漫画、ゲームなど2次元ネタを中心にあつかってるのですが、このカテゴリーはアニメのキャラクター画像などを沢山表示させないと超殺風景になります。

ただ、百聞は一見にしかずともいうように、画像の効果は大きいです。画像のあるなしはブログの見易さにも関わります。

しかし、気をつけないといけないのが著作権。 まー、2chまとめとかガンガン画像貼ってますし、アメブロなんて無法地帯もいいところです。

さすがに上記はちょっと極端な例ですが、多かれ少なかれ現行法だとグレーゾーンに踏み込んでるサイト・ブログは多いです。当ブログも公式Webサイトなどで公開された画像などはスクリーンショットとして掲載してますが、出来る限り注意して運営したいと思っています。

アフィリエイトの画像を利用すれば、著作権関連は処理されているものなので安心ですね。

この『あみあみ』専用アフィリエイトスクリプトも、当ブログで楽に使いたいという思いから作ってみました。当然動作の保障はしませんが、何かの役に立つかもしれないので記事にしときました。

  • 【タグ】
便利&役立カテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる