仕事用：サイト内の画像を抽出するブックマークレット

サイト内の画像を抽出し、フォトビューワーライクにドロワー表示するブックマークレット。
##主な機能

• サイト内の<img>タグの画像を抽出。(background-imageは非対応)
• 元画像のサイズ表示
• 画像のURL表示
• デッドリンクの画像を赤字でアラート表示
• ドロワー内の画像をマウスオーバーすると対象の抽出元画像のハイライト
• 画像をクリックするとアンカージャンプ

※動作確認は、MacのSafari、Chrome、Firefoxでしか行なっていません。

###アンカーリンク追加版 アドレスコピー用ソース(Compress & encodeURI加工済み)

for_bookmarklet_v2.js(4.4KB)

javascript:(function()%7Bvar%20a=%5B%5D;var%20b=%7B%7D;var%20d='.mi-bd%7Btransition:%20.5s%7D'+'.mi-mw%7B%20position:fixed;%20z-index:5999999999;%20width:241px;%20height:100vh;%20top:0;%20border-right:%201px%20solid%20#ccc;%20background-color:#efefef;%20box-shadow:-25px%200px%2010px%20-20px%20rgba(0,0,0,0.3)%20inset;%20transition:%20.5s%7D'+'.mi-mb%7B%20width:100%25;%20height:100vh;%20overflow-y:scroll%7D'+'.mi-md%7B%20position:relative;%20min-height:100px;%20vertical-align:%20middle;%20text-align:%20center;%20margin:19px;%20border:1px%20solid%20#aaa%7D'+'.mi-mi%7B%20vertical-align:top%20%7D'+'.mi-ms%7B%20position:absolute;%20top:0;%20right:0;%20display:block;%20background-color:#222;%20color:#fff;%20font-size:10px;%20padding:0%20.5em;%20line-height:2%20%7D'+'.mi-mt%7B%20position:absolute;%20bottom:0;%20display:block;%20width:200px;%20background-color:#456;%20color:#fff;%20font-size:10px;%20padding:.5em%200;%20text-align:left;%20line-height:1.2;%20white-space:nowrap;%20overflow:%20hidden;%20text-overflow:%20ellipsis%20%7D'+'.mi-mt:hover%7B%20text-overflow:clip;%20word-wrap:break-word;%20white-space:normal;%20overflow:visible;%20background-color:#789%20%7D'+'.mi-onmouse%7Bbox-shadow:0px%200px%200px%205px%20#f00%7D'+'.mi-error%20.mi-mi%7Bbox-shadow:0px%200px%200px%202px%20#f00%7D'+'.mi-error%20.mi-ms%7Bbackground-color:#f00%7D'+'.mi-error%20.mi-mt%7Bbackground-color:#f00%7D'+'.mi-cl%7Bposition:%20absolute;%20background-color:%20#456;%20color:%20#fff;%20top:0;%20right:%20-43px;%20width:%2042px;%20height:%2050px;%20border-radius:%200%208px%208px%200;%7D'+'#mi-icon%7B%20display:%20block;%20position:%20absolute;%20top:%2050%25;%20left:%2050%25;%20width:%2020px;%20height:%204px;%20margin:%20-4px%200%200%20-11px;%20background:%20#fff;%20transition:%20.2s%7D'+'#mi-icon:before,%20#mi-icon:after%7B%20display:%20block;%20content:%20%22%22;%20position:%20absolute;%20top:%2050%25;%20left:%200;%20width:%2020px;%20height:%204px;%20background:%20#fff;%20transition:%20.3s%7D'+'#mi-icon:before%7B%20margin-top:%20-11px%7D'+'#mi-icon:after%7B%20margin-top:%207px%7D'+'.mi-open%20#mi-icon%7B%20background:%20transparent%7D'+'.mi-open%20#mi-icon:before,%20.mi-open%20#mi-icon:after%7B%20margin-top:%200;%7D'+'.mi-open%20#mi-icon:before%7B%20transform:rotate(-45deg)%7D'+'.mi-open%20#mi-icon:after%7B%20transform:rotate(-135deg)%7D'+'.mi-bd%7B%20padding-left:0%20%7D'+'.mi-mw%7B%20left:-241px%20%7D'+'.mi-open.mi-bd%7B%20padding-left:241px%20%7D'+'.mi-open%20.mi-mw%7B%20left:%200%20%7D';var%20e=document.getElementsByTagName('img');for(var%20i=0;i%3Ce.length;i++)%7Bvar%20g=(!e%5Bi%5D.id)?%22mining_img_%22+i:e%5Bi%5D.id;var%20s=e%5Bi%5D.src;var%20w=e%5Bi%5D.width;var%20h=e%5Bi%5D.height;e%5Bi%5D.id=g;a%5Bi%5D=%5Bs,w,h,g%5D%7Dvar%20p=document.getElementsByTagName('body')%5B0%5D;p.classList.add('mi-bd');p.classList.add('mi-open');var%20f=document.getElementsByClassName('mi-mw');if(f.length%3E0)%7Bconsole.log('---%3E%20del');for(var%20i=0;i%3Cf.length;i++)%7Bif(f%5Bi%5D.parentNode)%7Bf%5Bi%5D.parentNode.removeChild(f%5Bi%5D)%7D%7D%7Delse%7Bconsole.log('---%3E%20make');var%20s=document.createElement('style');s.innerHTML=d;p.appendChild(s)%7Dvar%20w=document.createElement('div');var%20c=document.createElement('div');w.classList.add('mi-mw');c.classList.add('mi-mb');p.appendChild(w);w.appendChild(c);var%20j=document.createElement('div');j.classList.add('mi-cl');j.setAttribute('onclick',%22var%20e=document.getElementsByTagName('body')%5B0%5D;%20e.classList.toggle('mi-open')%22);j.innerHTML=%22%3Cdiv%20id='mi-icon'%3E%3C/div%3E%22;w.appendChild(j);for(var%20i=0;i%3Ca.length;i++)b%5Ba%5Bi%5D%5B0%5D%5D=a%5Bi%5D;a=%5B%5D;for(var%20k%20in%20b)a.push(b%5Bk%5D);for(var%20i=0;i%3Ca.length;i++)%7Bvar%20l=document.createElement('div');var%20m=document.createElement('img');var%20n=document.createElement('span');var%20o=document.createElement('span');l.classList.add('mi-md');m.classList.add('mi-mi');n.classList.add('mi-ms');o.classList.add('mi-mt');m.setAttribute('onerror',%22this.parentNode.classList.add('mi-error')%22);m.setAttribute('onclick',%22window.scroll(0,document.getElementById('%22+a%5Bi%5D%5B3%5D+%22').getBoundingClientRect().top);%22);m.setAttribute('onmouseenter',%22document.getElementById('%22+a%5Bi%5D%5B3%5D+%22').classList.add('mi-onmouse')%22);m.setAttribute('onmouseleave',%22document.getElementById('%22+a%5Bi%5D%5B3%5D+%22').classList.remove('mi-onmouse')%22);m.src=a%5Bi%5D%5B0%5D;m.width=(a%5Bi%5D%5B1%5D%3C200)?a%5Bi%5D%5B1%5D:200;n.innerText=a%5Bi%5D%5B1%5D+'%20x%20'+a%5Bi%5D%5B2%5D;o.innerText=a%5Bi%5D%5B0%5D;var%20q=c.appendChild(l);q.appendChild(m);q.appendChild(n);q.appendChild(o)%7D%7D)();

