LoginSignup
1
1

More than 3 years have passed since last update.

@ystr_18(k y)

nodejsでスクレイピング入門[阿部寛]

Last updated at Posted at 2020-09-08

はじめに

卒研でいろいろあって、nodejsでスクレイピングやりそうになってきましたのでそれのメモです、
入門ということで阿部寛のHPから阿部寛の画像をとっていきたいと思います、

スクレイピングとは？

そもそもスクレイピングってなんだろってなるから調べました。
意味はHPから情報を抽出するということらしいでした、
使い道としては、サイトに載ってる情報が欲しいとか、APIがないけどもHPならあるとかだったときはスクレイピングで情報分捕る感じかと、

阿部寛ってだーれ？

日本の俳優、テルマエ・ロマエとかに出ているお方、上田次郎、日本科学技術大学理工学部教授、何故ベストを尽くさないのか？
よくHPが情報系の実験ネタ(?)に扱われるほどすごい公式サイトをもっているお方

できること

nodejsから阿部寛のサイトにある阿部寛の写真と取得できる

つかったもの

  • nodejs
  • yarn

できたもの

最初はHTMLデータとろう！！

  • axios使って阿部寛のHTMLぶんどります
  • なのでaxiosとasyncをyarn addで入れていって、以下のコードを作成します
// ajax関係
const axios = require("axios");
// 阿部寛のサイト
const url = "http://abehiroshi.la.coocan.jp/";

const main = async () => {
    const data = await axios.get(url);
    console.log(data.data);
}

