iPhone で要素を検査する方法: 知っておくべきことすべて

ご存じない方のために付け加えておきますが、Web ページは 1 つのエンティティとして表示されるようにフォーマットされた多数の要素で構成されています。Web 開発者は、これらの各要素を理解し、それらが Web ページ上でどのように配置されているかを理解し、それぞれが単独でどのように機能するかを確認する必要があります。

Windows および Mac ユーザーは、Web ページを右クリックしたときに利用できる「検査」または「要素の検査」オプションに精通しているでしょう。このオプションが提供するのは、Web サイトのソース コードを表示し、そのすべての要素とその背後にあるコード行を確認し、その Web サイトにある Javascript、HTML、CSS、およびその他すべてのメディア ファイルを編集する方法です。このようにして、特定の Web サイトがどのように機能するかを学ぶだけでなく、実際の Web ページに影響を与えることなく、自分のブラウザーで Web サイトに変更を加えることができます。 

検査オプションは「開発者」ツールとして知られていますが、その恩恵を受けるのは開発者だけではありません。初心者や非開発者でも、このツールを使用して、Web サイトがどのように構築され、その各要素がどのように連携して機能するかを学ぶことができます。iPhone で Web を閲覧するときに要素検査オプションを使用したい場合は、この投稿がその方法を見つけるのに役立つはずです。 

関連: Android で要素を検査する方法

Safari で Web 要素を直接検査できますか?

単純な答えはノーです。iOS 上の Safari は、他の多くのモバイル ブラウザーと同様、Web ページの開発状況を表示するためのネイティブ検査ツールを提供しません。Apple はそのようなオプションがない理由については明らかにしていませんが、スマートフォンのディスプレイが小さいことが関係していると考えられます。表示サイズが小さいと、Web ページのコードを編集したり、Web ページのコードを見つけたりするときに慎重にカーソルを置く必要があるため、ユーザーが検査中のボックス内を移動するのが難しくなる可能性があります。 

このもう 1 つの理由は、スマートフォンのコンピューティング能力の不足である可能性があります。最近の iPhone はグラフィックを多用するゲームを実行するのに十分な能力を備えていますが、すべての Web サイトが同じように作成されているわけではないため、Web サイトのページ情報を表示するのは難しい場合があります。一部の Web サイトには、シームレスに見えるように慎重に作成された多くのリソースとレイヤーが含まれている場合がありますが、同じリソースを検査するときに読み込みに時間がかかる場合があります。 

関連: iPhone でビデオをループする [ガイド]

iPhone で要素を検査する: 他にどのようなオプションがありますか?

iOS の Safari アプリで「要素の検査」ツールをネイティブに使用することはできませんが、この制限を回避する方法はまだあります。iPhone の Safari でアクセスした Web ページの要素を検査できる 3 つの方法を以下に示します。 

方法 #01: Mac で Safari を使用する

iPhone に加えて macOS デバイスを所有している場合でも、Mac 上で Safari アプリから直接 Web ページを検査できます。Apple では、Mac で「開発」ツールを使用するのと同じように、iOS 上の Safari から Web ページをデバッグできるようにしています。サイトのデバッグプロセスは比較的単純ですが、初期セットアップには予想よりも時間がかかる場合があります。ただし、心配はいりません。セットアップ プロセスを可能な限り簡単な方法で説明し、初めてページを簡単に確認できるようにお手伝いします。 

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

Web 要素をデバッグできるようにするには、まず iOS 上の Safari アプリの Web Inspector を有効にする必要があります。これを行うには、設定アプリを開いて「Safari」を選択します。

iPhone で要素を検査する方法: 知っておくべきことすべて

Safari内で下にスクロールして「詳細設定」をタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

次の画面で、「Web インスペクター」の横にあるトグルを緑色になるまでタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

Macでの初期設定

iOS で Safari の Web Inspector を有効にしたら、Mac でセットアップを完了します。Mac では、Safari アプリケーションを開き、メニュー バーから [Safari] オプションをクリックして、[環境設定] を選択します。 

iPhone で要素を検査する方法: 知っておくべきことすべて

表示されるウィンドウで、上部の「詳細」タブを選択し、「メニューバーに開発メニューを表示する」ボックスにチェックを入れます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

上部のメニュー バーに「開発」オプションが表示されるはずです。 

iPhone で要素を検査する方法: 知っておくべきことすべて

