ロフトワークの今を伝えるブログメディア

宝探しをはじめよう(TдT) サイト内に特定の画像やリンクのあるページを調べるためのブラウザ自動操作術

宝探し

サイトの中に隠された、とあるバナー画像が設置されてるページを全て探し出してくれ。

それが今回の依頼です。
では、どんな大海原で宝探しをしないといけないか。

  • 1,000ページくらいのサイト
  • 基本的に動的なCMSで運用
  • CMS導入以前の静的なコンテンツも存在

宝の手がかりは、バナー画像のファイル名のみ。
さて、皆さんなら、どうしますか?

 

宝の探し方は、人それぞれあると思います。

  • 全ページ目視(TдT)
  • 静的なファイル内をコマンドで全文検索
  • 動的なCMSのメディア管理機能でバナー画像の登録先ページを検索
  • 動的なCMSのデータベース内をバナー画像のファイル名で検索

 

どんな探し方でも正解なのですが、ウェブブラウザの自動操作ライブラリ「Selenium」で使える「XPath」が有能なので紹介させてください。

これだけで、ある1ページの中でお宝のバナー画像を表示しているimgタグを全て取得してくれます。

@driver.find_elements(:xpath, "//img[contains(@src, '画像ファイル名')]")

「あるページにリンクしてるページを全て探し出せ」という依頼だったら、こうなります。

@driver.find_elements(:xpath, "//a[contains(@href, '対象ページのURL')]")

スクレイピング

いわゆるスクレイピングの手法なのですが、ウェブ制作の刺身の上にタンポポをのせるようなお仕事に結構使えます。

ページ内の全ての見出しを取得

@driver.find_elements(:xpath, "//h1|//h2|//h3|//h4|//h5|//h6")

 

ページ内の文字数をカウント(ヘッダー・フッターも含んじゃうけど)

$body = @driver.find_element(:xpath, "/html/body")
$words = $body.text()
$counts =$words.size

 

サイトリニューアルのときなら、クライアントも把握してないようなFlashコンテンツや問い合わせフォームを探し出すのにも便利ですよ。

@driver.find_elements(:xpath, "//form|//object|//embed|//iframe")

 

全文(ではありません)

require "sitemap-parser"
require "selenium-webdriver"
require "rspec"
include RSpec::Expectations
# log File
LOG_FILE = "log.txt"
describe "TreasureHunt" do
before(:each) do
@driver = Selenium::WebDriver.for :chrome
@sitemap = "http://ドメイン/sitemap.xml"
@accept_next_alert = true
@driver.manage.timeouts.implicit_wait = 5
@verification_errors = []
end
 〜〜略〜〜
it "treasure_hunt" do
File.open(LOG_FILE, "w") do |f|
f.puts(@sitemap)
end
puts "START"
sitemap = SitemapParser.new(@sitemap)
sitemap.to_a.each_with_index { |url, i|
#next if i <= 10
@driver.get(url)
begin
@driver.find_element(:xpath, "//img[contains(@src, '画像ファイル名')]")
puts "■"
File.open(LOG_FILE, "a") do |f|
f.puts("■ #{i} : #{url}")
end
rescue
puts "□"
File.open(LOG_FILE, "a") do |f|
f.puts("□ #{i} : #{url}")
end
end
puts "#{i} : #{url}"
#break if i == 10
}
puts "END"
end
 〜〜略〜〜
end

 

プログラムなんて分からないって人は、Googleスプレッドシートのセルに下記を記述して遊んでみてください。

=IFERROR(ImportXML("http://www.loftwork.jp", "/html/head/title"),"")

 

ウェブ制作で刺身の上にタンポポをのせるお仕事が少しでも楽しくなれば幸いです(ΦωΦ)

川竹 敏晴 川竹 敏晴

大学卒業後、システム開発会社にエンジニアとして勤務。Java等を用いて大小様々なWeb系システムを開発。その後、Web制作会社にて数多くのCMS導入案件の開発を担当したのち、2011年にロフトワーク入社。主にCMS導入案件の技術的なサポートを担当している。自他共に認めるCMS好きで、日々新しいCMSの研究を行なっている。>>プロフィール詳細

関連記事