Nuxt.jsからPuppeteerが実行できない TypeError: Cannot read property 'on' of undefined - Qiita
Nuxt.jsからPuppeteerが実行できない TypeError: Cannot read property 'on' of undefinedJavaScriptNode.jspuppeteerNuxt 現象 単体のCLIから起動すると成功するコードを、NuxtのserverMiddlewareとしてリクエスト経由で起動するとpage.gotoが動かない。 実行環境 Windows7 Node.js 11.0.0 (に上げたが変わらず) Puppeteer 1.9.0 (および@nextも同様) Nuxt.js 2.2.0 エラー出力 TypeError: Cannot read property 'on' of undefined at Function.addEventListener (~\node_modules\puppeteer\lib\helper.js:165:13
Python + Selenium で Chrome の自動操作を一通り（ログイン、ダウンロード、他）
はじめに Python + Selenium + Chrome で、要素の取得、クリックなどの UI系の操作、待機、ページ全体のスクリーンショットなど、一通り試してみます。 PhantomJS はもう更新されないということなので、ブラウザは Chrome にします。 この記事には、Selenium の API に関する情報と Chrome に特化した情報がありますが、前者の Selenium の使い方に関する情報は Firefox など別のブラウザでも使えます。 注意事項 ウェブの自動テストやスクレイピングで使われる技術です。特にスクレイピングでは、著作権の問題や、サーバー側の負荷、各種規約（会員としてログインする場合の会員規約等）やマナーなどを考慮する必要があります。 たとえば、Twitter など利用規約で明示的にスクレイピングが禁止されていることや、robot.txt などでクローリ
APIベースのヘッドレスCMS contentful + nuxt.jsを試してみた（contentful設定編）｜蓮田 健一 / hacomono CEO
APIベースのヘッドレスCMS「contentful」を試してみたので、その概要や設定の流れ、API利用の準備についてノートします。 contentfulとは？ドイツのスタートアップが開発したAPIベースのCMS。WordPressなどの従来型CMSではバックエンドとフロントエンドの両方を提供していましたが、contentfulでは管理サイトとそこで設定したデータ、いわゆるコンテンツをCRUDするAPIだけを提供しています。 バックエンドとフロントエンドを分離したこのようなCMSを「ヘッドレスCMS」と呼び、このcontentful以外にも「CosmicJS」「prismic.io」「GraphCMS」（GraphQLというAPIの問い合わせ言語を開発している会社が提供するCMS）などがあるようです。 APIベースだと何が良いのか？Webサイトだけでなく、スマートフォンアプリやサイネージな
HeadLessCMS + GraphQL + Vue.js でSPA（ブログ）を作ってみる
新しめの技術を勉強したいと思い、HeadLessCMS + GraphQL + Vue.js で簡単なSPA(ブログ）を作ってみました。 その過程で学んだことをチュートリアル形式でまとめます。 なるべく初学者の方にもわかりやすいようスクリーンショットを多めに掲載しています。 概要 headlessCMS、GraphQL、Vue.js、Apolloでブログを作成します。 チュートリアルがメインなので、graphQLのクエリの詳細な説明などは省略しています。 以下各バージョンです。 GraphCMS: 2018.7公開のもの Vue cli: 3.0.1 vue: 2.5.17 vue-apollo: 3.0.0-beta.11 vue-router": 3.0.1 vuetify: 1.2.4 graphql: 14.0.2 作成サンプル このようなのトップページ（投稿一覧）と詳細ページの2
GraphCMS - Google 検索
GraphCMSのプラットフォームは当社のウェブサイトとシームレスに統合されており、大変迅速にストーリーをアップロードしてグローバルに配信することが可能です。
次世代Headless CMS「contentful」事始め - Qiita
この記事は ハンズラボ Advent Calendar 2017 2日目の記事です。 ハンズラボのアドベントカレンダーがみるみる埋まっていくのを見て、一人ニヤニヤしていた@daikiojmです。 7月にハンズラボに入社して以来、Angluarでフロントエンド開発をしています。 今回は、個人的に気になっていた、contentfulの概要と、ハンズオンの手順をまとめてみます。 概要 contentfulはAPIファーストなCMSで、ドイツのスタートアップによって開発されており、WordPressやDrupalなどの従来のCMSとは異なり、ディスクトップやモバイルだけでなく、デジタルサイネージや、スマートウォッチなどのプラットフォームへのコンテンツ配信が可能なAPIが用意されていることが特徴です。 WordPressなどと同様に、記事(コンテンツ)の投稿、管理画面のUIは用意されていますが、ユー
Qiitaでいいねが付くとLINE通知してくれる優しい世界を構築した - Qiita
はじめに Qiitaにはメール通知機能がありますが、「いいね」された時にメール通知してくれる機能がありません。 これはQiita中毒者としては、なかなか厳しい仕様です ということで今回は、負荷が掛からない程度にスクレイピングを行い、LINE通知をするプログラムを作成したいと思います。 構成図 draw.io3分クッキング 手順 Lambdaの環境構築 headless chromeでログイン後画面を開く 通知数と最新の通知メッセージを取得する 取得データをDynamoDBに保存 IFTTTのWebhooksにリクエスト送信 LINE通知 定期実行の設定 1. Lambdaの環境構築 Qiitaの通知数はReactで動的に生成しているようで、ソースコードをそのまま取得しても通知数が空の状態でした。そのためSeleniumを使ってブラウザからアクセスを行い、最終的に生成されるhtmlを取得した
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Headless Chromeを試してみる - Qiita
この記事の内容は古いです 時々いいねされて気になったのですが、いま(2019/10現在)からだと puppeteer を使うのがいいと思います https://qiita.com/tags/puppeteer Headlessブラウザとは JavaScriptやSPAの普及によりAjaxなど動的なページが増え、Webサイトをスクレイピングする際にcurlなどでHTMLを取得しても取得したいデータが見つからないことが多々ある。 そのためページ内のデータを取得したい場合はHeadless(画面に表示されない)ブラウザを裏で実行し、普通のブラウザと同じようJavaScriptを実行してページの内容を参照する必要がある。 Headlessブラウザにはどんなものがあるか Phantom.js Nightmare.js など いままではPhantom.jsと、それを自動化するCasper.jsを何度か
chromy でフルサイズのスクリーンショットをとる。Headless Chrome - Qiita
headless chrome でフルサイズ（縦に長いページ）のキャプチャをとりたかっただけなのですが。いろいろライブラリを試したのですが、うまくいかず。離れた島にいる @tkhr に聞いたら chromy がいいらしいよとのことで試してみたら、確かにとても簡単でした。よかったです。 const Chromy = require('chromy') const fs = require('fs') async function main() { let chromy = new Chromy() try { await chromy.goto('http://todays-quiz.com') const png = await chromy.screenshotDocument() fs.writeFileSync('out.png', png) await chromy.close()
ヘッドレスChromeをもっとも簡単に操作できると思われるNightmareJS風ライブラリ - Qiita
Chrome59(2017/05/27現在はベータ)から--headlessオプションを使うことでChromeをヘッドレスブラウザとして使えます。これをNodeJSから操作するにはchrome-remote-interfaceというNPMパッケージを使うのですが、そのままですとなかなか面倒です。そこで、NightmareJS風にヘッドレスChromeを操作することができるライブラリをご紹介します。 GitHub: https://github.com/OnetapInc/chromy 基本的な使い方 このようにNightmareJS風のメソッドチェーンで操作することができます。visibleオプションを指定すればヘッドレスモードではなく通常モードでChromeを起動することもできます。 Chrome本体は標準的なインストールをしていれば自動的に最も新しいChromeを探してそれを起動します
Chrome操作ライブラリ chromy と puppeteer を比較 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 Node.jschromypuppeteer ものすごく久しぶりにブログを書きます、開発チームのﾊｯﾀです。 Chromeにheadlessモードが追加されてから、Chromeを操作できるライブラリが色々出てきています。 その中でも、ぱっと見で書きやすそうだった2つのライブラリを、 簡単なブラウザテストを例にとって比較してみようと思います。 chromy https://github.com/OnetapInc/chromy 結構早い時期から公開されていて、Headless Chrome操作のパイオニアといった感じでしょうか。 実行すると、Chromeが起動します。 chromyとは別にChromeのインストールが必要です。 puppeteer https:
![Chrome操作ライブラリ chromy と puppeteer を比較 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a55a1e51ed8cc38e558377a5db15e9d3db962b1/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fimg%2Fogp.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kawamataryo/vue-sample-blog: headlessCMS、vue、apolloのsample blog
Where content drives business momentum | Contentful
GraphCMS - The GraphQL Headless CMS
The Next Generation GraphQL Headless CMS
Home
Home - Documentation
GitHub - OnetapInc/chromy: Chromy is a library for operating headless chrome. 🍺🍺🍺
ヘッドレスChromeでスクレイピングする例 - Fuji Haruka's blog
