[Chrome 拡張機能] Web Scraper で note の記事一覧を取得する

note の記事タイトルとその URL の一覧を作りたい。API を使ってやる方法があるようだが、よく分からなかったのでスクレイピングツールを使ってやってみることにした。

使ったのは Chrome Extension の「Web Scraper」だ。以前もこれについて書いたことがある。

Mac でお手軽スクレイピングツール – with a Christian Wife
https://wacw.cf/2019/02/25/scraping-with-mac/

ただ、Web Scraper はやり方を理解するのに時間が掛かる。毎回混乱するので、キチンとメモしておくことにした。今回は私の note の記事タイトル一覧、その URL、投稿日時を取得してみる。

（０）Web Scraper のインストールを済ませておく。

Web Scraper – Chrome Web Store
https://chrome.google.com/webstore/detail/web-scraper/jnhgnonknehpejjnehehllkliplmbmhn

（１）まずは対象ページを開き、ページ読み込みの仕組みを調べる。

with a Christian Wife｜note
https://note.com/wacw

note は最初は直近６記事のみが表示され、「もっとみる」をクリックすることでさらに過去の記事を表示する仕組みになっている。スクロールするごとにどんどん記事が読み込まれておき、最終的に一番最初の記事に到着する。

（２）「Chrome 右上の３点アイコン＞More Tools＞Developer Tools」をクリック（もしくは option + command + i ）。Developer Tools が開くので「Web Scraper」 タブをクリック。

（３）「Create new sitemap＞Create Sitemap」をクリック。

Sitemap name を適当に記入。Start URL に対象 URL（今回は https://note.com/wacw ）を入力。Create Sitemap をクリック。

（４）３のあと「Sitemap [３の Sitemap name 名]＞Selectors」に自動的に移動する。

まずは自動でスクロールするようにしたい。自動スクロールのためには、最初に「さらにみる」を１度だけクリックする必要がある。１回のみのクリックは自動化できないようなので、スクレイピングの際は手動でクリックすることにする。

一旦、「もっとみる」をクリックする。これでスクロールで記事が読み込まれる準備ができた。一旦最後までスクロールをして全記事を読み込んでおく。

（５）「Add new selector」をクリック。

・Id：適当に Id を記入。Element scroll down とする。
・Type：Element scroll down を選択。Element scroll down とはページ要素の塊がスクロールで読み込まれるタイプという意味だ。

「Selector＞Select」をクリック。最初の記事に対し、記事の四角いブロックが選択されるようにクリックする。次の記事も同じようにクリックする。

（ここでクリックをしても何も反応がしないことがある。その時は一旦 Cancel ボタンをクリックし、ページをリロード。４からやり直せばいい。）

こうすることで、すべての記事の各ブロックが赤く色が付くはずだ。投稿タイプがいくつかある場合（テキストの記事と写真記事が混在したりする場合）、すべての記事に色が付かない場合がある。その時は、色が付いていないブロックをクリックすることで、全記事に色が付くはず。

「Done selecting!」をクリック。

「Multiple」にチェックを入れ、「Save selector」をクリック。Multiple を選択することで、スクロール動作で（単一の要素ではなく）複数の要素が読み込まれることを意味する。

（６）Selector 一覧表示から今作成した ID が「Element scroll down」のものをクリックする。次は各要素の中身を取り出す指示を指定する作業だ。

まずは記事タイトルとその URL を取得するよう設定する。「Add new selector」をクリック。

・Id：記事タイトルを取得したいので title とでも名付けよう。
・Type：note の各記事タイトルはリンクになっており、その URL も合わせて入力したい。「Link」を選択する。

「Selector＞Select」をクリック。一番最初の記事だけが黄色くなっているので、そのタイトルをクリックして選択＿＿としたいところだけど、普通にクリックすると各記事ページに行ってしまう。今回は各記事ページに行く必要がないので、左下あたりの「Done selecting!」横にある「Enable key events」にチェックを入れる。こうすることで、マウスポインターの下にある要素を選択できるようになる。

記事タイトルにマウスポインターを合わせ、s とタイプする。これで記事タイトルが選択された。「Done selecting!」をクリック。「Save selector」をクリック。

（７）次は投稿日時を取得するよう設定する。Add new selector」をクリック。

・Id：date とでも名付けよう。
・Type：Text

「Selector＞Select」をクリック。一番最初の記事だけが黄色くなっているので、投稿日時部分をクリック（これは単なるテキストなのでクリックしていい）。「Done selecting!」をクリック。「Save selector」をクリック。

（８）さっそくスクレイピングをしてみる。「Sitemap [Sitemap name 名]＞Scrape」をクリック。

「Page load delay (ms)」がデフォルトで 2000ms（２秒）となっているが、最初に「もっとみる」を手動クリックする必要があるので、10 秒は時間がほしい。10000 としておく。

（９）「Start scraping」をクリックすると別ウィンドウが開く。急いで「もっとみる」をクリックしよう。スクレイピング作業が始まり、それが終わるとウィンドウが閉じる。

No data scpared yet. の右の「refresh」ボタンをクリック。きちんとデータが取得できれば、一覧が表示されるはず。

取得データは「Sitemap [Sitemap name 名]＞Export data as CSV＞Download now!」でダウンロードできる。

操作手順を示した動画は以下。

Web Scraper でノートの記事一覧を抽出する – 20200503 – YouTube
https://www.youtube.com/watch?v=FDwzE0KGmhk