iPhoneのSafariでソースコードを見る方法！5つの確実な手順を解説

プログラミング・IT

パソコンなら簡単に見られるウェブページのソースコード。でも、iPhoneのSafariではどうやって見るの？そんな疑問を持っていませんか？

ウェブデザインの勉強をしている、気になるサイトの作り方を知りたい、自分のサイトがスマホでどう表示されているか確認したい。こんな時、ソースコードを見られると便利ですよね。

実は、iPhoneのSafariには、パソコン版のような「ソースを表示」という機能が標準では用意されていません。でも、いくつかの方法を使えば、iPhoneでもソースコードを確認できるんです。

この記事では、iPhoneのSafariでウェブページのソースコードを表示する5つの方法を、初心者にも分かりやすく解説していきます。

スポンサーリンク
  1. ソースコードとは？基本を理解しよう
    1. ソースコードを見る理由
  2. iPhoneのSafariでソースコードが見られない理由
  3. 方法1：ブックマークレットを使う【最もシンプル】
    1. ブックマークレットの作成手順
    2. この方法のメリット・デメリット
  4. 方法2：外部サイトを使う【設定不要】
    1. おすすめのサービス
    2. 使い方
    3. この方法のメリット・デメリット
  5. 方法3：専用アプリを使う【高機能】
    1. おすすめアプリ
    2. 基本的な使い方（View Sourceの例）
    3. Safari拡張機能として使う方法
    4. この方法のメリット・デメリット
  6. 方法4：Macとの連携機能を使う【開発者向け】
    1. 必要なもの
    2. 設定手順
    3. 使い方
    4. この方法のメリット・デメリット
  7. 方法5：URLスキームを使う【上級者向け】
    1. Shortcutsアプリを使う
    2. この方法のメリット・デメリット
  8. iPadでの方法
    1. iPadならではの利点
    2. iPadOS 15以降の新機能
  9. ソースコードを見る際の注意点
    1. 著作権の尊重
    2. プライバシーへの配慮
    3. セキュリティ意識
  10. ソースコードの見方・読み方の基本
    1. HTMLの基本構造
    2. CSSの確認方法
    3. JavaScriptの場所
  11. よくある質問
    1. Q1：ソースコードを見るのは違法？
    2. Q2：パスワードで保護されたページのソースも見られる？
    3. Q3：スマホで見るとコードが見にくい
    4. Q4：外部CSSやJavaScriptファイルの中身も見られる？
    5. Q5：動的に生成されたコンテンツも見られる？
    6. Q6：どのくらいプログラミングの知識が必要？
  12. 実用的な活用例
    1. ケース1：自分のサイトの確認
    2. ケース2：他サイトのデザイン研究
    3. ケース3：エラーの原因調査
    4. ケース4：SEO対策の確認
  13. まとめ：自分に合った方法を選ぼう

ソースコードとは？基本を理解しよう

まず、「ソースコード」が何なのか、簡単に説明しておきましょう。

ソースコードとは、ウェブページを作るために書かれたプログラムのコードのことです。主に以下のような言語で書かれています：

HTML（エイチティーエムエル）：

  • ウェブページの構造を作る言語
  • 見出し、段落、画像、リンクなどを配置

CSS（シーエスエス）：

  • ウェブページの見た目を整える言語
  • 色、サイズ、配置などのデザイン

JavaScript（ジャバスクリプト）：

  • ウェブページに動きをつける言語
  • ボタンのクリック動作、アニメーションなど

ソースコードを見る理由

勉強のため：

  • 他のサイトがどう作られているか学べる
  • プログラミングの参考になる

確認のため：

  • 自分のサイトが正しく表示されているか確認
  • エラーの原因を調べる

調査のため：

  • サイトの構造を分析
  • 使われている技術を確認

iPhoneのSafariでソースコードが見られない理由

パソコン版のブラウザには「ページのソースを表示」という機能がありますが、iPhoneのSafariにはこの機能が標準では搭載されていません。

理由：

  1. 画面サイズの制約
  • 小さい画面でコードを見るのは難しい
  • スクロールが大変
  1. ターゲットユーザーの違い
  • 多くのユーザーは閲覧だけが目的
  • 開発者向け機能は優先度が低い
  1. iOS の設計思想
  • シンプルさを重視
  • 一般ユーザーが使わない機能は省略