次に、iPhone に付属の USB ケーブルを使用して、iPhone と Mac の間の接続を確立します。iPhone が Mac に接続されたら、メニュー バーの [開発] をクリックして、iPhone がデバイスのリストに表示されるかどうかを確認できます。「はい」の場合は、このリストからデバイス名をクリックします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

先ほどのように USB ケーブルを必要とせずにワイヤレスで Web ページを検査できることを確認するには、iPhone メニューが開いたら「ネットワーク経由で接続」オプションをクリックします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

これで、iPhone を Mac から切断しても、間にケーブルを接続しなくても Web ページを検査できるようになります。 

Mac 上の iOS から Web ページを検査する

「開発」メニューの「ネットワーク経由で接続」を有効にしたので、iOS 上の Safari から Mac で直接 Web ページを検査できるようになりました。Web ページをワイヤレスでデバッグできるようにするには、iPhone と Mac の両方が同じワイヤレス ネットワークに接続されていることを確認するだけです。 

これを行うには、iPhone で Safari アプリを開き、調べたい Web ページに移動します。 

iPhone のロックが解除され、選択した Web ページが開いた状態で、Mac に移動し、そこで Safari アプリケーションを開きます。ここでは、メニューバーから「開発」をクリックし、「iPhone」に移動します。 

iPhone で要素を検査する方法: 知っておくべきことすべて

「iPhone」の上にマウスを置くと、iOS で開いている Web ページのリストが表示されます。このリストから検査したい Web ページをクリックします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

新しいウィンドウが Mac にロードされ、選択した Web ページから確認できるすべての情報が表示されます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

検査中はいつでも、iPhone 上の青い領域を探すことで、コード行がページのどの部分を指しているのかを確認できます。

iPhone で要素を検査する方法: 知っておくべきことすべて

この青い領域は、Mac 上でマウスを移動しているコードが、この特定の Web ページの強調表示された要素を構成していることを示します。コードの異なる行間を移動すると、この青いハイライトが iPhone 上のページのさまざまな部分にリアルタイムで移動します。 

関連: FaceTime でエフェクトを保持する方法

方法 #02: iOS でショートカットを使用する 

Mac を所有していない場合、または iPhone から直接 Web サイトを覗いてみたい場合は、iOS ショートカット アプリを使用すると便利です。iOS のショートカット アプリには、ページのソース コードの表示、Web ページの編集、Web サイトからの画像の取得、Safari アプリ内での Web ページの古いバージョンの検索を可能にする、あらかじめ作成された選択肢が多数用意されています。残念ながら、iOS には本格的な Web デバッグを提供する単一のショートカットがないため、これらの目的ごとにショートカットを追加する必要があります。 

iOS から Web サイトで直接デバッグを実行するために使用できる次のショートカットが見つかりました。これらは:

ソースの表示– このショートカットを使用すると、Web ページのソース コードをベース ボーン形式で表示できます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

Web ページの編集– このショートカットを使用すると、Web ページのコンテンツをローカルで編集できるため、新しいデザインや形式、および iPhone での表示をテストできます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

ページから画像を取得– ページを検査する主な理由は、画像を確認したり、インタラクティブではない画像を保存したりすることです。このショートカットは、特定の Web ページからすべての画像を取得し、それらをまとめてプレビューします。以下のスクリーンショットが示すように、選択した Web ページでホストされている 24 枚の画像をすべて表示できます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

ウェイバック マシン– このショートカットを使用すると、Web ページのウェイバック マシンに移動し、インターネット アーカイブに保存されたままの以前のバージョンを確認できます。 

iOS で Web ページを検査する方法に応じて、上記の関連リンクをクリックするか、[ショートカット] > [ギャラリー] 内で検索して、これらのショートカットのいずれかを iPhone に追加できます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

検索結果で、iPhone に追加したいショートカットをタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

プレビュー画面が開いたら、下部にある「ウィジェットを追加」オプションをタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

皆さんのショートカットは [マイ ショートカット] > [すべてのショートカット] 画面内に表示され、Safari の [共有] シートからもアクセスできます。  

iPhone で要素を検査する方法: 知っておくべきことすべて

Web ページを調べるには、Safari で Web ページを開き、下部にある「共有」ボタンをタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

表示される共有シートで、下にスクロールして、iPhone に追加したショートカットを見つけます。 

iPhone で要素を検査する方法: 知っておくべきことすべて

「Web ページの編集」を選択すると、Web ページの一部を直接編集できるようになります。他の 3 つのオプションのいずれかを選択すると、Web ページにアクセスするためのショートカットを使用するかどうかを尋ねるメッセージが表示されます。ここで「一度だけ許可」をタップします。 

