기사 일람 페이지 등에서, 타이틀이나 링크처 정보의 일람을 일괄로 취득하고 싶을 때,
Chrome의 확장 도구 'Scraper'를 이용하여 스크래핑(scraping)하여 취득하는 방법의 망비록.

Scraper를 Chrome 확장 프로그램에 추가

Chrome 웹 스토어에서 확장 프로그램 추가 버튼을 클릭하여 확장 프로그램에 추가합니다.

Scraper(Chrome 웹 스토어)
htps // ch 로메. 오, ぇ. 이 m / ぇ bs 잡아 / / 싶은 l / sc 등 ぺr / m 비 g 바 pn jc 가후 hmbkd hl = 그럼

취득 예 : 「트부야키 데스크」 도입 사례의 개별 사례 정보를 취득하고 싶을 때

도입 사례의 기업명, 설명문(description), 페이지 링크처를
일괄 취득해 일람표로 하는 경우의 참고 페이지 및 참고 화면을 아래에 기재.

■「트부야키 데스크」도입 사례
htps : // tw에서 sk. 코 m/에아 mpぇ/


■ 취득하고 싶은 부분의 코드 샘플

<!-- ※起点とするdiv要素 -->
<div class="archive-list">
    <!-- ※起点とするdiv要素の子要素 -->
    <div class="post-box">
        <!-- ※起点とするdiv要素の1番目の孫要素 -->
        <div class="thumb"> <img width="110" height="110" src="/wp-content/uploads/2020/04/14_marui_anime_emblem.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
        <!-- ※起点とするdiv要素の2番目の孫要素 -->
        <div class="box-in">
            <!-- ※取得したい企業様名 -->
            <div class="post-tit">株式会社 丸井グループ 様 </div> 
            <!-- ※取得したい説明文(description) -->
            <p class="lead">株式会社 丸井グループ様のつぶやきデスク導入事例です。キーワードを登録し、イベント来場者の動きをツイートで確認。イベント開始前の反応から、来場者の人数や属性を予測することも。</p>
            <!-- ※取得したいリンク先を持つaタグ -->
            <a href="/example/marui/" class="more-link"> More</a> </div>
    </div>
    <!--//post-box-->

{ 中略 }  

</div>
<!--//archive-list-->

<<참고> Chrome의 개발자 도구에서 볼 때 해당 부분의 코드


■ 「Scraper」로 도입 사례의 기업양명, 설명문(description), 페이지 링크처를 취득했을 때의 화면

취득하고 싶은 항목의 패스를 기재하고, 「Scrape」버튼을 클릭하면 정보 취득 가능.
※selector는 XPath를 이용


화면 내의 설정 내용

■Selector
XPath　：　//div[@class="archive-list"]/div/div[2]

■Columns
{XPath}  ：  {Name}
div      ：  企業様名
p        ：  説明文
a/@href  ：  URL

정보 취득 후, 「Copy to clipboard」를 클릭하면, 취득한 정보를 완전히 복사 가능.
Excel이나 스프레드시트 등에 붙여넣기도 가능했습니다.

쓰기 메모

스스로 쓸 때 쓰는 방법 메모


하고 싶은 일
설명
설명 예


기점까지의 경로의 기재를 생략 (기점이 되는 노드의 자손 모든 집합)
//
//article※article 요소를 기점으로 하고 싶은 경우

n번째 요소 지정
[n]
div[2]※ 두 번째 div 요소 지정

특정 클래스를 가진 요소 지정
[ @class ="{클래스 이름}"]
div[ @class ="archive-list"]※"archive-list"라는 클래스를 가진 div 요소를 지정

a 태그 클릭연결 URL 지정
a/@href

-

얻고 싶은 요소의 XPath를 잘 모를 때

Chrome 개발자 도구에서

해당 요소를 마우스 오른쪽 버튼으로 클릭

"Copy"에 마우스를 얹는다

Copy XPath를 클릭하여 Copy합니다. ( "Copy full XPath"로 html에서 경로를 얻을 수도 있습니다.)

例：企業様名の要素をChromeのディベロッパーツールで取得した場合

「Copy XPath」　で取得：
//*[@id="contents"]/div[1]/div/div/div[1]/div[2]/div

「Copy full XPath」　で取得：
/html/body/div[1]/main/article/div[1]/div/div/div[1]/div[2]/div

독특한 곳까지 거슬러 올라가므로 패스가 길어지는 것이 난점(´・ω・｀)

설정 시 주의점

첫회 이용시, 자신이 설정으로 이끼 한 포인트.

1. 패스의 끝에 슬래시 "/"는 붙지 않는다.

Selector에 XPath를 지정했을 때, 마지막 요소의 뒤에 슬래시 "/"를 붙이면 에러 화면이 나옵니다.

OKだった時の記載例：
//div[@class="archive-list"]/div/div[2]

エラーが出た時の記載例（後ろにスラッシュ"/"が入っていた）：
//div[@class="archive-list"]/div/div[2]/

Columns의 XPath에서도 비슷한 현상이 발생합니다.
한 곳에서도 마지막에 슬래시가 들어 있으면 에러 화면이 나옵니다.



패스를 코피페로 붙였을 때 등 생기기 쉬우므로 주의를.

2.Columns의 XPath에 기재하는 패스의 선두에 슬래시 "/"는 붙지 않는다.

Columns의 XPath를 기재할 때, 패스의 머리에 슬래시 "/"를 붙이면, 데이터가 취득되지 않고 해당란에는 아무것도 기재되지 않습니다. 에러 화면은 나오지 않습니다.



이것도, 패스를 코피페로 붙였을 때 등 생기기 쉬우므로 주의를.