仕事用：表示されているページのQRコードを生成するブックマークレット

スマートフォンでの表示確認を楽にするため、Google Charts APIを使って、QRコード生成ブックマークレットを作成しました。

主な機能

• 現在表示されているページのURLをQRコード生成します。
• Google APIを使用しているため、ローカル環境では動作しません。
• Google APIのQRコード生成は今後廃止予定のため、いつ使えなくなるかわかりません。
• 生成されたQRコードはイメージファイルなので、画像保存することが出来ます。
• 「閉じる」機能が未実装のため、表示を消すにはリロードしてください。

COMPRESS&encodeURI済みソース

javascript:(function()%7Bvar%20a=%5B%5D;var%20d=document;var%20b=d.getElementsByTagName('body')%5B0%5D;var%20l=location.href;var%20qw=300;var%20qh=300;var%20u=%22https://chart.googleapis.com/chart?chs=%22+qw+%22x%22+qw+%22&cht=qr&chl=%22;var%20flag=true;var%20css='.qc-tools%20%7B%7D'+'.qc-scope%20%7B%20position:relative;%20%7D'+'.qc-scope:hover%20img%20%7B%20opacity:1%20!important;%20display:block%20!important%7D'+'.qc-href%20%7B%20position:%20absolute;%20z-index:%20999997%20!important;%20background:none%20!important;%20width:100%25;%20height:100%25;%20border:%200;%20margin:0;%20padding:0;%20float:none;%20box-sizing:border-box%7D'+'.qc-this%20%7B%20position:%20fixed;%20z-index:%20999999%20!important;%20background:none%20!important;%20border:%200;%20margin:0;%20padding:0;%20float:none;%20box-sizing:border-box%7D'+'.qc-this%20%7B%20bottom:10px%20!important;%20right:10px%20!important;%20%7D'+'.qc-href%20.qc-qr%7B%20position:%20fixed;%20display:none%20!important;%20top:10px%20!important;%20left:10px%20!important;%20z-index:%20999998%20!important;%7D'+'.qc-href:hover%20.qc-qr%7B%20z-index:%20999999%20!important;%20display:block%20!important;%7D'+'.qc-href%20.qc-qr,%20.qc-this%20.qc-qr%7B%20max-width:%20'+(qw+10)+'px;%20max-height:%20'+(qh+10)+'px;%20width:%20'+(qw+10)+'px;%20height:%20'+(qh+10)+'px;%20border:%205px%20solid%20#de4040;%20box-sizing:border-box%7D'+'.qc-href%20.qc-qr%20img,%20.qc-this%20.qc-qr%20img%7B%20max-width:%20'+qw+'px;%20max-height:%20'+qh+'px;%20opacity:%201;%20display:block;%7D';initQC();function%20initQC()%7BinitNode(%22qc-tools%22)%7Dfunction%20initNode(target)%7Bvar%20f=d.getElementsByClassName(target);if(f.length%3E0)%7Bconsole.log(%22Used%20%3E%3E%3E%20%22+target+%22%20%5B%22+f.length+%22%5D%22);for(var%20i=0;i%3Cf.length;i++)%7Bconsole.log(%22Used%20%3E%3E%3E%20Removed%20%20%5B%22+f%5Bi%5D+%22%5D%22);f%5Bi%5D.parentNode.removeChild(f%5Bi%5D)%7D%7D%7Dif(flag==true)%7Bvar%20s=d.createElement('style');s.classList.add(%22qc-tools%22);s.innerHTML=css;b.appendChild(s);var%20dc=d.createElement('aside');var%20ds=d.createElement('figure');var%20dimg=d.createElement('img');var%20durl=u+encodeURIComponent(l);dimg.setAttribute('src',durl);dc.classList.add(%22qc-this%22);ds.classList.add(%22qc-qr%22);ds.appendChild(dimg);dc.appendChild(ds);b.appendChild(dc)%7D%7D)();

展開ソース

javascript: (function() {
    var a = [];
    var d = document;
    var b = d.getElementsByTagName('body')[0];

    var l  =location.href;
    var qw =300;
    var qh =300;
    var u  ="https://chart.googleapis.com/chart?chs="+qw+"x"+qw+"&cht=qr&chl=";

    var flag=true;

    //固有接頭語「qc」
    var css = '.qc-tools {}' +
        '.qc-scope { position:relative; }' +
        '.qc-scope:hover img { opacity:1 !important; display:block !important}' +
        '.qc-href { position: absolute; z-index: 999997 !important; background:none !important; width:100%; height:100%; border: 0; margin:0; padding:0; float:none; box-sizing:border-box}' +
        '.qc-this { position: fixed; z-index: 999999 !important; background:none !important; border: 0; margin:0; padding:0; float:none; box-sizing:border-box}' +
        '.qc-this { bottom:10px !important; right:10px !important; }' +
        '.qc-href .qc-qr{ position: fixed; display:none !important; top:10px !important; left:10px !important; z-index: 999998 !important;}'+
        '.qc-href:hover .qc-qr{ z-index: 999999 !important; display:block !important;}'+
        '.qc-href .qc-qr, .qc-this .qc-qr{ max-width: '+(qw+10)+'px; max-height: '+(qh+10)+'px; width: '+(qw+10)+'px; height: '+(qh+10)+'px; border: 5px solid #de4040; box-sizing:border-box}'+
        '.qc-href .qc-qr img, .qc-this .qc-qr img{ max-width: '+qw+'px; max-height: '+qh+'px; opacity: 1; display:block;}';

    //初期化
    initQC(); 
    function initQC(){
        initNode("qc-tools");
    }
    function initNode(target){
        var f=d.getElementsByClassName(target);
        if(f.length > 0){
            console.log("Used >>> "+target+" ["+f.length+"]");
            for (var i = 0; i < f.length; i++) {
                console.log("Used >>> Removed  ["+f[i]+"]");
                f[i].parentNode.removeChild(f[i]);
            }
        }
    }

    if(flag==true){
        //Style設置
        var s = d.createElement('style');
        s.classList.add("qc-tools");
        s.innerHTML = css;
        b.appendChild(s);

        var dc = d.createElement('aside');
        var ds = d.createElement('figure');
        var dimg = d.createElement('img');
        var durl = u+encodeURIComponent(l);
        dimg.setAttribute('src',durl);
        dc.classList.add("qc-this");
        ds.classList.add("qc-qr");
        ds.appendChild(dimg);
        dc.appendChild(ds);
        b.appendChild(dc);
    }
})();

参考サイト

Google Charts API （QR Codes）
https://developers.google.com/chart/infographics/docs/qr_codes