Webの記録

スマートフォンサイトのソースコードを見たいときに便利だったツール【AndroidとPC】

投稿日:

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

android_mini

今までPC用サイトだけだったのが、最近ではレスポンシブだったりスマホサイトだったり・・・と多様化してきました。

まだまだスマホでの表示は謎が多くて、毎回ドキドキしてます。

Androidでスマホサイトを見ていて、ソースコードが気になった時に使ってみたツールをメモとして残します。

最後の1つだけ、PCから表示する方法です。

目次

  1. jsをAndroidにブックマークして、ソースコード表示
  2. アプリ「HTML Dual Viewer」でソースコード表示
  3. Androidでchoromeブラウザを開いてスマホサイトのURLの先頭に「view-source:」
  4. Ultimate User Agent Switcher(chromeの拡張機能)を使ってPCでスマホサイト表示
  5. まとめ
1.jsをAndroidにブックマークして、ソースコード表示

ソースコード表示をしてしまうとサイト自体が見えません。またソースコードの表示でDOCTYPE宣言などが省略されてしまってます。しかしソースコードをたどってcssなども見れるので、とても便利です

  • 手順1:Android実機で適当なサイトをブックマークに保存する
  • 手順2:手順1で保存したブックマークの「アドレス」部分を編集(アドレスに手順3下のjsのコードと差し替える)
  • 手順3:見たいスマホサイトとAndroidで表示した後、先ほどのブックマークを1クリックして呼び出すだけ。
javascript:(function(){var w = window.open('about:blank'),s = w.document;s.write('');s.close();var f = s.body.appendChild(s.createElement('form'));f.setAttribute('method','post');f.setAttribute('action','http://ole.michelsen.dk/viewsource/?uri='+location.href);var i = f.appendChild(s.createElement('input'));i.setAttribute('type','hidden');i.setAttribute('name','DOM');i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));f.submit();})();

【参考サイト】Android で HTML ソース!!|actywayさま

2.アプリ「HTML Dual Viewer」でソースコード表示

スマホサイトを表示しながら、横でソースコード表示ができます。ただし、ソースコードのコピーはできません。。

  • 手順1:アプリ「HTML Dual Viewer」をGoogleplayストアでインストール
  • 手順2:「HTML Dual Viewer」を起動して、見たいスマホサイトを表示すると、サイトの横にソースコードが表示されます

【参考サイト】スマホサイトのHTMLソースを見る4つの方法|webmemorand.さま

3.Androidでchoromeブラウザを開いてスマホサイトのURLの先頭に「view-source:」

Androidにchoromeブラウザを入れていることが前提です!

表示結果は、「1.jsをAndroidにブックマークして、ソースコード表示」と近い感じです。

  • 手順1:見たいスマホサイトを表示します
  • 手順2:URL欄の先頭にview-source:と入力するだけで、ソースコード表示ができます

【参考サイト】スマートフォンからHTMLソースを表示するスマートな方法|佐渡の洋食屋店長のブログさま

4.Ultimate User Agent Switcher(chromeの拡張機能)を使ってPCでスマホサイト表示

PCでスマホサイトを見るときに便利だったツール「Ultimate User Agent Switcher」(chromeの拡張機能)です。

日頃使い慣れているPCでソースコードを見れるのが一番楽ですね~♪

ただし、表示確認できるバージョンが古いのが残念だけど、使えると思います!

Ultimate-User-Agent-Switcher

【URL】https://chrome.google.com/webstore/category/apps?hl=ja

  • 手順1:ChoromeストアからPCへUltimate User Agent Switcherをインストールします
  • 手順2:PCのブラウザで、見たいスマホサイトを表示します
  • 手順3:「Ultimate User Agent Switcher」のアイコンが画面右上に表示されているので、設定をする(今すぐ有効にする!にチェックし、見たい機種にチェックする)
  • 手順4:通常のPCサイトのソースコードを見るように、Developer Toolsなどでソースコード表示をします

Ultimate-User-Agent-Switcher_2

【参考サイト】スマホサイトのHTMLソースを見る4つの方法|webmemorand.さま

5.まとめ

今回、ちょっと人が作ったスマホサイトをAndroidで見ながら・・・やらなくてはならない事がありました。

すると、ソースコード表示がどうしても見たくなってしまいました。

ソースコード表示ができる方法をググって試した結果が、今回の記事です。

スマホサイトはまだまだ分からないことだらけです。。。
今回の便利なツールで、これから勉強です!!

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

この記事は約 2 分で読めます。 【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました! 今、あるところのサイト制作をしているのですが・・・。 「画像の著作権を守るため、画像の …

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …