概要

飲食店検索サイトの情報をとってきてみようシリーズ
続いてはRetty

言語/ライブラリ

ruby
nokogiri

HTML情報を取得する部分には今回はopen-uriを採用している。

コード

つべこべ言わずにまずはコードの紹介

require 'uri'
require 'nokogiri'
require 'kconv'
require 'open-uri'
require 'yaml'

area = URI.encode_www_form_component("東京")
keyword = URI.encode_www_form_component("居酒屋")
file = URI.open("https://retty.me/restaurant-search/search-result/?latlng=35.466195%2C139.622704&free_word_area=#{area}&free_word_category=#{keyword}")

doc = Nokogiri::HTML.parse(file.read, nil, 'utf-8')
puts "###お店の名前を取得###"
restaurants_str = doc.css('div[is="restaurant-list"]')[0][':restaurants'].gsub('\n\n','')
YAML.load(restaurants_str).map do |restaurant|
  puts restaurant['name'].gsub(/\\u([\da-fA-F]{4})/) { [$1].pack('H*').unpack('n*').pack('U*') }
end

こちらを実行すると

###お店の名前を取得###
居酒屋 かまどか 横浜西口店
居酒屋 甘太郎 横浜西口本店
2000円 食べ放題飲み放題 居酒屋 おすすめ屋 横浜店
九州料理 個室居酒屋 楓 横浜駅店
居酒屋 静月
ラーメン居酒屋 火炎
夜景×和モダン居酒屋 鶴屋 横浜総本店
韓国料理居酒屋 韓兵衛 横浜鶴屋町店
横浜駅前全室個室居酒屋　凛 - りん - 横浜駅前店
居酒屋いろは
海鮮個室居酒屋 みや田 横浜店
GLASS DANCE 横浜
比内地鶏と個室居酒屋 六郷 横浜店
漁師ダイニング 満月 横浜西口本店
横浜 地鶏と個室 兼政
肉バル MEAT BOY N.Y　横浜駅前店
焼肉ダイニング　食べ飲み放題　ちからや　 横浜鶴屋町店
焼き鳥 とりー
豚の味珍
海鮮居酒屋 ふじさわ

こんな感じで「東京居酒屋」で検索した情報が取得できる。

つまりポイント

今回実装にあたっていくつかつまりポイントがあったので共有します。

取得したい情報が配列 in JSON

取得したい情報が

[{'id':'100001553117','url':'https:\/\/retty.me\/area\/PRE14\/ARE38\/SUB3801\/100001553117\/','catchCopy':null,'name':'\u3054\u3063\u3064\u3048\u3048\u672c\u8217 CIAL\u6a2a\u6d5c\u5e97','countWannago':'118','isPaypayBonus':false,'isPaypayAvailable':false,'images':['https:\/\/ximg.retty.me\/crop\/s220x220\/q80\/das\/-\/retty\/img_repo\/l\/01\/29340709.jpg','https:\/\/ximg.retty.me\/crop\/s220x220\/q80\/das\/-\/retty\/img_repo\/l\/01\/29340711.jpg','https:\/\/ximg.retty.me\/crop\/s220x220\/q80\/das\/-\/retty\/img_repo\/l\/01\/28107636.jpg'],'categoryText':'\u305f\u3053\u713c\u304d','subAreaName':'\u6a2a\u6d5c\u897f\u53e3\u5468\u8fba','stationName':'\u6a2a\u6d5c','stationDistance':'72','stationDistanceMinute':1,'budgetLunch':'\uff5e1000\u5186','budgetDinner':'\uff5e1000\u5186','holiday':'\u4e0d\u5b9a\u4f11','isTopUserReport':true,'reportUserIconURL':'https:\/\/user-icon.retty.me\/resize\/crop\/s120x120\/id\/1004103\/','reportText':'CIAL\u6a2a\u6d5c\u306e\u5730\u4e0b\u306b\u5165\u3063\u3066\u3044\u308b\u5927\u962a\u305f\u3053\u713c\u304d\u306e\u304a\u5e97\uff01\n\n\u3053\u3053\u306f\u6bd4\u8f03\u7684\u4eba\u304c\u5c11\u306a\u3081\u3067\u3086\u3063\u304f\u308a\u3067\u304d\u308b\u304b\u3089\u308f\u308a\u3068\u7a74\u5834\u0669\ua4b0 \u02d8 \u00b3\u02d8\ua4b1\u06f6~\u2661\n\n\u4ef2\u826f\u3057\u306e\u3088\u3063\u3074\u30fc\u5f85\u3061\u30671\u4eba\u30bc\u30ed\u2661\n\n\u306a\u3093\u3068\u3001\u305f\u3053\u713c\u304d4\u500b\uff0b\u30cf\u30a4\u30dc\u30fc\u30eb\u3067 550\u5186\u3068\u3044\u3046\u3001\u8d85\u304a\u2026','reportUserName':'Junko Yura','homeMealReplacementTextLabels':[],'familiarAttribute':null,'isPaid':false,'phoneNumber':''}]

上記のように配列の中にJSONが入っているような構造になってまして、
https://qiita.com/itaya/private/9237c4ac8ebc4d77cf74
いろいろ調べたところymlパースをするとうまくいくということでそちらを採用しました。

取得したい情報がUnicode

次の問題はパースできた情報を見てみるとUnicodeになっていて、UTF-8に簡単にできないことでした

\u3054\u3063\u3064\u3048\u3048\u672c\u8217 CIAL\u6a2a\u6d5c\u5e97

具体的にはこんな文字列でした。

流石にこれでは読めないので、なんとか普通の文字列に戻したく
https://qiita.com/itaya/private/e6dc9ca079bedd8a40bc
こちらを使って変換処理を噛ませました。

まとめ

今回のサイトは少し癖のあるものでいくつかテクニックを学べた良いサイトだった。ありがとうございます(？)