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

Android で HTML ソース!
手軽にスマートフォンから HTML ソース確認したい時ってありますよね?

スマートフォンで HTML ソースチェック!

見れないみれないー!
Safari や Android の標準のブラウザからだと HTML ソースって見れないですよね?どうしてソース表示する機能ないんでしょうね?謎でーす!

少し前に MOONGIFT さんの iPad、iPhoneで今見ているWebサイトのHTMLソースを閲覧する「View source」 って記事を知りまして早速 Android から試したところ使えたのでご紹介したいと思いまーす!

View source

View source on the iPad and iPhone | Ole Michelsen

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

View source on the iPad and iPhone | Ole Michelsen

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

View source on Android

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

View source の登録方法!

Android でブックマークレットの登録

ブックマークレットなので「Android 標準ブラウザ」や「iPhone の Safari」のブックマークに登録して使ってみてください!
もちろん他のブラウザアプリからも使えると思います。

下記のjavascript:…のコードを全部選択してコピー(Android から)します。適当なサイトをブックマークして URL の項目にペーストして保存しなおします。あとはお好きなサイトで使うのみ!!(※実行結果は新しいウィンドウまたはタブで開かれます。気付きにくい場合があるので注意!

Android用(URLエンコード無し)

ブックマークレットの登録方法が分からない場合は、ソーシャルてんこ盛りのスマホ版ブックマークレットを作りましたー!「Android での登録方法!」の項を参考にしてみてください。

iPhone用(URLエンコード有り)

このリンク先URLを一旦ブックマークしてください。
次に今登録したブックマークを編集してください。URL先頭のhttp://actyway.com/?の部分がブックマークレットと動作させるのに余計なので消去します。
そうするとjavascript:(function()%7Bvar…の内容だけ残りますよね?その状態で保存しなおしてください。

おまけ

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

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

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

Android用(URLエンコード無し)

iPhone用(URLエンコード有り)

このリンク先URLを一旦ブックマークしてください。
次に今登録したブックマークを編集してください。URL先頭のhttp://actyway.com/?の部分がブックマークレットと動作させるのに余計なので消去します。
そうするとjavascript:(function()%7Bvar…の内容だけ残りますよね?その状態で保存しなおしてください。

その他の方法

この記事書いてからかなり時間経過してるので、他の方法も調べて追記してみました。

スマホサイトのHTMLソースを見る4つの方法 | webMemorand
パソコンの Chrome から拡張機能を使って見る方法や、使える環境だと一番簡単そうな「view-source:」を用いた方法、その他アプリでの方法が紹介されています。

アプリは確実に見れる手段なので1つは入れておいたら良いと思います。Gogle Play や App Store で「HTML Source Code」等で検索すると HTML ソースの見れるブラウザやビューアーが沢山見つかるので試してみてください。