PuppeteerでサイトをクロールしてURLリストを作るツール

はじめまして。Webサイトのリニューアルとか新規構築とかやってる世にいうWebディレクター？PM？的な役割をよくやるおじさんです。

おじさんはよく数百から数千ページのWebサイトの新規構築・リニューアルPJを担当したりします。提案やら見積もりの断面から参画することが多く、だいたいサイト規模を図るところから入るんですが。担当者によっては適当にサイト規模の見積もりをして、後からこんなでかいサイトだと思わなかったなんて話になります。

古のツールとしてWebsite Exploreなんてものがあり、未だにこれ使ってページ数算出している人もよく見かけます。

今どきキラキラしたheadless chromeとか色々あるんだからもっとスマートにできないの？と思っていたところ、まとまった自分の時間が取れたので便利そうなのを作ってみました。そしてgithubで公開してみました。

前提として

おじさんは前時代的なWebサイト構築の時代を生きてきて、本格的にコードを書かなくなって約10年。アラフォーでなんか色々間違っていると思うんですが何事も経験なので、こうしてQiita記事も初めて書いてみました。

では、何を作ったのか書きますね。と思ったんですがめんどくさいのでREADMEをほぼそのまま載せますね。

これは何？

Web サイトリニューアルの際等に現行サイトに sitemap.xml が無く、サイト規模が全くわからない場合があります。そんな時に使うツール。
任意の URL から a タグ href 属性を辿り、存在する URL（a タグリンクが繋がっている URL） をリスト化します。

• puppeteer を使って a タグを巡り URL をリスト化、エクセルファイルとして出力
• title,description,charset 等基本的なページ情報もついでに取得してエクセルファイル内に出力
• クロールした際の HTML コードもついでにテキストファイルとして出力
• puppeteer 越しに headless chrome の描画結果 a タグを走査するので、js 等で出力されている a タグリンクも巡ることが可能

※対象 URL にはそれなりのアクセス負荷がかかるので、サイト管理者の許可なく本ツールを使用しないでください

実行方法

下記で node パッケージインストール

npm i

conf.yaml を設定したうえで下記の様に実行

node salvage.js

conf.yaml に記載の startUrl を起点として a タグリンクを辿り、url リストを作成する。URL リストはエクセルファイルとして出力されます。

conf.yaml 設定内容

• startUrl
  • クロールの起点となる URL の指定
  • 通常はサイトのトップページ等を指定する
  • 複数指定可能
• allowDomain
  • a タグを辿る際に許可するドメイン
  • 基本的には startUrl に指定した URL のドメインを指定する
  • 複数指定可能
• basicAuthentication
  • クロール対象サイトに BASIC 認証がかかっている際にコメントアウトを解除し使用
• loadBlockFileExtention
  • クロールをする際にロードをブロックするファイル
  • クロール速度を高速化するために画像等の読み込みをブロックすることを推奨
• emulateDevice
  • UA 判定等でスマホ UA を使いたい場合等はコメントアウトして使用
    （https://github.com/puppeteer/puppeteer/blob/main/src/common/DeviceDescriptors.ts のデバイスを指定可能）
  • コメントアウトした状態では puppeteer デフォルトの UA でアクセスする（chrome）

結果出力

result ディレクトリ内に結果が出力されます

出力例

result
└── 20210407151539483
    ├── htmlcode
    │   ├── https:__example.com_.txt
    │   ├── https:__example.com_business.html.txt
    │   ├── https:__example.com_en_.txt
    │   ├── https:__example.com_en_business.html.txt
    │   ├── :
    │   └── https:__example.com_about.html.txt
    └── result.xlsx

result.xlsx の出力内容

• url
  • URL
• status
  • クロールした際の HTTP ステータスコード
  • conf.yaml の loadBlockFileExtention に指定された拡張子の URL は"SKIP"として出力
• title
  • title タグ内文言
• description
  • meta[name="description"]の content 値
• keywords
  • meta[name="keywords"]の content 値
• canonical
  • link[rel="canonical"]の href 値
• viewport
  • viewport 指定
• charset
  • document.charset の値

おわりに

• それなりにサーバ負荷かかると思うので、100ページ位のサイトでしか試せてない
• 誰か実戦投入として大きめのサイトで試してみてほしい（もちろんサイト管理者に許可とったうえで）
• ソースコードはネット上の色んなとこからコピペしたりしているので、全然きれいに書けてない。
• 誰か今どきなキラキラしたコードに書き換えてほしい
• あとスクショ撮ったり各ページで読み込んでるアセットファイルとかをまるっとダウンロードするツールとか作りたいなー