ブログ

Webサイトを解析して欲しいデータを引っこ抜いてみる

世の中にすでにこのようなツールは多数存在するのですが、
あるウェブサイトのhtmlを解析してほしい情報だけを取得する
という、基本的な部分をシンプルな流れてどのように実現できるか?をまとめました。

例として、Javascript(JQuery)で

  • Instagramのシェアされたページのhtmlを取得し、
  • そのhtmlを解析して、
  • 投稿された画像データを取得する

という処理をやってみます。

以下サンプルコードになります。

    
<html>
<head>
  <meta charset="utf-8">
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
  </script>
</head>
<body>
  <div id="imgList">
  </div>
  <script>
    $(function(){
      $.ajax({
        url:'https://www.instagram.com/p/BnGxEuOnrgp',
        type:'get',
        dataType: 'html'
      }).then(
        function(data) {
          //成功時の処理
          var parseHtml = $.parseHTML(data);
          var $html = $(parseHtml);
          var arr = $html.map(function(index,element){
            $element = $(element);
            if($element.is('meta')){
              if($element.attr('property')=='og:image'){
                return $element.attr('content');
              }
            }
          });
          $.each(arr,function(index,element){
            $('#imgList').append('<img width="120px" src="'+element+'" />')
          });
        },
        function(){
          //失敗時の処理
          alert("取得に失敗しました");
        }
      );
    });
  </script>
</body>
</html>
    
  

ここをクリックすると、上記のソースコードを実行するページが開きます。 ページには画像が一つ表示されるかと思います。

以降、処理について説明したいと思います。

 

このような流れで、外部サイトを解析することができます。
ただし、javascriptの場合、サイトによってはクロスドメイン対策でajax通信できない場合があることに注意する必要があります。