東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

聞くは一時、聞かぬは一生

Q204 iphoneやipad、AndroidスマホやタブレットでWebのソースを見る方法は?

PCでは、ブラウザのメニューからWebサイトのHTMLソースなどを簡単にみることができるのですが、スマホではそのようなメニューが見当たりません。 どうすればよいでしょうか?

A204 使用したいブラウザにもよりますが、方法は主に3つあります!

Web制作に関わっていると「このページのソースはどうなっているんだろう?」とソース表示する機会も多いのではないでしょうか?

PCでは標準的なブラウザ機能として「ソースを表示」というメニューがあるので、それを利用すればいいのですが、スマホやタブレットではどうでしょう?

実は、主なモバイル向けブラウザには、現状では「ソースを表示」のメニューがないのです。

そこで、スマホやタブレットでソースを表示する方法を3つご紹介します。

1)URLの前に、view-source: と入力する(Android用Chromeでのみ動作確認)
PC用のブラウザでも有効なこの方法。
例えば、yahooのページであれば、画面上部のアドレスバーに入力されている

http://www.yahoo.co.jp/

の前にview-source:を追加して
view-source:http://www.yahoo.co.jp/
として再読み込みすると、同じページ(タブ)内でソースを表示させることができます。

2)専用ブラウザやアプリを利用する
ソース表示用のブラウザやアプリが、Google PlayやAppstoreに沢山ありますので、それをインストールして使用します。
ソース表示専用なので、タグに色が付いたり、整形されたりと高機能なものもあります。 ごく一部をご紹介します。
■GooglePlay/HTML Dual
Viewer(左右2画面でソースと実表示を比較表示できます)

https://play.google.com/store/apps/details?id=jp.tecco.htmlviewer

■AppStore/Source Viewer XL

https://itunes.apple.com/jp/app/source-viewer/id308126298?mt=8#

3)ブックマークレットを使う
ブックマークレットとは、Webブラウザ上で、japascriptなどのプログラム(機能)をお気に入りに登録して、呼び出して使うもの。有名なものをご紹介します。
■Snoopy  http://snoopy.allmarkedup.com/
ページ中ほどの黒背景白抜き文字の「Snoopy」というボタンを、ブラウザのお気に入りバーなどにドラッグアンドドロップすればOK。
出来ない場合は、このページをお気に入りに登録後、お気に入りを編集→URLの入っている欄に、http://snoopy.allmarkedup.com/の中ほどにあるソースコードをコピペして保存します。 これで、ソースを見たいページを閲覧中に、ブックマークでSnoopyを呼び出すだけでソース表示ができます。

今後、ブラウザ側で「ソースを表示」の標準搭載の対応が始まるかもしれませんが、それまでの間は、上記の方法で乗り切りましょう!

※アプリのインストールやブックマークレットの使用は自己責任で。会社の所有機器の場合は管理者の確認を取ってからご利用ください。