競馬予想のためのHTML入門

スクレイピング

 

Webスクレイピングをやってみたいけど、そもそもHTMLがよくわからない…

 

Webスクレイピングの学習をはじめて、HTMLでつまづいてませんか。

Webスクレイピングは、Webページから情報を取得するので、たしかにHTMLの知識は必要です。

ただし、全部を理解しないとできないか、と言われればそうではありません。

 

特に競馬予想では、出走表やレース結果などがデータの取得対象となります。出走表やレース結果は、Webページの構成にパターンがあるので、実際は多くを覚える必要はありません。

 

この記事では、HTMLとは何ぞやというところから話をはじめて、競馬予想でWebスクレイピングを活用するにあたって、必要となるHTMLの知識をできるだけ的を絞ってお伝えします。

 

この記事を読むことで、貴方も狙ったデータを意のままに取得することができるようになります。

 

 

1.HTMLとは

HTMLとは、Hyper Text Markup Language の略で、マークアップ言語という部類に入ります。このマークアップ言語とは、文書や画像をコンピュータに正しく認識させるために、目印を使って意味づけをする言語です。

HTMLでは、この目印のことをタグ呼び、「これがタイトルだよ。」や「これは埋め込み動画だよ。」ということをコンピュータに認識させています。

WebページのほとんどがHTMLを使って記述されており、いうなればHTMLはWebページの屋台骨です。

タグはWebページを構成する要素の役割をしており、Webスクレイピングでは、このタグを目印に必要なデータを取得します。

 

 

2.HTMLのタグ

具体的にHTMLで使われているタグについ説明していきます。

Webページでタグがどのように記述されているか、実際に見てみましょう。

 

Chromeをお使いの方は、ブラウザの右上のアイコン「Google Chromeの設定」から、「その他ルール」→「ディベロッパーツール」の順に選択してください。以降の説明ではChromeのディベロッパーツールを前提に話を進めます。

(MicrosoftのEdgeもほぼ同様で、「その他ルール」→「開発者ツール」の順に選択してください。)

 

 

本サイトの出馬表サンプルでディベロッパーツールを使用すると以下のように表示されます。

左側が実際に表示されているWebページで、右側の赤枠の部分がHTMLです。

 

Chromeのディベロッパーツール1

 

 

HTMLを見ると、”<>” で括られた文字列がたくさんあるのがわかります。

これがタグです。

 

タグは開始タグ(<タグ名>) と終了タグ (</タグ名>) があり、開始タグと終了タグの間に記載した命令が実行される仕組みになっています。

 

Chromeのディベロッパーツール02

 

 

たくさんのタグが使われていることが分かります。

タグをざっくりと分類すると以下のようになります。

 

・文章構造

 <body> :文書の本体を表す。

 <title> :文書やブックマーク等で表示されるサイトのタイトル。

 <h1>~<h6> :見出しを作成。数字が大きくなるほど見出しは小さくなる。

 <p> :段落。

 

・表

 <table> :表を作成。以下の <tr>、<th>、<td>を包括する。

 <tr> :表の見出しを定義する。

 <th> :表の見出しを作成。

 <td> :表のデータセル。

 

・画像

 <img>: 画像を貼る。

 

・リンク

 <a>: リンクを貼る。

 

これはほんの一部ですが、ここに挙げたものすべてが必要というわけではありません。

このなかで競馬予想で使うのは、ほぼ表とリンクだけです。

 

どの競馬サイトでも出馬表やレース結果は表になっています。

例えば、出走表の馬名には、大概リンクが貼られているので、表とリンクのタグを理解すれば、競馬予想に必要なデータを狙って取得できるようになります。

 

補足:CSSについて
CSSに触れていませんが、ChromeのディベロッパーツールにCSSの記述も表示されます。(画像の一番右)
CSSの正式名称は、 Cascading Style Sheets(カスケーディング・スタイル・シート)と呼ばれ、 Webページの見栄えをよくする機能が満載のプログラミング言語です。
今回はデザイン担当のプログラミング言語くらいに記憶しておきましょう。場を改めて解説します。

 

 

3.まとめ

競馬予想のためのWebスクレイピングに必要なHTMLの基礎知識について、説明させていただきました。

競馬で扱うデータのほとんどは表やリンクで記述されているので、<table>や<a>を理解して、ご自身の予想に必要なデータを取得できるようになりましょう。

ブラウザのツールを使えば、他のサイトもある程度自由に閲覧できるので、理解を深めることができると思います。

 

「うまのいえ」では、今後もWebスクレイピングのネタを中心にブログを更新していきます。

また、足を運んでいただけると喜びます。

 

ご清聴ありがとうございました。