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

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

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

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

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

スポンサーリンク

Androidの場合

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

view-source:

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

【入力例】

スポンサーリンク

iPhoneの場合

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

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

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

手順

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

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

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

ブックマークレットをブックマークに登録作業

ブックマークレットをブックマークに追加(その2)

【3】先ほど登録したブックマークを編集します。URLの部分にクリップボードにコピーしておいたJavascriptを貼り付けて編集を完了します。

ブックマークの編集

ブックマークレットのコードを貼り付け

これでブックマークレットの登録が完了です。

以降は2タップで簡単にHTMLソースの確認が行えます。

動作確認

【1】HTMLソースを表示したいサイトを開き、ブックマークのアイコンをタップします。(※例として先ほどのページのソースを表示してみます。)

HTMLソースを閲覧したいページのお気に入りをタップ

【2】先ほど作成したブックマークレットをタップするとソースが表示されます。

ブックマークレットを起動してHTMLソースを表示

正常に表示されました。

アプリを利用する

「View Source」をインストール

App Storeから無料アプリの「View Source」をインストールします。

■View Source
https://apps.apple.com/jp/app/view-source/id1041817284

App Storeから「View Source」をインストール

ソースを表示したいサイトをブラウザで開き、「共有ボタン」をタップして「その他」をタップします。

「View Source」の初期設定

アクティビティにて「View Source」を許可すると、「View Source」のボタンが作成されるのでタップします。

アクティビティで「View Source」を許可

するとWebページのHTMLソースが表示されました。

「View Source」のHTMLソース表示画面

スポンサーリンク

まとめ

  • AndroidのChromeの場合はサイトURLの前に、view-source: と入力。
  • iPhoneの場合は手動で専用のブックマークレットを作成するか、無料アプリの「View Source」を利用。

これでスマホでもHTMLソースが簡単に閲覧できます。

以上で解決です。