スマホでHTMLのソースコードを表示したいと思うことはないですか？気になったページがあるとついソースを開いてしまいたくなる人は結構多いはず。スマホのブラウザだと大抵ソースコードを表示する機能が存在しない。そこで今回紹介するのはスマホでも簡易的にHTMLソースコードを表示する方法です。

ブックマークレットを使う

ブックマークレットとは、スマホのブラウザ上で簡単なプログラムコードを実行する方法。普通ブックマークにはサイトのURLを登録しますが、ここにJavaScriptで書かれたプログラムを登録することができます。するとブックマークを呼び出す要領でこのプログラムを起動することができます。ブックマークレットの設定方法はここなんかがわかりやすいかも。

iPhoneで、ブックマークレットの登録の方法を動画で撮ってみた！

ソースコードを表示させるブックマークレット

さて、HTMLのソースを表示させるのにはこのブックマークレットを使います。いくつか試しましたが、なかでもおすすめなのが今回紹介する i-sourceview のもの。


ポイント その１
HTMLのタグを色分けしてくれます。これ特にこの小さな画面で見るのには外せないポイント。こんなかんじで表示されます。左端には行数まで表示してくれます。




ポイント その２
JS版と、サーバ版の２つのブックマークレットが用意されてます。JS版ではDOMに変換後のソースを取得できます。サーバ版では、DOMに書き換えられる前の元のソースが取得できます。ほとんどのHTMLソース表示のブックマークレットは、DOMに変換後のものを表示するものが多いので、サーバー版がおすすめ。僕は２つとも登録して用途に応じて使い分けております。

ブックマークレットの登録はこちらからどうぞ
http://i-sourceview.appspot.com/