IPhone/iPad で Web ページのソースを表示する方法: 7 つの方法

IphoneApr 08, 2023

あなたが働いていたウェブサイトにアクセスしていて、いくつかの不具合を見つけたとします。 バグのあるコードを見つけて修正するには、iPhone または iPad でページのソースを表示する必要があります。 Safari を開いて、Safari の HTML ソース コード表示ボタンが役に立たないことに夢中になります。 これでどうしますか？ この記事を読めば簡単！

すべての Web サイト開発者、プログラマー、ソフトウェア デザイナー、App Store アプリ開発者、コンテンツ クリエーター、および Web マスターは、ソース コードがいかに重要であるかを知っています。 この一連の作業では、問題を修正し、デバッグし、設計し、Web サイトに価値を追加するために、常に Web ページのソース コードを確認する必要があります。

このタスクは、Android デバイスや Windows デバイスでは非常に簡単ですが、iPhone、iPad、MacBook、iMac などの Apple デバイスでは同様に困難です。 ただし、macOS では、この機能は利用可能ですが非表示になっており、この「Safari で HTML ソース コードを表示する" 記事。 ただし、iOS デバイスの場合は話が異なります。

Apple は、iPad/iPhone でページのソースを表示することを完全に困難にしました。 Web ページの HTML ソース コードを取得するためにタップまたはタッチできるネイティブの、または簡単な方法はありません。 しかし、まだ夢中になりすぎないでください。 代わりに、この記事を最後まで読んで、iPhone または iPad の Safari でページのソースを表示する方法を学ぶ最良の方法を見つけてください。

iPhone/iPad でページのソースを表示する必要がある理由

iPad/iPhone の Safari でページ ソースを表示する状況と理由を以下に示します。

  • iPhone や iPad などの特定のデバイスの Web ページのページ ソースを表示する必要があります。 Mac で Web サイトにアクセスして HTML ソース コードを表示すると、iPhone または iPad バージョンではなく、デスクトップ バージョンの要素が表示されます。
  • あなたは旅行中で、Web ページのコードを調べて新しいアイデアを得たり、デバッグ計画を作成したりすることに時間を費やしたいと考えています。
  • 次のような多くのマルチタスク機能が備わっているため、iPad で Web サイト開発を行うことを好みます。 舞台主任、分割ビューなど。

したがって、iPhone または iPad でページのソースを表示する必要が生じた場合に備えて、以下の方法に従ってください。

iPhone/iPad でページのソースを表示する最良の方法

以下は、サードパーティのアプリを利用せずに、iPhone または iPad で HTML コードのページ ソースを表示する一般的な方法です。 これらの方法は、プライバシーとセキュリティに関心のあるコーダーとエンド ユーザーに適しています。

1. ショートカット アプリを使用して HTML ソース コードを取得する

この方法は、iOS 12.0 (iPadOS 12.0) 以降を実行している場合にのみ機能します。 iPhone または iPad でビュー ページのソース ショートカットを作成する方法は次のとおりです。

  • 開く ショートカット ホーム画面または App Drawer からのアプリ。
  • をタップします。 プラス (+) アイコンをクリックして、新しい空のショートカットを作成します。
  • 検索ボックスに次のように入力します。 HTML そして選ぶ リッチ テキストから HTML を作成する.
  • もう一度、 クイックルック アプリを検索ボックスに入力し、ショートカット エディターに追加します。
  • 次に、上部のショートカットアイコンをタップして選択します 名前を変更.
Web ページでソース コードを表示するためのショートカット
Web ページでソース コードを表示するためのショートカット
  • 名前を変更します ソースコードを見る をタップします。
  • をタップします。 （私） ボタンをクリックして、 共有シートに表示 オプション。
  • 次に、Safari ブラウザーを開き、選択した Web ページにアクセスします。
Safari の共有シートでソースコードのショートカットを表示
Safari の共有シートでソースコードのショートカットを表示
  • タッチ 共有 ボタンをクリックし、下にスクロールして ソースコードを見る ショートカット。
  • ショートカットをタップすると、Quick Look に HTML ソース コードが表示されます。

2. ブックマーク スクリプトを使用してページ ソースを表示する

