見ているページのURL、もしくはページ内で選択している文字列のQRコードを生成し、画面上に表示する。

QRGenerator.js

/* ===========================
    Author  : wg.koro
    Version : 1.1
    URL     : https://gist.github.com/wgkoro/7973374
    Blog    : https://zafiel.wingall.com/archives/8396

    QRコード生成ブックマークレット。
    見ているページのURL、あるいは選択した文字列のQRコードを生成する。
    ブックマークレットにして実行するとハッピー。
============================== */
(function(){
    var api = 'https://chart.apis.google.com/chart?chs=300x300&cht=qr&chl=%s';
    var url = document.location.toString();

    var util    = {
        addEvent    : function(obj, type, func){
            if(obj.addEventListener){
                obj.addEventListener(type, func, false);
                return;
            }

            if(obj.attachEvent){
                var on_event    = 'on' +type;
                obj.attachEvent(on_event, func);
            }
        },
        makeBlankElem : function(elem){
            while(elem.childNodes.length >= 1){
                elem.removeChild(elem.firstChild);
            }
        }
    };

    var qrRegenerate    = function(){
        var img     = document.getElementById('az_qr');
        img.style.visibility   = 'hidden';
        img.src     = dom.createQRImageSrc();

        var textarea    = document.getElementById('az_qr_texarea');
        util.makeBlankElem(textarea);
        textarea.appendChild(document.createTextNode(dom.strings));

        setTimeout(function(){
            img.style.visibility   = 'visible';
        }, 200);
    };

    var buttons = {
        generate    : null,
        close       : null
    };

    var dom = {
        box_created     : false,
        create  : function(){
            if(document.getElementById('az_qr_box')){
                this.box_created = false;

                qrRegenerate();
                document.getElementById('az_qr_box').style.display  = 'block';

                this.box_created = true;
                return;
            }

            this.createBase();
            this.createContents();
            util.addEvent(window, 'unload', function(){
                buttons = null;
            });
        },

        createBase  : function(){
            var base    = document.createElement('div');
            base.id     = 'az_qr_box';
            base.style.position = 'fixed';
            base.style.top  = '5px';
            base.style.right    = '5px';
            base.style.width    = '350px';
            base.style.height   = '480px';
            base.style.textAlign = 'center';
            base.style.zIndex = '9999';
            base.style.backgroundColor = '#fff';
            base.style.border = '1px solid #999';
            base.style.lineHeight = '150%';

            document.body.appendChild(base);
            this.div    = base;
        },

        createQRImageSrc   : function(){
            var strings     = document.title +' ' +url;
            var selected    = null;
            var textarea    = document.getElementById('az_qr_texarea');
            if(document.getSelection()){
                selected    = document.getSelection().toString();
            }

            if(textarea && this.box_created){
                selected    = textarea.value;
            }

            if(selected){
                strings = selected;
            }

            this.strings    = strings;
            return api.replace('%s', encodeURIComponent(strings));
        },

        createContents  : function(){
            if(! this.div){return}

            var img = document.createElement('img');
            img.width   = 300;
            img.height  = 300;
            img.src     = this.createQRImageSrc();
            img.style.margin    = '5px';
            img.id      = 'az_qr';

            this.div.appendChild(img);
            this.div.appendChild(document.createElement('br'));

            var textarea    = document.createElement('textarea');
            textarea.style.width    = '300px';
            textarea.style.height   = '50px';
            textarea.style.color    = '#000';
            textarea.style.fontSize    = '11px';
            textarea.id     = 'az_qr_texarea';
            textarea.appendChild(document.createTextNode(this.strings));

            this.div.appendChild(textarea);
            this.createButton();

            this.qr_image       = img;
            this.box_created    = true;
        },

        createButton    : function(){
            buttons.generate  = document.createElement('button');
            buttons.generate.appendChild(document.createTextNode('テキストエリア内の文字でQR再作成'))

            buttons.close   = document.createElement('button');
            buttons.close.appendChild(document.createTextNode('閉じる'))

            this.div.appendChild(document.createElement('br'));
            this.div.appendChild(buttons.generate);
            this.div.appendChild(document.createElement('br'));
            this.div.appendChild(buttons.close);

            var _self   = this;
            util.addEvent(buttons.close, 'click', function(){
                _self.div.style.display = 'none';
            })
            util.addEvent(buttons.generate, 'click', function(){
                qrRegenerate();
            });

            this.createLink();
        },

        createLink  : function(){
            var a   = document.createElement('a');
            a.style.fontSize    = '11px';
            a.appendChild(document.createTextNode('なかのひと(ブログ)'));
            a.href  = 'http://zafiel.wingall.com/archives/8396';
            a.target    = '_blank';

            this.div.appendChild(document.createElement('br'));
            this.div.appendChild(a);
        }
    };

    dom.create();
})();