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