ソースコードからデータを抽出する方法

ソースコードからデータを抽出する

2019年08月21日

図解チュートリアル

質問: ソースコードとは何ですか？

答え: ソースコードは、プログラミング言語で記述されたテキストです。したがって、Webページのすべての情報が含まれています。Webページのソースコードを表示するには、右クリックして「ソースの表示」を選択すればよいです。

なぜソースコードからスクレイピングする必要がありますか？

星の評価のような非テキストコンテンツを抽出する場合、評価の値がページに直接表示されないため（星のみ）、「選択した要素のテキストを抽出する」を使って直接評価を抽出できません。ただし、この情報をソースコード-HTML から取得できます。そのほか、テキストとして直接抽出するので、必要なデータに他の乱雑なデータを混ぜることがあります。この場合、HTMLからデータをスクレイピングできます。

Octoparseは、ソースコードからデータを直接抽出する機能をサポートしています。このチュートリアルでは、内部HTMLと外部HTMLから抽出する方法を説明します。

1) 内部HTMLからデータを抽出する

2) 外部HTMLからデータを抽出する

3) HTMLに関連するデータ再フォーマットツール

1) 内部 HTML からデータを抽出する

HTMLは、Webページを作成するためのマークアップ言語の1つです。要素の内部HTMLを抽出すると、その要素に含まれるHTMLマークアップが取得されます。ですから、画像やアイコンの形で表示された情報には、まず内部HTMLを抽出し、データ再フォーマットツールで取得したコードから対象データを抽出できます。

Yelp.comでレストランの星の評価を例として使います。

「星の評価」をクリックします。
「選択した要素の内部HTMLを抽出する」を選択します。

ワークフロースイッチを開き、ワークフローモードに切り替えます。抽出された内部HTMLが「Data field」に追加されました。

星の評価（4.5 star rating）の数値は、Webページで直接利用できないコードに含まれています。今、正規表現でデータを再フォーマットすることで、「4.5」を取得できます（HTMLの再フォーマットはパート3を見る）。

2) 外部 HTML からデータを抽出する

外部HTMLは、開始タグと終了タグ、およびコンテンツを含む要素属性です。ですから、内部HTMLより、外部HTMLはより多くの情報を提供できます。内部HTMLに見つからない情報は外部HTMLに置くかもしれません。

外部HTMLを抽出する手順は、内部HTMLの手順と似ています。

必要なデータをクリックします。
「操作ヒント」から「選択した要素の外部HTMLを抽出する」を選択します。

「星の評価」の外部HTMLは以下の通りです：

<div style="background-color: rgb(229, 245, 233); outline: 1px solid rgb(0, 162, 59);" class="i-stars i-stars--large-4-half rating-very-large" title="4.5 star rating">　

ご覧のとおり、内部HTML（青色で強調表示されている）は外部HTMLの一部です。対象データ（4.5）は、正規表現ツールを使って同様の方法で抽出できます(このステップにスキップする)。

ヒント！

1. Webページの完全なHTMLを抽出するにはそうすればいいですか？

完全なHTMLを抽出することで、Webページのすべての情報を取得ができます。