質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

コピペでスクレイピングしようとしたが、どのような処理になっているのかがわからない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,403

score 166

とあるWEBサイトで見つけたスクレイピングのサンプルコード
https://bl.ocks.org/BcRikko/19a18c297204fecd84bc
を用いて、スクレイピングを行おうとしたのですが、うまくいきません。
①コード中の

data.responseText.match(/title="([0-9,]+) Followers"/)[1]


とはどういう処理をしているのか?

②どうすればエラーが治るか

Uncaught TypeError: Cannot read property '1' of null
    at Object.$.get (index.html:32)
    at Object.success (jquery.xdomainajax.js:58)
    at i (jquery-2.2.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.2.0.min.js:2)
    at z (jquery-2.2.0.min.js:4)
    at HTMLScriptElement.c (jquery-2.2.0.min.js:4)
    at HTMLScriptElement.dispatch (jquery-2.2.0.min.js:3)
    at HTMLScriptElement.r.handle (jquery-2.2.0.min.js:3)


かなり初歩的というか、身の程知らず(?)な感じで、「基礎を勉強しろ」と言われそうですが、回答お待ちしております。

一応全部のコード(twitterのIDの変更を除いてすべてコピペです)

<!--
[Copy__writingのフォロワー数を、5秒に1回スクレイピング](https://gist.github.com/koron/974c9d77b541c35b0af4)
をみて、ウチも実装してみたいってことでJavaScriptで実装してみた
-->
<!doctype html>


<html lang="ja">
  <head>
    <title>Copy__writing</title>
  </head>
  <body>

    <div id="app"></div>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="jquery.xdomainajax.js"></script>
    <script>
      uri = 'https://twitter.com/paiza_official';

      var getDate = () => {
        now = new Date();
        year = "" + now.getFullYear();
        month = "" + (now.getMonth() + 1); if (month.length == 1) { month = "0" + month; }
        day = "" + now.getDate(); if (day.length == 1) { day = "0" + day; }
        hour = "" + now.getHours(); if (hour.length == 1) { hour = "0" + hour; }
        minute = "" + now.getMinutes(); if (minute.length == 1) { minute = "0" + minute; }
        second = "" + now.getSeconds(); if (second.length == 1) { second = "0" + second; }
        return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
      }


      setInterval(() => {
        $.get(uri, (data) => {
          $('#app').prepend(getDate() + '  : ' + data.responseText.match(/title="([0-9,]+) Followers"/)[1] + ' Forrows<br>');
        });
      }, 5000);
    </script>
  </body>
</html>
/**
 * jQuery.ajax mid - CROSS DOMAIN AJAX 
 * ---
 * @author James Padolsey (http://james.padolsey.com)
 * @version 0.11
 * @updated 12-JAN-10
 * ---
 * Note: Read the README!
 * ---
 * @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
 */

jQuery.ajax = (function(_ajax){

    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
        query = 'select * from html where url="{URL}" and xpath="*"';

    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }

    return function(o) {

        var url = o.url;

        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {

            // Manipulate options so that JSONP-x request is made to YQL

            o.url = YQL;
            o.dataType = 'json';

            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };

            // Since it's a JSONP request
            // complete === success
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }

            o.success = (function(_success){
                return function(data) {

                    if (_success) {
                        // Fake XHR callback.
                        _success.call(this, {
                            responseText: (data.results[0] || '')
                                // YQL screws with <script>s
                                // Get rid of them
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }

                };
            })(o.success);

        }

        return _ajax.apply(this, arguments);

    };

})(jQuery.ajax);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+7

... どうすればエラーが治るか...

1. エラーメッセージの意味を理解する
2.それに対処する
を繰り返していくしかありません。

Uncaught TypeError: Cannot read property '1' of null
は null に対して、配列一番目の値を参照できない
ということです。

まずは、
data.responseText.match(/title="([0-9,]+) Followers"/)

data
の値を alert や console.log で表示してみることから始めるとよいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る