「スマホでWebページのソースコードを確認したい」
「Android版Chromeにソース表示機能はないの？」
「HTML構造をスマホでチェックする方法を知りたい」
PC版Chromeには「ページのソースを表示」機能がありますが、Android版には標準で搭載されていません。
この記事では、AndroidのChromeブラウザでWebページのソースコード（HTML）を表示する方法を、初心者の方にも分かりやすく解説していきます。Web制作者やプログラミング学習者の方は、ぜひ参考にしてください。
Webページのソースコードとは？
ソースコードとは、Webページを構成しているHTML、CSS、JavaScriptなどのプログラミングコードのことです。
「ページのソース」や「HTMLソース」とも呼ばれます。
ソースコードに含まれるもの
HTML：
Webページの構造を定義する言語です。
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>CSS：
デザインやレイアウトを指定します。
<style> タグ内や、外部CSSファイルへのリンクとして含まれます。
JavaScript：
動的な動作を実現するコードです。
<script> タグ内や、外部JSファイルへのリンクとして含まれます。
メタ情報：
- ページの説明文
- キーワード
- 文字コード
- viewport設定（スマホ対応）
なぜソースコードを見るの？
ソースコードを確認する理由は、様々です。
Web制作・開発：
- 自分のサイトの確認
- 他サイトのデザイン参考
- バグの原因調査
- SEO対策の確認
学習目的：
- HTMLの勉強
- CSSの使い方を学ぶ
- 実例から学習
技術的な確認：
- metaタグの設定確認
- OGP設定のチェック
- スクリプトの読み込み確認
セキュリティチェック：
- 怪しいスクリプトの有無
- フィッシングサイトの確認
Android版Chromeの制限
残念ながら、Android版Chromeには、PC版のような「ページのソースを表示」メニューがありません。
PC版との違い
PC版Chrome：
- 右クリック →「ページのソースを表示」
- ショートカットキー：
Ctrl + U - デベロッパーツール（検証機能）
Android版Chrome：
- 標準のソース表示機能なし
- デベロッパーツールなし
- 代替方法が必要
なぜ標準機能がないの？
理由：
- スマホでの需要が少ない
- 画面サイズが小さく見づらい
- モバイル版は閲覧に特化
しかし、方法はあります！
方法1：view-sourceプレフィックスを使う
最も簡単で確実な方法です。
手順
1. ページのURLをコピー
ソースを見たいページを開いた状態で、アドレスバーのURLを長押しします。
「コピー」をタップしてURLをコピーします。
2. 新しいタブを開く
Chrome右上の「︙」→「新しいタブ」をタップします。
3. URLを編集
アドレスバーに、以下の形式で入力します：
view-source:コピーしたURL具体例：
元のURL：
https://www.example.com/編集後：
view-source:https://www.example.com/4. 移動
Enterキーまたは「→」ボタンをタップします。
5. ソースコードが表示
ページのHTMLソースが表示されます。
メリット
- 追加アプリ不要
- シンプルで確実
- すべてのページで使える
デメリット
- URLを手動で編集する手間
- タイプミスしやすい
- コピー&ペーストが必要
便利な使い方
ブックマークレットとして登録すると、さらに便利です（後述）。
方法2：専用アプリを使う
Android用のソースコード表示アプリを利用する方法です。
おすすめアプリ：View Source
特徴：
- シンプルな操作
- URLを入力するだけ
- 無料で広告なし（基本版）
使い方：
1. アプリをインストール
Google Playストアで「View Source」または「HTML Source Viewer」を検索してインストールします。
2. アプリを起動
インストールしたアプリを開きます。
3. URLを入力
ソースを見たいページのURLを入力します。
4. 表示
「View」や「Show Source」ボタンをタップすると、ソースコードが表示されます。
その他のおすすめアプリ
HTML Reader / Viewer：
- ソースコードの表示
- シンタックスハイライト（色分け）
- コードのコピー機能
Web Source Viewer：
- URLからソース取得
- ダウンロード機能
- オフライン閲覧
Code Viewer for Android：
- 複数言語対応
- 行番号表示
- 検索機能
メリット
- 専用アプリならではの機能
- シンタックスハイライト
- 検索やコピーがしやすい
デメリット
- アプリのインストールが必要
- 広告が表示される場合がある
- Chrome内で完結しない
方法3：ブックマークレットを使う
ブックマークにJavaScriptコードを保存して、ワンタップでソース表示する方法です。
ブックマークレットとは？
ブックマークに保存されたJavaScriptコードのことです。
タップするだけで、特定の動作を実行できます。
作成手順
1. 適当なページをブックマーク
まず、任意のページをブックマークします。
Chrome右上の「☆」アイコンをタップして保存します。
2. ブックマークを編集
「︙」→「ブックマーク」→ 先ほど保存したブックマークを長押し → 「編集」
3. 名前を変更
名前を「ソース表示」など分かりやすい名前に変更します。
4. URLを変更
URLの欄に、以下のコードを貼り付けます：
javascript:(function(){window.location='view-source:'+window.location.href;})();5. 保存
「保存」をタップします。
使い方
1. ソースを見たいページを開く
通常通り、ページを開きます。
2. ブックマークレットをタップ
「︙」→「ブックマーク」→ 作成した「ソース表示」ブックマークをタップ
3. ソースコードが表示
自動的に view-source: が追加され、ソースが表示されます。
メリット
- Chrome内で完結
- ワンタップで実行
- 追加アプリ不要
デメリット
- 初期設定がやや複雑
- JavaScriptの知識があると便利
方法4：Chrome共有メニューからアプリに送る
Chromeの共有機能を使って、ソース表示アプリに送る方法です。
手順
1. ソース表示アプリをインストール
「View Source」などのアプリを事前にインストールしておきます。
2. ページを開く
ソースを見たいページをChromeで開きます。
3. 共有メニューを開く
Chrome右上の「︙」→「共有」をタップします。
4. アプリを選択
共有先として「View Source」などのアプリを選択します。
5. ソースコードが表示
アプリが起動し、ソースコードが表示されます。
メリット
- 素早く操作できる
- URLのコピー&ペースト不要
デメリット
- 専用アプリが必要
- Chrome外のアプリに移動
方法5：PC版サイトをリクエスト
一部のサイトでは、PC版表示にすることでソース表示メニューが使える場合があります。
手順
1. PC版サイトをリクエスト
Chrome右上の「︙」→「PC版サイト」にチェックを入れます。
2. ページが再読み込み
PC版のページが表示されます。
3. ソース表示を試す
一部のサイトでは、長押しメニューに「ページのソースを表示」が出る場合があります。
注意点
この方法は、ほとんどの場合機能しません。
Android版Chromeには、基本的にソース表示機能がないためです。
ソースコードの見方・読み方
ソースコードを表示したら、どこを見ればいいのでしょうか？
基本構造を理解する
DOCTYPE宣言：
<!DOCTYPE html>ページの最初にあり、HTML5であることを示します。
htmlタグ：
<html lang="ja">ページ全体を囲むタグ。lang="ja" は日本語ページを示します。
headタグ：
<head>
<title>ページタイトル</title>
<meta charset="UTF-8">
</head>ページの設定情報が入っています。
bodyタグ：
<body>
<!-- 実際に表示される内容 -->
</body>実際に画面に表示される内容が入っています。
よく確認する箇所
タイトルタグ：
<title>ページのタイトル</title>ブラウザのタブに表示されるタイトルです。
メタディスクリプション：
<meta name="description" content="ページの説明文">検索結果に表示される説明文です。
OGP設定：
<meta property="og:title" content="SNSでシェアされる時のタイトル">
<meta property="og:image" content="サムネイル画像のURL">Facebook、TwitterなどでシェアされるときのOG情報です。
viewport設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0">スマホ対応の設定です。
CSSリンク：
<link rel="stylesheet" href="style.css">外部CSSファイルの読み込みです。
JavaScriptリンク：
<script src="script.js"></script>外部JavaScriptファイルの読み込みです。
検索機能を使う
ソースコード内で特定の文字列を探したい場合：
Chromeの検索機能：
- ソースを表示した状態で「︙」をタップ
- 「ページ内を検索」を選択
- キーワードを入力
これで、目的のコードを素早く見つけられます。
ソースコードをコピーする方法
表示したソースコードをコピーしたい場合の方法です。
手順
1. ソースコードを表示
上記のいずれかの方法でソースを表示します。
2. テキストを選択
コピーしたい部分を長押しして選択します。
両端のハンドルをドラッグして範囲を調整します。
3. コピー
「コピー」をタップします。
4. 貼り付け
メモアプリやエディタに貼り付けます。
全体をコピーしたい場合
方法1：全選択
一部のAndroidデバイスでは、Ctrl + A で全選択できる場合があります（外付けキーボード使用時）。
方法2：アプリ経由
ソース表示アプリの多くには、「全体をコピー」機能があります。
方法3：共有機能
ソースを表示した状態で、共有メニューからテキストエディタに送ることもできます。
デベロッパーツールの代替
PC版Chromeのデベロッパーツール（検証機能）は、Android版では使えません。
リモートデバッグ
高度な方法ですが、PCとAndroidデバイスを接続してデバッグできます。
必要なもの：
- PC（Windows、Mac、Linux）
- USBケーブル
- Android端末
手順概要：
1. Android端末で開発者オプションを有効化
「設定」→「端末情報」→「ビルド番号」を7回タップ
2. USBデバッグを有効化
「設定」→「開発者向けオプション」→「USBデバッグ」をオン
3. PCとUSBで接続
4. PC版Chromeでリモートデバッグ
PC版Chromeで chrome://inspect にアクセス
Android端末で開いているページが表示され、PC上でデベロッパーツールが使えます。
用途：
- 本格的なデバッグ
- レスポンシブデザインのテスト
- パフォーマンス測定
トラブルシューティング
ソース表示がうまくいかない場合の対処法です。
トラブル1：view-sourceで表示されない
症状：view-source: を付けても、ソースが表示されない。
原因：
- URLの入力ミス
- スペースが入っている
- プロトコル（https://）の入れ忘れ
対処法：
正しい形式を確認します：
view-source:https://example.com/view-source:の後にスペースなしhttps://またはhttp://を含める
トラブル2：ブックマークレットが動作しない
症状：
ブックマークレットをタップしても何も起こらない。
対処法：
1. JavaScriptが正しいか確認
URLの最初が javascript: で始まっているか確認します。
2. Chromeを再起動
一度完全に終了してから、もう一度開きます。
3. 別のブックマークレットを試す
コードにエラーがある可能性があるため、別のコードを試します。
トラブル3：アプリでソースが表示されない
症状：
アプリにURLを入力しても、エラーが出る。
原因：
- ネット接続の問題
- URLが間違っている
- サイトがアクセスをブロックしている
対処法：
1. ネット接続を確認
Wi-FiやモバイルデータがONになっているか確認します。
2. URLを再確認
正しいURLか、もう一度確認します。
3. 別のページで試す
他のページでも同じ問題が起きるか確認します。
トラブル4：文字化けする
症状：
ソースコードが文字化けして読めない。
原因：
文字コードの問題です。
対処法：
1. Chromeの設定を確認
「設定」→「言語」→「日本語」が優先言語になっているか確認
2. ページ側の問題
ページ自体の文字コード設定に問題がある場合、こちらでは対処できません。
ソースコード確認以外の便利機能
Android版Chromeには、他にも便利な機能があります。
ページ情報の確認
手順：
- ページを開く
- アドレスバーの左側にある鍵マーク🔒またはⓘをタップ
- 「サイト設定」や「接続は保護されています」などの情報が見られる
確認できる情報：
- SSL証明書の情報
- Cookie設定
- 位置情報の許可状況
ページを検索
ページ内の特定の単語を検索できます。
手順：
- 「︙」→「ページ内を検索」
- キーワードを入力
- 該当箇所がハイライト表示
オフライン保存
手順：
- 「︙」→「ダウンロード」アイコンをタップ
- ページがオフラインで保存される
これで、ネットがない場所でも閲覧できます。
よくある質問（FAQ）
Q1：PC版のように完全なデベロッパーツールは使えませんか？
A：Android版Chrome単体では使えません。
リモートデバッグでPCと接続すれば、PC版のデベロッパーツールが使えます。
Q2：iPhoneのChromeでも同じ方法が使えますか？
A：基本的には同じです。
view-source: プレフィックスは、iOS版Chromeでも使えます。
Q3：ソースコードを編集できますか？
A：表示するだけで、編集はできません。
編集したい場合は、テキストエディタアプリにコピーしてください。
Q4：動的に生成されたコードも見られますか？
A：view-source: では、サーバーから送られた初期HTMLのみが表示されます。
JavaScriptで後から追加された要素は表示されません。
完全なDOMを見たい場合は、リモートデバッグが必要です。
Q5：ソースコードを保存できますか？
A：直接保存機能はありませんが、以下の方法があります：
- コピーしてメモアプリに貼り付け
- スクリーンショット
- ソース表示アプリの保存機能を使用
Q6：他人のサイトのソースコードを見るのは違法ですか？
A：ソースコードを見ること自体は違法ではありません。
Webページは公開されている情報です。
ただし、以下は違法または規約違反です：
- コードをそのままコピーして自分のサイトに使う（著作権侵害）
- セキュリティホールを悪用する
- 無断で商用利用する
参考にするのはOKですが、丸ごとコピーはNGです。
まとめ：Androidでもソースコードは確認できる
Android版Chromeでソースコードを表示する方法について、重要なポイントをまとめます。
Android版Chromeの制限：
- 標準のソース表示機能なし
- デベロッパーツールなし
- 代替方法が必要
表示方法（5つ）：
- view-sourceプレフィックス：
view-source:URL - 専用アプリ：View Source、HTML Reader
- ブックマークレット：JavaScriptで自動化
- 共有メニュー：アプリに送る
- リモートデバッグ：PCと接続（上級者向け）
おすすめの方法：
- 簡単：view-sourceプレフィックス
- 便利：ブックマークレット
- 高機能：専用アプリ
ソースコードで確認すること：
- HTML構造
- metaタグ（title、description）
- OGP設定
- CSS・JavaScriptのリンク
- viewport設定
コピー方法：
- テキストを長押しして選択
- コピーしてメモアプリへ
- アプリの保存機能
トラブル対処：
- URLの形式を確認
- スペースや入力ミスをチェック
- ブックマークレットの再作成
- ネット接続を確認
代替ツール：
- リモートデバッグ（PC接続）
- オンラインHTMLビューアー
- Web開発用アプリ
Android版Chromeには標準のソース表示機能がありませんが、工夫次第でソースコードを確認できます。
最も簡単なのは、URLの前に view-source: を付ける方法です。
頻繁に使う方は、ブックマークレットを作成しておくと便利ですよ。
Web制作者やプログラミング学習者にとって、ソースコードの確認は重要なスキルです。
スマホでも気軽にソースをチェックできれば、外出先でも勉強や作業ができますね。
この記事を参考に、Androidでのソース表示をマスターしてください。HTMLやCSSの学習に、ぜひ活用してくださいね！
コメント