Eyecatch html css

HTML,CSS アプリケーション・ツール スマートフォン

スマホサイトのHTMLソースを確認する方法。

2013/10/12

スマホサイトを作成中、参考にしているサイトのソースが気になることはないでしょうか?
toogieはしょっちゅうです(苦笑)

FireMobileSimulatorなどでソースを表示できるサイトは良いのですが、当然、効かないサイトも有ります。
そういう場合にソースを確認する方法は無いものかと調べましたら、なんとも簡単な方法で実現可能なことが判明したのでご紹介。

用意するのは、Android のスマホかタブレット。「Chromeアプリ」がインストールされているのが前提です。
iPhoneは持ってないのでわかりません。
今回は手持ちのスマホ(ArrowsA 201F)で試してみます。

まずはChromeで対象のサイトを閲覧に行きます。
試しに「ファミ通App」のサイトに行ってみます。

PC/Nexus7(2013)で見るとこんな感じ。

ファミ通App

スマホで見ると、こうなります。

ファミ通App

スマホはそれ用のサイトになっています。
このスマホ用のソースを確認したい! と思いましても、PCでは見れません。

ここで chrome のアドレス欄の先頭に「view-source:」を入力し実行ボタンをタップ。
最終的なURLは「view-source:http://app.famitsu.com/」という形です。

view-source_famitsuapp

するとどうでしょう。

ソース表示

おおおお。HTMLソースが!

画面が小さいので多少見にくい感は有りますが、ソースを読み慣れている人は何が書いてあるか分かるでしょう。

この処理はどうやってるんだ、とか、なんのプラグインを使ってるのか、というような調査も行えますね。
ちょっと感動。

覚えておけば何かの役に立つ知識ということで。

-HTML,CSS, アプリケーション・ツール, スマートフォン
-, , , , , ,