手軽にスマートフォンから HTML ソース確認したい時ってありますよね?
スマートフォンで HTML ソースチェック!
見れないみれないー!
Safari や Android の標準のブラウザからだと HTML ソースって見れないですよね?どうしてソース表示する機能ないんでしょうね?謎でーす!
少し前に MOONGIFT さんの iPad、iPhoneで今見ているWebサイトのHTMLソースを閲覧する「View source」 って記事を知りまして早速 Android から試したところ使えたのでご紹介したいと思いまーす!
View source

Ole Michelsen で公開されている View source on the iPad and iPhone のブックマークレットをスマホから使えば今見てるサイトの HTML ソースが見れるみたいです。

ブックマークレットは、新しいウィンドウを開いてフォームを追加して今見てるサイトの HTML ソースをhttp://ole.michelsen.dk/viewsource/にデータを送って整形表示してる感じでしょうか。
サーバーサイドプログラムで処理してるのかな?

実際に Android の標準ブラウザから actyway.com のソースを表示させてみました。サクっと開いて見れます!リンクもちゃんとクリックできます!
これかなり便利じゃないですか〜?w
View source の登録方法!

ブックマークレットなので「Android 標準ブラウザ」や「iPhone の Safari」のブックマークに登録して使ってみてください!
もちろん他のブラウザアプリからも使えると思います。
下記のjavascript:…のコードを全部選択してコピー(Android から)します。適当なサイトをブックマークして URL の項目にペーストして保存しなおします。あとはお好きなサイトで使うのみ!!(※実行結果は新しいウィンドウまたはタブで開かれます。気付きにくい場合があるので注意!)
Android用(URLエンコード無し)
javascript:(function(){var w = window.open('about:blank'),s = w.document;s.write('');s.close();var f = s.body.appendChild(s.createElement('form'));f.setAttribute('method','post');f.setAttribute('action','http://ole.michelsen.dk/viewsource/?uri='+location.href);var i = f.appendChild(s.createElement('input'));i.setAttribute('type','hidden');i.setAttribute('name','DOM');i.setAttribute('value',encodeURIComponent(document.documentElement.outerHTML));f.submit();})();
ブックマークレットの登録方法が分からない場合は、ソーシャルてんこ盛りのスマホ版ブックマークレットを作りましたー! の「Android での登録方法!」の項を参考にしてみてください。
iPhone用(URLエンコード有り)
このリンク先URLを一旦ブックマークしてください。
次に今登録したブックマークを編集してください。URL先頭のhttps://actyway.com/?の部分がブックマークレットと動作させるのに余計なので消去します。
そうするとjavascript:(function()%7Bvar…の内容だけ残りますよね?その状態で保存しなおしてください。
おまけ
ただ HTML ソース見たいだけならもっと簡単なのでいいんじゃない?って事で書いてみました!(ブラウザでブックマークレットが廃止されない限り使えると思います。)
javascript:(function(){
var s=document.documentElement.outerHTML;
s=s.replace(/</g,'<');
s=s.replace(/>/g,'>');
document.body.innerHTML='<pre>'+s+'</pre>';
})();
適当すぎですよねww
スタイル指定したり viewport 変更しないと実用性ないかも!(汗)
一応使える様に置いておきます。
Android用(URLエンコード無し)
javascript:(function(){var s=document.documentElement.outerHTML;s=s.replace(/</g,'<');s=s.replace(/>/g,'>');document.body.innerHTML='<pre>'+s+'</pre>';})();
iPhone用(URLエンコード有り)
このリンク先URLを一旦ブックマークしてください。
次に今登録したブックマークを編集してください。URL先頭のhttps://actyway.com/?の部分がブックマークレットと動作させるのに余計なので消去します。
そうするとjavascript:(function()%7Bvar…の内容だけ残りますよね?その状態で保存しなおしてください。
その他の方法
この記事書いてからかなり時間経過してるので、他の方法も調べて追記してみました。
スマホサイトのHTMLソースを見る4つの方法 | webMemorand
パソコンの Chrome から拡張機能を使って見る方法や、使える環境だと一番簡単そうな「view-source:」を用いた方法、その他アプリでの方法が紹介されています。
アプリは確実に見れる手段なので1つは入れておいたら良いと思います。Gogle Play や App Store で「HTML Source Code」等で検索すると HTML ソースの見れるブラウザやビューアーが沢山見つかるので試してみてください。