###アドレスへの登録の仕方
####Safariの場合
ブックマーク > ブックマークに追加 > 適当な名称を付けて仮登録 > 登録されたブックマークを右クリック > アドレスを編集を選択 > URLに上記のソースをコピーして貼り付ける

####Chromeの場合
ブックマークマネージャー > ブックマークバーを選択 > 右クリックで「ページを追加」> URLに上記のソースをコピーして貼り付ける

###アンカーリンク追加版 展開ソース

uncompressed_v2.js

javascript: (function() {
    var a = [];
    var b = {};

    //CSSを集約
    var css = '.mi-bd{transition: .5s}' +
        '.mi-mw{ position:fixed; z-index:5999999999; width:241px; height:100vh; top:0; border-right: 1px solid #ccc; background-color:#efefef; box-shadow:-25px 0px 10px -20px rgba(0,0,0,0.3) inset; transition: .5s}' +
        '.mi-mb{ width:100%; height:100vh; overflow-y:scroll}' +
        '.mi-md{ position:relative; min-height:100px; vertical-align: middle; text-align: center; margin:19px; border:1px solid #aaa}' +
        '.mi-mi{ vertical-align:top }' +
        '.mi-ms{ position:absolute; top:0; right:0; display:block; background-color:#222; color:#fff; font-size:10px; padding:0 .5em; line-height:2 }' +
        '.mi-mt{ position:absolute; bottom:0; display:block; width:200px; background-color:#456; color:#fff; font-size:10px; padding:.5em 0; text-align:left; line-height:1.2; white-space:nowrap; overflow: hidden; text-overflow: ellipsis }' +
        '.mi-mt:hover{ text-overflow:clip; word-wrap:break-word; white-space:normal; overflow:visible; background-color:#789 }' +
        '.mi-onmouse{box-shadow:0px 0px 0px 5px #f00}' +
        '.mi-error .mi-mi{box-shadow:0px 0px 0px 2px #f00}' +
        '.mi-error .mi-ms{background-color:#f00}' +
        '.mi-error .mi-mt{background-color:#f00}' +
        '.mi-cl{position: absolute; background-color: #456; color: #fff; top:0; right: -43px; width: 42px; height: 50px; border-radius: 0 8px 8px 0;}' +
        '#mi-icon{ display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; margin: -4px 0 0 -11px; background: #fff; transition: .2s}' +
        '#mi-icon:before, #mi-icon:after{ display: block; content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 4px; background: #fff; transition: .3s}' +
        '#mi-icon:before{ margin-top: -11px}' +
        '#mi-icon:after{ margin-top: 7px}' +
        '.mi-open #mi-icon{ background: transparent}' +
        '.mi-open #mi-icon:before, .mi-open #mi-icon:after{ margin-top: 0;}' +
        '.mi-open #mi-icon:before{ transform:rotate(-45deg)}' +
        '.mi-open #mi-icon:after{ transform:rotate(-135deg)}' +
        '.mi-bd{ padding-left:0 }' +
        '.mi-mw{ left:-241px }' +
        '.mi-open.mi-bd{ padding-left:241px }' +
        '.mi-open .mi-mw{ left: 0 }';

    //画像情報抽出
    var e = document.getElementsByTagName('img');
    for (var i = 0; i < e.length; i++) {
        var id = (!e[i].id) ? "mining_img_" + i : e[i].id;
        var s = e[i].src;
        var w = e[i].width;
        var h = e[i].height;
        e[i].id = id;
        a[i] = [s, w, h, id]
    }

    //画像出力先生成
    var p = document.getElementsByTagName('body')[0];
    p.classList.add('mi-bd');
    p.classList.add('mi-open');

    //既に表示している場合、一度削除する。
    var f = document.getElementsByClassName('mi-mw');

    if (f.length > 0) {
        for (var i = 0; i < f.length; i++){
            if (f[i].parentNode) {
                f[i].parentNode.removeChild(f[i]);
            }    
        }
    } else {
        var s = document.createElement('style');
        s.innerHTML = css;
        p.appendChild(s);
    }

    var w = document.createElement('div');
    var c = document.createElement('div');
    w.classList.add('mi-mw');
    c.classList.add('mi-mb');
    p.appendChild(w);
    w.appendChild(c);

    //閉じるボタンの作成
    var close = document.createElement('div');
    close.classList.add('mi-cl');
    close.setAttribute('onclick', "var e=document.getElementsByTagName('body')[0]; e.classList.toggle('mi-open')");
    close.innerHTML = "<div id='mi-icon'></div>";
    w.appendChild(close);


    //重複画像削除処理
    for (var i = 0; i < a.length; i++) b[a[i][0]] = a[i];
    a = [];
    for (var k in b) a.push(b[k]);


    //画像タグ生成
    for (var i = 0; i < a.length; i++) {
        var md = document.createElement('div');
        var mi = document.createElement('img');
        var ms = document.createElement('span');
        var mt = document.createElement('span');

        md.classList.add('mi-md');
        mi.classList.add('mi-mi');
        ms.classList.add('mi-ms');
        mt.classList.add('mi-mt');

        mi.setAttribute('onerror', "this.parentNode.classList.add('mi-error')");
        mi.setAttribute('onclick', "window.scroll(0,document.getElementById('" + a[i][3] + "').getBoundingClientRect().top);");
        mi.setAttribute('onmouseenter', "document.getElementById('" + a[i][3] + "').classList.add('mi-onmouse')");
        mi.setAttribute('onmouseleave', "document.getElementById('" + a[i][3] + "').classList.remove('mi-onmouse')");
        mi.src = a[i][0];
        mi.width = (a[i][1] < 200) ? a[i][1] : 200;
        ms.innerText = a[i][1] + ' x ' + a[i][2];
        mt.innerText = a[i][0];

        var mm = c.appendChild(md);
        mm.appendChild(mi);
        mm.appendChild(ms);
        mm.appendChild(mt);
    }
})();

###今後の計画（備忘録を兼ねて）

• 抽出した画像にリンクを付与、クリックしたらその位置までアンカーリンク。→ 実装済み
• 重複画像の削除。 → 実装済み
• モーダルウィンドウ化 → 見送り
• 画像サイズを出力 → 実装済み
• 条件別にグループ分け → 見送り
• デッドリンクの抽出 → 実装済み
• 「閉じる」を付ける → 実装済み
• 重複する画像のアンカーとハイライト対応複数可 → 検討中

###バグ
ヘッダーにfixedを使ってるページでは表示崩れが起こすことがある。
アンカーリンクが挙動が不安定

###参考サイト
encodeURIするために利用
http://logic.moo.jp/data/filedir/438_1.html

JavaScript Compressor
http://javascriptcompressor.com