クローリング失敗？それはおそらくこの問題のせいです！iframe問題のすべて

クローリングできない要素がある場合: iframeにアクセスする方法

ウェブクローラーを作成すると、一度は遭遇することがあるのがiframeです。今日は、iframeの概念、利点と欠点、使用例について説明し、SeleniumとWatirを使用してiframeコンテンツにアクセスする方法も見ていきます。

iframeの概念

iframeは「Inline Frame」の略で、ウェブページ内に別のウェブページを含めるために使用されるHTML要素です。つまり、1つのウェブページ内で別のウェブページを小さなフレーム内に挿入して表示する機能を提供します。これにより、ウェブページ間のコンテンツ統合と相互作用が可能となり、さまざまな使用例に活用されます。

iframeの使用例

1) 他のウェブサイトのコンテンツを自分のウェブサイトに挿入

• ウェブサイトでは、YouTubeの動画、SlideShareのスライドショー、Googleマップ、広告コンテンツなど、さまざまな理由でiframeを使用します。PDFをダウンロードする必要がないコンテンツを挿入する際にもiframeを使用できます。

2) ページ内を別のエリアに区切る

• ウェブサイトの左側をメニューエリア、右側をメインコンテンツエリアとして区切りたい場合や、ページの底部の広告部分を分離したい場合にもiframeを使用できます。

3) 動的コンテンツのロード

• 動的にロードされるコンテンツやWebアプリをiframeを介して現在のページ内で表示することができます。これにより、ウェブページ間の相互作用が可能となります。

iframeの利点と欠点

1) 利点

外部コンテンツを簡単に取得できる

• iframeを使用すると、他のウェブサービスのコンテンツを簡単に現在のページに埋め込んで表示することができ、他のサービスのコンテンツを統合して表示する際に便利です。

• 以下の簡単なコードで地図を簡単に挿入できます。 (出典: mdn web docs)

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

同じコンテンツを複数回使用する際に便利

• 複数のページで同じコンテンツを複数回使用する必要がある場合、iframeを使用して重複作業を回避することができます。

現在のページに影響を与えない

• iframe内のコンテンツは外部ウェブページと分離されて独立して動作するため、外部コンテンツの変更が現在のページに影響を与えないことがあります。

2) 欠点

セキュリティに脆弱になる可能性がある

• iframeを使用すると、外部コンテンツが内部ページと同じドメインおよびセキュリティポリシーで実行される可能性があるため、サイトにXSS（クロスサイトスクリプティング）などのセキュリティリスクが発生する可能性があります。

アクセシビリティの問題が発生する可能性がある

• iframe内のコンテンツは元のドキュメントと分離されているため、アクセシビリティに問題が生じることがあります。スクリーンリーダーなどの支援技術を使用するユーザーにとって不便を引き起こす可能性があります。

SEOに良くない影響を与える可能性がある

• 以前は検索エンジンがiframeの内容を取得できなかったため、iframeはSEOに良くないとされていました。しかし、現在はiframe自体がSEOに影響を与えるとは言い難いです。

• 現在、検索エンジンはiframeを検出し、これを他のウェブサイトのコンテンツとして認識するため、iframeは検索エンジンのランキングに対してプラスまたはマイナスの影響を与えません。

• ただし、上位に表示されたいメインページはiframeの使用を控えることが望ましいです。メインページには外部コンテンツではなく、独自かつ有用なコンテンツを構成することがSEOに有益です。

サイズ調整が難しいことがある

• iframeは元のコンテンツのサイズに応じてサイズが調整されるため、レスポンシブレイアウトデザインに難しさをもたらすことがあります。

ユーザーエクスペリエンスが低下する可能性がある

• iframe内のコンテンツがロードされる間、ページのコンテンツが停止したり遅延したりすることがあり、ユーザーエクスペリエンスが低下する可能性があります。

Seleniumでiframe内の情報を取得する方法

Seleniumでは、次の手順でiframeにアクセスできます。

1) ウェブページにアクセス

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome() # 웹 드라이버 선택 (예: Chrome)
driver.get("URL_OF_YOUR_PAGE") # 접근할 웹 페이지의 URL 입력

2) iframe要素の識別

find_elementメソッドを使用してiframeを見つけることができます。このとき、iframeのid、name、indexなどを活用することができます。

iframe_element = driver.find_element(By.ID, "iframe_id") # iframe의 id를 사용하여 찾는 예시

3) iframe内に切り替える

switch_to.frame()メソッドを使用して、iframe内にコンテキストを切り替えます。

driver.switch_to.frame(iframe_element) # iframe 내부로 전환

4) iframe内で必要な作業を実行

driver.find_element(By.CLASS_NAME, "element_class") # iframe 안의 엘리먼트의 class로 찾는 예시

5) 作業が完了したら元のコンテキストに戻る

driver.switch_to.default_content() # 원래의 컨텍스트로 복귀

Watirでiframe内の情報を取得する方法

Watirでは、次の手順でiframeにアクセスできます。

1) ウェブページにアクセス

require 'watir'

browser = Watir::Browser.new :chrome # 브라우저 선택 (예: Chrome)
browser.goto 'URL_OF_YOUR_PAGE' # 접근할 웹 페이지의 URL 입력

2) iframe要素の識別

iframe_element = browser.iframe(id: 'iframe_id') # iframe의 id를 사용하여 찾는 예시

3) iframe内で必要な作業を実行

iframe.element(xpath: "//button[@class='CLASS_NAME']") # iframe 안의 엘리먼트를 class로 찾는 예시

まとめ

ウェブクローラーを作成する際に、明らかに存在するxpathでも要素を見つけられない場合は、ほとんどの場合、その要素がiframe内にある可能性があります。このように、クローリングを行う際には、iframe内の要素は直接見つけることができず、別途アクセスする方法が必要です。

今日は、iframeの概念、利点と欠点、そしてウェブクローラーを作成する際にiframeにアクセスする方法について説明しました。

前述の方法は、ウェブクローリング能力を向上させ、さまざまなデータを収集するのに大きな助けとなるでしょう。

データ収集、自動化しましょう

コーディング不要、5分で開始・5,000以上のウェブサイトをクロールした経験

無料で始める →