iPhone で要素を検査する方法: 知っておくべきことすべて

関連: WidgetSmith をホーム画面に追加する方法

方法 #03: サードパーティ製アプリを使用する

上記の結果に満足できない場合は、Web ページの要素を検査できるようにサードパーティ アプリを調べる必要があります。Safari と同様に、最も一般的な Web ブラウザ (Chrome、Firefox、Brave など) 内で Web ページを検査する方法は見つかりません。代わりに、この特定のタスクを実行するために作成されたアプリに依存する必要がありますが、このようなアプリは見つけるのが難しい場合があります。

App Store で簡単に検索すると、Web 要素を検査するための結果がいくつか表示されますが、無料で利用でき、評価も高いアプリはそれほど多くありません。ユーザーのフィードバックに基づいて、 JavaScript、CSS、HTML の要素の検査と編集を提供するInspect BrowserまたはGear Browser アプリを App Store からインストールすることをお勧めします。 

iPhone 上の要素の検査について知っておく必要があるのはこれだけです。 

関連している



Leave a Comment

MicrosoftTeamsのエラーコードCAA20004を修正する方法

MicrosoftTeamsのエラーコードCAA20004を修正する方法

Microsoft TeamsのエラーコードCAA20004が発生した場合の解決方法を詳しく解説。アカウント設定、ログ確認、ADFSエンドポイント有効化など、5つのステップで問題を解決します。

ズームエラー3065のトラブルシューティング

ズームエラー3065のトラブルシューティング

ズームエラー3065でお困りですか?この記事では、エラー3065の原因と5つの効果的な解決策を詳しく解説します。Zoomのアップデート方法やインターネット接続の確認など、すぐに使えるヒントを紹介します。

Lightroom:ファイルがサポートされていないか破損しているように見える

Lightroom:ファイルがサポートされていないか破損しているように見える

Adobe Lightroomで「ファイルがサポートされていないか破損しているようです」というエラーが発生した場合の解決策を5つ紹介します。ファイル形式の確認、転送方法、ハードドライブのチェック、Lightroomの更新など、効果的な対処法を詳しく解説。

Microsoft Teamsエラー:招待の引き換えに失敗しました

Microsoft Teamsエラー:招待の引き換えに失敗しました

Microsoft Teamsで「招待の引き換えに失敗しました」エラーが発生した場合の5つの解決策をご紹介します。ゲストアクセスのトラブルシューティング方法を詳しく解説。

Microsoft Teams:チャット履歴をエクスポートする方法

Microsoft Teams:チャット履歴をエクスポートする方法

Microsoft Teamsのチャット履歴をエクスポートする方法を詳しく解説。スクリーンショット、PDF保存、Outlook共有、専用エクスポートページなど、5つの便利な方法を紹介します。

チームで誰があなたをミュートしたかわかりますか?あまり

チームで誰があなたをミュートしたかわかりますか?あまり

Microsoft Teamsで誰があなたをミュートしたかを知る方法はありませんが、プレゼンターのみが他の出席者をミュートできます。この記事では、ミューティングシステムの詳細と5つの重要なポイントを解説します。

ズームエラー2008:その意味と修正方法

ズームエラー2008:その意味と修正方法

ズームエラー2008は、無効なアクセス許可や期限切れのライセンスによって発生します。このガイドでは、5つの簡単な修正方法を紹介し、問題を迅速に解決します。

iPhone に通知バッジが表示されない? 7つの修正方法

iPhone に通知バッジが表示されない? 7つの修正方法

iPhone の通知バッジが表示されない問題を解決するための7つの方法を詳しく解説。フォーカスモードの確認、強制再起動、設定の調整など、効果的なトラブルシューティング手順を紹介します。

Microsoft Teams エラー 0xcaa80000 を修正する5つの方法

Microsoft Teams エラー 0xcaa80000 を修正する5つの方法

Microsoft Teams エラー 0xcaa80000 を修正する方法を詳しく解説。TLS 1.1 および 1.2 の有効化、キャッシュのクリア、アプリの更新など、5つの効果的な解決策を紹介します。

Microsoft Teams エラー caa20003 のトラブルシューティングと5つの解決策

Microsoft Teams エラー caa20003 のトラブルシューティングと5つの解決策

Microsoft Teams エラー caa20003 が発生した場合の対処法を詳しく解説。日付と時刻の設定確認、シークレットモードでのサインイン、キャッシュクリアなど、効果的な解決策を紹介します。