Djangoで書かれた？WebサイトをBeautifulSoupでスクレイピングしたい

Question

https://www.jrf-reit.com/portfolio/list.html

この不動産投資法人の物件一覧ページから、物件名と住所を取得するのが目標です。

from bs4 import BeautifulSoup
import requests
import urllib

url = 'https://www.jrf-reit.com/portfolio/list.html'

res = requests.get(url)
soup = BeautifulSoup(res.content, 'html.parser')
print(soup.tbody)

結果

<tbody v-bind:key="index" v-for="(item, index) in filtered_data">
<tr>
<td class="thumb" rowspan="2"><a class="tbox" v-bind:href="item.url">
<div><img alt="" v-bind:src="item.thumb"/><span class="filter"></span></div></a></td>
<td class="name" rowspan="2">
<a v-bind:href="item.url">
<p class="summary">{{item.summary}}</p>
<p class="name" v-html="item.name"></p>
<p class="area">{{item.addr}}</p>
</a>
</td>
<td class="time" rowspan="2">{{item.date | shortDate}}</td>
<td class="age" rowspan="2"><span v-if="site == 'IIF'">{{item.build | shortDate}}</span><span v-else="">{{item.build | calcAge}}</span></td>
<td class="space" rowspan="2">{{item.space | localeString}}</td>
<td class="price">{{item.price| localeString}}</td>
<td class="valuation">{{item.valuation| localeString}}</td>
<td class="tenant">{{item.tenant_num}}</td>
<td class="op-rate">{{item.op_rate}}</td>
</tr>
<tr>
<td class="price-ratio">{{calcRatio(item.price, total_price)}}</td>
<td class="value-ratio">{{calcRatio(item.valuation, total_valuation)}}</td>
<td class="major-tenant" colspan="2">
<p><span v-html="item.major_tenant"></span></p>
</td>
</tr>
</tbody>

7-9行目の

<p class="summary">{{item.summary}}</p>
<p class="name" v-html="item.name"></p>
<p class="area">{{item.addr}}</p>

このあたりが欲しい情報だと思いますが、見ると実際の物件名や住所ではなく、{{item.addr}}などと書かれています。
Djangoのテンプレートエンジンを使ったcontext?のように見えますが、欲しいのはGビル南青山02、
東京都港区南青山五丁目8番5号などのような実際の名前です。
このような情報はどうやって取得したらよいのでしょうか？

Answer 1

とりあえずSeleniumとheadless chromeで住所取得できます。

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup

options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome('chromedriver', options=options)
driver.implicitly_wait(10)
driver.get('https://www.jrf-reit.com/portfolio/list.html')

html = driver.page_source.encode('utf-8')

driver.quit()

soup = BeautifulSoup(html, "html.parser")

住所の番地以外はポートフォリオ一覧（CSV：12.9KB）から取得できるのと

こちらからJavascriptの配列を取得できるのでJSONに変換できそうです
https://www.jrf-reit.com/common/data/object_list.js

JSONに変換

import requests
import pandas as pd

url = 'https://www.jrf-reit.com/common/data/object_list.js'

r = requests.get(url)

# 変数名と；を除去
j = r.text.replace("var PORTFOLIO_DATA = ", "").replace('\t"', '"').replace('];', ']')

df = pd.read_json(j)

df.to_csv("result.csv")

Comments

[hiroshimaeasyry]

ありがとうございます。
やはりseleniumを使わないと、bsだけでは拾えないんですね...

こちらのページに関してはおっしゃられる通りread_csv()で取得しましたが、
他のサイトでもこの埋め込み型が出てきた時の為、selenium勉強してみます。

ありがとうございました。

[barobaro]

別にseleniumを使わなくてもjavascript等でレンダリングされたあとのページを取得するばいいだけですのでたくさんのページを取得するのでなければブラウザの名前をつけてページを保存でファイルにしてしまえばスクレイピングできます。

[barobaro]

追記しました。
JSONに変換後、CSVに変換しています。

Answer 2

下記で出来ます。

print(soup.body)

Comments

[hiroshimaeasyry]

`print(soup.body)`
で取得できるのは、やはり実際の物件名や住所ではありません。
例えば
`print(soup.select('th')`で表の部分の中身を取得しようとすると、
こちらが返ってきました。

```
[<th rowspan="3">物件イメージ</th>, <th class="sortable" rowspan="3">物件名称
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'name' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('name','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'name' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('name','D')"></span>
</div>
</th>, <th class="sortable" rowspan="3">取得時期
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'date' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('date','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'date' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('date','D')"></span>
</div>
</th>, <th class="sortable" rowspan="3">
<span v-if="site == 'IIF'">建築時期</span><span v-else="">築年数(年.ヶ月)</span>
<sup>※2</sup>
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'build' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('build','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'build' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('build','D')"></span>
</div>
</th>, <th class="sortable" rowspan="3">総賃貸可能面積（㎡）<sup>※3</sup>
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'space' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('space','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'space' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('space','D')"></span>
</div>
</th>, <th class="sortable" rowspan="2">取得価格<br/>(百万円)
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'price' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('price','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'price' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('price','D')"></span>
</div>
</th>, <th class="sortable" rowspan="2">鑑定評価額・期末算定価額<br/>(百万円)<sup>※4</sup>
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'valuation' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('valuation','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'valuation' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('valuation','D')"></span>
</div>
</th>, <th colspan="2">テナント<sup>※5</sup></th>, <th class="sortable">数
<div class="arrow">
<span class="asc" v-bind:class="{active:(sort_key == 'tenant_num' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('tenant_num','A')"></span>
<span class="desc" v-bind:class="{active:(sort_key == 'tenant_num' &amp;&amp; sort_order == 'D')}" v-on:click="execSort('tenant_num','D')"></span>
</div>
</th>, <th>稼働率（%）<sup>※6</sup></th>, <th>(%)</th>, <th>(%)</th>, <th colspan="2">主要テナント</th>]
```

`<span class="asc" v-bind:class="{active:(sort_key == 'name' &amp;&amp; sort_order == 'A')}" v-on:click="execSort('name','A')"></span>`

ここに名前が入っていると思いますが、実際の名前を拾うにはどうしたらよいでしょうか?

[yamato_user]

print(soup.tbody)

ではなく、

print(soup.body)

でも無理ですか？

[hiroshimaeasyry]

できませんでした。