Adriveで適当に画像を見やすく
この前は、適当に今あるグリモンみたいなのをAdriveで改造して使ってしまえばとかいう話を書いてしまったけど、あれはなんだか微妙だったので、ちょっとはマシかと思う風にしてみた。あんまり改造とかだと怒られるといけないので今度は、一応自分で書くことに。@namespaceとかはなにを書いたらいいのかよく分からないので適当。基本的に機能は微妙。
■前の無理やりAdrive用にしたのと違う所
一応Adrive使う事を考慮して、あんまりアクセスしまくらないように。全部画像読み込んだら鯖も重くなりそうだったので、画像の読み込みのタイミングとかを変えたり。前の無理やり改造のだと何時までたってもページが開かないと言うか、ロードが終らないというか、そういう感じで、Adriveの転送速度の遅さが仇になる感じだったからその辺をイベントで動くようにしてみたり。コードはもっと賢いやり方もありそうだけど、よく分からないので適当。
あと、殆ど試してないので、色々問題ありそう。
■具体的になにをするか
ログインとかは危なそうなのはしないので、手動でAdriveに入ってもらって、画像のある場所に移動したら、赤い点線で囲まれたファイル名の場所にマウスを移動すると、画像を読み込む。マウスカーソルが赤い点線で囲まれてる所に乗ってる時は、適当に画面に合わせた程度の画像を表示する右の方に。
// ==UserScript== // @name AdriveImage // @namespace himadatanode // @description this script make Image in adrive // @include http://www.adrive.com/home* // ==/UserScript== //css setting var css = 'a.adrive-imageview {border: 1px dotted red;}' + 'a:hover img.adrive-imageview {' + 'display:inline;' + 'position:fixed;' + 'top: 0;' + 'right: 0;' + 'margin: 0;' + 'border: none;' + '} a img.adrive-imageview{ display:none }'; var ADriveStyle = document.createElement('style'); ADriveStyle.setAttribute('type','text/css'); ADriveStyle.innerHTML = css; document.getElementsByTagName('head')[0].appendChild(ADriveStyle); //add event listener var aElm = document.getElementsByTagName('a'); for (i=0; i<aElm.length; i++){ var link = aElm[i]; if ((link.href.match(/^http:\/\/www.adrive.com\/home\/downloadfile\/.*/)) && (link.innerHTML.match(/.*\.(jpe?g|gif|png)$/))){ link.setAttribute('class','adrive-imageview'); link.addEventListener('mouseover',showImage,true); } } //make image and show function showImage (){ if(document.getElementById(this.href)){ if(document.getElementById(this.href).style.display == 'none'){ document.getElementById(this.href).style.display = 'inline'; } }else{ //small img var sImg = document.createElement('img'); sImg.src = this.href; sImg.setAttribute('id',this.href); sImg.style.height = 120+'px'; this.parentNode.appendChild(sImg); sImg.addEventListener('click',invisibleImage,true); //large img var LImg = document.createElement('img'); LImg.src = this.href; LImg.setAttribute('class','adrive-imageview'); LImg.addEventListener('load',function(){ //onload var iw = LImg.width; var ih = LImg.height; var sw = window.innerWidth; var sh = window.innerHeight; if (sw/2 < iw && ih < iw){ LImg.style.width = sw/2 + 'px'; }else if (sh < ih){ LImg.style.height = sh + 'px'; } },true); this.appendChild(LImg); } } function invisibleImage(){ this.style.display = 'none'; }
こんなの書くとまたADriveが重くなるとか思われてる可能性もありそうだが、まあ、画像探すのに何度もアクセスするより一度アクセスした画像の一覧性を高める方が負荷をかけないんじゃないのかと言う、言い訳でその辺は適当になかったことに。