WEBエンジニアの、弓削田です。
パソコンでGoogleChromeを使って開発作業をしていると、デバッグコンソールを便利に使えるんですが、スマートフォンでは全く便利に使えません。
ついでにいうと、最近のPCブラウザは、safariでも、firefoxでもoperaでも、Edgeでも、似たようなjavascriptコンソール機能が備わっているのに
スマホブラウザには一切そんな機能はありません。
web開発用のスマホアプリで、機能が搭載されたブラウザアプリというのは、ありそうですが、
少し探してもなかなかコレ！というのに出会えませんでした。
という事で、「無ければ自分で作ってしまえ」というのが自分のコンセプトと言うこともあり、
web開発者の人専用の見ているwebページのソースコードを読み込んで表示される機能を作ってみたいと思います。
webページのソースコードの取得方法
まずは、htmlソースを取得するところから始めます。 JavaScript でそのページのソースを取得したい このページに解説されていたので、参考にさせてもらいました。 簡単に考えると、innerHTMLで取得できそうに考えられますが、document.documentElement.outerHTML
これで、htmlタグは取得できますが、Doctypeの取得ができません。
doctypeのでーたは、document.doctypeで取得できるんですが、ソースコードの取得は一筋縄ではいかないようです。
そして、上記ページでは、以下のようにして、ページソースの取得を実現していました。
document.doctype.valueOf() + "\n" + document.documentElement.outerHTML
でも、ブラウザのバージョンのせいなのか、2020年1月現在、この方法でやっても"document.doctype.valueOf()"は、"[object DocumentType]"となってしまい、
正常に文字列として取得ができません。
そこで、仕方がないので、doctypeを取得する関数を作ってみました。
function get_doctype(){
let doctype = "";
if(document.doctype){
doctype += "<!DOCTYPE HTML";
if(document.doctype.publicId){
doctype += ' PUBLIC "'+document.doctype.publicId+'"';
}
if(document.doctype.systemId){
doctype += ' "'+document.doctype.systemId+'"';
}
doctype += ">";
}
return doctype;
}
"console.log(get_doctype());"と実行すると、そのページのdoctypeを取得するようにしています。
doctypeが記載されていない場合は、ブランクが返ってきます。
これを使って、次のようにすることで、HTMLソースを取得できました。
get_doctype() + "\n" + document.documentElement.outerHTML
開発員だけが使えるツール
次に、上記で取得したHTMLソースをwebページ内で表示できるように、便利ツールに仕立て上げたいと思います。 出来上がったソースコードは以下の通りです。(function(){
let __options = {
name : "page_source"
};
let MAIN = function(){
switch(document.readyState){
case "complete":
this.start();
break;
case "interactive":
window.addEventListener("DOMContentLoaded",(function(){this.start()}).bind(this));
break;
default:
window.addEventListener("load",(function(){this.start()}).bind(this));
break;
}
};
MAIN.prototype.start = function(){
if(!this.get_path()){return}
this.set_module();
this.set_button();
};
MAIN.prototype.get_path = function(){
let scripts = document.getElementsByTagName("script");
let reg = new RegExp("^(.*?/)"+ __options.name +"\.js(.*?)$" , "i");
for(let i=0; i<scripts.length; i++){
if(!scripts[i].src){continue;}
if(scripts[i].getAttribute("src").match(reg)){
this.base_elm = scripts[i];
this.base_dir = RegExp.$1;
this.base_path = RegExp.$1 + __options.name;
this.base_query = RegExp.$2;
return true;
}
}
return false;
};
MAIN.prototype.set_module = function(){
let css = document.createElement("link");
css.rel = "stylesheet";
css.href = this.base_path +".css"+ this.base_query;
this.base_elm.parentNode.insertBefore(css , this.base_elm);
};
MAIN.prototype.set_button = function(){
let btn = document.createElement("div");
btn.className = "page-source-tool";
btn.addEventListener("click" , (function(){this.view_source()}).bind(this));
document.body.appendChild(btn);
};
MAIN.prototype.get_source = function(){
return this.get_doctype() +"\n"+ this.get_html();
};
MAIN.prototype.get_doctype = function(){
let doctype = "";
if(document.doctype){
doctype += "<!DOCTYPE HTML";
if(document.doctype.publicId){
doctype += ' PUBLIC "'+document.doctype.publicId+'"';
}
if(document.doctype.systemId){
doctype += ' "'+document.doctype.systemId+'"';
}
doctype += ">";
}
return doctype;
};
MAIN.prototype.get_html = function(){
return document.documentElement.outerHTML;
};
MAIN.prototype.view_source = function(){
let source = this.get_source();
let div = document.createElement("div");
div.className = "page-source-area";
div.textContent = source;
document.body.appendChild(div);
let close_btn = document.createElement("div");
close_btn.className = "page-source-close";
close_btn.addEventListener("click" , (function(){this.close()}).bind(this));
document.body.appendChild(close_btn);
document.body.style.setProperty("overflow" , "hidden" , "");
};
MAIN.prototype.close = function(){
let area = document.querySelector(".page-source-area");
if(area){
area.parentNode.removeChild(area);
}
let close = document.querySelector(".page-source-close");
if(close){
close.parentNode.removeChild(close);
}
document.body.style.setProperty("overflow","auto","");
};
new MAIN();
})();
html,body{
height:100%;
}
.page-source-tool{
position:fixed;
bottom:20px;
right:20px;
background-color:white;
width:30px;
height:30px;
border:1px solid black;
line-height:28px;
text-align:center;
border-radius:50%;
cursor:pointer;
z-index:900;
}
.page-source-tool:before{
content:"表示";
font-size:10px;
}
.page-source-tool:hover{
opacity:0.5;
}
.page-source-area{
position:fixed;
top:10px;
left:10px;
width : calc(100% - 42px);
height : calc(100% - 42px);
background-color:white;
border:1px solid black;
padding:10px;
overflow:auto;
white-space:pre-wrap;
word-break:break-all;
z-index:1000;
}
.page-source-close{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
border:1px solid black;
background-color:white;
box-shadow:2px 2px 8px rgba(0,0,0,0.5);
border-radius:50%;
padding:0;
margin:0;
cursor:pointer;
z-index:1100;
}
.page-source-close:before{
content:"";
position:absolute;
top:50%;
left:10%;
display:block;
width:80%;
height:1px;
background-color:black;
transform:rotate(45deg);
transform-origin:center;
margin:0 auto;
}
.page-source-close:after{
content:"";
position:absolute;
top:50%;
left:10%;
display:block;
width:80%;
height:1px;
background-color:black;
transform:rotate(-45deg);
transform-origin:center;
margin:0 auto;
}
.page-source-close:hover{
opacity:0.5;
}
これを適当なサーバーに設置して、ブラウザのURLアドレス欄に以下のコマンドを入力してアクセスしたら、
起動コマンド
javascript:var s=document.createElement("script");s.src="//設置したサーバーアドレス/page_source.js";document.body.appendChild(s);
ページの画面右下に「表示」というアイコンが現れます。
それをクリックすると、画面のHTMLを表示されます。
右側に表示されている「×」ボタンを押すと、ソースコード表示ウィンドウを閉じます。