でも、方法がないわけではありません。次から具体的な方法を紹介していきます。

方法1：ブックマークレットを使う【最もシンプル】

ブックマークレットとは、ブックマークに保存できる小さなプログラムのことです。タップするだけでソースコードを表示できる便利な方法です。

ブックマークレットの作成手順

ステップ1：準備するコード

以下のコードを使います（これをブックマークに保存します）：

javascript:(function(){var a=document.documentElement.outerHTML,b=window.open("about:blank").document;b.write("<!DOCTYPE html><html><head><title>ソースコード</title></head><body></body></html>");b.close();var c=b.body;c.textContent=a;})();

このコードは、現在のページのHTMLを新しいウィンドウで表示するものです。

ステップ2：ダミーのブックマークを作成

  1. Safariで適当なサイト（例：apple.com）を開く
  2. 画面下部の共有ボタン（四角に上矢印のアイコン）をタップ
  3. 「ブックマークを追加」をタップ
  4. 名前を「ソースを表示」に変更
  5. 保存場所を「お気に入り」にする
  6. 「保存」をタップ

ステップ3：ブックマークを編集

  1. Safariでブックマーク一覧を開く
  • 画面下部の本のアイコンをタップ
  1. 「お気に入り」または保存した場所を開く
  2. 「編集」をタップ
  3. 作成した「ソースを表示」ブックマークを選択
  4. URLの欄を長押し→「すべてを選択」→「削除」
  5. 先ほどのJavaScriptコードをコピー&ペースト
  • パソコンからメールで送信すると便利
  • または、メモアプリに保存しておく
  1. 「完了」をタップ

ステップ4：使い方

  1. ソースコードを見たいサイトを開く
  2. アドレスバーをタップ
  3. 「ソースを表示」ブックマークをタップ
  4. 新しいタブでソースコードが表示される

この方法のメリット・デメリット

メリット：

  • 追加アプリ不要
  • ワンタップで表示
  • オフラインでも使える

デメリット：

  • 初回の設定がやや複雑
  • コードのコピーが必要
  • 見やすさは限定的

方法2：外部サイトを使う【設定不要】

オンラインのツールを使ってソースコードを確認する方法です。

おすすめのサービス

1. CodeBeautify HTML Viewer

  • URL：codebeautify.org/htmlviewer

2. FreeFormatter HTML Viewer

  • URL：freeformatter.com/html-viewer.html

使い方

  1. 上記のサービスのサイトをSafariで開く
  2. 「URL」タブまたは「Enter URL」を選択
  3. 確認したいサイトのURLを入力
  4. 「View」または「表示」ボタンをタップ
  5. ソースコードが表示される

この方法のメリット・デメリット

メリット：

  • 設定不要ですぐ使える
  • 初心者にも分かりやすい
  • きれいに整形されて表示される

デメリット：

  • インターネット接続が必須
  • 外部サービスに依存
  • プライベートなページには使えない

方法3：専用アプリを使う【高機能】

App Storeには、ソースコードを見るための専用アプリがあります。

おすすめアプリ

1. View Source

  • シンプルで使いやすい
  • ソースコードのハイライト表示
  • 無料版あり

2. HTML Source Code Viewer

  • HTML、CSS、JavaScriptを分けて表示
  • コードの検索機能
  • 無料で使える

3. Web Inspector

  • より高度な機能
  • デベロッパーツール風
  • 一部有料機能あり

基本的な使い方（View Sourceの例）

  1. App StoreでView Sourceをダウンロード
  2. アプリを起動
  3. 上部のアドレスバーにURLを入力
  4. ページが読み込まれる
  5. 画面下部の「<>」アイコンをタップ
  6. ソースコードが表示される

Safari拡張機能として使う方法

一部のアプリはSafari拡張機能として動作します。

設定手順：

  1. アプリをインストール後、設定アプリを開く
  2. 「Safari」→「拡張機能」をタップ
  3. インストールしたアプリを有効化
  4. Safariで任意のページを開く
  5. 共有ボタン→拡張機能を選択
  6. ソースコードを表示

この方法のメリット・デメリット

メリット：

  • 見やすく整形される
  • コードのハイライト表示
  • 検索機能が使える
  • オフラインでも使える（一部）

デメリット：

  • アプリのダウンロードが必要
  • 一部機能が有料のこともある
  • アプリの切り替えが必要

