[Javascript] 表示しているwebページのHTMLソースを取得する方法

2021年1月10日

Javascript テクノロジー

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を表示されます。 右側に表示されている「×」ボタンを押すと、ソースコード表示ウィンドウを閉じます。

注意点

もちろん、これは、パソコンでのブラウザには不要なので、スマートフォン用として使う事を目的にしています。 デバッグコンソールが無いスマートフォンは、ケーブルでパソコンに繋いで、コンソール表示をすることは可能ですが、 もっと手軽にいろいろなコンソール機能を実装したいと考えているweb開発者はたくさんいることでしょう。 今後はこのツールを利用して、エラー表示や、コンソール代わりのいろいろなデバッガ機能などを搭載していくことで、 web開発の効率化につながるのではないかと考えています。 ・・・でも! 実はURLアドレスでのjavascriptの実行は、昔はできたのですが、最近のスマホブラウザでは、禁止されてしまっていて、今回紹介した方法では実行できません。 webに設置した今回のjavascriptにアクセスするスクリプトタグをwebページ内に記述するしかなさそうです・・・orz なんとももどかしい感じですが、スマホ用のアプリ連携プラグインにするか、専用アプリを作るという手もありますが、 あまりにも作業コストが大きいので、今回はこの辺で終わりにしたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。