anysense デザイナー：山本

1. 不純な動機で「puppeteer」
でスクレイピングを始めてみた
スクレイピングって響きカッコイイよね

2. Tyankatsu
•フロントエンドエンジニアになりたいデザイナー
•ほうれん草⼤好き
•gulp⼤好き
•jQuery飽きた
•ES勉強中
•https://github.com/tyankatsu0105
•https://twitter.com/tyankatsu5
•https://anysense.co.jp/

3. お品書き
•スクレイピング？
•puppeteer？
•だったらこうしてやる！！
•何を作ったか？なぜ作ったか？
•思うこと

4. 役に⽴つか
分かりませんが、
githubに公開してます。
https://github.com/
tyankatsu0105/puppeteer

5. スクレイピング？

6. スクレイピング？
ちょっと
わかんないです 笑

7. スクレイピング？
スクレイピング
知る前の僕

8. スクレイピング？
スクレイピング・・・・・

9. スクレイピング？
なんかエロいことに
使ってそう！！
（漠然）

10. スクレイピング？
実際に
やってみよう！！
＼チャンカツよろしく！！／
https://try-puppeteer.appspot.com/

11. スクレイピング？
やってみるタイム
終了

12. スクレイピング？
エロくねぇ！！！

13. スクレイピング？
Webスクレイピングとは、WebサイトからWebペー
ジのHTMLデータを収集して、特定のデータを抽出、
整形し直すことである。
https://www.weblio.jp/content/
Web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%
82%B0

14. スクレイピング？
やっぱりエロくn

15. puppeteer?

16. puppeteer?
⼈形遣い 傀儡⼦
ブラウザを操っているようなロゴ

17. puppeteer?
•※chromiumをヘッドレスモード（GUIがない）
で操作する注⽬のnodeライブラリ
•内包するchromiumをdevtools protocolと対話
して操作する
•操作がわかりやすい。
•Chrome開発チームがメンテナンスしてる
※chromium：chromeの元になっているオープンソースのブラウザ。
詳細→https://ja.wikipedia.org/wiki/Chromium

18. puppeteer?
なんで最近
注⽬されてんの？

19. puppeteer?
今まで
スクレイピングに
⽤いられていた
JSライブラリ

20. puppeteer?

21. puppeteer?
権威を振るっていた
PhantomJS
(cheerioとかもあったけど)

22. puppeteer?
でも去年
悲しい出来事が

23. puppeteer?
http://kytiken.hatenablog.com/entry/
2017/11/29/175814

24. puppeteer?
メインメンテナーさん
限界でした。
お疲れ様でした。

25. puppeteer?
ちょうどその頃

26. puppeteer?
Chrome59から
Headless Chrome
搭載しやす
https://developers.google.com/web/
updates/2017/04/headless-chrome?hl=ja

27. puppeteer?
うおぉぉぉぉ！！！
（予想）

28. puppeteer?
その後

29. puppeteer?
puppeteer
公開しやす

30. puppeteer?
うおぉぉぉぉ！！！
（予想）

31. puppeteer?
そして

32. puppeteer?
puppeteer
メジャーアプデ
しやした

33. puppeteer?
うおぉぉぉぉ！！！
（予想）

34. puppeteer?
おいおい

35. puppeteer?
ここまで
エロい話なし

36. puppeteer?
だったら
やってやるさ！！

37. puppeteer?
エロ画像を
漁ってやる！！！

38. だったら
こうしてやる！！

39. だったらこうしてやる！！
•某R18サイトにアクセス
•検索窓で変数に⼊れた⽂字列を⼊⼒
•検索結果の数を多くするボタンクリック
•それぞれの詳細ページにアクセス
•拡⼤表⽰したサムネイル画像をローカル
に保存

40. だったらこうしてやる！！
実際に
やってみよう！！

41. だったらこうしてやる！！

42. だったらこうしてやる！！
どうでしたか？

43. だったらこうしてやる！！
お宝が増えました

44. だったらこうしてやる！！
いかん！！！

45. だったらこうしてやる！！
こんなことに
使ってる
場合じゃねぇ！！

46. だったらこうしてやる！！
ちゃんとしたもの
作りました。

47. 何を作ったか？
なぜ作ったか？

48. 何を作ったか？なぜ作ったか？
こんな経験
ありませんか？

49. 何を作ったか？なぜ作ったか？
•サイト構築したけど、全体的にスタイルのチェックしたい
•今サイトにどんなディレクトリがあるのか知らない
•スタイルの修正したことで崩れがないかチェックしたい
•⼀つ⼀つページを開いて⽬視する作業が⾯倒だ。

50. 何を作ったか？なぜ作ったか？
だからつくったぜ！

51. 何を作ったか？なぜ作ったか？
流れ

52. 何を作ったか？なぜ作ったか？
•指定したURLをPCとSPに偽装して開く（basic認証があったらそこ
を突破する）
•スクリーンショットとHTMLをローカルに落とす
•ページ内の全aタグのhrefを取得（重複や不要なものは削除）
•取得したURL先に⾶ぶ
•またスクリーンショットとHTMLをローカルに落とす
•またページ内の全aタグのhrefを取得（重複や不要なものは削除）
•を繰り返す
•全部サイトを⾒終わったら終了

53. 何を作ったか？なぜ作ったか？
実際に
やってみよう！！

54. 何を作ったか？なぜ作ったか？
便利じゃね？

55. 思うこと

56. スクレイピングって

57. 全く
エロくない！！

58. おわり