方法4：Macとの連携機能を使う【開発者向け】

MacとiPhoneを連携させて、Mac上でiPhoneのSafariの内容を確認する方法です。

必要なもの

  • Mac（macOS Monterey以降推奨）
  • iPhone（iOS 14以降推奨）
  • USBケーブルまたは同じWi-Fiネットワーク

設定手順

iPhoneの設定：

  1. 設定→Safari→詳細
  2. 「Webインスペクタ」をオンにする

Macの設定：

  1. Safariを開く
  2. メニューバーの「Safari」→「環境設定」
  3. 「詳細」タブを選択
  4. 「メニューバーに”開発”メニューを表示」にチェック

使い方

  1. iPhoneをMacにUSBケーブルで接続
  • または、同じWi-Fiに接続
  1. iPhoneのSafariで確認したいページを開く
  2. Mac版Safariのメニューバーで「開発」をクリック
  3. デバイス名（例：○○のiPhone）を選択
  4. 開いているページのタイトルをクリック
  5. Webインスペクタが開く
  6. 「要素」タブでHTMLが確認できる
  7. 「ソース」タブでJavaScriptが確認できる
  8. 「スタイル」でCSSが確認できる

この方法のメリット・デメリット

メリット：

  • 最も高機能
  • リアルタイムで確認・編集可能
  • プロの開発者レベルの機能
  • ネットワーク通信も確認できる

デメリット：

  • Macが必要
  • 設定がやや複雑
  • 初心者には難しい

方法5：URLスキームを使う【上級者向け】

iPhoneのURLスキームという機能を使って、他のアプリからソースを確認する方法です。

Shortcutsアプリを使う

iOSの「ショートカット」アプリで、ソースコード表示の自動化ができます。

作成手順：

  1. ショートカットアプリを開く
  2. 「+」で新規ショートカット作成
  3. アクションを追加：
  • 「Webの内容を取得」を追加
  • 「テキストを表示」を追加
  1. 「Webの内容を取得」の設定：
  • URL：「ショートカットの入力」を選択
  1. 「テキストを表示」の設定：
  • 入力：「Webページの内容」を選択
  1. ショートカットに名前をつける（例：ソース表示）
  2. 「完了」をタップ

使い方：

  1. Safariでページを開く
  2. 共有ボタンをタップ
  3. 「ショートカット」を選択
  4. 作成した「ソース表示」を選択
  5. ソースコードが表示される

この方法のメリット・デメリット

メリット：

  • 完全にカスタマイズ可能
  • アプリ不要
  • Safariから直接実行できる

デメリット：

  • 設定が複雑
  • 表示が簡易的
  • 上級者向け

iPadでの方法

iPadでも基本的に同じ方法が使えますが、いくつか違いがあります。

iPadならではの利点

Split Viewが使える：

  • ソースコードと実際のページを並べて表示
  • 比較しながら確認できる

画面が大きい：

  • コードが見やすい
  • スクロールが少なくて済む

キーボードショートカット：

  • 外部キーボードでコピー&ペーストが楽

iPadOS 15以降の新機能

デスクトップ版サイトの表示：

  1. Safariでページを開く
  2. アドレスバー左側の「ぁあ」をタップ
  3. 「デスクトップ用Webサイトを表示」を選択

一部のサイトでは、デスクトップ版でより詳細な情報が見られることがあります。

ソースコードを見る際の注意点

著作権の尊重

ソースコードを見ることは合法ですが、以下の点に注意しましょう：

してはいけないこと：

  • コードをそのままコピーして自分のサイトで使う
  • 商業目的で無断利用する
  • 他人の技術を盗用する

問題ないこと：

  • 勉強のために参考にする
  • 自分のサイトのバグを確認する
  • 技術を学ぶための分析

プライバシーへの配慮

注意すべき点：

  • ソースコードには個人情報が含まれることがある
  • APIキーなどの機密情報が見えることも
  • 悪用は絶対にしない

セキュリティ意識

自分のサイトを確認する際：

  • 機密情報がソースに含まれていないか確認
  • パスワードやAPIキーが露出していないか
  • セキュリティホールがないか

ソースコードの見方・読み方の基本

HTMLの基本構造

ソースコードを見ると、以下のような構造が分かります：

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>本文</p>
</body>
</html>

