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

2022年07月22日 03:19
更新

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

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

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

画像のURLまたは星の評価のような非テキストコンテンツを抽出する場合、Web上で直接表示されていないため、そのデータのソースコード-HTML を取得する必要があります。

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

Inner html からデータを抽出する

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

食べログのサイトでレストランの画像URLを例として紹介します。

最初の画像をクリックします。
「選択した要素のInner htmlを抽出する」を選択します。

抽出されたInner htmlが「データフィールド」に追加して下記のコードを取得できました。

<img alt="神戸牛しゃぶしゃぶ・焼肉 嵯峨野 - メイン写真:" width="60" height="60" src="https://tblg.k-img.com/resize/100x100c/restaurant/images/Rvw/125306/125306243.jpg?token=acada8b&amp;api=v2" class="loading" data-was-processed="true">

画像のURL（https://tblg.k-img.com/resize/100x100c/restaurant/images/Rvw/125306/125306243.jpg?token=acada8b&api=v2）は、Webページで直接利用できないコードに含まれています。今、正規表現でデータを再フォーマットすることで、URLの部分を取得できます（HTMLの再フォーマットはパート3を見る）。

Outer html からデータを抽出する

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

yelp.comでレストランの星評価を例として紹介します。

Outer htmlを抽出する手順は、Inner htmlの手順と似ています。

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

「星評価」のOuter htmlは以下の通りです。

<div class=" i-stars__09f24__foihJ i-stars--regular-4__09f24__zkZZV border-color--default__09f24__NPAKY overflow--hidden__09f24___ayzG" aria-label="4 star rating" role="img" style="background-color: rgba(4, 174, 198, 0.3); box-shadow: rgb(4, 174, 198) 0px 0px 20px 0px !important;"><img class=" offscreen__09f24__gZT9P" src="https://s3-media0.fl.yelpcdn.com/assets/public/stars_v2.yji-59bbc2cf8e3d4be04fcc.png" width="132" height="560" alt=""></div>

対象データ（4 star rating）は、正規表現ツールを使って同様の方法で抽出できます。

ヒント！

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

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