iPhoneでWEBサイトのhtmlを表示する方法が見つかった、有料アプリでなく標準ブラウザのサファリでhtml表示できるのがいい

この記事は約3分で読めます。

スマホでhtml表示スマホでWEBサイト(ホームページ)を閲覧していると、htmlソースを見たくなるときがある。パソコンだと「ソース表示」をするのは簡単だが、スマホだと標準でその機能がない。有料アプリでhtml表示ができるブラウザがあるが、わざわざブラウザを切り替えることはしたくない。アンドロイドならURL部分の前に「view-source:」をつければソース表示ができるらしいが、iPhoneではできなかった。いろいろ調べた結果、iPhoneならこの方法がもっともスマートなhtml表示だろう。
iPhoneでhtmlソースを見る手順は、サファリでWEBサイトを表示し、そのWEBサイトのhtmlを見たい場合はブックマークから「HTML表示」を選ぶ。これでhtmlソースが表示されるようになった。この手順や設定方法は以下のとおり。

iPhoneでhtmlを表示させる手順

サファリで見たいページを開き、ブックマークをタップする。ブックマーク一覧から「HTML表示」をタップする。昨日の記事をhtml表示してみた。

iPhoneでhtml表示させる手順

「HTML表示」をタップすると、見たいページの上に「Snoopy」という画面が表示され、htmlを見ることができるようになる。
htmlviewsouce

Snoopy」には3つのタブがあり、左から「overview」「view source」「view generated source」となっている。単純にhtmlソースを見るだけなら真ん中の「view source」を見ればよい。
iPhoneでhtml表示、3つのモードがある
左の「overview」はサイトのhtml概要を表示し、右の「view generated source」はcssの文字サイズや配色などの情報も取り込んだ内容を表示する。なかなか便利である。

iPhoneでhtml表示をさせるための「Snoopy」設定

この方法は、サファリのブックマークに「HTML表示」という名のブックマークを作成し、そのブックマーク内に「Snoopy」というJavaScriptを仕込んで、htmlソースをサファリで表示させるというやり方である。

設定手順は以下のとおり。

1.「Snoopy」のJavaScriptを用意する

まず、「Snoopy」というJavaScriptを用意する。
http://snoopy.allmarkedup.com/
http://snoopy.allmarkedup.com/

にある。

このJavaScriptの部分はバージョンアップしたり変更があったりする可能性があるので、処理する場合は上記のURLから最新版をコピーすること。

2.サファリのブックマークで「HTML表示」というブックマークを作成する。

サファリのブックマークを編集する。サファリのブックマークは新規のブックマークが作成できないので、どれか既存のブックマークをリネームするのが手っ取り早い。

3.「HTML表示」の中身を編集して保存する。

サファリのブックマークを編集モードにして、タイトルを「HTML表示」に変え、URLの部分を上記のJavaScript内容をすべて貼り付ける。
JavaScriptをコピペで貼る

編集後に保存すれば準備完了となる。

これで、htmlソースを見たいページで「HTML表示」というブックマークをタップするだけでhtmlソースを見ることができるはずである。iPhone利用者にはおすすめの方法である。