1. ckoshien

    Posted

    ckoshien
Changes in title
+puppeteer触ってみた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,87 @@
+# puppeteerとは
+Googleが開発している、NodeJSからHeadless Chrome(GUIなし)を操作できるフレームワーク。
+
+# puppeteerのインストール
+```
+npm install puppeteer
+```
+
+
+# スクレイピングしてみる
+[puppeteerでスクレイピング](https://qiita.com/tomi_shinwatec/items/a68cf7840c3da002c6e0)
+
+実際にフォームにパスワードを入力して認証を通してみる例。
+公式ではasync/awaitを使ったコードが例示されているので敢えてPromise使ってみます。
+
+```javascript
+
+const puppeteer = require('puppeteer');
+
+puppeteer.launch({
+ //# WindowsではHeadlessモードでTimeoutしてしまう問題があるのでfalse
+ headless: false,
+})
+.then((browser)=>{
+ browser.newPage()
+ .then((page)=>{
+ //ページ遷移
+ page.goto('https://www.freeml.com/kimetaro/******')
+ .then(resp=>{
+ //フォーム入力
+ page.type(
+ 'input[name="view_password"]',
+ 'xxxx')
+ .then(
+ //ボタンクリック
+ setTimeout(()=>{
+ page.click('.ok_btn')
+ },1000)
+
+ )
+ })
+ .catch(err=>console.log(err))
+ })
+})
+```
+
+要素を取得してみるコード
+[puppeteerでの要素の取得方法](https://qiita.com/go_sagawa/items/85f97deab7ccfdce53ea)
+
+```js
+const puppeteer = require('puppeteer');
+
+puppeteer.launch({
+ headless: false
+})
+.then((browser)=>{
+ browser.newPage()
+ .then((page)=>{
+ let i=471652
+ let req4=i.toString().substring(0,4)
+ let req2=i.toString().substring(4,6)
+ console.log(req4+'-'+req2)
+ page.goto('http://www.clubdam.com/app/damStation/clubdamRanking.do?requestNo='+req4+'-'+req2)
+ .then(resp=>{
+
+ page.evaluate(()=>{
+ console.log(document)
+ var title=document.querySelector('div #Rankingbattle tbody tr td a').textContent
+ var artist= document.querySelectorAll('div #Rankingbattle table.list_rankingbattle_title tr td')
+ return {
+ title:title,
+ //ページコンテンツがない場合は落ちるので事前にnull確認が必要
+ artist:artist[3].textContent
+ }
+ })
+ .then((result)=>{
+ console.log(result)
+ })
+
+ })
+ .catch(err=>console.log(err))
+ })
+})
+
+
+
+```