Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

仕事用:表示しているサイトのソースを出力するブックマークレット

Last updated at Posted at 2016-04-22

最終的には、スマホで起動出来るようにするのが目的ですが、一旦動作テスト用にiframe版で作成。スマホ向けの調整中。

##ブックマークレットコピー用

source_viewer.js(COMPRESSED)
javascript:(function()%7Bvar%20d=document;var%20c=d.charset%7C%7C0;var%20i=0;var%20o=d.documentElement;var%20b=d.getElementsByTagName('body')%5B0%5D;var%20css='.sv-start%7Bpadding-bottom:50px;%7D'+'.sv-vw%7Bposition:fixed;%20z-index:5999999999;%20bottom:0;%20width:100vw;%20font-size:0;%20border-right:%201px%20solid%20#bbb;%20background-color:#efefef;%20box-shadow:0px%2015px%2010px%20-10px%20%20rgba(0,0,0,0.3);%20transition:%20.5s%7D'+'.sv-open%20.sv-vw%7B%7D'+'.sv-if%7Bwidth:100vw;%20height:0;%7D'+'.sv-open%20.sv-if%7Bheight:50vh;%7D'+'.sv-if%20body%7Bmargin:0;%20padding:0;%7D'+'.sv-cl%7Bdisplay:block;%20position:relative;%20height:50px;%20background-color:%20#456;%20color:%20#fff;%20border-radius:%208px%208px%200%200;%7D'+'.sv-open%20.sv-cl%7B%7D'+'#sv-icon%7Bdisplay:%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'+'#sv-icon:before%20,%20#sv-icon:after%7Bdisplay:%20block;%20content:%20%22%22;%20position:%20absolute;%20top:%2050%25;%20left:%200;%20width:%2020px;%20height:%204px;%20background:%20#fff;%20transition:%20.3s%7D'+'#sv-icon:before%7Bmargin-top:%20-11px%7D'+'#sv-icon:after%7Bmargin-top:%207px%7D'+'.sv-open%20#sv-icon%7Bbackground:%20transparent%7D'+'.sv-open%20#sv-icon:before,.sv-open%20#sv-icon:after%7Bmargin-top:%200%7D'+'.sv-open%20#sv-icon:before%7Btransform:rotate(-45deg)%7D'+'.sv-open%20#sv-icon:after%7Btransform:rotate(-135deg)%7D';b.classList.add('sv-start');b.classList.add('sv-open');var%20f=d.getElementsByClassName('sv-vw');if(f.length%3E0)%7Bfor(var%20i=0;i%3Cf.length;i++)%7Bif(f%5Bi%5D.parentNode)%7Bf%5Bi%5D.parentNode.removeChild(f%5Bi%5D)%7D%7D%7Delse%7Bvar%20s=d.createElement('style');s.innerHTML=css;b.appendChild(s)%7Dvar%20view_wrap=d.createElement('div');var%20view_inner=d.createElement('div');view_wrap.classList.add('sv-vw');b.appendChild(view_wrap);var%20close=d.createElement('div');close.classList.add('sv-cl');close.setAttribute('onclick',%22var%20e=document.getElementsByTagName('body')%5B0%5D;%20e.classList.toggle('sv-open')%22);close.innerHTML=%22%3Cdiv%20id='sv-icon'%3E%3C/div%3E%22;view_wrap.appendChild(close);var%20print_code=(o.outerHTML%7C%7Co.innerHTML).replace(/&/g,%22&%22).replace(/%3C/g,%22<%22).replace(/%3E/g,%22>%22);var%20iframe=document.createElement('iframe');iframe.classList.add('sv-if');view_wrap.appendChild(iframe);var%20inHTML_head='%3Chtml%3E'+'%3Chead%3E'+%22%3Clink%20rel='stylesheet'%20href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css'%3E%22+%22%3Cscript%20src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js'%3E%3C/script%3E%22+%22%3Cscript%3Ehljs.initHighlightingOnLoad()%3C/script%3E%22+'%3C/head%3E';var%20inHTML_body=%22%3Cbody%3E%22+%22%3Cpre%3E%22+%22%3Ccode%20class='html'%3E%22+print_code+%22%3C/code%3E%22+%22%3C/pre%3E%22+%22%3C/body%3E%22;var%20inHTML=inHTML_head+inHTML_body;var%20iframe_doc=iframe.contentWindow.document;iframe_doc.open();iframe_doc.write(inHTML);iframe_doc.close()%7D)();

