株のシステムトレードをしよう - 1から始める株自動取引システムの作り方

株式をコンピュータに売買させる仕組みを少しずつ作っていきます。できあがってから公開ではなく、書いたら途中でも記事として即掲載して、後から固定ページにして体裁を整える方式で進めていきます。

Headless Recorder を使って、セレクタ+αを取得する - Puppeteer で使用するセレクタを手軽に取得する方法 - 02

Photo by Digital Buggu from Pexels

これまで

Puppeteer や Selenium で使用できるセレクタを取得する方法の続編である。昨日は、 DevTools を使用した方法を紹介した。

how-to-make-stock-trading-system.dogwood008.com

本日は、Chrome の拡張機能である Headless Recorder を使用した方法を紹介する。

chrome.google.com

公式の英語マニュアルもあるが、おそらく読まなくてももわかるであろうシンプルなUIになっている。

Headless Recorder のインストール

Google Chromeを前提としているが、Chromium系 であれば他のブラウザでも使用できるかもしれない。Headless Recorderは拡張機能なので、インストールページを開いて2クリックで完了する。

「Chromeに追加」ボタン
「Chromeに追加」ボタン

「拡張機能を追加」ボタン
「拡張機能を追加」ボタン

使用方法

Chrome のウィンドウ右上に、ビデオカメラのアイコンが増えているので、それをクリックする1

Headless Recorder のアイコンをクリック
Headless Recorder のアイコンをクリック

インストール直後だと、 "No recorded events yet" になっているが、もし前回の結果が残っていれば、タイトルバーをクリックすると "No recorded 〜" に戻せる。

"No recorded events yet" の表示
"No recorded events yet" の表示

もし前回の結果が残っていれば、タイトルバーをクリックする
もし前回の結果が残っていれば、タイトルバーをクリックする

この状態で、 "Record" ボタンを押すと、記録が始まる。

"Record" ボタンを押すと、記録が始まる
"Record" ボタンを押すと、記録が始まる

記録が始まったら、後はセレクタを取得したいページを開き、取得したい要素をクリックしたらOK。記録を終了するので、開始と同様に Headless Recorder のアイコンをクリックし、 "Stop" ボタンを押せば終了する。

終了するときは "Stop" ボタン
終了するときは "Stop" ボタン

そうすると、自動的に今行った操作を Puppeteer や Playwright で実行するためのコードを生成してくれる。下記は Yahoo! Japan を開いて、検索ボックスをクリックしたときの例である(コメント部は著者による)。Puppeteer の例だが、 Playwright 版も初期化を除いて大きく変わらない。注目して欲しいのは、最後のクリック操作を呼び出している部分 ( page.click() ) である。ここに記入されている .\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4検索ワード入力用テキストボックスのセレクタである。

// 自動生成されたJavaScripiptのコード(Puppeteer 用)

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  
  const navigationPromise = page.waitForNavigation()
  
  // Yahoo! Japanを開く
  await page.goto('https://www.yahoo.co.jp/')
  
  // ブラウザのウィンドウの幅・高さをセットする
  await page.setViewport({ width: 1388, height: 798 })
  
  // ここに不必要な操作を行った結果のゴミが混ざっていたので、削除した

  // ページ読み込み完了を待つ
  await navigationPromise
  
  // テキストボックスのセレクタが描画されるまで待つ
  await page.waitForSelector('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4')
  // テキストボックスのセレクタをクリックする
  await page.click('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4')
  
  // ブラウザを閉じる
  await browser.close()
})()

このように、セレクタのことをよく知らなくても、 Headless Recorder は Puppeteer のコードまで生成してくれるので、非常に便利と言える。もし、セレクタのことを知っていれば、さらに簡潔に記述することができる。

下記の2行は、Yahoo! Japan のページ上2では、同じテキストボックスを指し示す。上は Headless Recorder で自動生成したもの、下は実際に Dev Tools の Elements タブにあるHTMLソースを覗いて書いたものである。前者は階層構造を段階的に下っていくのに対し、後者は「このページ内の他にテキストボックスが無いことに着目し、検索ボックスとして用いられるテキストボックス」をいきなり選択している。機械的な生成で後者のようなセレクタの作り方をするのはやや難度が上がる。人間が得意とする分野なので、読みやすい(=保守しやすい)ソースコードを書いていくには、こういった観点での修正を行えるのが望ましい。

// 「class属性が _1f9dgjwXCsoV3gv3CR4ed0 である要素の子要素である form の子要素である fieldset の子要素であるclass 属性がm4wO0W1Qp4Rm8IpDS5ZjR である要素の子要素である class 属性が _1wsoZ5fswvzAoNYvIJgrU4 である要素」をクリックする
await page.click('.\_1f9dgjwXCsoV3gv3CR4ed0 > form > fieldset > .m4wO0W1Qp4Rm8IpDS5ZjR > .\_1wsoZ5fswvzAoNYvIJgrU4')

// 「type属性が search である input 要素」をクリックする
await page.click('input[type=search]')

ここまで2つの手法を紹介してきた。次は「取得したセレクタが正しいかを検証する方法」について紹介する。


  1. mac でダークモードを有効にしていると、著者のように非常に見落としやすいデザインになってしまっているので注意。

  2. https://www.yahoo.co.jp/

(C) 2020 dogwood008 禁無断転載 不許複製 Reprinting, reproducing are prohibited.