Android や iPhone で見てるサイトの HTML ソースを表示してみよー！

手軽にスマートフォンから 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 のソースを表示させてみました。サクっと開いて見れます！リンクもちゃんとクリックできます！
これかなり便利じゃないですか〜？ｗ

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先頭のhttp://actyway.com/?の部分がブックマークレットと動作させるのに余計なので消去します。
そうするとjavascript:(function()%7Bvar…の内容だけ残りますよね？その状態で保存しなおしてください。

おまけ

ただ HTML ソース見たいだけならもっと簡単なのでいいんじゃない？って事で書いてみました！（ブラウザでブックマークレットが廃止されない限り使えると思います。）

javascript:(function(){
	var s=document.documentElement.outerHTML;
	s=s.replace(/</g,'&lt;');
	s=s.replace(/>/g,'&gt;');
	document.body.innerHTML='＜pre＞'+s+'＜/pre＞';
})();
// ※表示バグるのでpreタグの部分は全角＜＞にしてます。

適当すぎですよねｗｗ
スタイル指定したり viewport 変更しないと実用性ないかも！（汗）
一応使える様に置いておきます。

Android用（URLエンコード無し）

javascript:(function(){var s=document.documentElement.outerHTML;s=s.replace(/</g,'<');s=s.replace(/>/g,’>’);document.body.innerHTML=’</p> <pre>'+s+'</pre> <p>‘;})();

iPhone用（URLエンコード有り）