ブックマークレット

iOS版chromeで・・・

備忘録

iPhoneでサイト見るときは、主にchrome使ってます。
iOS10(だったっけ？)から <meta name=”viewport”>に user-scalable=no とか、maximum-scale=1 とか設定されてても、mobile safariではピンチアウトで拡大できるようになったと思うんですが、iOS版chromeだと拡大できませんでした・・・。なんか設定あるのかなーーーー。
小さい字が見づらい時があるので、拡大できないのは不便・・・その時はURLをsafariにコピペして safariで開いて見るんですが・・・メンドクサイ・・・。

いちいちメンドクサイので、ブックマークレット作って登録しておく。

ブックマークレット本体

(function()
  {
    var col=document.getElementsByTagName('meta');
    for(var k in col)
    {
      var name = col[k].getAttribute('name');
      if(name && name.match(/viewport/i))
      {
        var content = col[k].getAttribute('content'); 
        col[k].setAttribute('content',content.replace(/,?user-scalable=\w+/g,'').replace(/,?maximum-scale=[\w\.]/g,''));
        break;
      }
    }
  }
)();

要は、metaタグのviewportから、user-scalable,maximum-scaleを削除するだけ。

で登録用にミニファイしたのは、

javascript:(function(){var col=document.getElementsByTagName('meta');for(var k in col){var name=col[k].getAttribute('name');if(name && name.match(/viewport/i)){var content=col[k].getAttribute('content');col[k].setAttribute('content',content.replace(/,?user-scalable=\w+/g,'').replace(/,?maximum-scale=[\w\.]/g,''));break;}}})();

登録用

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って、頻繁に表示方法を変えているので、たぶんそのうち使えなくなるかもですね。
あ、エッチな商品の画像を取っちゃだめですよ(笑) あくまでお仕事の一助に(^^;;;

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

iPadで簡易”view-source”

撮影した写真をその場で確認したり、机の前に置いて見るだけの高価なフォトフレーム化しているiPad(^^;;

先日、iPadのブラウザでホームページを巡回していたら、ちょっと気になったページがあって、HTMLソースを見ようとしたら・・・・見れない。というか、iPadのSafariは、ソースを見ることができない・・・。ダメ元で、アドレスバーに “view-source:http://hoge～ “と入力してみたけど、「アドレスが無効です」とかいうエラー。ま、当然やな。

しょうがないので、ブックマークレットでなんとかやってみる。

とりあえず、どこかのページを開いてブックマークを追加し、ブックマークの編集でURLに以下をコピペ。

javascript:(function(){var w=window.open();var d=w.document.open();var t=window.document.getElementsByTagName("html").item(0).outerHTML; t=t.replace(/</g,"&lt;");t=t.replace(/>/g,"&gt;");t=t.replace(/ /g,"&nbsp;");t=t.replace(/\n/g,"<br>"); t=t.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"); d.writeln("<!doctype html>");d.writeln("<html><head><title>View-Source</title><style type='text/css'><!-- body{font-size:12pt;} --></style><body>",t,"</body></html>");})();

やってることは、＜,＞と空白、タブ、改行をエスケープして貼り付けてるだけ。TextNodeを生成して<pre>タグに放り込めばもっと短くなるんだけど、非常に長い行があるソースだと改行されず非常に見づらいのであえてメタ文字をエスケープしてBODY要素に放り込んでます。

検索すると、ソースそのものを外部サーバーに送って整形する・・・という手法が一般的みたいですが、「ちょっとだけ確認したいんや！」という用途にはちょうどいいかな、と自己納得w

そういえば・・・ iPad mini って出るんですかね？出ても買えないけど。