Slide 1

Slide 1 text

Puppeteerを初めて使ってみた話 2019年6⽉19⽇ 表参道Web勉強会 vol.5

Slide 2

Slide 2 text

About Me 2 Resume 楽天株式会社 ECコンサルタント(PC・家電) 株式会社 Blue Planet-works SE ʼ15 Oct ʼ18 Jan Gʼs ACADEMY TOKYO ⼊学 Programming Language @don_bu_rakko Twitter Hobby アカペラ、楽譜編曲 ProgLearn; 代表 ʼ19 Jun プログラムの⾔語化・可視化サービス

Slide 3

Slide 3 text

今回紹介したいこと Puppeteer (パペティア) 3

Slide 4

Slide 4 text

Webスクレイピングのアプローチの種類 4 ⽬的 WebページのHTMLデータを収集 ⼿段 特定のデータを抽出、整形 リクエストを送信 (ブラウザの挙動を再現する) Webブラウザを操作 ブラウザ上に表⽰されている 要素を取得 DOMツリーを探索 https://speakerdeck.com/sin_tanaka_21/pythondeshi-meruuebusukureipingushi-jian-ru-men Puppeteer

Slide 5

Slide 5 text

Puppeteerとは ü「⼈形使い」の意味。読み⽅はパペティア(p`ʌpɪtíɚ) üNode.jsのライブラリ üヘッドレスブラウザChromiumを使ってスクレイピングをすることが できる ü↑なので、SPAのページでも要素を取得できる! üスクリーンショットを撮影したりPDF化したりすることができる 5

Slide 6

Slide 6 text

npm install 6 $ npm i puppeteer > node install.js Downloading Chromium r662092 - 88.3 Mb [====================] 100% 0.0s + [email protected] added 43 packages from 22 contributors and audited 50 packages in 11.51s found 0 vulnerabilities

Slide 7

Slide 7 text

Puppeteerの基本的な使い⽅ 7 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com’); // スクリーンショットを撮る await page.screenshot({path: 'example.png’}); // 要素を取得する var item = await page.$(’div’); await browser.close(); })();

Slide 8

Slide 8 text

これ使ってなんか作りたい ということでコマンドを作りました。 8

Slide 9

Slide 9 text

オリジナルコマンド”dk” ü機能1 Ø英語でGoogle検索、結果を表⽰してくれる 9

Slide 10

Slide 10 text

Google Search の GETリクエスト Query Parameter 意味 値の内容 hl 表⽰される⾔語 ja: ⽇本語 en: 英語 zh-CN: 中国語 lr 検索する⾔語 lang_ja: ⽇本語 lang_en: 英語 lang_zn-CH: 中国語 q キーワード(検索ワード) 任意の⽂字列 複数の場合は『+』でつなぐ 除外したいワードは『-』でつ なぐ 10 http://www13.plala.or.jp/bigdata/google.html

Slide 11

Slide 11 text

search.js 11 const puppeteer = require('puppeteer'); let args = [] if(process.argv.length > 2){ args = process.argv.slice(2) console.log(`${args}¥n`) } (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage() await page.goto( `https://www.google.com/search?q=${args.join('+')}&hl=en&lr=lang_en`, {waitUntil: "domcontentloaded"}) const titles = await page.$$eval('.LC20lb', list => { return list.map(data => data.textContent); }) const links = await page.$$eval('.TbwUpd', list => { return list.map(data => data.textContent); }) const descs = await page.$$eval('.st', list => { return list.map(data => data.textContent); }) for(let i=0; i

Slide 12

Slide 12 text

ついでにご紹介 ü機能2 Øリポジトリの⼀覧を表⽰ Ø選択すると、phpstorm( or VSCode)で開いてくれる 12

Slide 13

Slide 13 text

コマンドの本体はこれだけ。 13 #!/bin/bash # 設定ファイルの読み込み . `dirname $0`/conf.txt COMMAND_NAME="dk” … if [ $# -ge 1 ]; then case "$1" in "open" | "o") open_proglearn_directory ;; "search" | "s" ) cd `dirname $0` node ./_src/google-search/search.js ${@:2} ;; esac else echo -e "[Warning]Please set command" fi

Slide 14

Slide 14 text

dk 14 function open_proglearn_directory () { echo "[Info] Please choose the directory..." # 配列の中⾝を全て取り出すには ${HOGE[@]} DIR_NAME=($(ls $PROGLEARN_DIRECTORY)) select VAR in ${DIR_NAME[@]} do echo $VAR echo "Wait to open $PROGLEARN_DIRECTORY/$VAR in Code Editor." echo "$CODE_EDITOR $PROGLEARN_DIRECTORY/$VAR" $CODE_EDITOR $PROGLEARN_DIRECTORY/$VAR break done }

Slide 15

Slide 15 text

Github にあります! https://github.com/cha1ra/original-command 15

Slide 16

Slide 16 text

THANK YOU. https://don-bu-rakko.com