main();
  • これでできますめ！！！！
  • 結果がこんな感じです！！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>�������̃z�[���y�[�W</title>
</head>
<frameset cols=18,82>
  <frame src="menu.htm" marginheight="0" marginwidth="0" scrolling="auto" name="left">
  <frame src="top.htm" marginheight="0" marginwidth="0" scrolling="auto" name="right">
  <noframes>
  <body></body>
  </noframes>
</frameset>
</html>
  • うおおおやったぜ！！

必要な情報とろう！！

  • 今度はFast HTML Parserを使って必要な情報取り出します、
  • のでyarn addでぶちこみます
  • 卒研では画像はURLでほしいので、文字列データ分捕れそうなのでいきます、許して
  • とりあえず動かせるようにしたものがこれです
// ajax関係
const axios = require("axios");
// 阿部寛のサイト
const url = "http://abehiroshi.la.coocan.jp/";
// パーサ
const HTMLparser = require('fast-html-parser');


const main = async () => {
    const data = await axios.get(url);
    console.log(data.data);
    const root = HTMLparser.parse(data.data);
    console.log(root.firstChild.structure);

}

main();
  • 結果がこれです
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>�������̃z�[���y�[�W</title>
</head>
<frameset cols=18,82>
  <frame src="menu.htm" marginheight="0" marginwidth="0" scrolling="auto" name="left">
  <frame src="top.htm" marginheight="0" marginwidth="0" scrolling="auto" name="right">
  <noframes>
  <body></body>
  </noframes>
</frameset>
</html>
html
  head
    meta
    meta
    meta
    title
      #text
  frameset
    frame
      frame
        noframes
          body
  • たぶんできた！！！
  • 阿部寛のサイトはサイトを分割してそれをframesetで表示してる感じですね、
  • menuはたぶん右側のメニューだと思われます、
  • 阿部寛の顔面はtopのほうにあると予想されるので、そっちをみましょ、
  • なのでtopの方をaxiosで表示してみます！！
  • コードは以下です
// ajax関係
const axios = require("axios");
// 阿部寛のサイト
const url = "http://abehiroshi.la.coocan.jp/top.htm";
// パーサ
const HTMLparser = require('fast-html-parser');


const main = async () => {
    const data = await axios.get(url);
    console.log(data.data);
}

main();
  • 結果はこんな感じです！！
<!-- saved from url=(0022)http://internet.e-mail -->
<!-- saved from url=(0022)http://internet.e-mail -->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<title>���� ���̃z�[���y�[�W</title>


</head>


<body background="image/abehiroshi.jpg">
<br>
<h1 align="center">���� ���̃z�[���y�[�W</h1>
<table align="center">
  <tr>
    <td rowspan="2"><img src="abe-top-20190328-2.jpg" width="350" height="414" border="0"><br>
      <br>
      <table width="256">
        <tr>
          <td width="14">&nbsp;</td>
          <td width="230">���� ���i���� �Ђ낵�j<br></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>���N���� 1964�N6��22��<br></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>���t�^ A�^<br></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><a href="prof/prof.htm">�v���t�B�[��</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2"><br>
            If you have any enquiries regarding my TV drama or film, or would like to make an enquiry concerning future projects, please do not hesitate to contact me through the following email address.<br>
            <br>
            mail:<a href="mailto:shigeta@navy.plala.or.jp">shigeta@navy.plala.or.jp</a></td>
        </tr>
    </table>
      <br>
      ����<strong>:</strong><br>
      �Γc�I�t�B�X<br>
      107-0052<br>
  �����s�`��ԍ�9-5-29 <br>
  �ԍ⃍�C�����}���V����303<br>

TEL : +81-3-5410-8585<br>
    FAX : +81-3-5410-0588 </td>
    <td>&nbsp;</td>
    <td><div align="center">�������@�ŐV���@������</div></td>
  </tr>
  <tr>
    <td></td>
    <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="bottom"><hr width="100%" size="1"></td>
          </tr>
      </table>
<!-- start�@-->
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><strong>�E�h���}</strong></td>
          </tr>
      </table>
       <table border="0" cellspacing="5" cellpadding="0">
           <tr>
           <td width="70" align="left" valign="top">&nbsp;</td>
           <td>
        <strong>
           <a href="https://www.tbs.co.jp/dragonzakura/" target="_blank">�u�h���S����2�v</a>(��)<font color="#ff0000"></font><br>
        <font color="#ff0000">2020�N�Ă�\�肵�Ă���܂������A�V�^�R���i�E�C���X�����g��̉e���ɂ��������������肢�����܂����B</font></strong></td>
         </tr>
      </table>
<!-- end�@-->
<!-- start�@-->
       <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="bottom"><hr width="100%" size="1"></td>
          </tr>
      </table>

       <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="top"><strong>�E�f��</strong></td>
          </tr>
      </table>
       <table border="0" cellspacing="5" cellpadding="0">
           <tr>
           <td width="70" align="left" valign="top">&nbsp;</td>
           <td>
        <strong>�u����Ȃ������҂����ցv <br>
        2021�N���J�\��<br>
        </strong></td>
         </tr>
      </table>
      <table border="0" cellspacing="5" cellpadding="0">
           <tr>
           <td width="70" align="left" valign="top">&nbsp;</td>
           <td>
        <strong><br>
        <a href="http://www.hokusai2020.com/" target="_blank">�uHOKUSAI�v</a> <br>
        2021�N ���J�\��<br>
        <font color="#ff0000">�����J�������ɂȂ�܂����B</font><br>
        </strong></td>
         </tr>
      </table>
       <table border="0" cellspacing="5" cellpadding="0">
           <tr>
           <td width="70" align="left" valign="top"></td>
           <td></td>
         </tr>
      </table>
<!-- end�@-->

       <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" valign="bottom"><hr width="100%" size="1"></td>
          </tr>
      </table>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
  </tr>
</table>
</body>
</html>
  • 見た感じ阿部寛の顔面画像はある感じがしますね！！ビンゴ！！！！
  • そこから画像のURLとりましょ！！
  • とりあえずコードはこんな感じです！！
// ajax関係
const axios = require("axios");
// 阿部寛のサイト
const url = "http://abehiroshi.la.coocan.jp/top.htm";
// パーサ
const HTMLparser = require('fast-html-parser');


const main = async () => {
    const data = await axios.get(url);
    const root = HTMLparser.parse(data.data);
    console.log(root.querySelectorAll('img'));
}

main();
  • 結果はこんな感じです！！
[
  HTMLElement {
    tagName: 'img',
    rawAttrs: 'src="abe-top-20190328-2.jpg" width="350" height="414" border="0"',
    childNodes: [],
    classNames: []
  }
]
  • rawAttrsに顔面画像らしきURLがありますね！！
  • あとはそれをとって気合いでとっていきます！！
  • コードはこんな感じです！！
// ajax関係
const axios = require("axios");
// 阿部寛のサイト
const url = "http://abehiroshi.la.coocan.jp/top.htm";
// パーサ
const HTMLparser = require('fast-html-parser');


const main = async () => {
    const data = await axios.get(url);
    const root = HTMLparser.parse(data.data);
    const raw_data = root.querySelectorAll('img')[0].rawAttrs;
    const img_url = raw_data.split("\"")[1];
    console.log(img_url);
}

main();
  • 結果はこんな感じです！！
abe-top-20190328-2.jpg
  • ぶんどれたやった！！

画像を保存する

  • あとは画像を保存するだけですね、、
  • nodejsで画像保存はjimpが良さそうなのでyarn addでjimpをいれます
  • あとは以下のコードで行きます！！
// jimp関係
const jimp = require("jimp");

const main = () => {
    jimp.read("http://abehiroshi.la.coocan.jp/abe-top-20190328-2.jpg", (err, abehiroshi) => {
        if(err) return;
        abehiroshi.write("abehiroshi.jpg");
    });
}

main();
  • これであなたのPCに阿部寛が住み着きましたね！！

おわり

おまけ

  • このコードで阿部寛がいっぱい！！
// jimp関係
const jimp = require("jimp");
const size = 100000000000000000000000000000000;
const main = () => {
    jimp.read("http://abehiroshi.la.coocan.jp/abe-top-20190328-2.jpg", (err, abehiroshi) => {
        if(err) return;
        for(let i = 0;i < size;i++) {
            abehiroshi.write("abehiroshi_"+i+".jpg");
        }
    });
}

main();

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1