Home > 2008年11月

2008年11月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

ウェブページにある画像と背景画像を表示するブックマークレット (4)

Firefoxでは、Karafuto Blog: ウェブページにある画像と背景画像を表示するブックマークレット (3)を実行できなかったから、Firefoxでも動かせるようにしてみた。(IEでは動かない。)

ブックマークレットの内容はほとんどそのままだが、ウェブページにある画像と背景画像を表示するブックマークレット (3)では新しいウィンドウを開いていたのを、今回は同じウィンドウに画像を表示するようにした。

  • 表示する画像は、img要素の画像と CSSで指定された背景画像。
  • 画像をクリックした時、ページ上に画像をポップアップ表示。
  • ページの上でマウスホイールを回すか,を押せば、ポップアップした画像を換える。ホイールを向こう側に回すか(左)を押すと前の画像に、手前に回すか(右)を押すと後の画像に換える。
  • ページのどこかをクリックするかESCを押せば、ポップアップした画像を消す。

ウェブページにある画像と背景画像を表示するブックマークレット4

Amazonアソシエイトをはじめてみた

  • 2008-11-21 (Fri)
  • blog

アフィリエイトは今までも気にはなっていたが、どちらかというとサイトに広告が付いていると嫌だなあと思っていた。しかし、今回なんとなくアフィリエイトをはじめてみた。Amazon アソシエイトGoogle AdSenseのどちらにするか迷ったが、手軽にはじめられそうな Amazonにした。

Amazon アソシエイト・プログラムに昼頃申しこんでおいたら、申し込みサイトの審査完了のメールが夕方に届いていた。

Amazonのウィジェット(ブログパーツ)の中の Amazon おまかせリンク(R) ベータ版をブログの左サイドに貼ってみた。Amazon おまかせリンク(R)は、Amazonがページにあった商品を自動的に選んで表示するらしい。

貼り付ける HTMLコードのスクリプトが「&lt;!--//--&gt;」でコメントアウトされていた。このブログは XHTMLなので「//&lt;![CDATA[//]]&gt;」に一応換えておいた。(スクリプトは「<」や「&」を使ってないからコメントアウトしなくてもよかったか?)

ベータテストバージョンの期間は、条件指定に関わらず、まれにアダルトタイトルが表示されてしまう場合のあること。という文章をヘルプで見かけたので少し期待していた。そこまでおかしな商品はないけれど、「National ホームベーカリー 1斤タイプ ペールオレンジ SD-BM101-D」「竹中式マトリクス勉強法: 竹中 平蔵」が表示される。

Amazon おまかせリンク(R)の詳細設定でキーワードや商品カテゴリーの設定をしたほうがいいようだ。しかし、それだと商品のカテゴリーやキーワードに基づいて自動的に最新の人気商品を表示する Amazonライブリンクとあんまり変わらないしな。

ウェブページにある画像と背景画像を表示するブックマークレット (3)

ウェブページにある画像と背景画像を表示するブックマークレット3

ウェブページにある画像と背景画像を表示するブックマークレット3のポップアップ画像

Karafuto Blog: ウェブページにある画像と背景画像を表示するブックマークレット (2)をまた少し変えてみた。

ブックマークレットは、新しいウィンドウを開いて、画像を表示して並べる。表示する画像は、img要素の画像と CSSで指定された背景画像。

変更したところ

  • 一画面にすべての画像が収まるようにした。
  • 画像をクリックした時、ページ上に画像をポップアップ表示するようにしてみた。(ページ上に透明度のある div要素を被せて、その上に画像を表示する。)
  • ページの上でマウスホイールを回すか,を押せば、ポップアップした画像を換える。ホイールを向こう側に回すか(左)を押すと前の画像に、手前に回すか(右)を押すと後の画像に換える。
  • ページのどこかをクリックするかESCを押せば、ポップアップした画像を消す。

ウェブページにある画像と背景画像を表示するブックマークレット3

スクリプトが長くなったので、サイトからスクリプトを読みこんで実行している。

javascript:(function (){
    var script = document.createElement('script');
    script.type = 'text/javascript'; 
    script.charset = 'UTF-8';
    script.src = 'http://blog-imgs-41.fc2.com/k/a/r/karafuto50/bookmarklet_displayimages.js';
    document.body.appendChild(script);
})();
ブックマークレットで読みこんでいるファイル
http://blog-imgs-41.fc2.com/k/a/r/karafuto50/bookmarklet_displayimages.js

ちなみに、サイトからスクリプトを読み込まないで、コードをそのまま書いた下のブックマークレットを実行すると、画像が表示されるまでにかなり時間がかかる。ブックマークレットに8112文字も突っこんじゃダメだよな。