この方法では、ブックマークを作成し、URL はソース表示スクリプトになります。 Web ページを閲覧していて、Safari でページのソースを表示する必要がある場合は、ブックマークをタップするだけです。 ページの HTML ソース コードを取得します。 方法は次のとおりです。

  • ランダムな Web サイトにアクセスし、iPad または iPhone の Safari ブラウザーでブックマークします。
  • をタップします。 サファリメニュー 左上隅にある ブックマーク.
  • 触る お気に入り 追加したブックマークを見つけます。
  • ブックマークをロングタップしてから選択します 編集 コンテキストメニューで。
ブックマークのタイトルとアドレスを編集する方法
ブックマークのタイトルとアドレスを編集する方法
  • 既存のブックマークのタイトルをクリアし、名前を HTML ソース コード またはブックマークを覚えておくためだけに何か。
  • をタップします。 住所 フィールドを削除し、既存の URL をクリアします。
  • 次のコードをコピーして URL として貼り付けます (コード作成者: Rob Flaherty):
javascript:(function(){var a=window.open('about: blank').document; a.write('');a.close();var b=a.body.appendChild (a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace=' pre-wrap';b.appendChild (a.createTextNode (document.documentElement.innerHTML))})();
  • タップ 終わり をクリックして、これまでに行った変更を保存します。
  • 次に、ソース コードを検査する必要がある Web ページに移動します。
ブックマーク スクリプトを使用して Safari でページ ソースを表示する方法
ブックマーク スクリプトを使用して Safari でページ ソースを表示する方法
  • に行く ブックマーク メニューをタップ HTML ソース コード 作成したブックマーク。
  • アクセスしているページの HTML コードが新しい Safari タブに表示されます。

また読む：iOS および Mac の Safari でブックマークを管理する方法

3. macOS テザリングを使用してページのソースを表示する

iPhone および iPad の Safari アプリには、Web インスペクター ツールが組み込まれています。 残念ながら、この機能は iPhone または iPad デバイスでは直接動作しません。 デバイスを MacBook または iMac にテザリングする必要があります。 その後、Mac Safari のコントロールを使用して、HTML ソース コードを視覚化できます。 このプロセスは、以下に概説するように 2 つのフェーズで機能します。

Web インスペクターを有効にする

次の手順に従ってオンにします Web インスペクタ iPad および iPhone の Safari での機能:

  • iPhone または iPad で、 設定 アプリ。
  • に行く サファリの設定.
  • Safari 設定ウィンドウの一番下までスクロールして、 高度 メニュー。 それをタップします。
Safari iPad で Web インスペクターを入手する方法
Safari iPad で Web インスペクターを入手する方法
  • アクティブ化 Web インスペクタ トグルボタンをタップします。

Mac Safari でページのソースを表示

Mac に移動し、次の手順に従います。

  • USB ケーブルを使用して、iPhone または iPad を MacBook または iMac に接続します。
  • デバイスが以前に認証されていない場合、Mac は Apple ID を使用して認証するように求めます。
  • Mac で Safari アプリを開き、任意の Web サイトにアクセスします。
  • Mac ツールバーで、 発展.
  • 開いたコンテキスト メニューで iPad または iPhone を探します。
  • iPad または iPhone をクリックして、これらのデバイスの Safari 画面を表示する新しいウィンドウを Mac で開きます。
  • 次に、iPhone または iPad で対象の Web サイトを開き、Mac Safari ブラウザーでソース コードを表示します。

サードパーティのアプリやツールに問題がない場合は、Web ページの HTML ソース コードを表示する次の追加の方法も参照してください。

4. Safari 拡張機能 – Web インスペクター

iPad および iPhone に Apple Safari ブラウザー用の Web Inspector 拡張機能をインストールできます。 次に、Web ページを閲覧してその HTML ソース コードを表示するときに拡張機能を呼び出します。 試す必要がある手順は次のとおりです。

  • 開く 設定 アプリにアクセスして サファリの設定 セクション。
  • が見つかるまで下にスクロールします。 拡張機能 オプション。 それをタップします。
Safari設定のその他の拡張機能に移動します
Safari設定のその他の拡張機能に移動します
  • 拡張機能内で、 その他の拡張機能.
  • Safari 拡張機能の App Store ページがポップアップ表示されます。
  • タッチ 検索 ボックスとタイプ Web インスペクタ キーボードの [検索] をタップします。
  • Web Inspector アプリを見つけてインストールします。
  • 再びに行く 設定 > サファリ > 拡張機能 > をタップします Web インスペクタ.
  • トグル ボタンを使用して、この拡張機能を Safari で有効にします。
  • Safari を開き、任意の Web サイトにアクセスします。
Safari の拡張機能メニューから Web インスペクターを有効にします
Safari の拡張機能メニューから Web インスペクターを有効にします
  • をタップします。 拡張機能 アドレスバーの右隅にあるアイコン。
  • を選択 Web インスペクタ 拡大。
  • を選択 1日かかる 表示されるポップアップのオプション。
  • もう一度、 拡張機能 アイコンを選択し、[Web インスペクタ] をタッチします。
  • HTML ソース コードは、表示している Web ページの下部からポップアップ表示されます。
Web Inspector を使用して iPhone または iPad でページのソースを表示する方法を学びます
Web Inspector を使用して iPhone または iPad でページのソースを表示する方法を学びます
  • DOM、Elements、Console、Network、Resources などのタブを切り替えることができます。
  • 通常のビューに戻るには、Safari の [拡張機能] セクションで [Web インスペクター] 拡張機能をタップするだけです。

5. iOS アプリ – ソースを表示

App Store で無料で入手できます。 検索ボックスに「ソースを表示」と入力し、[検索] をタップします。 App Store に複数の結果が表示されます。 ソースを表示するものをインストールします。 アプリのプロバイダーは Roman Tomjak です。

ホーム画面または App Drawer からアプリを開きます。 次に、アドレス バーに Web サイトの URL を入力して、HTML ソース コードを表示します。

ソース表示アプリの使い方
ソース表示アプリの使い方

このツールは、ソース コードを iPhone サイズで表示します。 ただし、画面の右下隅にある関連するボタンを使用して、向きを変更したりズームインしたりできます。

6. Google ウェブ キャッシュを使用して無料でソース コードを表示する

訪問したWebサイトで次の巧妙でクールなトリックを実行して、SafariまたはChromeで基礎となるソースコードを表示できます。

  • HTML ソース コードを検索する必要がある Web ページにアクセスします。
  • Safari または Chrome のアドレス バーでアドレスをタップします。
HTTPS コードの前にカーソルを移動
HTTPS コードの前にカーソルを移動
  • 上の画像に示すように、アドレスの先頭に入力カーソルを置きます。
HTTPS コードの前にタイプ キャッシュ
HTTPS コードの前にタイプ キャッシュ
  • ここで、前に次のコードを入力します https:// 
キャッシュ：
  • ヒット 行く ボタンをクリックします。
Google Web Cache を使用して Safari でページのソースを表示する方法
Google Web Cache を使用して Safari でページのソースを表示する方法
  • ページの上部には、 ソースを表示 オプション。 それをタップします。
  • これで、アクセスしたばかりの Web ページのソース コードを取得できます。

また読む：ブックマーク、パスワードなどをインポートする方法

7. Web Apps でソース コードを表示する

Web サイトや Web ページの基になるソース コードを無料または少額の料金で公開できる Web サイトは多数あります。 これらすべての Web アプリから、CodeBeautify のソース コード ビューアーを選びました。 仕組みは次のとおりです。

  • iPhone または iPad では、次のリンクにアクセスしてください。 ソースコードビューア Safari ブラウザを使用します。
Web Apps でソース コードを表示する方法
Web Apps でソース コードを表示する方法
  • の中に URLを入力 ボックスに、HTML ソース コードを表示する Web ページの URL を入力するか、コピーして貼り付けます。
  • をタップします。 意見 ボタンをクリックして、iPhone/iPad Safari ブラウザーでページのソースを表示します。

結論

これで、iPhone および iPad デバイスでページのソースを表示するためのすべてのトリックがわかりました。 この記事では、いくつかのネイティブ メソッドと非ネイティブ メソッドを発見しました。 iPad や iPhone のネイティブ トリックに固執するだけで、Web ページの HTML ソース コードを表示したり、タスクをより簡単にするアプリを使用したりできます。

以下にコメントを残して、気に入った方法を教えてください。 また、ソーシャル メディアや WhatsApp で記事を共有して、ウェブサイトの開発やアプリのコーディングを学んでいる友人を支援してください。

次は、 Mac と iPad で Swift を学ぶ方法.

関連記事：