Puppeteer Introduction and my original command "dk"

Transcript

1. Puppeteerを初めて使ってみた話 2019年6⽉19⽇ 表参道Web勉強会 vol.5
2. 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 プログラムの⾔語化・可視化サービス
3. 今回紹介したいこと Puppeteer (パペティア) 3
4. Webスクレイピングのアプローチの種類 4 ⽬的 WebページのHTMLデータを収集 ⼿段 特定のデータを抽出、整形 リクエストを送信 (ブラウザの挙動を再現する) Webブラウザを操作 ブラウザ上に表⽰されている 要素を取得 DOMツリーを探索 https://speakerdeck.com/sin_tanaka_21/pythondeshi-meruuebusukureipingushi-jian-ru-men Puppeteer
5. Puppeteerとは ü「⼈形使い」の意味。読み⽅はパペティア(p`ʌpɪtíɚ) üNode.jsのライブラリ üヘッドレスブラウザChromiumを使ってスクレイピングをすることが できる ü↑なので、SPAのページでも要素を取得できる！ üスクリーンショットを撮影したりPDF化したりすることができる 5
6. npm install 6 $ npm i puppeteer > node install.js Downloading Chromium r662092 - 88.3 Mb [====================] 100% 0.0s + puppeteer@1.17.0 added 43 packages from 22 contributors and audited 50 packages in 11.51s found 0 vulnerabilities
7. 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(); })();
8. これ使ってなんか作りたい ということでコマンドを作りました。 8
9. オリジナルコマンド”dk” ü機能1 Ø英語でGoogle検索、結果を表⽰してくれる 9
10. 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
11. 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<titles.length; i++){ console.log(`¥u001b[32m ${titles[i]}¥n¥u001b[34m ${links[i]}¥n¥u001b[37m ${descs[i]}¥n`) } await browser.close(); })();
12. ついでにご紹介 ü機能2 Øリポジトリの⼀覧を表⽰ Ø選択すると、phpstorm( or VSCode)で開いてくれる 12
13. コマンドの本体はこれだけ。 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
14. 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 }
15. Github にあります！ https://github.com/cha1ra/original-command 15
16. THANK YOU. https://don-bu-rakko.com