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

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …