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

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

質問する

ただいまの
回答率

88.36%

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

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,564
mutoooooo

mutoooooo

score 12

 前提・実現したいこと

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

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

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

 該当のソースコード

//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>
//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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1 件

link

checkベストアンサー

+2

残念ながら、PuppeteerはNode.js専用です（リポジトリ）。

Puppeteer is a Node library （後略）

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/17 16:17

    回答ありがとうございます。
    そうなのですか、、
    ではスクレイピングした情報を使いchart.jsを用いてチャート表示することはできないのでしょうか？

    キャンセル

  • 2018/10/17 16:20

    はい、ブラウザ内から別ドメインにアクセスすること自体に制約がかかるので、ブラウザ外からやるより難易度は数段上がりますし、構造によってはできないことも考えられます。

    キャンセル

  • 2018/10/17 16:45

    そうなのですね、ではスクレイピングではなくWebApiを用いるなど他の方法を模索してみようと思います。
    回答ありがとうございました！

    キャンセル

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る