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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

7802閲覧

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

moscow3

総合スコア201

スクレイピング

スクレイピングとは、公開されているWebサイトからページ内の情報を抽出する技術です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2017/10/21 22:35

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

javascript

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

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

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

console

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

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

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

html

1<!-- 2[Copy__writingのフォロワー数を、5秒に1回スクレイピング](https://gist.github.com/koron/974c9d77b541c35b0af4) 3をみて、ウチも実装してみたいってことでJavaScriptで実装してみた 4--> 5<!doctype html> 6 7 8<html lang="ja"> 9 <head> 10 <title>Copy__writing</title> 11 </head> 12 <body> 13 14 <div id="app"></div> 15 16 <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 17 <script src="jquery.xdomainajax.js"></script> 18 <script> 19 uri = 'https://twitter.com/paiza_official'; 20 21 var getDate = () => { 22 now = new Date(); 23 year = "" + now.getFullYear(); 24 month = "" + (now.getMonth() + 1); if (month.length == 1) { month = "0" + month; } 25 day = "" + now.getDate(); if (day.length == 1) { day = "0" + day; } 26 hour = "" + now.getHours(); if (hour.length == 1) { hour = "0" + hour; } 27 minute = "" + now.getMinutes(); if (minute.length == 1) { minute = "0" + minute; } 28 second = "" + now.getSeconds(); if (second.length == 1) { second = "0" + second; } 29 return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second; 30 } 31 32 33 setInterval(() => { 34 $.get(uri, (data) => { 35 $('#app').prepend(getDate() + ' : ' + data.responseText.match(/title="([0-9,]+) Followers"/)[1] + ' Forrows<br>'); 36 }); 37 }, 5000); 38 </script> 39 </body> 40</html>

javascript

1 2/** 3 * jQuery.ajax mid - CROSS DOMAIN AJAX 4 * --- 5 * @author James Padolsey (http://james.padolsey.com) 6 * @version 0.11 7 * @updated 12-JAN-10 8 * --- 9 * Note: Read the README! 10 * --- 11 * @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ 12 */ 13 14jQuery.ajax = (function(_ajax){ 15 16 var protocol = location.protocol, 17 hostname = location.hostname, 18 exRegex = RegExp(protocol + '//' + hostname), 19 YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?', 20 query = 'select * from html where url="{URL}" and xpath="*"'; 21 22 function isExternal(url) { 23 return !exRegex.test(url) && /:///.test(url); 24 } 25 26 return function(o) { 27 28 var url = o.url; 29 30 if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) { 31 32 // Manipulate options so that JSONP-x request is made to YQL 33 34 o.url = YQL; 35 o.dataType = 'json'; 36 37 o.data = { 38 q: query.replace( 39 '{URL}', 40 url + (o.data ? 41 (/?/.test(url) ? '&' : '?') + jQuery.param(o.data) 42 : '') 43 ), 44 format: 'xml' 45 }; 46 47 // Since it's a JSONP request 48 // complete === success 49 if (!o.success && o.complete) { 50 o.success = o.complete; 51 delete o.complete; 52 } 53 54 o.success = (function(_success){ 55 return function(data) { 56 57 if (_success) { 58 // Fake XHR callback. 59 _success.call(this, { 60 responseText: (data.results[0] || '') 61 // YQL screws with <script>s 62 // Get rid of them 63 .replace(/<script[^>]+?/>|<script(.|\s)*?/script>/gi, '') 64 }, 'success'); 65 } 66 67 }; 68 })(o.success); 69 70 } 71 72 return _ajax.apply(this, arguments); 73 74 }; 75 76})(jQuery.ajax);
james3374👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

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

投稿2017/10/21 22:48

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問