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