TAMINIF’s blog

大阪在住のWebエンジニア。iOSアプリもやってます。勉強会にも参加してます。最近はマネージャー色強め

関西Node学園3時限目で登壇しました

概要

表題の通り、関西Node学園3時限目に登壇して来ました。今回はLINE株式会社さんの京都オフィスをお借りして開催させていただきました。
今回私は「LINEで馬券を購入する」というタイトルで登壇してきました。

スライド

発表内容について

LINEで馬券を購入しようというタイトル落ちからの、中身はほぼHeadless Chromeとpuppeteer + 申し訳程度のLINE Messaging APIの話です。
馬券購入APIはすでにここで書いた内容ではあったのですが、
実際に話して説明する && LINE Messaging APIを組み合わせて一つのプロダクトにしたところでトークテーマとしました。 taminif.hatenablog.jp

馬券を購入するAPIは、Headless Chromeを試す時に一番最初にモチベーションを持って作ったAPIです。
話としてはAPIが提供されていない、ログインが必要なサイトをAPI化するという話が一番メリットがわかりやすいと思ってJRAを選びました。
Twitterも選択肢にあったんですが、この資料を作っていて調べているとTwitterはWebスクレイピングを規約で禁止していると知って作りはしたんですけどやめました。

セッションの中で話せなかったこと

puppeteerでつまづいたことが全部話せなかったので、ここで追加で説明しておきます。

onclickイベントが発火しない

これはセッションの中で詳細な話までできなかったのですが、画面外にある要素をクリックする場合に画面を大きくするのではなく
該当の場所までスクロールする方法があります。クリックイベントはセレクタを必要とするため、そのセレクタが画面内になければ例外を投げます。
下記のドキュメントにも記載されている通り、場合によっては waitForNavigation などでページのロードを待つ必要があります。
puppeteer/api.md at master · GoogleChrome/puppeteer · GitHub

Chromeとpuppeteerのバージョンを合わせる

Headless ChromeをAWS Lambdaで動かすに当たって、下記のツールを使わせてもらっています。 github.com

ただこのGithubは今年3月から更新されていなくて、Chromeのバージョンもここにビルドされたままのものです。（Chrome66）
そうすると、puppeteerはpackage.jsonで特にバージョン指定していないので、puppeteerのバージョンだけ上がることになります。

正確にどのバージョンからというのはわかりませんが、puppeteerだけバージョンが上がるとHeadless Chromeが動かなくなります。
そのため、puppeteerのバージョンを抑えないといけなくなります。今だとpuppeteerのバージョンを1.1.1に固定する必要があります。
自分でChromeのビルドができればこの問題も解決できるのですが、現時点でそこまで調べきれていないです。

LINE京都について

今回初めてLINE京都さんで開催させていただいたのですが、とてもおしゃれなオフィスでした。
しかも飲食まで用意していただいて、至れり尽くせりという感じでとても感謝しています。
LINEさんはフロントエンドエンジニアを募集中とのことですので、ぜひ応募してみてはいかがでしょうか！（宣伝）

Headless Chromeのモチベーション

Headless Chromeはこれからプライベートで最も取り組むであろうプロダクトで、どこかのNode勉強会で一度話をしたいと思っていたので
関西Node学園3時限目にしてようやく話ができたというところです。
Headless Chrome自体は去年の4月にリリースされているので、みんな実は知ってる内容かなと思っていたんですが使っている人の方が少なそうで話せてよかったです。
Node学園祭でもHeadless ChromeのCfPを二つ出したんですけど、これが全国だと知ってる人の方が多いとかもあるかなと思っていますが、Node学園祭でもぜひ話したいなと考えています。

まとめ

関西Node学園を引き続き盛り上げていければと思います！