##展開ソース

source_viewer.js(UNCOMPRESSED)
javascript: (function() {
    var d = document;
    var c = d.charset || 0;
    var i = 0;
    var o = d.documentElement;
    var b = d.getElementsByTagName('body')[0];

    //CSS
    var css = '.sv-start{padding-bottom:50px;}' +
        '.sv-vw{position:fixed; z-index:5999999999; bottom:0; width:100vw; font-size:0; border-right: 1px solid #bbb; background-color:#efefef; box-shadow:0px 15px 10px -10px  rgba(0,0,0,0.3); transition: .5s}' +
        '.sv-open .sv-vw{}' +
        '.sv-if{width:100vw; height:0;}' +
        '.sv-open .sv-if{height:50vh;}' +
        '.sv-if body{margin:0; padding:0;}' +
        '.sv-cl{display:block; position:relative; height:50px; background-color: #456; color: #fff; border-radius: 8px 8px 0 0;}' +
        '.sv-open .sv-cl{}' +
        '#sv-icon{display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; margin: -4px 0 0 -11px; background: #fff; transition: .2s}' +
        '#sv-icon:before , #sv-icon:after{display: block; content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 4px; background: #fff; transition: .3s}' +
        '#sv-icon:before{margin-top: -11px}' +
        '#sv-icon:after{margin-top: 7px}' +
        '.sv-open #sv-icon{background: transparent}' +
        '.sv-open #sv-icon:before,.sv-open #sv-icon:after{margin-top: 0}' +
        '.sv-open #sv-icon:before{transform:rotate(-45deg)}' +
        '.sv-open #sv-icon:after{transform:rotate(-135deg)}';

    //起動フラグ
    b.classList.add('sv-start');
    b.classList.add('sv-open');


    //既に表示している場合、一度削除する。
    var f = d.getElementsByClassName('sv-vw');

    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 = d.createElement('style');
        s.innerHTML = css;
        b.appendChild(s);
    }


    //ソース出力先の生成
    var view_wrap = d.createElement('div');
    var view_inner = d.createElement('div');
    view_wrap.classList.add('sv-vw');
    b.appendChild(view_wrap);

    //開閉ボタンの作成
    var close = d.createElement('div');
    close.classList.add('sv-cl');
    close.setAttribute('onclick', "var e=document.getElementsByTagName('body')[0]; e.classList.toggle('sv-open')");
    close.innerHTML = "<div id='sv-icon'></div>";
    view_wrap.appendChild(close);

    var print_code = (o.outerHTML || o.innerHTML).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    //var print_code = o.outerHTML;

    //ソース書き出し用iframe
    var iframe = document.createElement('iframe');
    iframe.classList.add('sv-if');
    view_wrap.appendChild(iframe);

    //ソースの書き込み
    var inHTML_head = '<html>' +
        '<head>' +
        "<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css'>" +
        "<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js'></script>" +
        "<script>hljs.initHighlightingOnLoad()</script>" +
        '</head>';

    var inHTML_body = "<body>" +
        "<pre>" +
        "<code class='html'>" +
        print_code +
        "</code>" +
        "</pre>" +
        "</body>";

    var inHTML = inHTML_head + inHTML_body;

    var iframe_doc = iframe.contentWindow.document;

    iframe_doc.open();
    iframe_doc.write(inHTML);
    iframe_doc.close();

})();
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?