最終的には、スマホで起動出来るようにするのが目的ですが、一旦動作テスト用に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, "&").replace(/</g, "<").replace(/>/g, ">");
//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();
})();
Comments
Let's comment your feelings that are more than good