スクレイピングするときに必要なhtmlの意味

masa400

2年前

スクレイピングはタグを参照し、タグで囲まれたデータを収集するテクニックです。テクニックといっても超高度ではなく、基本的なプログラミング能力と、基本的なhtmlの知識があれば実現可能です。

初心者はまずhtmlから覚えるべきですが、本記事ではスクレイピングで必要なhtmlのタグを解説します。htmlはCSSと組み合わせて使うことが多いですが、htmlが解ればCSSの習得はさほど困難ではありません。

文字数の都合がありすべてのhtmlタグを解説することはできませんが、htmlの基本は本記事を最後まで読めば解ると思います。

Toggle

htmlの基本

基本的なhtmlのタグを解説する前に、htmlの構造を見ます。

htmlのタグは<body></body>の間に書く

<body>

<h1></h1> →見出しの大きさを指定している

<img src=”test.jpg”>→画像を表示させている

</body>

上はhtmlですが、必要なタグは<body></body>の間に書きます。（メタタグ等は除く）

上の例で言えば、見出しも<body></body>の間に書いているし、画像を表示するときに使うimgタグも<body></body>の間に書いています。

スクレイピングをするときは、先ず必要なデータが何のタグで囲まれているのかを見つけなければいけません。

htmlタグは表示画面からは見えない

この記事は執筆中なので後で修正する可能性がありますが、プレビュー画面にしました。プレビュー画面はインターネットユーザーが、通常見る画面です。見たら解ると思いますが、<body>タグなどは一切見えません。

htmlタグはサイトの骨格で、通常は見えないようになっています。そのためスクレイピングするときは、ソース画面にする必要があります。

ソース画面にするとhtmlタグが見えました。

<h2>htmlの基本</h2>

htmlの基本という見出しは、<h2></h2>というタグで囲まれているのが解ります。該当のタグを見つけるのがスクレイピングの基本で、該当のタグさえ見つかれば、ほぼ100%スクレイピングは成功します。

よく使われるhtmlタグとスクレイピング

これからはよく使われるhtmlタグと、スクレイピングについて解説します。

よく使われるhtmlタグ

<h1>見出しに使う</h1>
<h2>見出しに使う</h2>
<h3>見出しに使う</h3>
<h4>見出しに使う</h4>
<h5>見出しに使う</h5>
<h6>見出しに使う</h6>

<h>タグは見出しによく使われますが、<h1>が一番大きな文字で、<h6>が一番小さな文字です。

<p></p>

<p>タグはテキストの段落を作成する際に使用されますが、ブログやホームページ作成ソフトは、<p>タグを多く使っているような気がします。

<a href=”test.html” >ZeroPlus</a>

<a>タグはリンクを貼るときに使われます。文字をクリックしたら違うページに飛ぶことはありますが、飛ばすときは<a>タグを使うのが一般的です。

「・」が先頭にあり、その後にリストが続くサイトはあります。リストを使うときは<ul>タグを使います。

<ol >を使えば「・」が、数字になります。

リストは<li></li>内に入れます。

<img>タグは画像を表示するときに使いますが、altを指定したら、SEO対策に有利だといわれています。

<table>タグは表を作成するときに使います。<tr><td>は入れ子になりますが、<table>タグのセットだと思ってください。

スクレイピングするときは該当のタグを見極める

スクレイピングするときは、該当のタグを見極めることが大切です。

この例で言えば<table>を指定すれば、余計な<tr>タグまで抽出される可能性があります。情報だけ抽出したい人は、スクレイピングツールで<td>タグだけを指定しましょう。

構造がシンプルなサイトはスクレイピングした方が圧倒的に速い

サイトによって構造は異なります。そのためあるサイトでは通用した手法が、違うサイトでは通用しないことがあります。しかし構造がシンプルなサイトは、基本的なスクレイピング手法でほぼ100%攻略できます。

商品の価格が<li>タグで囲まれているとしましょう。人力で一つ一つの価格を収集したら大変ですが、スクレイピングツールで<li>タグを指定すれば、すべての価格が一気に取得できます。

htmlを覚えた後はCSSに挑戦

htmlを覚えた後は、CSSに挑戦しましょう。CSSはCascading Style Sheetsの略で、webページのスタイルを整えるときに使います。文字を中央寄せにしたりボックスをつくるときに使いますが、CSSとhtmlは車の両輪のようなものです。

htmlだけでwebページを作成するのは可能ですが、スクレイピングされることが多い有名サイトは、htmlとCSSの両方で構築されているケースが大半です。

スクレイピングするデータがCSSで囲まれていることもあるので、CSSを覚えることは無駄ではありません。CSSの習得は関連書籍を参考にした方がいいですが、余裕のない人は関連サイトを参考にしましょう。

http://www.htmq.com/csskihon/001.shtml

こちらのサイトではhtmlとCSSを解説していますが、CSSのプロパティを整理しているので、不明点は直ぐに探し出すことができます。

データーコレクターはタグを指定する

2分17秒ぐらいに新規のタグを指定していますが、データコレクターは好きなタグを自由に指定することができます。動画では<h3>を新規追加していますが、<img>タグなども問題なく指定できます。

指定したタグに囲まれたデータは自動的に抽出されますが、サイトの規模が大きければ大きいほどスクレイピングの便利さを実感するでしょう。

スクレイピングツールの中には使用されているタグを自動的に検出するものもありますが、タグが入れ子状態になっている場合は、直接自分でタグを指定した方が確実です。

Bright Dataはタグの知識がまったくなくても活用できる、ライブデータセットというサービスも提供していますが、動画の最初の方で解説しています。ライブデータセットは対象のwebサービスをテンプレート化していますが、テンプレート化されているwebサービスはいずれも有名です。

プログラマ用にはサーチエンジンクローラーがあります。コードを自動生成してくれるので、開発のステップが大幅に短縮できます。

Bright Dataの公式サイト

日本人の担当が確実に着くのは本ブログ経由の方のみになりますので、ご注意ください。こちらのサイトからお申し込みいただければ、間違いなく日本人担当がつきます

まとめ

スクレイピングするときに必要なhtmlの意味の解説をしましたが、スクレイピングをするときはhtmlの知識とCSSの知識が必要です。しかし両者ともさほど難解ではないので、コツコツ勉強すれば誰でも習得できます。

大切なことは頭で理解するのではなく、実際に使ってみることです。実際に使うことでタグの働きが、腑に落ちるようになります。

htmlとCSSを覚えた後は、是非ともスクレイピングに挑戦してください。スクレイピングツールは、Bright Dataのデータコレクターをおすすめします。データコレクターはウィザート形式で操作ができるので、直ぐに慣れますよ。

Bright Dataの公式サイト