ソースコードからデータを抽出する
フォローする質問: ソースコードとは何ですか?
回答: ソースコード は、プログラミング言語で記述されたテキストです。したがって、Webページのすべての情報が含まれています。Webページのソースコードを表示するには、右クリックして「ソースの表示」を選択すればよいです。
なぜソースコードからスクレイピングする必要がありますか?
画像のURLまたは星の評価のような非テキストコンテンツを抽出する場合、Web上で直接表示されていないため、そのデータのソースコード-HTML を取得する必要があります。
Octoparseは、ソースコードからデータを直接抽出する機能をサポートしています。このチュートリアルでは、Inner htmlとOuter htmlから抽出する方法を説明します。
1) Inner html
からデータを抽出する
HTMLは、Webページを作成するためのマークアップ言語の1つです。要素の内部HTMLを抽出すると、その要素に含まれるHTMLマークアップが取得されます。ですから、画像やアイコンの形で表示された情報には、まず内部HTMLを抽出し、データ再フォーマットツールで取得したコードから対象データを抽出できます。
食べログのサイトでレストランの画像URLを例として紹介します。
- 最初の画像をクリックします。
- 「選択した要素のInner htmlを抽出する」を選択します。
抽出されたInner htmlが「データフィールド」に追加して下記のコードを取得できました。
画像のURL(https://tblg.k-img.com/resize/100x100c/restaurant/images/Rvw/125306/125306243.jpg?token=acada8b&api=v2)は、Webページで直接利用できないコードに含まれています。今、正規表現でデータを再フォーマットすることで、URLの部分を取得できます(HTMLの再フォーマットはパート3を見る)。
2) Outer html からデータを抽出する
Outer htmlは、開始タグと終了タグ、およびコンテンツを含む要素属性です。ですから、Inner htmlより、Outer htmlはより多くの情報を提供できます。Inner htmlに見つからない情報はOuter htmlに置くかもしれません。
yelp.comでレストランの星評価を例として紹介します。
Outer htmlを抽出する手順は、Inner htmlの手順と似ています。
- 必要なデータをクリックします。
- 「操作ヒント」から「選択した要素のOuter htmlを抽出する」を選択します。
「星評価」のOuter htmlは以下の通りです:
<div class="lemon--div__373c0__1mboc i-stars__373c0__1T6rz i-stars--large-4__373c0__1d6HV border-color--default__373c0__3-ifU overflow--hidden__373c0__2y4YK" aria-label="4 star rating" role="img" style=""><img class="lemon--img__373c0__3GQUb offscreen__373c0__1KofL" src="https://s3-media0.fl.yelpcdn.com/assets/public/stars_v2.yelp_design_web.yji-52d3d7a328db670d4402843cbddeed89.png" width="132" height="560" alt=""></div>
対象データ(4 star rating)は、正規表現ツールを使って同様の方法で抽出できます。
ヒント! 1. Webページの完全なHTMLを抽出するにはそうすればいいですか? 完全なHTMLを抽出することで、Webページのすべての情報を取得ができます。
2. なぜ「操作ヒント」に「選択した要素のInner htmlを抽出する」または「選択した要素のOuter htmlを抽出する」がないのですか? 「操作ヒント」で提供するオプションは、選択したデータによって異なります。「操作ヒント」の下部にある拡張アイコンをクリックして、選択範囲を拡大してみてください。 |
3) RegExツールでデータを再フォーマットする
データ再フォーマット は、抽出されたデータを処理するのに非常に役立ちます。Octoparseにはデータ再フォーマットツールがあります。 このチュートリアルでは、データの再フォーマットについて説明します。
データ再フォーマットを利用するには、
- データフィールドを選択します。
をクリックして、フィールドをカスタマイズします。
- 「データを再フォーマット」をクリックします。
- 「ステップを追加する」をクリックします。
正規表現によるマッチングする
- 「正規表現によるマッチング」を選択します。
- 「正規表現ツールを試す」をクリックします。
- マッチ基準を入力します:で始める 「aria-label=" 」, で終わる 「" 」
- 「生成する」をクリックしてから「マッチング」をクリックすると、星の評価 (4 star rating)の数値と一致します。
- 「応用する」をクリックします。
- 「保存」をクリックして設定を保存します。
ヒント! データ再フォーマットツールに興味がある場合は、このチュートリアルを参照してください 。 |
関連記事:
From: https://www.octoparse.jp/tutorial/extract-data-from-source-code/