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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

解決済

puppeteerによるwebスクレイピングをブラウザでも行いたい。

mutoooooo
mutoooooo

総合スコア12

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

1回答

0評価

0クリップ

2399閲覧

投稿2018/10/17 07:11

編集2018/10/17 07:14

前提・実現したいこと

puppeteerを用いたwebスクレイピングを、htmlファイルから呼び出したjsファイルで行いたいのですが、js
ファイルを呼び出した際のrequireのところでエラーが出てしまいます。node.jsにおけるモジュールをブラウザで使えないことが原因のように思うのですが、対策がわかりません。
具体的には仮想通貨の価格をスクレイピングで取得して、ブラウザ上にチャートで表示しようとしています。

発生している問題・エラーメッセージ

Uncaught ReferenceError: require is not defined at chart.js:13

該当のソースコード

html

//index.html <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.2.0/chartjs-plugin-streaming.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> --> </head> <body> <canvas id="bitbank"></canvas> <script type="text/javascript" src="./chart.js"></script> </body>

javascript

//chart.js var buf = {}; buf['bitbank'] =[] function sleep(time) { const d1 = new Date(); while (true) { const d2 = new Date(); if (d2 - d1 > time) { return; } } } const puppeteer = require('puppeteer'); puppeteer.launch().then(async browser => { console.log('hoge') const page = await browser.newPage(); await page.goto('https://inagoflyer.appspot.com/xrpmac'); while(true){ const recentPost = await page.$eval('#Bitbank_XRPJPY_lastprice', e => e.innerText); await console.log(recentPost); buf['bitbank'].push({ x: Date(), y: recentPost }); console.log(buf['bitbank']) sleep(1000); } browser.close(); }); var id = 'bitbank'; var ctx = document.getElementById(id).getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [], label: 'bitbank', // 買い取引データ borderColor: 'rgb(255, 99, 132)', // 線の色 backgroundColor: 'rgba(255, 99, 132, 0.5)', // 塗りの色 fill: false, // 塗りつぶさない lineTension: 0 // 直線 }, { data: [], label: 'Sell', // 売り取引データ borderColor: 'rgb(54, 162, 235)', // 線の色 backgroundColor: 'rgba(54, 162, 235, 0.5)', // 塗りの色 fill: false, // 塗りつぶさない lineTension: 0 // 直線 }] }, options: { title: { text: 'xrp/jpy (bitbank )', // チャートタイトル display: true }, scales: { xAxes: [{ type: 'realtime' // X軸に沿ってスクロール }] }, plugins: { streaming: { duration: 300000, // 300000ミリ秒(5分)のデータを表示 refresh: 100, // onRefresh callback will be called every 1000 ms delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line pause: false, // chart is not paused onRefresh: function(chart) { // データ更新用コールバック Array.prototype.push.apply( chart.data.datasets[0].data, buf[id] ); // 買い取引データをチャートに追加 buf[id] = []; // バッファをクリア } } } } });

試したこと

browserifyなどによってブラウザでもrequireが使えるということだったのですが、どのように用いれば良いのかよくわかりませんでした。
bwowserifyをinstallし、

browserify chart.js

とコマンド入力すると、下記のようなエラーが出ました。(そもそもこのコマンドの使い方が間違っているのかもしれませんが、、)
Error: module not found: "ws" from file /Users/hiroaki/bitcoin/javascript/kairi_chart/node_modules/puppeteer/lib/WebSocketTransport.js
at onresolve (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:182:30)
at /usr/local/lib/node_modules/browserify/index.js:530:20
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/index.js:247:21
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:18
at load (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:154:21)
hiros-mbp:kairi_chart hiroaki$ browserify chart.js
Error: module not found: "ws" from file /Users/hiroaki/bitcoin/javascript/kairi_chart/node_modules/puppeteer/lib/WebSocketTransport.js
at onresolve (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:182:30)
at /usr/local/lib/node_modules/browserify/index.js:530:20
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/index.js:247:21
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:18
at load (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:154:21)

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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