スマホ(iPhone,Android)でWebページのHTMLソースを見る方法

スマホでWebサイトのHTMLソースを確認したいときがある。

PCではブラウザの右クリックから簡単にソースの表示ができますが、スマホだとブラウザにその機能がありません。

そんなときに簡単にHTMLソースを表示する方法を解説します。

Androidの場合
iPhoneの場合
1. ブックマークレットを作成して利用する
  1. 手順
  2. 動作確認
2. アプリを利用する
  1. 「View Source」をインストール
まとめ

Androidの場合

AndroidのChromeの場合はサイトURLの前に、

view-source:

を入力してサイトを閲覧するだけでHTMLソースの確認が可能です。

【入力例】

view-source:https://onoredekaiketsu.com/

1	view-source:https://onoredekaiketsu.com/

iPhoneの場合

iPhoneの場合はブックマークレットまたはアプリを利用してHTMLソースを表示します。

ブックマークレットを作成して利用する

【ブックマークレットとは？】
ブックマークレット（Bookmarklet）とは、ブックマーク（お気に入り）に登録して起動する簡易的なプログラムのことです。
主に1行のJavaScriptで書かれており、ブラウザの足りない機能を補完したり追加したりする際に利用されます。

手順

【1】まず、以下のJavaScriptをクリップボードにコピーしておきます。

javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>ViewSource:'+location.href+'</title><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body></body></html>');a.close();var s = a.createElement("script");s.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian";a.body.appendChild(s);var b=a.body.appendChild(a.createElement('pre'));b.className='prettyprint lang-html linenums';b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.style.wordBreak='break-all';b.style.fontSize='11px';b.appendChild(a.createTextNode(document.getElementsByTagName('html')[0].outerHTML))})();

javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>ViewSource:'+location.href+'</title><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body></body></html>');a.close();var s = a.createElement("script");s.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian";a.body.appendChild(s);var b=a.body.appendChild(a.createElement('pre'));b.className='prettyprint lang-html linenums';b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.style.wordBreak='break-all';b.style.fontSize='11px';b.appendChild(a.createTextNode(document.getElementsByTagName('html')[0].outerHTML))})();

【2】以下のURL開いてブックマークに登録します。

■「HTMLソース表示ブックマークレット」簡単登録用ページ
https://onoredekaiketsu.com/bookmarklet/view-source.html