Ruby+Selenium+GlideでFNO(東京)を楽しむ術

まずはじめに

FNO前に投稿しようと思っていましたが、、、すいません

自己紹介

初投稿なので自己紹介します。
某ファッションテック企業でサーバーサイドエンジニアをしているものです。
普段は主にRuby書いていて、少しSwiftも触っています。

この記事について

FNOはFASHION’S NIGHT OUT(https://www.vogue.co.jp/fno/2019/tokyo/#/about)のことで
毎年9月ごろにVOGUEが開催しているファッションイベントです。

限定アイテムなどが発売されるなか
FNOの醍醐味といえば
ノベルティ ・ 酒
だと思っています。(個人的な意見になります)

効率よくまわって楽しみたいなと思うのですが、
公式だと
地図を見るのに毎度ページ更新して確認して
というのがめんどくさいなと感じていました。

そこで今回はSeleniumu を使用してスクレイピングをして
CSVを生成し、Glideで読み込みます！

実装

準備&&環境

chromeをダウンロードしてください。

$ ruby -v                                                                      
ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-darwin18]

スクレイピング

selenium-webdriverをインストール

gem install selenium-webdriver

chromeを開き、指定のURLに飛びます。
表示の時間を待ってから、スクロールする必要があります。(時間とスクロールは適当です)

require 'selenium-webdriver'
require 'csv'
require 'pry'

driver = Selenium::WebDriver.for :chrome
driver.navigate.to 'https://www.vogue.co.jp/fno/2019/tokyo/shoplist/#/item/3'
sleep(5)
driver.execute_script('window.scroll(0,1000);')
sleep(5)
spots = driver.find_element(:id, 'cat_result').text.split(' ')[0].to_i

必要なデータをCSVで抽出して行きます。

要素はxpathで取得しています。
xpathの取得方法に関しては下記を参考に。
https://qiita.com/ywindish/items/5a992c49387d81df900e

今回各wrap内のリンク先に住所等が書いてあるため、
もう一つDriverでchromeを起動します。
同じDriverでも問題ないですが、
JavaScriptの関係で再度待機時間などが必要になることなどから
別でchromeを開いています。

CSV.open('fno2019_tokyo.csv', 'w') do |csv|
  csv << %w[id name text image location link]
  driver.find_elements(:class, 'wrap').each.with_index(1) do |wrap, index|
    name = wrap.find_element(:xpath, "//*[@id='shopWrap']/li[#{index}]/a/div/div[2]/p[2]").text
    text = wrap.find_element(:xpath, "//*[@id='shopWrap']/li[#{index}]/a/div/div[2]/p[3]").text
    image = wrap.find_element(:xpath, "//*[@id='shopWrap']/li[#{index}]/a/div/div[1]/img").attribute('src')
    detail_link = wrap.find_element(:xpath, "//*[@id='shopWrap']/li[#{index}]/a").attribute('href')
    driver2 = Selenium::WebDriver.for :chrome
    driver2.navigate.to detail_link
    sleep(3)
    driver2.quit
    csv << %W[#{index} #{name} #{text} #{image} #{location} #{detail_link}]
    break if index == spots
  end
end

Driverを終了します。

driver.quit

Glide

生成したCSVをGoogle Driveにアップロードして
スプレッドシートで開きます。

Glide(https://go.glideapps.com/)を開き、
先ほど生成したスプレッドシートを読み込むだけです。

あとは好みでデザインを変更できます。

参考

https://www.seleniumqref.com/api/webdriver_gyaku.html
https://morizyun.github.io/web/selenium-cheat-sheet.html

最後に

下記が作成したものです。
https://x9kav.glideapp.io

神戸、名古屋、大阪の開催も10月以降にありますので
参考にしていただければ幸いです。

来年はドリンク、食事、それ以外のノベルティを
画像認識もしくは文字列判別で分類したいなと思っているところです。