■はじめに 注意事項
※本ページは、プログラミング学習用に作成したページであり、実在するデータ・Webサイトとは一切関係がありません。
Webサイトの利用規約を守り、必ずWebサイトの利用規約に従い、ご自身の責任の範疇であくまで参考にして頂きますようお願いいたします。
情報提供のみを目的としており、掲載内容による直接的・間接的な損害・運用結果について、一切の責任を負いません。
■解説動画
■目的
ExcelVBAでSeleniumBasicを使用し操作する方法と、テーブルデータ・グラフデータの数値上のデータが
閲覧できる際の差玉（グラフ上の数値の読み取りの演算方法）の一例を紹介し、演算と考え方の学習を目的としています。
下記練習用パチンコ店データサイト風データページから、テーブルデータの取得と、グラフから最終的な差玉を読み取っていきます。
ただ下記サンプルデータサイトページは携帯デバイスのみ対応の設定をしてありますので、PCからそのまま開くことはできません。
解説を読みながら1つずつ進めて頂ければ幸いです。
■練習用パチンコ店データサイト風データページ（携帯デバイスのみ対応）
パチンコ店データサイト携帯デバイス対応サンプル（グラフから差玉読み取り学習用）
■はじめに 注意事項 ※本ページは、プログラミング学習用に作成したページであり、実在するデータ・Webサイトとは一切関係がありません。 Webサイトの利用規約を守り、必…
VBACompany ■解説
まず最初にこちらのWebページはデバイスの指定があります。
よくあるPCからのアクセスの場合は別ページに飛ばして拒否するパターンです（他にも色々ありますが作成が簡単なのでこちらで）
このページの内容：JavaScriptで、ブラウザが送信するHTTPリクエストヘッダーのUser-Agent（ユーザーが使用するOSやブラウザの種類、バージョンを判別できる情報）を取得し
特定のデバイスからのアクセスを調べWindowsかMacであればWindow.location.hrefプロパティを使用し、下記デバイスを指定するページに飛ぶようにしています。
色々なページがありますが、要は「PC」からの閲覧は制御している形になります。デバイスを「携帯」デバイスに指定してWebページを開きましょう。
ポイント① デバイスを携帯に指定してWebページを開く
GoogleChromeを開き手動でやってみましょう。
まずPCで下記サンプルデータサイトをそのまま開いた場合は（https://vba.company/notfound）へ移行するようになっています。
では、携帯デバイス（の設定）に変更してこちらのページを開いてみましょう。
パチンコ店データサイト携帯デバイス対応サンプル（グラフから差玉読み取り学習用）
■はじめに 注意事項 ※本ページは、プログラミング学習用に作成したページであり、実在するデータ・Webサイトとは一切関係がありません。 Webサイトの利用規約を守り、必…
①最初にGoogleChromeを開き、Webブラウザの画面上で右クリックをし、検証を押下します。
②GoogleDeveloperツールが開いたらデベロッパーツールウィンドウから「Toggle device toolbar」ボタンをクリックします。
③画面左上から好きな携帯デバイスを選びます。（GoogleChromeに標準搭載されている機能の一つでスマホ等デバイスによる表示を確認できる為の機能）
④デバイスを選択したら一度ページを再読み込みすると、選択したデバイスで表示される画面になります。
⑤携帯デバイス画面のままPCでこちらのページを開いてみましょう。URL：https://vba.company/sampledevicecheck/
そうすると、PCでは開けないこちらのWebサイトが開くことができています。
これはデバイスの指定をしており、PCではないと認識させている為です。（※Webページの仕様次第ではこちらでも開けないケースも有ります）
前置きが長くなりましたが、この動作をSeleniumBasicを使用して実行していきます。
SetCapabilityメソッド → ブラウザやデバイス等の種類やバージョン・モデルを指定することができる
こちらのメソッドを使用して、Webページを開く前に、指定します。
最初にChromeDriverのインスタンス化を行い、driverという文字でChromeDriverを扱えるようにします。
Dim driver As New Selenium.ChromeDriverの部分です。
そして、Chromeを起動する前にSetCapabilityメソッドでGoogleChromeのオプション設定をモバイルでデバイスはiPhone XRと設定します。
（デバイスは好きなものに設定してください）
設定が完了したら、StartメソッドでChromeを起動します。この時点で先程手動でやった時と同じように携帯デバイス画面になっています。
その後、GetメソッドでURLを指定し、Webページを開きましょう。
携帯デバイス画面で、指定したページを開くことができています。
AsTable.ToExcelメソッド → テーブルデータをExcelに転記
指定したページを開くことができるようになれば、まずはテーブルデータを取得しましょう。
要素が<table></table>になっていれば取得が可能です（※例外有）
Webブラウザ画面上で「右クリック」をし、「検証」を押下し、GoogleDeveloperツールを開きます。
画面左上の矢印の部分が要素を確認することが可能なボタンになりますので、そちらを押下し、青くなればテーブルデータの部分をクリックしましょう。
そうするとテーブルデータに対応した要素が右側のGoogleDeverloperツール上に表示されます。
要素を特定することができたら、FindElementByIdでこちらの要素を指定し、AsTable.ToExcelメソッドを使用し、テーブルデータをExcelに転記します。
今回はわかりやすく、Id属性を付けていますがない場合は、Selector属性で取得する等別の方法をとりましょう。
テーブルデータの要素上で右クリックをし、コピー→Selectorをコピー。
要素を指定する部分をFindElementByCssメソッドに変更し、取得したセレクターを引数に指定します。
こちらでも同様にテーブルデータを転記することが可能です。
SeleniumBasicでの基本的な操作は過去の動画で説明しておりますので、不明な方はそちらを閲覧頂ければと思います。
SimpleプログラミングYoutube → https://www.youtube.com/channel/UCHP76ZuS_0luJpGErA1JF-Q
ここまでのできた内容 デバイスを指定してWebページを開き、指定したテーブルデータをシートに転記
■ここまでのサンプルコード
-----------------------------------------------------------------------------
Option Explicit
Public Sub Sample()
'ChromeDriverのインスタンス化
Dim driver As New Selenium.ChromeDriver
With driver
'Chromeのオプションをモバイルでデバイスの名前は
.SetCapability "goog:chromeOptions", "{""mobileEmulation"":{""deviceName"":""iPhone XR""}}"
'Chromeを起動
.Start "Chrome"
'指定したWebサイトを開く
.Get "https://vba.company/samplewebdata/"
'セレクターが#sampletabledataという要素を指定し、そのテーブルデータをエクセルのSheet1のA1セルへ転記
.FindElementByCss("#sampletabledata").AsTable.ToExcel Sheet1.Range("A1")
Stop
End With
End Sub
-----------------------------------------------------------------------------
ポイント② まずはデータを取得し必要なデータを整理し演算する
今回グラフデータの差玉を読み取るのは２つ目のPath要素のものになります。
→１つ目のものは余り使用されておらず（自動更新に不向きの為？）よくある要素を参考事例とします。
①要素を分解し必要なデータをピックアップする
まず、グラフデータサンプル②の中の要素を見てみましょう。GoogleDeveloperツールでグラフを選択し、対応するコードの部分を確認します。
その上で、そこの要素をコピーしてみましょう。
コピーしたら一度要素をメモ帳か何かに貼り付けを行い、中身をよく見てみましょう。最初は多くて、良くわかりませんが、こういう時は区分けし整理しましょう。
大枠 <svg width="500" height="300">で横幅が500・高さが300を示しています。こちらは大枠の部分。
path要素 → グラフのデータの線で実際のデータの推移
line要素 → 各メモリにおける線の場所
text要素 → ｘ・ｙの項目名
このように分けると各要素がどのような役割を果たしているかわかります。
ポイント③ 演算の考え方の説明
SVGは座標情報によるベクター形式のデータです。大枠の部分でwidthが500、heightが300となっているのは横幅が500で高さが300を示します。
この大枠の中で、データはpath要素の中にあり、そのd属性の中の各データがリンクしています。
strokeから後ろの部分は線の太さ等の設定部分の為、今回は無視します。
path部分がデータを示し、座標情報による位置を示しているので
例えば最初の70，150は大枠の中の左上端からｘが70（右に70）、ｙが150（下に150）の位置を示しています。
この各値を繋いでいくと折れ線形状のグラフになり、座標ごとの対象は下記のようになります。
どこがどのように対応しているかわかれば、今回欲しいのは最終的な台の差玉データになりますので、そちらを特定します。
こちらを見れば、最終的な差玉データは「d属性」の「一番後ろ」のデータであるということがわかります。
最終データがどこかわかれば、次にこの数値の開始位置はどこで、増えた際にどの方向に表示されるかは項目の位置で確認します。
こちらのｘとｙからわかることは、+1000と-1000のテキストの位置が両方ともｘは一緒であること（ｘは１５）であることと
各単位の場所を見ると下記であることから、ｘは左から右に向かった横の位置を、ｙは上から下に向かった位置を示していると仮説を立てます。
そうすると、ｙが50の場合+1000、ｙが150の場合0、ｙが250の場合-1000となります。
ｙの位置が100増えることで-1000減っていることになります。
つまりｙの位置が1ずれることで「-10」（-1000/100=-10）ずつ差玉が変化する計算になります。
こちらのケースであれば、ｘが270のｙが250の部分が一番最後の数値位置になる為、ここが最終的な差玉になります。
ｙは50の位置で最大差玉（この場合は+1000）であり、スタート地点はグラフの一番上である+1000です。
グラフデータサンプル②はyが250ですので+1000の位置から200ずれた位置（250-50） → その為、200分最初の位置から玉数が減る計算になります。
ｙは1当たり-10ずつ減る為、計算式は グラフの50の位置の最大メモリ - 10 × （ ｙ - 50 ）になります。
グラフの50の位置の最大メモリが+1000ですので、こちらのグラフデータサンプル②で求める計算式は
+1000 - 10 × （ ｙ - 50 ）となります。
ここまででグラフの最終部分の場所と、最終部分（ｙ）がわかれば差玉を求めることができるようになった為、後はこれをSeleniumBasicを使用して自動化していきます。
ポイント③ タグの名前を指定して要素を取得していく
要素タグの名前は<path></path>となっている為、path要素を指定します。
タグの名前を指定するにはFindElementByTagメソッドを使用します。こちらは引数にタグの名前を文字列で指定します。
FindElementByTagで"path"を指定し、<path>から</path>までを取得することができたら、さらにそこからd属性の部分だけ取得します。
属性部分を取得するにはAttributeメソッドを使用し、属性の名前を指定し中身を取得していきます。
取得した値をA12セルへ入れてみましょう。
Sheet1.Range("A12").Value = .FindElementByTag("path").Attribute("d")
■最終的なサンプルコード
-----------------------------------------------------------------------------
Option Explicit
Public Sub Sample()
'ChromeDriverのインスタンス化
Dim driver As New Selenium.ChromeDriver
With driver
'Chromeのオプションをモバイルでデバイスの名前は
.SetCapability "goog:chromeOptions", "{""mobileEmulation"":{""deviceName"":""iPhone XR""}}"
'Chromeを起動
.Start "Chrome"
'指定したWebサイトを開く
.Get "https://vba.company/samplewebdata/"
'セレクターが#sampletabledataという要素を指定し、そのテーブルデータをエクセルのSheet1のA1セルへ転記
.FindElementByCss("#sampletabledata").AsTable.ToExcel Sheet1.Range("A1")
'タグの名前を指定して要素を取得し、その要素のd属性の値を取得しA12セルへ
Sheet1.Range("A12").Value = .FindElementByTag("path").Attribute("d")
End With
End Sub
-----------------------------------------------------------------------------
※テーブルデータはこちらの例ではCssで取得していますが、Webページに合わせてIdでも、CssでもXPathでも好きな形で取得してください
ポイント④ 関数で処理して一番最後の数値だけ抜き取る
セルに値を入れることができたら後は、関数で処理します ※関数で処理せずVBA上で計算しても良いですがわかりやすく関数にさせて頂きました
参考サイト様→ FIND関数で右（後ろ）から特定の文字まで検索し抽出する
末尾の数字だけ抽出出来たらValue関数で数値にし、ｙを元に差玉を計算します。（差玉の計算方法はポイント③にて説明）
これで、差玉データを計算することができました。
■関数のサンプル
-----------------------------------------------------------------------------
→A14セルの関数
=VALUE(RIGHT(A12,LEN(A12)-FIND("●",SUBSTITUTE(A12,",","●",LEN(A12)-LEN(SUBSTITUTE(A12,",",""))))))
→C14セルの演算式
=B14-(A14-50)*10
-----------------------------------------------------------------------------
実在するものとは異なりますが、簡易的な考え方・演算方法の解説となります。
実際に表記しているグラフ・また合えて座標をずらす等方法は色々ありますから
一概にデータと計算した結果が一致とは言い切れませんが概ねの傾向値がわかるのではないでしょうか。
画像から数値化するにはOpenCVのようなライブラリはなく、VBAは不向きかもしれませんが
SVGのような数値で確認できるものはExcelVBAでも抽出することが可能です。
ご不明点・ご質問等ありましたら、TwitterかYoutubeへコメント頂ければ幸いです。
SeleniumBasic 過去動画
■SeleniumBasic関連の動画一覧
https://www.youtube.com/@Simple_Program/search?query=selenium
■SeleniumBasic 最初の準備編
■SeleniumBasic 基本的な色々使用方法
■SeleniumBasic テーブルデータ取得方法
Twitter アカウント Simple＿Program