bookmarklet

リンク追跡タグがいい加減うざい件

グーグル検索とかヤフーとかインプレスのサイトはよく見たり利用したりするんですが、マウスカーソルをリンクの上に持ってきたときにステータスバーに表示されるアドレスとは違うURLに飛ばされることに違和感を覚え、ちょっと調べたら、どうやら、個人のトラフィック調査(追跡)機能が仕組まれていることに今さらながら気付いた。遅いな(^^;;;

例えばこんなやつ↓

<a href="http://hogehoge.com/" onmousedown="this.href='追跡機能のためのURL';">ほげほげ</a>

つまり、マウスのボタンが押されたら、強制的にhref属性を追跡機能のためのURLに飛ばし、その先で、本来のリンク先(書き換え前のURL)にリダイレクトする、ってやつ。このmousedownイベントは、左ボタンだけでなく、右ボタン、ホイールボタン(あ、Windows前提ね(m_m))でも発動してしまうから、スキップできない！！！

SEO的には問題ない。href属性はそのままだし、ユーザーがクリックしない限りURLは書き換えられないから、ロボットにも対応できる。質悪いな、と思った。いくら追跡を拒否しようが、そんなのお構いなし(笑)

でも、元からhref属性(リンク先)に、追跡機能のためのURLが記述されているなら、まだ良心的だ。追跡してるぞ！ というのが分かるから。だけど、このonmousedownを使った手法は、追跡しているのをユーザーに気付かせない(隠している？)ようにも受け取られてしまう。リンク先のURLをある意味偽装してるんじゃないか？ ってね。ユーザーは追跡を拒否できないわけだ。

こうして、「無料」と言う名の対価を払い便利なサイトを利用しているわけだけど、「無料」とは名ばかりで、自分の「趣味嗜好」を金儲けの道具にされているのはなんだかすっげー気持ち悪い。特にずっとログインしっぱなしのサイトでそれやられると、ログイン情報とその「趣味嗜好」が緋付けされて監視されているようで薄気味悪い。

さらにスマホやタブレットなんかPCほど簡単にはチェックできないから、やりたい放題なわけだ。

街中では監視カメラがいっぱいありますが・・・ネットの中でも監視されて、もう、嫌になりますなー。

ブックマークレットで、その都度 onmousedown属性をゴッソリ消してしまえるけど、そのたびにいちいちブックマークレットを実行するのもなー・・・。ページ開いたらonmousedown属性だけバッサリ削除してくれるブラウザの拡張機能・・・ってあるのかなー。それくらい自分で作れってか(^^;

追記・ブックマークレット （Remove onmousedown attr）

javascript:(function(){var as = document.getElementsByTagName('a'); if(as){for(var i=0;i<as.length;i++)as[i].removeAttribute('onmousedown');}})();

amazonの商品ページから画像一覧を取得するブックマークレット

2017年1月18日 追記
アマゾンの画像を置いているサーバーのドメインが変わったみたい？
ドメイン名のところを修正しています(m´・ω・｀)m ｺﾞﾒﾝ…

ひさしぶりにブックマークレット・ネタ。

会社でたまに、商品紹介の版下データをIllustratorで作成することがあるのですが・・・商品画像を集める作業は一苦労してました。あるときは、紙のカタログからスキャンしたり、PDFのページをリーダーで表示させた状態をスクリーンショット撮ったり(笑)、まぁ結構なんぎしてました。
でも最近は違います！ アマゾンのサイトに行くと、ほぼ全ての画像が！！！(^^;;; ま、当たり前だけど、amazonに載ってある画像を勝手に版下データに流用するのはチョシャッケンを侵害！！！ ってのは理解しているんですが、商品メーカーの販売会社の営業さんとかに問い合わせもらっても、いちいち対応がメンドクサイのか、アマゾンの画像を使えと(笑) 末端の下っ端なんてそんなもんですよ。

ってなわけで、ブラウザでいちいち右クリック・画像保存・・・とかいうルーチンは、パソコンが得意。

商品ページのHTMLコードをザラッと解析して(＜ オーバーだよ・・・)、ブックマークレットを作った。
だいたい、↓ こんな感じ。

/* 
amazonの任意の商品ページでF12キーでDevツールを出し、
コンソールにて以下をコピペして実行して試せます。
2017/1/18 画像サーバーのドメイン名をマッチするための正規表現を修正してます。
*/
(function($,undefined)
{
  var multi = {};
  var m = $.each($('body').html().match(/https?:\/\/images\-\w+\.ssl\-images\-amazon\.com\/images\/I\/(?:[\w%\-]+)(?:\._S[A-Z]\d+_)?\.jpg/g),
                function(i,v)
                {
                  var url = v.replace(/\._S[A-Z]\d+_/,'');
                  if(url in multi)
                    return;
                  multi[url] = null;
                });

  var urls = [];
  $.each(multi,
         function(url,v)
         {
           urls.push(url);
         });

  var len = urls.length;
  var doc = window.open("","image").document;
  doc.open("text/html");
  doc.writeln("<html><head><title>Imaging</title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"></head><body><p><a href=\"javascript:window.close();\">ウィンドウを閉じる。</a></p><p>");
  for(var i=0;i<len;i++)
    {
      doc.writeln("<a target=\"_blank\" href=\"",urls[i],"\"><img width=\"100\" border=\"0\" src=\"",urls[i],"\"></a>");
    }
  doc.writeln("</p></body></html>");
  doc.close();

})(jQuery);

ただ、これだと、window.openメソッドを使っているので、ブラウザの設定によってはポップアップブロックされるかも。amazon.co.jpだけ例外設定してやればヨシ。

上のコードをコピペしてブラウザのデベロッパーツール＞console にて確認してみてください。
ポップアップされたウィンドウまたはタブに画像がデデデと列挙されるはず・・・されなかったらごめんなさい。
画像は幅100ピクセルに縮小して表示されてますが、画像をクリックしてやると大きくなるはず・・・されなかったらごめんなさい。

wordpress.comでは javascript: なリンクは貼れないので、ミニファイしたコードを↓に書いときますので、適当なブックマークを作って、編集して、URLに、↓のコードをコピペして保存してください。

javascript:(function($,undefined){var multi={};var m=$.each($('body').html().match(/https?:\/\/images\-\w+\.ssl\-images\-amazon\.com\/images\/I\/(?:[\w%\-]+)(?:\._S[A-Z]\d+_)?\.jpg/g),function(i,v){var url=v.replace(/\._S[A-Z]\d+_/,'');if(url in multi)return;multi[url]=null});var urls=[];$.each(multi,function(url,v){urls.push(url)});var len=urls.length;var doc=window.open("","image").document;doc.open("text/html");doc.writeln("<html><head><title>Imaging</title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"></head><body><p><a href=\"javascript:window.close();\">ウィンドウを閉じる。</a></p><p>");for(var i=0;i<len;i++){doc.writeln("<a target=\"_blank\" href=\"",urls[i],"\"><img width=\"100\" border=\"0\" src=\"",urls[i],"\"></a>")}doc.writeln("</p></body></html>");doc.close()})(jQuery);

使い方は・・・分かりますよね？ amazonって、頻繁に表示方法を変えているので、たぶんそのうち使えなくなるかもですね。
あ、エッチな商品の画像を取っちゃだめですよ(笑) あくまでお仕事の一助に(^^;;;

ブックマークレットって何？ どうやって登録するの？ どうやって使うの？ おいしいの？ とかいうメンドクサイ人は・・・適当にググってください(_ _)