すべてのコレクション
ヘルプ
ソースコードからデータを抽出する
ソースコードからデータを抽出する
一週間前以上前にアップデートされました

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

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

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

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

を取得する必要があります。

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

Inner html

からデータを抽出する

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

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

  • 最初の画像をクリックします。

  • 「選択した要素のInner htmlを抽出する」を選択します。

mceclip2.png

抽出された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&amp;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を抽出する」を選択します。

mceclip3.png

「星評価」の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ページのすべての情報を取得ができます。

  • ページ内の任意要素を選択し、「操作ヒント」の下にある

    mceclip0.png

    をクリックします。

  • ドロップダウンリストで「HTML」を選択します。

  • 「選択した要素のOuter htmlを抽出する」を選択します。

mceclip4.png

2. なぜ「操作ヒント」に「選択した要素のInner htmlを抽出する」または「選択した要素のOuter htmlを抽出する」がないのですか?

「操作ヒント」で提供するオプションは、選択したデータによって異なります。「操作ヒント」の下部にある拡張アイコンをクリックして、選択範囲を拡大してみてください。

mceclip1.png

RegExツールでデータを再フォーマットする

データ再フォーマット は、抽出されたデータを処理するのに非常に役立ちます。Octoparseにはデータ再フォーマットツールがあります。このチュートリアルでは、データの再フォーマットについて説明します。

データ再フォーマットを利用するには、

  • データフィールドを選択します。

  • mceclip2.png

    をクリックして、フィールドをカスタマイズします。

  • 「データを再フォーマット」をクリックします。

  • 「ステップを追加」をクリックします。

mceclip7.png
mceclip5.png

正規表現によるマッチングする

  • 「正規表現によるマッチング」を選択します。

  • 「正規表現ツールを試す」をクリックします。

  • マッチ基準を入力します:で始める 「aria-label=" 」, で終わる 「" 」

  • 「生成」をクリックしてから「マッチング」をクリックすると、星の評価 (4 star rating)の数値と一致します。

  • 「応用」をクリックします。

  • 「保存」をクリックして設定を保存します。

____.gif

ヒント!

データ再フォーマットツールに興味がある場合は、このチュートリアルを参照してください 。

こちらの回答で解決しましたか?