スクリプトをそのまま書いた Webページにある画像と背景画像を表示するブックマークレット3

* IE、Firefoxでは動きません。Operaしか確認してません。

追記: 2008年11月13日 ブックマークレットのウィンドウのタイトルに画像の数が表示されていなかったのを修正した。

ウェブページにある画像と背景画像を表示するブックマークレット (2)

ウェブページにある画像と背景画像を表示するブックマークレット2

Karafuto Blog: ウェブページにある画像と背景画像を表示するブックマークレット (1)の見た目を少し良くしてみた。

ブックマークレットは、新しいウィンドウを開いて、ウェブページの画像を表示して並べる。表示する画像は、img要素の画像と CSSで指定された背景画像。

変更したところ

  • 画像を一定のサイズで表示する。
  • 画像をクリックすると、ウィンドウに画像を開くようにリンクをつけた。
  • 1x1のサイズの画像、表示されない画像(スクリプトの中で取得できなかった画像)は表示しない。

ウェブページにある画像と背景画像を表示するブックマークレット2

ブックマークレットの内容

javascript:(function(column){

    // 横に並べる画像の数
    column = column ? column : 6;
    var pageImage = {
        column: column,
        newImages: []
    };
    getBoxSize();
    getImageUrl();
    getBackgroundImageUrl();
    removeOverlap();
    // 画像が見つからなかった時
    if (! pageImage.newImages.length){
        alert('\u753B\u50CF\u306F\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F');
        return;
    }
    createImage();
    createImageHTML();
    createHTML();
    openWindow();


    // 表示する画像のサイズを決める
    function getBoxSize(){
        pageImage.boxWidth = Math.floor( (window.innerWidth - 24 * pageImage.column - 55) / pageImage.column );
        pageImage.boxHeight = Math.ceil(pageImage.boxWidth / 4 * 3);
    }

    // 画像取得
    function getImageUrl(){
        var imgs = document.getElementsByTagName('img');
        if (imgs.length){
            for(var i = 0; i < imgs.length; i++){
                pageImage.newImages[i] = {};
                pageImage.newImages[i].src = imgs[i].src;
            }
        }
    }

    // 背景画像を取得
    function getBackgroundImageUrl(){
        var elm = document.getElementsByTagName('*');
        var backgroundImage, url, index;
        for (var i = 0; i < elm.length; i ++ ){
            backgroundImage = document.defaultView.getComputedStyle(elm[i], '').getPropertyValue('background-image');
            if (backgroundImage != 'none'){
                index = pageImage.newImages.length;
                url = backgroundImage.replace(/url\(\s*(['"]?)(.+)\1\s*\)/, '$2');
                pageImage.newImages[index] = {};
                pageImage.newImages[index].src = url;
            }
        }
    }

    // 重複を削除
    function removeOverlap(){
        var imgs = pageImage.newImages;
        for (var i = 0; i < imgs.length - 2; i ++ ){
            for (var j = imgs.length - 1; j > i; j -- ){
                if (imgs[i].src == imgs[j].src){
                    imgs.splice(j, 1);
                }
            }
        }
    }

    // 画像を作成
    function createImage(){
        var imgs = pageImage.newImages;
        var url;
        for (var i = 0; i < imgs.length ; i ++ ){
            url = pageImage.newImages[i].src;
            pageImage.newImages[i] = new Image();
            pageImage.newImages[i].src = url;
        }
    }

    // HTMLを作成
    function createHTML(){
        var boxSize = ' width: ' + pageImage.boxWidth + 'px; height: ' + pageImage.boxHeight + 'px;';
        var style = '<style>body{margin: 20px auto 20px 20px; padding: 0; background: #191919;} body.show{visibility: visible;} ul{margin: 0; padding: 0;} li{ border: 2px solid #303030; margin: 10px 10px 10px 10px; padding: 0; background: #303030; float: left;' + boxSize + ' overflow: hidden; text-align: center; list-style: none; cursor: pointer;} li:hover{border: 2px #c0c0c0 solid;} li:nth-last-child(1){margin-bottom: 30px;} a{margin: 0; padding: 0; display: block;' + boxSize + '}</style>';
        pageImage.HTML = '<html><head><title>images(' + pageImage.newImages.length + ') ' + document.title + '</title>' + style + '</head><body><p>' + pageImage.HTML + '</p></body></html>';
    }

    // 画像のリストの HTMLを作成
    function createImageHTML(){
        pageImage.HTML = '<ul>';
        var img, size, title, style, width, height, source;
        for (var i = 0; i < pageImage.newImages.length; i ++ ){
            width = pageImage.newImages[i].width;
            height = pageImage.newImages[i].height;
            source = pageImage.newImages[i].src ;
            // 1x1以下の画像は取り除く
            if ( width < 2 && height < 2){
                pageImage.newImages.splice(i, 1);
                i -- ;
                continue;
            }
            title = ' title="' + width + ',' + height + ' ' + source + '"';
            if ( width > pageImage.boxWidth || height > pageImage.boxHeight){
                if (width / pageImage.boxWidth > height / pageImage.boxHeight){
                    height = Math.floor(height * pageImage.boxWidth / width );
                    width = pageImage.boxWidth;
                } else {
                    width = Math.floor(width * pageImage.boxHeight / height );
                    height = pageImage.boxHeight;
                }
            }
            style = ' style="width: ' + width + 'px; height: ' + height + 'px;';
            if (height < pageImage.boxHeight){
                offsetY = Math.floor( (pageImage.boxHeight - height) / 2 );
                style += ' position: relative; top: ' + offsetY + 'px;';
            }
            style += '"';
            source = '"' + source + '"';
            pageImage.HTML += '<li><a href=' + source + title + '><img src=' + source + style + ' /></a></li>';
        }
        pageImage.HTML += '</ul>';
    }

    // 新しいウィンドウを表示
    function openWindow(){
        var win = pageImage.win = window.open();
        win.document.open();
        win.document.write(pageImage.HTML);
        win.document.close();
    }

})();

横に並べる画像の数の初期値は 6ですが、ブックマークレットの関数の引数に好きな数を入れれば画像の列数を変えられる。ブックマークレットの一番右の括弧に任意の数字を入れる。

横に並べる画像を10にしたいのならば、

javascript:(function(column){column...(コード)...close();}})(10);

10列にしたウェブページにある画像と背景画像を表示するブックマークレット2

ウェブページにある画像と背景画像を表示するブックマークレット (1)

ウェブページ上にある画像と背景画像を表示するブックマークレットを書いてみた。

新しいウィンドウを開いて、画像をそのままの大きさで表示して、並べるだけ。表示する画像は、img要素の画像と CSSで指定された背景画像。

ウェブページにある画像と背景画像を表示するブックマークレット1

ブックマークレットの内容

javascript:(function (){

    var imageList = getImages();
    getBackgroundImages(imageList);
    removeOverlap(imageList);
    // 画像が見つからなかった時
    if (! imageList.length){
        alert('\u753B\u50CF\u306F\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F');
        return;
    }
    openWindow(createHTML(imageList));

    // 画像取得
    function getImages(){
        var imgs = document.getElementsByTagName('img');
        var list = [];
        if (imgs.length){
            for(var i = 0; i < imgs.length; i++){
                var img = imgs[i];
                if (img.width == 0) continue;
                list.push({
                    src: img.src,
                    alt: img.alt
                });
            }
        }
        return list;
    }

    // 背景画像を取得
    function getBackgroundImages(imgs){
        var elm = document.getElementsByTagName('*');
        for (var i = 0; i < elm.length; i ++ ){
            var backgroundImage = document.defaultView.getComputedStyle(elm[i], '').getPropertyValue('background-image');
            if (backgroundImage != 'none'){
                var uri = backgroundImage.replace(/url\(\s*(['"]?)(.+)\1\s*\)/, '$2');
                imgs.push({src: uri, place: 'background'});
            }
        }
    }

    // 重複を削除
    function removeOverlap(imgs){
        for (var i = 0; i < imgs.length - 2; i ++ ){
            for (var j = imgs.length - 1; j > i; j -- ){
                if (imgs[i].src == imgs[j].src){
                    imgs.splice(j, 1);
                }
            }
        }
    }

    // HTMLを作成
    function createHTML(imgs){
        style = '<style>img{ margin: 4px; border: 1px silver solid;}</style>';
        var html = '<html><head><title>images(' +  imgs.length + ') ' + document.title + '</title>' + style + '</head><body><p>';
        html += createHTMLImage(imgs);
        html += '</p></body></html>';
        return html;
    }

    // 画像の HTMLを作成
    function createHTMLImage(imgs){
        var HTMLImage = '';
        for (var i = 0; i < imgs.length; i ++ ){
            var alt = imgs[i].alt ? '" alt="' + imgs[i].alt : '';
            var title = imgs[i].title ? '" title="' + imgs[i].title : '';
            HTMLImage += '<img src="' + imgs[i].src + alt + title + '" />';
        }
        return HTMLImage;
    }

    // 新しいウィンドウを表示
    function openWindow(html){
        win = window.open();
        win.document.open();
        win.document.write(html);
        win.document.close();
    }

})();

Home > 2008年11月

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。