主要な要素：

  • <head>：ページの情報（タイトル、CSS、メタ情報）
  • <body>：実際に表示される内容
  • <div>：まとまりを作る
  • <p>：段落
  • <a>：リンク

CSSの確認方法

スタイル情報は、以下の場所にあります：

インラインスタイル：

<div style="color: red;">赤い文字</div>

内部スタイルシート：

<head>
    <style>
        p { color: blue; }
    </style>
</head>

外部スタイルシート：

<link rel="stylesheet" href="style.css">

JavaScriptの場所

スクリプトは以下の場所に記述されます：

インラインスクリプト：

<button onclick="alert('こんにちは')">クリック</button>

内部スクリプト：

<script>
    function sayHello() {
        alert('こんにちは');
    }
</script>

外部スクリプト：

<script src="script.js"></script>

よくある質問

Q1：ソースコードを見るのは違法？

いいえ、違法ではありません。ブラウザで表示されている情報を見ることは、誰でも自由にできます。ただし、コピーして無断使用することは著作権侵害になります。

Q2：パスワードで保護されたページのソースも見られる？

ログイン後に表示されるページなら、自分がアクセスできる範囲で見られます。ただし、サーバー側のコードやデータベースの内容は見られません。

Q3：スマホで見るとコードが見にくい

画面を横向きにする、フォントサイズを調整する、iPadを使う、または最終的にMacで確認するのがおすすめです。

Q4：外部CSSやJavaScriptファイルの中身も見られる？

はい。ソースコード内のリンクをタップすれば、外部ファイルの内容も確認できます。

Q5：動的に生成されたコンテンツも見られる？

はい。JavaScriptで追加された要素も、その時点でのHTMLとして確認できます。

Q6：どのくらいプログラミングの知識が必要？

基本的なHTMLの知識があれば十分です。完全に理解できなくても、構造を確認するだけでも勉強になります。

実用的な活用例

ケース1：自分のサイトの確認

確認すべきポイント：

  • モバイル表示が正しいか
  • 画像のalt属性が設定されているか
  • メタタグが適切か
  • 不要なコードが残っていないか

ケース2：他サイトのデザイン研究

学べること：

  • レイアウトの作り方
  • CSSのテクニック
  • レスポンシブデザインの実装方法
  • アニメーションの実装

ケース3：エラーの原因調査

確認できること：

  • 404エラーになっている画像
  • 読み込まれていないCSSファイル
  • JavaScriptのエラー
  • リンク切れ

ケース4：SEO対策の確認

チェック項目：

  • タイトルタグ
  • メタディスクリプション
  • 見出しタグの階層
  • 構造化データの実装

まとめ：自分に合った方法を選ぼう

iPhoneのSafariでソースコードを確認する方法を5つ紹介しました。

初心者におすすめ：

  1. 外部サイトを使う方法
  • 設定不要
  • すぐに使える
  • 分かりやすい

バランスが良い方法：

  1. 専用アプリを使う方法
  • 見やすい
  • 機能が充実
  • オフラインでも使える

上級者向け：

  1. Macとの連携
  • プロレベルの機能
  • 開発に最適
  • 詳細な分析が可能

それぞれの方法のまとめ：

方法難易度機能性おすすめ度
ブックマークレット中中★★★☆☆
外部サイト低低★★★★☆
専用アプリ低高★★★★★
Mac連携高最高★★★★☆
Shortcuts高中★★☆☆☆

選び方のポイント：

  • とりあえず試したい：外部サイト
  • 定期的に使う：専用アプリ
  • 本格的な開発：Mac連携
  • カスタマイズしたい：ブックマークレット

学習の進め方：

  1. まずは外部サイトで体験
  2. 慣れたら専用アプリを試す
  3. 本格的に学ぶならMacの環境を整える

注意点の再確認：

  • 著作権を尊重する
  • コードの無断使用は禁止
  • セキュリティに配慮
  • プライバシーを侵害しない

iPhoneでソースコードを見る方法は、一見難しそうに感じるかもしれません。でも、一度設定してしまえば、意外と簡単に使えるようになります。

ウェブ開発の勉強や、自分のサイトの確認に、ぜひこの方法を活用してみてください。実際にコードを見ながら学ぶことで、プログラミングのスキルも大きく向上しますよ！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました