Javascript「console.log」を使って営業用リストを作成

電話やメール営業など、自社サービスを営業する上で欠かせないのが営業用のリスト。
業種の違いはありますが、販売されているリストを購入する以外では、自社サービスで売上に貢献できそうな企業様の掲載されているページを見つけて取得していく流れになると思います。
その際に一点づつコピー・ペーストでも出来るのですが、数十件ともなると時間がかかるので一斉取得する方法をメモ。

営業用リストの作成方法

リストの記載されてるページのソースを取得する

まずは、リストに必要な項目の掲載されているページを開き、「ソースを見る（Ctr+u）」で必要な部分の「HTMLタグ」をコピーし、新規にHTMLファイルを作成する。

例：弊社制作実績ページ

HTML

<ul class="works_list__post__list">
<li class="works_list__post__list__item">
<span class="works_list__post__list__item__cat">
サービスサイト</span>
<a href="https://web.syu-u.com/blog/?works=%e3%81%84%e3%81%91%e3%81%b0%e3%81%aa-%e6%a1%82%e5%8f%a4%e6%b5%81%e3%83%bb%e6%a1%82%e6%b5%81">
<figure class="works_list__post__list__item__img">
<img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure>
<section class="works_list__post__list__item__content">
<h2 class="works_list__post__list__item__content__heading">いけばな 桂古流・桂流</h2>
<p class="works_list__post__list__item__content__description">
京都桂離宮の華務職を始祖とし、日本の伝統的な生け花と現代花を教授する他、今の時代にマッチしたクリエイティブ・フラワーの指導も行っている「いけばな　桂古流・桂流」のサービスサイト。CMSはワードプレスを使用して構築。海外からの応募もあるため、日本語と英語の二か国語で作成。各言語に合わせてページを分けるのでなく、cookie（クッキー）を使用した表示切替により同一ページ内に異なる言語を混在する形式を採用。ページが増えることを抑えることで運用もしやすくしています。</p>
</section>
</a>
</li>
<li class="works_list__post__list__item">
<span class="works_list__post__list__item__cat">
コーポレートサイト</span>
<a href="https://web.syu-u.com/blog/?works=presby%ef%bc%88%e3%83%97%e3%83%ac%e3%82%b9%e3%83%93%e3%83%bc%ef%bc%89">
<figure class="works_list__post__list__item__img">
<img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure>
<section class="works_list__post__list__item__content">
<h2 class="works_list__post__list__item__content__heading">presby（プレスビー）</h2>
<p class="works_list__post__list__item__content__description">
オリジナルブランドの度数調節メガネ「 ドゥーシリーズ 」を手掛ける「Presby（プレスビー）」のコーポレートサイトです。CMSはワードプレスを使用して構築。カスタム投稿タイプ機能を使うことで、商品・取扱店舗一覧・お客様の声の投稿を実現。商品カテゴリー部分はトップページのカテゴリー項目やスライダーとも連動し、HTMLを操作することなくカテゴリーの追加・編集も可能です。</p>
</section>
</a>
</li>

・
・
・

<li class="works_list__post__list__item">
<span class="works_list__post__list__item__cat">
サービスサイト</span>
<a href="https://web.syu-u.com/blog/?works=%e3%83%a1%e3%83%87%e3%82%a3%e3%82%ab%e3%83%abdr%e3%82%bb%e3%83%a9%e3%83%94%e3%82%b9%e3%83%88%e3%82%b9%e3%82%af%e3%83%bc%e3%83%ab">
<figure class="works_list__post__list__item__img">
<img width="1899" height="913" src="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-300x144.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1024x492.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-768x369.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1536x738.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure>
<section class="works_list__post__list__item__content">
<h2 class="works_list__post__list__item__content__heading">メディカルDr.セラピストスクール</h2>
<p class="works_list__post__list__item__content__description">
一般社団法人日本メディカルDr.セラピスト協会が運営する美容・痩身に関する通信講座を取り扱う「メディカルDr.セラピストスクール」のサービスサイト。
</p>
</section>
</a>
</li>
</ul>

HTMLファイルにjavascriptを追記して抜き出したい項目を設定する

作成したHTMLファイルに、ソースの中から抜き出したい項目を選定してjavaseciptを追記。
該当項目の出力回数分ループ処理を行い「console.log」で出力。
複数の変数を抜き出す場合は「,（カンマ）」等の区切り用文字を入れておと後で編集しやすい

jQuery（javascript）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
	var size = $('h2').size();
	for($i = 0; $i < size; $i++){
		var url = $('.works_list__post__list__item').eq($i).find('a').attr('href');
		console.log($('h2').eq($i).text()+','+url);
	}
});
</script>

参考例は「サイト名称（h2）」と掲載ぺーじの「URL（.works_list__post__list__item a）」を抽出

編集したファイルにアクセスし、コンソール画面を開く

編集したファイルをクリックしてローカルで開きます。
そのままの状態でgoogleクロームなどのブラウザに備わっている開発ツール（Ctr+Shift+i）を使用してコンソールタグを開くと、今回設定した内容が表示されます。

画面に記載されているリストをコピーし、エクセルに貼り付け、調整する

コンソール画面に表示されている内容をコピーしてエクセルに貼り付け。
「データ」タブの「区切り位置」ボタンをクリック、②で設定したカンマや空白等でデータを区切って整えると営業用リストの完成。

ソースによって出力項目の設定は必要ですが、一点づつコピー・ペーストするよりも時間が短縮できます。