クリップログ

ライフハック、インターネット、音楽、マネープランなど幅広く発信していきます。

インターネットサービス

PC閲覧ができないモバイルサイトのHTML/CSSソースを表示する方法

投稿日:

 

こんにちは。モバイルサイトの中には完全にPCから閲覧できないように設定されているサイトがあります。


しかしモバイルサイトやモバイルアプリを作成するような場合にこのサイトのHTMLやCSSを参考にしたいと思うことがあるかもしれません。


今回はそんなことを書きます。

PC閲覧ができないモバイルサイト


今回PCからの閲覧が一切できないサイトとして以下のサイトを例にしたいと思います。


モバゲー攻略TOWN
http://www.mbga.tv/


ソーシャルゲームをやっている方なら知っているかもしれません。モバゲーで運営されているソーシャルゲームの新着情報や画像データベースなどを配信しているサイトです。


こちらのサイトは見てもらえばわかりますがモバイルからでないとメインのサイトに入ることは出来ません。

左側はPC版サイトで、右側はスマホ版サイト


PCサイトから入ろうとするとQCコードでスマホからの閲覧を求められる。


スマホからだと画像データベースにアクセスできる。

 

上記のような感じでこちらのサイトにはPCからの閲覧が一切できないようになっています。


他にもこういったサイトはいくつかありますが、このサイトのHTMLやCSSを見たいと思った場合はどのようにしてみれば良いでしょうか。


PC版サイトのソース表示


PC版サイトの閲覧はGoogle Chromeのブラウザを利用していれば簡単にサイトを閲覧することが出来るようになります。

対象のサイトで右クリック→検証を選択

上記のようにHTMLが表示されます。


またタブの中のSourcesを見れば様々な情報が見れます。


Google Chromeの検証機能を利用すればHtmlやCss、そして画像ファイルなどいわゆる”表示”を担当しているコードや素材などを閲覧することが出来ます。


ただしプログラミングの結果として出てくるコードやファイルなど”動的”なソースは基本的には扱えず、現在の表示されている画面からわかる”静的”なソースだけ検証する事になります。

スマホ版サイトのソース表示


スマホ版においてもブラウザはGoogle Chromeを利用します。

 

Google Chromeから入りました。

スマホ版サイトの場合ですがPCの場合と違ってまず、当然ですが右クリックがありません。


また設定メニューの中にも検証ボタンはなさそうです。

どこにも”検証”ボタンが無い・・・。


ここではURLの先頭に
view-source:
を入力することでサイトを閲覧することが出来ます。

先頭にview-sourceを入れる


この一文を入れるだけでPC版Chromeの”検証”機能と同じになります。

PCと同じようにサイトのHTMLやCSSなどの情報がわかります。

まとめ


以上のようにView-sourceを入れるだけでいろんなサイトのHTML/CSSソースを確認することが出来ます。


ちなみにモバイルしか見れないサイトはPC版からview-sourceを入れてみてもPC版で表示されるほうのサイトが検証されてしまうのでモバイルサイトはモバイルサイトからしか検証することは出来ません。


何かモバイルサイトのスクレイピングを行いたい場合にHTMLのDIVタグの名前を知りたい!とか、CSSデザインの参考にしたい!とかの場合に活かせると思います。


よろしければ試してみてください。

-インターネットサービス
-,

Copyright© クリップログ , 2019 All Rights Reserved Powered by AFFINGER5.