tag:crieit.net,2005:https://crieit.net/tags/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0/feed
「スクレイピング」の記事 - Crieit
Crieitでタグ「スクレイピング」に投稿された最近の記事
2021-06-25T08:38:02+09:00
https://crieit.net/tags/%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0/feed
tag:crieit.net,2005:PublicArticle/17439
2021-06-25T03:57:06+09:00
2021-06-25T08:38:02+09:00
https://crieit.net/posts/puppeteer
puppeteer でファイルをダウンロードするときに、任意のパスと名前で保存する
<p><a target="_blank" rel="nofollow noopener" href="https://pptr.dev/">Puppeteer</a> を使ってファイルをダウンロードする際に、任意のパスと名前で保存したい。</p>
<p>残念ながら、 現時点ではシンプルな方法は提供されていないようだ。<br />
以下の Issue で何年にもわたって議論されているものの、 <strong>「コレ!」</strong> という解決方法は無さそう。<br />
<a target="_blank" rel="nofollow noopener" href="https://github.com/puppeteer/puppeteer/issues/299">Question: How do I get puppeteer to download a file? · Issue #299 · puppeteer/puppeteer</a></p>
<p>しかし、 この Issue の <a target="_blank" rel="nofollow noopener" href="https://github.com/puppeteer/puppeteer/issues/299#issuecomment-668087154">#issuecomment-668087154</a> のコメントで、 なかなか泥臭い方法で実現するヒントが書かれていた。<br />
これを参考にして、任意のパスと名前でダウンロードファイルを保存してみよう。</p>
<h2 id="実行方法"><a href="#%E5%AE%9F%E8%A1%8C%E6%96%B9%E6%B3%95">実行方法</a></h2>
<p>あらかじめ、 <a target="_blank" rel="nofollow noopener" href="https://www.npmjs.com/package/puppeteer">puppeteer</a> の npm パッケージをローカルにインストールしておく。</p>
<pre><code class="console">npm install puppeteer --save
</code></pre>
<p>その状態で、後述の .js ファイルを nodejs で実行すれば OK だ。</p>
<pre><code class="console">node puppeteer-download-with-specify-name.js
</code></pre>
<h2 id="コードと解説"><a href="#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E8%A7%A3%E8%AA%AC">コードと解説</a></h2>
<gist src="https://gist.github.com/advanceboy/557a7690e1b584d11f38ff86434aef65.js"></gist>
<p>何をしているのかというと、 GitHub 上の <a target="_blank" rel="nofollow noopener" href="https://www.npmjs.com/package/puppeteer">puppeteer</a> のソースコード ZIP ファイルをダウンロードする際に、 <a target="_blank" rel="nofollow noopener" href="https://chromedevtools.github.io/devtools-protocol/">Chrome DevTools Protocol</a> を直叩きして、 任意のパスとファイル名で保存している。</p>
<p>具体的なポイントは、主に 以下の 2点。</p>
<ul>
<li><code>Page.setDownloadBehavior</code> メソッドで、 ファイルのダウンロードの許可とダウンロード先のディレクトリを指定</li>
<li><code>Fetch.enable</code> メソッドと <code>Fetch.requestPaused</code> イベントで、 ファイルダウンロードのレスポンスに <code>Content-Disposition</code> HTTP ヘッダーを無理やりねじ込む</li>
</ul>
<p><a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code> HTTP ヘッダー</a> のドキュメントに書かれている通り、 <code>attachment</code> と <code>filename</code> ディレクティブを指定することで、 ファイルが (ブラウザ内で表示されるのではなく)ダウンロードが必要であることと、 ダウンロード時のファイル名を指定することができる。</p>
<p>但し、 <code>Page.setDownloadBehavior</code> メソッドは <a target="_blank" rel="nofollow noopener" href="https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-setDownloadBehavior">実験的で且つ非推奨</a> なので、 将来にわたってサポートが続くかどうかはわからない点は、注意だ。<br />
少なくとも、 Chromium 92.0.4512.0 (r884014) では問題なく動いている。</p>
<p>ちなみに、実行する Chromium はヘッドレスモードでもヘッドフルモードでもどちらでも意図通り動くはず。</p>
<hr />
<p>この方法は Chrome DevTools Protocol に思いっきり依存しているので、 Selenium など他のブラウザ自動化ツールでは同一の方法が難しく (※)、 Puppeteer ならではの方法と言える。<br />
※: Selenium 4.x のプレリリース版を使えば、 Chrome DevTools Protocol にアクセスできるようだが、 イベントハンドラを書くのが難しそう? ドキュメントがそろってないのでまだなんとも…</p>
<p>スクレイピング中にファイルをダウンロードする場合などでは、保存先のパスと名前を指定できたほうが良い気がするのだが……<br />
今後の puppeteer や Chrome DevTools Protocol の更新でもっと簡単に実現できるようになることを期待しよう。</p>
advanceboy
tag:crieit.net,2005:PublicArticle/17040
2021-04-30T13:01:19+09:00
2021-05-20T18:40:12+09:00
https://crieit.net/posts/Python-Selenium-Web
【Pythonクローラー入門】SeleniumによるWebクローラーの開発
<p><a href="https://crieit.now.sh/upload_images/64b1ef6363c1052be6d7ddf2ea00ee8d608b8095e7517.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/64b1ef6363c1052be6d7ddf2ea00ee8d608b8095e7517.png?mw=700" alt="image" /></a><br />
元記事:<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/build-a-web-crawler-with-selenium-and-python/">https://www.octoparse.jp/blog/build-a-web-crawler-with-selenium-and-python/</a></p>
<p>Webサイトから大量のデータをできるだけ早く取得する必要があるとします。それぞれのWebサイトに手動でアクセスして、コピペでデータを取得することなく、どうやって自動的にデータを取得するのでしょうか?その答えが「<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping/">Webスクレイピング</a>」です。Webスクレイピングに通じて、この作業を自動化にしてくれます。</p>
<p>今回はPythonでWebサイトからデータをクローニングして、CSVファイルに書き込むというようなWebクローラーを実際に作成してみましょう。</p>
<h1 id="一、必要なPython開発環境を導入"><a href="#%E4%B8%80%E3%80%81%E5%BF%85%E8%A6%81%E3%81%AAPython%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E5%B0%8E%E5%85%A5">一、必要なPython開発環境を導入</a></h1>
<p>Pythonには、プログラムを組むために便利な標準ライブラリが数多くあります。今回は、以下のライブラリを使用しています。</p>
<p>・<strong>Selenium</strong> ーー ブラウザを自動的に操作するライブラリです。主にWebアプリケーションのテストやWebスクレイピングに利用されます。<br />
・<strong>BeautifulSoup</strong> ーー HTMLおよびXMLドキュメントを解析するためのPythonパッケージです。<br />
・<strong>csv</strong> ーー CSVフォーマットで保存するために使用されます。</p>
<p>したがって、プログラミングを実戦する前に、以下の準備が必要となります。</p>
<p>・Python 2.xまたはPython 3.xの環境<br />
・Selenium、BeautifulSoup、csvライブラリの導入<br />
・Google Chrome ブラウザ</p>
<p>それでは、早速始めましょう!</p>
<h1 id="二、ページ要素(HTMLドキュメント)の検証"><a href="#%E4%BA%8C%E3%80%81%E3%83%9A%E3%83%BC%E3%82%B8%E8%A6%81%E7%B4%A0%EF%BC%88HTML%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%EF%BC%89%E3%81%AE%E6%A4%9C%E8%A8%BC">二、ページ要素(HTMLドキュメント)の検証</a></h1>
<p>Webサイトから、要素(HTMLドキュメント)を検証し、データがどのように構成されているかを分析する必要があります。HTML基礎知識は<a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">こちらのリンク</a>で参照ください。今回はテーブルのデータを抽出するように試してみましょう。<br />
Ctrl + Shift + I を押して、テーブルの要素を指定すると、HTMLのソースコードに表示されます。<br />
<a href="https://crieit.now.sh/upload_images/12a12d2aa25da2bf82cbb073bf1f7083608b809f6da2a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/12a12d2aa25da2bf82cbb073bf1f7083608b809f6da2a.png?mw=700" alt="image" /></a></p>
<p>したがって、テーブルの要素名は「table」と分かっています。<br />
なお、Webクローラーを構築するたびに、HTMLドキュメント内の要素を定位するため、xPathの知識が必要となります。xPathのチュートリアルはこちらのリンクからアクセスできます。</p>
<h1 id="三、コードを書く"><a href="#%E4%B8%89%E3%80%81%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F">三、コードを書く</a></h1>
<p><strong>1.まず、必要なライブラリをすべてインポートしましょう。</strong></p>
<pre><code>import csv # csvモジュールをインポート
from selenium import webdriver # selenium webdriver をインポート
from bs4 import BeautifulSoup # BeautifulSoup をインポート
</code></pre>
<p><strong>2.Webdriverを使用する前に、chromedriverへのパスを設定する必要があります。</strong><br />
※/path/to/chromedriverをWebdriverのパスに変更してください。</p>
<pre><code>driver = webdriver.Chrome("/path/to/chromedriver")
</code></pre>
<p><strong>3.以下のコードを参照してURLを開いてください。</strong></p>
<pre><code>driver.get("http://test-sites.octoparse.com/?page_id=192")
</code></pre>
<p><strong>4.URLを開くためのコードが書けたところで、いよいよWebサイトからデータを抽出します。</strong><br />
先に述べたように、抽出したいデータは要素に入っています。データを持つ要素を探し出し、データを抽出します。<strong>以下のコードを参照してください。</strong></p>
<pre><code>content = driver.page_source
BS = BeautifulSoup(content, "html.parser")
table = BS.findAll("table", {"class":"wp-block-table is-style-stripes"})[0] # テーブル"wp-block-table is-style-stripes"を指定
rows = table.findAll("tr") # テーブル中<tr>要素の内容を抽出
print(rows) # 抽出したHTMLドキュメントを検証
</code></pre>
<p>最後に、web-scraping.pyで保存します。</p>
<h1 id="四、コードを実行してデータを抽出する"><a href="#%E5%9B%9B%E3%80%81%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B">四、コードを実行してデータを抽出する</a></h1>
<p>コードを実行して、必要なHTMLドキュメントを正しく抽出するかどうかを確認します。<br />
<a href="https://crieit.now.sh/upload_images/211873892ff67468d049cd39ce71f207608b80a981301.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/211873892ff67468d049cd39ce71f207608b80a981301.png?mw=700" alt="image" /></a></p>
<h1 id="五、データを必要なフォーマットで保存"><a href="#%E4%BA%94%E3%80%81%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%BF%85%E8%A6%81%E3%81%AA%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%A7%E4%BF%9D%E5%AD%98">五、データを必要なフォーマットで保存</a></h1>
<p>データを抽出した後、抽出したデータをCSV(Comma Separated Value)形式で保存します。そのため、コードに以下の内容を追加します。</p>
<pre><code>with open("web-scraping.csv", "w", encoding='utf-8', newline="") as file: # ファイル名は「web-scraping.csv」を指定する
writer = csv.writer(file)
for row in rows:
csvRow = []
for cell in row.findAll(['td', 'th']): # tdとth要素をループでファイルに書き込む
csvRow.append(cell.get_text())
writer.writerow(csvRow)
</code></pre>
<h1 id="六、Pythonでスクレイピングしましょう"><a href="#%E5%85%AD%E3%80%81Python%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86">六、Pythonでスクレイピングしましょう</a></h1>
<p>それは最終的なコードです。<br />
<a href="https://crieit.now.sh/upload_images/6d4e115c349fd675f94d3a069e648ed7608b80b39d9a9.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6d4e115c349fd675f94d3a069e648ed7608b80b39d9a9.png?mw=700" alt="image" /></a></p>
<p>追加した後、もう一度コード全体を実行してみてください。<br />
抽出結果は「web-scraping.csv」というファイル名が作成され、このファイルに抽出されたデータが格納されます。<br />
<a href="https://crieit.now.sh/upload_images/7624ebafe7878a60c34a479e3962e454608b80ba7ff29.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7624ebafe7878a60c34a479e3962e454608b80ba7ff29.png?mw=700" alt="image" /></a></p>
<h1 id="七、Octoparseでスクレイピングする方法"><a href="#%E4%B8%83%E3%80%81Octoparse%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">七、Octoparseでスクレイピングする方法</a></h1>
<p>プログラミングが苦手、或いは英語のコードばかりなので苦手意識を持っている方は、スクレイピングツールの<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>はおすすめします。</p>
<p>Octoparseは「<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360013561999-Octoparse%E3%82%92%E3%82%82%E3%81%A3%E3%81%A8%E7%9F%A5%E3%82%8B-">自動識別</a>」機能があるので、ページのURLを入力するだけで、Webページ上各項目のデータ(テキストとリンクを含む)、「次のページ」ボタン、「もっと見る」ボタン、およびページのスクロールダウンを自動的に検出し、タスク(Webクローラー)を自動的に生成することができます。</p>
<p>早速ですが、Octoparseで自動化の魅力を体験してみましょう。</p>
<p><strong>1.Octoparseを起動して、スクレイピングしたいWebページのURLを入力します。</strong><br />
「抽出開始」 ボタンをクリックして進みます。<br />
<a href="https://crieit.now.sh/upload_images/761e0a72882545802c97a7319feeeef1608b80ce09f4e.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/761e0a72882545802c97a7319feeeef1608b80ce09f4e.png?mw=700" alt="image" /></a></p>
<p><strong>2.Octoparseでページが読み込みされたら、自動的にページ上の内容を識別します。</strong><br />
自動識別とは、自動的にページ上の必要なデータを検出して識別するという役立つ機能です。ポイント&クリックをする必要はなく、Octoparseは自動的に処理します。<br />
<a href="https://crieit.now.sh/upload_images/2359f12975aa9a679363209c1c928c6b608b80d53c5a8.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2359f12975aa9a679363209c1c928c6b608b80d53c5a8.png?mw=700" alt="image" /></a></p>
<p><strong>3.識別が完了すると、データプレビューで識別したデータを表示され、確認してから「ワークフローの生成」ボタンを押します。</strong><br />
<a href="https://crieit.now.sh/upload_images/95661bba8fe25a46fc835456536461a8608b80ddddf58.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/95661bba8fe25a46fc835456536461a8608b80ddddf58.png?mw=700" alt="image" /></a></p>
<p><strong>4.これで簡単にWebクローラーが作成しました!</strong><br />
上の「実行」ボタンをクリックして、すぐデータを抽出できます。簡単ではないでしょうか。<br />
<a href="https://crieit.now.sh/upload_images/b0b0d3e60908ec44ecfc6aa732366d03608b80e4e4719.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b0b0d3e60908ec44ecfc6aa732366d03608b80e4e4719.png?mw=700" alt="image" /></a></p>
<h1 id="八、まとめ"><a href="#%E5%85%AB%E3%80%81%E3%81%BE%E3%81%A8%E3%82%81">八、まとめ</a></h1>
<p>Pythonでスクレイピングはそんなに簡単ではないので、学ぶ時間がなく、効率的にスクレイピングがしたい、プログラミングが苦手、或いは英語のコードばかりなので苦手意識を持っている方は<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/the-10-best-web-scraping-tools/">スクレイピングツール</a>はおすすめです。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/?utm_source=8952&utm_medium=pic&utm_campaign=qitta"><a href="https://crieit.now.sh/upload_images/9211be13dbf84c6b98b0da0ecbffb784608b80f4e4c8b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9211be13dbf84c6b98b0da0ecbffb784608b80f4e4c8b.png?mw=700" alt="image" /></a></a></p>
<p><strong>関連記事</strong><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/creating-a-simple-web-crawler-in-php/">PHPで簡単なWebクローラーを作ってみた</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-using-python/">PythonによるWebスクレイピングを解説</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-using-python-vs-web-scraping-tool/">Python vs Octoparse!初心者向きのスクレイピング方法はどっち?</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/intro-to-web-scraping-with-excel-vba/">【初心者向け】ExcelとVBAでWebスクレイピング実戦!</a>!</p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/16969
2021-04-21T23:09:49+09:00
2021-04-21T23:18:26+09:00
https://crieit.net/posts/DB-02
情報系資格対策兼DB復習の足跡🐈 🐾02
<p>``<br />
初日から飛ばしてしまい、奇々怪々な投稿してしまったこと、お詫び申し上げます。</p>
<p>さて、前回の続きです。今回はわりかし真面目にいきます😢</p>
<hr />
<p><strong>v目次にゃv</strong></p>
<ol>
<li>スクレイピングでWEBからデータを抽出</li>
<li>Excelでクエリ作成</li>
<li>テーブル作成</li>
</ol>
<hr />
<p><strong>スクレイピングでWEBからデータを抽出だニャー(=✧ω✧=)</strong><br />
今回は<a target="_blank" rel="nofollow noopener" href="https://www.ap-siken.com/kakomon/02_aki/">応用情報.com</a>さんのサイトから午前問題の答えを抽出しました。<br />
Pythonを用いてスクレイピングです。<br />
ライブラリをインポートしたら手早く作っちゃいますにゃんこ~🐱<br />
<a href="https://crieit.now.sh/upload_images/0bb758cb98240094b30817f9181bd7716080342f8f957.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/0bb758cb98240094b30817f9181bd7716080342f8f957.png?mw=700" alt="プログラム" /></a><br />
プログラムを組むと作業で楽でいいニャー•v-v•<br />
(下の”エウウウ”が抽出している回答です)</p>
<hr />
<p><strong>Excelでクエリ作成</strong><br />
1文ずつ手入力してしまうと、猫の手も借りたい現象が起きてしまうので、今回はExcelを活用します。<br />
今回は既にExcelにて材料がテーブルとして用意してあるので、<strong>CONCATENATE関数</strong>を用いてSQL文と結合してクエリを作成するぎょぴよฅ^•ω•^ฅ<br />
<a href="https://crieit.now.sh/upload_images/84e69cb2d3e3bf65b1a8fc1c18180ca760802e8117ef0.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/84e69cb2d3e3bf65b1a8fc1c18180ca760802e8117ef0.png?mw=700" alt="クエリ作成" /></a><br />
先程、抽出した回答をExcelテーブル”originalans”列にコピペ。<br />
その後、必要なSQL文の文字を空きセルに用意し結合するキツネ~🦊</p>
<hr />
<p><strong>テーブル作成</strong><br />
上の工程で出来たクエリをMySQLにコピペするにゃ~<br />
にゃっ!テーブルを1つ作成完了ねこ!!!<br />
<a href="https://crieit.now.sh/upload_images/bae0ea547af64d5113c540f1532e36b960802fd1747cf.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/bae0ea547af64d5113c540f1532e36b960802fd1747cf.png?mw=700" alt="SQL" /></a><br />
(スペルミス、命名規約、正規化不足、語訳、見づらさについては大目にみていただけると幸いです。)</p>
<hr />
<p>今日はここまで🐾<br />
今回使用したスクレイピング、DB等々、詳しく知りたいとご要望があれば、猫でもわかるように説明するかもです。</p>
<p>これからも頑張るきんぎょー<br />
``</p>
keito_woood
tag:crieit.net,2005:PublicArticle/16766
2021-03-24T17:10:08+09:00
2021-03-24T17:11:42+09:00
https://crieit.net/posts/Excel-VBA-Web
【初心者向け】ExcelとVBAでWebスクレイピング実戦!
<p><a href="https://crieit.now.sh/upload_images/e3cadfdba4688563a1e8d30580eacf54605af1c329c00.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/e3cadfdba4688563a1e8d30580eacf54605af1c329c00.png?mw=700" alt="image" /></a><br />
元記事:<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/intro-to-web-scraping-with-excel-vba/">https://www.octoparse.jp/blog/intro-to-web-scraping-with-excel-vba/</a></p>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping/">スクレイピング</a>とは、WebページのHTMLコードから、<strong>必要な情報やデータを抽出する</strong>ことです。言い換えれば、自動的にWebページ上のデータを収集する技術です。</p>
<p>現在、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping/">スクレイピング</a>の一般的なプログラミング言語は、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-using-python/">Python</a>、Ruby、JAVA、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/creating-a-simple-web-crawler-in-php/">PHP</a>などができますが、開発環境構築と環境設定は<strong>初心者に対しては非常に難しい</strong>です。</p>
<p>したがって、この記事で紹介するVBAは以下のメリットがあります。</p>
<p>・開発環境構築<strong>不要</strong><br />
・取得したデータをExcelシートに<strong>直接保存</strong>できる<br />
・直接にExcelシートで<strong>セルを設定</strong>できる</p>
<p>それでは、ExcelとVBAを使って、Webサイトから情報やデータをExcelシートに取り込むというExcelマクロを実際に作成してみましょう。</p>
<h1 id="一、Excelでスクレイピングライブラリを導入"><a href="#%E4%B8%80%E3%80%81Excel%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E5%B0%8E%E5%85%A5">一、Excelでスクレイピングライブラリを導入</a></h1>
<p>ExcelでのWebスクレイピングを配置する前に、Excelのマクロに対してライブラリを導入しなければなりません。<br />
手順は以下になります。</p>
<p><strong>1.Excelを開いて、「空白のブック」を選択します。</strong><br />
<a href="https://crieit.now.sh/upload_images/74e597f5e3bc77b406df2d44e78c276b605af1ced7012.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/74e597f5e3bc77b406df2d44e78c276b605af1ced7012.png?mw=700" alt="image" /></a></p>
<p><strong>2.リボン欄の「開発」をクリックします。</strong><br />
<a href="https://crieit.now.sh/upload_images/d7c1103e553fa8b1942527526ffa7e17605af1e04d38d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d7c1103e553fa8b1942527526ffa7e17605af1e04d38d.png?mw=700" alt="image" /></a></p>
<p><strong>3.左側の「Visual Basic」ボタンを選択します。</strong><br />
<a href="https://crieit.now.sh/upload_images/bae9fc57cb3d8cda2cf3f6aae73e0db5605af1e61a751.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/bae9fc57cb3d8cda2cf3f6aae73e0db5605af1e61a751.png?mw=700" alt="image" /></a></p>
<p><strong>4.「挿入」をクリックして、「標準モジュール」を選択します。</strong><br />
<a href="https://crieit.now.sh/upload_images/f7f85b99e6fe69d14c12397937b33bc2605af1ec5fcfa.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f7f85b99e6fe69d14c12397937b33bc2605af1ec5fcfa.png?mw=700" alt="image" /></a></p>
<p><strong>5.下記のコードを入力してください。</strong></p>
<pre><code>Sub test()
End sub
</code></pre>
<p>結果は以下になっております。<br />
<a href="https://crieit.now.sh/upload_images/c8526129fbc5d4df81a7eb091002c7da605af1f41ca76.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c8526129fbc5d4df81a7eb091002c7da605af1f41ca76.png?mw=700" alt="image" /></a></p>
<p><strong>6.「ツール」をクリックして、「参照設定」をクリックします。</strong><br />
「Microsoft HTML Object Library」と「Microsoft Internet Controls」のチェックを入れます。<br />
<a href="https://crieit.now.sh/upload_images/01529df864d0e6cc0221da3a6a050d9e605af1fadafd9.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/01529df864d0e6cc0221da3a6a050d9e605af1fadafd9.png?mw=700" alt="image" /></a><br />
<a href="https://crieit.now.sh/upload_images/be51a8b37f9cf5499b975479ba5937f0605af201c8f9e.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/be51a8b37f9cf5499b975479ba5937f0605af201c8f9e.png?mw=700" alt="image" /></a></p>
<p>モジュールとは、プログラムにおいて特定の機能を持ったひとまとまりの構成要素です。選択されたのモジュールは、ブラウザ連動とHTMLコードを読み込むという機能が持っています。</p>
<p>それで、Webクローラーの開発が必要なものは設定完了です。</p>
<h1 id="二、Webサイトにアクセスする"><a href="#%E4%BA%8C%E3%80%81Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%99%E3%82%8B">二、Webサイトにアクセスする</a></h1>
<p>早速ですが、ExcelのVBAを使って、IEブラウザ経由でWebサイトにアクセスします。<br />
これには、ナビゲート属性を使用します。この属性では、URLを二重引用符で囲んで渡す必要があります。詳しくは下記のコードに参照してください。</p>
<pre><code>Sub test()
Dim ie As New InternetExplorer
Dim doc As New HTMLDocument
Dim ecoll As Object
ie.Visible = True
ie.navigate"http://test-sites.octoparse.com/?page_id=192"
Do
DoEvents
Loop Until ie.readyState = READYSTATE_COMPLETE
End sub
</code></pre>
<p>F5を押して、マクロを実行します。そこで次のようなWebページが表示されます。<br />
<a href="https://crieit.now.sh/upload_images/8f4f8d449ff9d8e3f22749894a1191f2605af20b31d7a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8f4f8d449ff9d8e3f22749894a1191f2605af20b31d7a.png?mw=700" alt="image" /></a></p>
<h2 id="三、VBAでスクレイピングしましょう"><a href="#%E4%B8%89%E3%80%81VBA%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86">三、VBAでスクレイピングしましょう</a></h2>
<p>今回はボタンを押すたびに、Webサイト上データが自動的にエクセルに取り込まれるように開発しましょう。<br />
まず、Webサイトから、要素(HTMLドキュメント)を検証し、データがどのように構成されているかを分析する必要があります。HTML基礎知識は<a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">こちらのリンク</a>で参照ください。今回はテーブルのデータを抽出するように試してみましょう。</p>
<p><strong>1. Ctrl + Shift + I を押して、テーブルの要素を指定すると、HTMLのソースコードに表示されます。</strong><br />
したがって、テーブルの要素は「table」と分かっています。<br />
<a href="https://crieit.now.sh/upload_images/9eccd5f099411315c84c1898bcba8622605af215e3247.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9eccd5f099411315c84c1898bcba8622605af215e3247.png?mw=700" alt="image" /></a></p>
<p><strong>2. VBAで要素「table」を抽出します。ソースコードでは以下のようになります。</strong></p>
<pre><code>Sub test()
Dim ie As New InternetExplorer
Dim doc As New HTMLDocument
Dim ecoll As Object
ie.Visible = True
ie.navigate "http://test-sites.octoparse.com/?page_id=192"
Do
DoEvents
Loop Until ie.readyState = READYSTATE_COMPLETE
Set doc = ie.document
Set ecoll = doc.getElementsByTagName("table")
End Sub
</code></pre>
<p>Excelは、Excelシートの範囲属性を使って、またはExcelシートのセル属性を使って初期化することができます。VBAスクリプトの複雑さを軽減するために、収集データはワークブックに存在するシート1のExcelセル属性に初期化される。</p>
<p><strong>3.実行ボタンを指定します。</strong><br />
マクロスクリプトの準備ができたら、サブルーチンをExcelボタンに渡して割り当て、VBAのモジュールを終了する。ボタンに適当な名前をつけておきます。この例では、ボタンは「データ抽出」として初期化されます。</p>
<p>手順は以下になります。<br />
<a href="https://crieit.now.sh/upload_images/1f619d8c8e01785042d52fb1d7557b23605af393b1f16.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1f619d8c8e01785042d52fb1d7557b23605af393b1f16.png?mw=700" alt="image" /></a><br />
<a href="https://crieit.now.sh/upload_images/b235535133d28cbc2d82958eaef19f9d605af39a3abc3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b235535133d28cbc2d82958eaef19f9d605af39a3abc3.png?mw=700" alt="image" /></a></p>
<p><strong>4.ボタンを押して、以下のような情報が出力します。</strong><br />
<a href="https://crieit.now.sh/upload_images/d1e123dd88e8d9267e07485e99c00a0f605af3a3b008b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d1e123dd88e8d9267e07485e99c00a0f605af3a3b008b.png?mw=700" alt="image" /></a></p>
<h1 id="四、Octoparseでスクレイピングする方法"><a href="#%E5%9B%9B%E3%80%81Octoparse%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">四、Octoparseでスクレイピングする方法</a></h1>
<p>プログラミングが苦手、或いは英語のコードばかりなので苦手意識を持っている方は、スクレイピングツールの<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>はおすすめします。</p>
<p>Octoparseは「<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360013561999-Octoparse%E3%82%92%E3%82%82%E3%81%A3%E3%81%A8%E7%9F%A5%E3%82%8B-">自動識別</a>」機能があるので、ページのURLを入力するだけで、Webページ上各項目のデータ(テキストとリンクを含む)、「次のページ」ボタン、「もっと見る」ボタン、およびページのスクロールダウンを自動的に検出し、タスク(Webクローラー)を自動的に生成することができます。</p>
<p>早速ですが、Octoparseで自動化の魅力を体験してみましょう。</p>
<p><strong>1.Octoparseを起動して、スクレイピングしたいWebページのURLを入力します。</strong><br />
「抽出開始」 ボタンをクリックして進みます。<br />
<a href="https://crieit.now.sh/upload_images/761e0a72882545802c97a7319feeeef1605af3ac39190.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/761e0a72882545802c97a7319feeeef1605af3ac39190.png?mw=700" alt="image" /></a></p>
<p><strong>2.Octoparseでページが読み込みされたら、自動的にページ上の内容を識別します。</strong><br />
自動識別とは、自動的にページ上の必要なデータを検出して識別するという役立つ機能です。ポイント&クリックをする必要はなく、Octoparseは自動的に処理します。<br />
<a href="https://crieit.now.sh/upload_images/2359f12975aa9a679363209c1c928c6b605af3b32ce77.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2359f12975aa9a679363209c1c928c6b605af3b32ce77.png?mw=700" alt="image" /></a></p>
<p><strong>3.識別が完了すると、データプレビューで識別したデータを表示され、確認してから「ワークフローの生成」ボタンを押します。</strong><br />
<a href="https://crieit.now.sh/upload_images/95661bba8fe25a46fc835456536461a8605af3bb20a09.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/95661bba8fe25a46fc835456536461a8605af3bb20a09.png?mw=700" alt="image" /></a></p>
<p><strong>4.これで簡単にWebクローラーが作成しました!</strong><br />
上の「実行」ボタンをクリックして、すぐデータを抽出できます。簡単ではないでしょうか。<br />
<a href="https://crieit.now.sh/upload_images/b0b0d3e60908ec44ecfc6aa732366d03605af3c190b44.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b0b0d3e60908ec44ecfc6aa732366d03605af3c190b44.png?mw=700" alt="image" /></a></p>
<h1 id="五、まとめ"><a href="#%E4%BA%94%E3%80%81%E3%81%BE%E3%81%A8%E3%82%81">五、まとめ</a></h1>
<p>VBAでスクレイピングは簡単にはできますが、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/5-anti-scraping-techniques-you-may-encounter/">複雑な構造</a>を持つWebサイト(JavaScript、AJAX技術を使っている動的サイトなど)では、VBAの機能はちょっと足りないかもしれません。<br />
それだけでなく、スクレイピングしようと思ったら、プログラミング言語とIT知識を勉強する必要があります。完璧に学ぶ時間がなく、効率的にスクレイピングがしたい、プログラミングが苦手、或いは英語のコードばかりなので苦手意識を持っている方は<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/the-10-best-web-scraping-tools/">スクレイピングツール</a>はおすすめです。</p>
<p><a href="https://crieit.now.sh/upload_images/9211be13dbf84c6b98b0da0ecbffb784605af3d24b4f0.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9211be13dbf84c6b98b0da0ecbffb784605af3d24b4f0.png?mw=700" alt="image" /></a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/subscribe/trial?plan=std&utm_source=crieit&utm_medium=pic&utm_campaign=8872">今から無料トライアル!</a></p>
<h2 id="関連記事"><a href="#%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B">関連記事</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/creating-a-simple-web-crawler-in-php/">PHPで簡単なWebクローラーを作ってみた</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-using-python/">PythonによるWebスクレイピングを解説</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-using-python-vs-web-scraping-tool/">Python vs Octoparse!初心者向きのスクレイピング方法はどっち?</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/a-complete-guide-to-web-scraping-job-postings/">【完全初心者向け】求人情報を一括で自動的に取得する方法公開!</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/16753
2021-03-16T19:33:09+09:00
2021-03-16T19:33:55+09:00
https://crieit.net/posts/Web-4
Webページ上の画像を一括保存(ダウンロード)する方法4選
<p><a href="https://crieit.now.sh/upload_images/ae8cd4ac64bad36b6f9d25a55362b80d60508849accef.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ae8cd4ac64bad36b6f9d25a55362b80d60508849accef.png?mw=700" alt="image" /></a><br />
元記事:<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/4-ways-to-scrape-images-from-web-pages-or-websites/">https://www.octoparse.jp/blog/4-ways-to-scrape-images-from-web-pages-or-websites/</a></p>
<p>InstagramやPinterestなどの写真プラットフォームには非常に多くの素晴らしい写真があり、デザインの制作や商品の資料作成など画像素材を利用するシーンが様々です。</p>
<p>保存したい画像が少ない場合は「右クリック → 名前を付けてファイルを保存」でも問題ないですが、複数あった場合は時間も手間もかかってしまうと思います。</p>
<p>この記事では、Webサイトから画像を効率的に一括保存(ダウンロード)する4つの方法を紹介します。 数回のクリックで欲しい画像を簡単に手に入れることができますので、早速試してみましょう!</p>
<h1 id="ブラウザツールで画像を一括保存する方法"><a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%80%E6%8B%AC%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">ブラウザツールで画像を一括保存する方法</a></h1>
<p>単一のWebページから画像をダウンロード場合は、ブラウザツールで十分です。<br />
もし複数のWebページから画像をダウンロードしたいならば、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Webスクレイピングツール</a>はおすすめです。</p>
<h2 id="1. Firefoxを利用する場合"><a href="#1.+Firefox%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88">1. Firefoxを利用する場合</a></h2>
<p>以下の手順でサイトの画像を全てダウンロードすることができます。</p>
<p><a href="https://crieit.now.sh/upload_images/e645b566d2f3748f7cf693b3c5ce86356050885e45270.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/e645b566d2f3748f7cf693b3c5ce86356050885e45270.png?mw=700" alt="image" /></a></p>
<p>Firefoxで画像を取得したいWebサイトを開きます。空白部分を右クリックすると、「<strong>ページの情報を表示</strong>」のオプションをクリックします。そうすると、ページ情報が表示されます。</p>
<p>上の「<strong>メディア</strong>」アイコンをクリックします。ダウンロードする画像のURLのリストが表示されます。「<strong>すべて選択 → 名前を付けて保存</strong>」をクリックします。指定したフォルダーに画像が保存されていれば完了です。</p>
<p><a href="https://crieit.now.sh/upload_images/69495ece09cbda6fa144c2035d5a45096050886a150d6.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/69495ece09cbda6fa144c2035d5a45096050886a150d6.png?mw=700" alt="image" /></a></p>
<h2 id="2. Chromeを利用する場合"><a href="#2.+Chrome%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88">2. Chromeを利用する場合</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/bulk-download-images-from-links-top-5-bulk-image-downloaders/">この記事から</a>紹介された一括ダウンロードツールを使って、全ての画像をダウンロードします。<br />
今回はChromeの「<a target="_blank" rel="nofollow noopener" href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj">Image downloader</a>」という拡張機能を試してみましょう。</p>
<p>Chromeで画像を取得したいWebサイトを開きます。「Image downloader」というChromeの拡張機能を起動すると、このツールは自動的に小さな画像(例:サイトのアイコン、ロゴなど)を取り除き、通常サイズの写真だけを指定するという役立つフィルターを提供しています。</p>
<p><a href="https://crieit.now.sh/upload_images/350e3f259b21d28cbb499af2a4037b52605088e253914.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/350e3f259b21d28cbb499af2a4037b52605088e253914.png?mw=700" alt="image" /></a></p>
<h2 id="3. Webサイトの画像を一括でダウンロードするツール"><a href="#3.+Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB">3. Webサイトの画像を一括でダウンロードするツール</a></h2>
<p>以上紹介した方法では、単一のWebページであれば使いやすいです。画像以外のデータ、Webスクレイピングツールは画像に関連するそれぞれのデータ(例として、商品名、商品価格、画像のURLなど)を抽出する最適化ツールです。「<a target="_blank" rel="nofollow noopener" href="https://imagecyborg.com/">IMAGE CYBORG</a>」はおすすめです。</p>
<h1 id="Webスクレイピングツールで画像を一括保存する方法"><a href="#Web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%80%E6%8B%AC%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">Webスクレイピングツールで画像を一括保存する方法</a></h1>
<h2 id="4. Webスクレイピングツールを挑戦してみましょう!"><a href="#4.+Web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E6%8C%91%E6%88%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81">4. Webスクレイピングツールを挑戦してみましょう!</a></h2>
<p>上記の単一のWebページの画像ダウンロードツールとは異なり、Webスクレイピングツール(ここでは<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>を例として)は必要な画像のURLを取得することが役立ちます。そして、すべてのURLを取得したら、画像を一括ダウンロードすることができます。</p>
<h2 id="Octoparseの利用シーンは?"><a href="#Octoparse%E3%81%AE%E5%88%A9%E7%94%A8%E3%82%B7%E3%83%BC%E3%83%B3%E3%81%AF%EF%BC%9F">Octoparseの利用シーンは?</a></h2>
<h4 id="・「複数Webページから画像をダウンロードしてほしい」"><a href="#%E3%83%BB%E3%80%8C%E8%A4%87%E6%95%B0Web%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89%E7%94%BB%E5%83%8F%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E3%80%8D">・「複数Webページから画像をダウンロードしてほしい」</a></h4>
<p><a href="https://crieit.now.sh/upload_images/19b93727212811c096b0f7e2d97b9d56605088fd077d0.gif" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/19b93727212811c096b0f7e2d97b9d56605088fd077d0.gif?mw=700" alt="image" /></a></p>
<p><a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015281940-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%87%A6%E7%90%86-%E6%AC%A1%E3%81%B8-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88-">ページネーション</a>を設定した上で、Octoparseは自動的に複数のページから画像のURLをスクレイピングします。作業自動化を通じて、Octoparseは操作の時間を節約できます。</p>
<h4 id="・「無限にスクロールするWebサイトから画像をダウンロードしてほしい」"><a href="#%E3%83%BB%E3%80%8C%E7%84%A1%E9%99%90%E3%81%AB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E7%94%BB%E5%83%8F%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E3%80%8D">・「無限にスクロールするWebサイトから画像をダウンロードしてほしい」</a></h4>
<p><a href="https://crieit.now.sh/upload_images/54f4c2f528df6a3982a65faa0c80e63b605089175a503.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/54f4c2f528df6a3982a65faa0c80e63b605089175a503.png?mw=700" alt="image" /></a><br />
<strong>(Google 画像検索は無限スクロールを使用しています)</strong></p>
<p>例として、無限スクロールを使用しており、新しいコンテンツの読み込みを有効にするために、下にスクロールする必要があります。Webスクレイピングツールは、すべての画像を読み込まれて取得できます。</p>
<p>この記事で紹介したOctoparseには、人間の操作をシミュレート技術が使用されています。したがって、下までスクロールするように設定することができます。</p>
<h4 id="・「画像だけでなく、それに関連する他の情報もほしい」"><a href="#%E3%83%BB%E3%80%8C%E7%94%BB%E5%83%8F%E3%81%A0%E3%81%91%E3%81%A7%E3%81%AA%E3%81%8F%E3%80%81%E3%81%9D%E3%82%8C%E3%81%AB%E9%96%A2%E9%80%A3%E3%81%99%E3%82%8B%E4%BB%96%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%82%E3%81%BB%E3%81%97%E3%81%84%E3%80%8D">・「画像だけでなく、それに関連する他の情報もほしい」</a></h4>
<p>例として、Eコマース業者は、ECサイトから抽出したいデータは商品画像だけではなく、価格やメーカー情報などの情報もほしいです。抽出したデータは見込み顧客育成、リスク管理、学術研究、市場分析にも使用できます。</p>
<p><a href="https://crieit.now.sh/upload_images/3bca5d2a2fd64d5c59bc36d46366c3d16050892a74242.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3bca5d2a2fd64d5c59bc36d46366c3d16050892a74242.png?mw=700" alt="image" /></a><br />
<strong>(Octoparseで楽天市場から抽出したデータ)</strong></p>
<p>Octoparseでは、Amazonや楽天市場、食べログ、Bookingなどのサイトから簡単にスクレイピングするという<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015816173-%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%A2%E3%83%BC%E3%83%89">タスクテンプレート</a>を提供しています。画像のURLだけでなく、商品やレストラン、ホテルなどの他の情報もスクレイピングすることができます。</p>
<p><a href="https://crieit.now.sh/upload_images/ba6a6954579415b932ce9a246fa6549f605089344c26d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ba6a6954579415b932ce9a246fa6549f605089344c26d.png?mw=700" alt="image" /></a></p>
<p><strong>(Octoparseの人気テンプレート)</strong></p>
<p>これで、2つのデータセット(画像と関連する詳細情報)が手に入れたので、自作の商品データベースで市場調査を始めましょう。</p>
<h1 id="初心者向けのチュートリアル"><a href="#%E5%88%9D%E5%BF%83%E8%80%85%E5%90%91%E3%81%91%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB">初心者向けのチュートリアル</a></h1>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/how-to-scrape-and-bulk-download-images-from-any-website/">この記事は</a>、Octoparseで楽天市場から画像を一括保存するのチュートリアルです。<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360013585100-%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B31-%E8%87%AA%E5%8B%95%E8%AD%98%E5%88%A5%E6%A9%9F%E8%83%BD%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B">自動識別機能</a>を通じて、<strong>ノーコード(プログラミング不要)</strong>で、数回のクリックだけで簡単にスクレイピングできます。さらに、6分間で2000枚以上の画像URLを抽出することが可能です。一度Octoparseのコツを掴めば、他のWebサイトでも簡単に抽出できます。</p>
<p><strong>関連記事</strong><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping">Webスクレイピングとは?</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/top-5-web-scraping-tools-comparison">注目のWebスクレイピングツール5選を徹底比較!</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/bulk-download-images-from-links-top-5-bulk-image-downloaders">画像を一括ダウンロードするのに超便利なツール5選</a><br />
<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015455840-Amazon%E3%81%8B%E3%82%89%E5%95%86%E5%93%81%E6%83%85%E5%A0%B1%E3%82%92%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B">Amazonから商品情報をスクレイピングする</a><br />
<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015825593-%E6%A5%BD%E5%A4%A9%E5%B8%82%E5%A0%B4%E3%81%8B%E3%82%89%E5%95%86%E5%93%81%E4%BE%A1%E6%A0%BC%E3%82%92%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B">楽天市場から商品価格をスクレイピングする</a><br />
<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015573819-%E9%A3%9F%E3%81%B9%E3%83%AD%E3%82%B0%E3%81%8B%E3%82%89%E3%83%AC%E3%82%B9%E3%83%88%E3%83%A9%E3%83%B3%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B">食べログからレストラン情報を取得する</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/16729
2021-03-10T19:23:06+09:00
2021-03-10T19:23:06+09:00
https://crieit.net/posts/Web-60489e0ae2b7e
Webサイトから画像を一括ダウンロードする方法
<p><a href="https://crieit.now.sh/upload_images/f5350c378d547ec047dee00a5ecd825460489d3d25baa.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f5350c378d547ec047dee00a5ecd825460489d3d25baa.png?mw=700" alt="image" /></a><br />
元記事:<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/how-to-scrape-and-bulk-download-images-from-any-website/">https://www.octoparse.jp/blog/how-to-scrape-and-bulk-download-images-from-any-website/</a></p>
<h1 id="1. Webサイトから画像を取得する方法"><a href="#1.+Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E7%94%BB%E5%83%8F%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">1. Webサイトから画像を取得する方法</a></h1>
<p>Webサイトから全ての画像を一括で保存したいとき、1枚ずつ保存するのは非常に面倒です。これは非常に退屈なプロセスであり、仕事の効率を低下させます。</p>
<p>実際、Webスクレイピングツールは、この作業を自動化するの最適な選択肢です。Webページを無限にクリックする代わりに、5分以内にタスクを設定するだけで、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/what-is-a-web-crawler-and-how-does-it-work/">クローラー</a>がすべての画像URLを取得してくれます。画像を一括でダウンロードツールにコピーすると、わずか10分で完成させます。</p>
<h1 id="2. Webスクレイピングツールをダウンロード"><a href="#2.+Web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89">2. Webスクレイピングツールをダウンロード</a></h1>
<p>まずは「<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/the-10-best-web-scraping-tools/">Webスクレイピングツールにオススメの10選</a>」という記事から自分に合ったWebスクレイピングツールを探しましょう!今回は、上記の記事から紹介された<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>を例として紹介します。</p>
<p>なお、これは簡単なガイドであり、プログラミングの経験は必要ありません。心配しないでください。</p>
<p><a href="https://crieit.now.sh/upload_images/921cb10fcd16eb732d754672c6b3acf860489d541a0c2.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/921cb10fcd16eb732d754672c6b3acf860489d541a0c2.png?mw=700" alt="image" /></a><br />
<strong><em>Octoparseを<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/Download">ダウンロードする</a></em></strong></p>
<p><strong><em>注:Octoparseは無料プランを提供しています。このガイドに記載されている機能にお金を払う必要はありません。</em></strong></p>
<h1 id="3. 2つのステップだけで、すべての画像URLを取得"><a href="#3.+2%E3%81%A4%E3%81%AE%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E3%81%A0%E3%81%91%E3%81%A7%E3%80%81%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E7%94%BB%E5%83%8FURL%E3%82%92%E5%8F%96%E5%BE%97">3. 2つのステップだけで、すべての画像URLを取得</a></h1>
<h2 id="ステップ1: タスクを作成する"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%971%3A+%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">ステップ1: タスクを作成する</a></h2>
<p>1)Octoparseを起動します。スクレイピングしたいWebページのURLを入力します。「<strong>抽出開始</strong>」 ボタンをクリックして進みます。</p>
<p><a href="https://crieit.now.sh/upload_images/d50a974d098f2150cf9eb7daa2b36d4660489d5fc66db.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d50a974d098f2150cf9eb7daa2b36d4660489d5fc66db.png?mw=700" alt="image" /></a></p>
<p>もうすぐホワイトデーですので、今回は楽天市場上のチョコレートの画像を例にしてみましょう。</p>
<p>サンプルURL: <a target="_blank" rel="nofollow noopener" href="https://search.rakuten.co.jp/search/mall/チョコレート/">https://search.rakuten.co.jp/search/mall/チョコレート/</a></p>
<p>(このリンクが無効になった場合は、楽天市場の別の検索結果のリンクを使ってください)</p>
<p>2)Octoparseでページが読み込みされたら、自動的にページ上の内容を識別します。もし自動識別機能をオフする場合は、右上の操作ヒントパネルで 「<strong>Webページを自動識別する</strong>」、ページ上の内容を識別します。<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360013585100-%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B31-%E8%87%AA%E5%8B%95%E8%AD%98%E5%88%A5%E6%A9%9F%E8%83%BD%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B">自動識別</a>とは、自動的にページ上の必要なデータを検出して識別するという役立つ機能です。ポイント&クリックをする必要はなく、Octoparseは自動的に処理します。</p>
<p><a href="https://crieit.now.sh/upload_images/70b8932a9984095d3fbd09b347cd6e5b60489d6bca8c3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/70b8932a9984095d3fbd09b347cd6e5b60489d6bca8c3.png?mw=700" alt="image" /></a></p>
<p>3)識別が完了すると、データプレビューで識別したデータを表示され、どのようなデータが取得されているかを確認することができます。「<strong>識別結果を切り替える</strong>」をクリックすると、ページの異なる場所の識別結果を指定することができます。「<strong>ワークフローを生成</strong>」をクリックして確認し、タスクを作成します。</p>
<p><a href="https://crieit.now.sh/upload_images/50c7d27de50e4545324522e06a92b69860489d78a0905.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/50c7d27de50e4545324522e06a92b69860489d78a0905.png?mw=700" alt="image" /></a></p>
<p>これで簡単に楽天市場のクローラーが作成しました!</p>
<h2 id="ステップ2: タスクを実行する"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%972%3A+%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B">ステップ2: タスクを実行する</a></h2>
<p>上の「<strong>実行</strong>」ボタンをクリックして、すぐタスクを実行できます。たった数分で数千件のデータを取得することができます。これがOctoparseのスピードです。一度Octoparseのコツをつかめば、以前Webデータを取得するための手作業で時間を無駄にしていたことを後悔するに違いありません。<br />
<a href="https://crieit.now.sh/upload_images/ee14452def08ba4d174ff1e658de5f9460489d85ae59a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ee14452def08ba4d174ff1e658de5f9460489d85ae59a.png?mw=700" alt="image" /></a></p>
<p>これは、たった5分で抽出したデータです。実際、それはすべての画像のURLだけでなく、製品の詳細ページのデータもスクレイピングできます。これは、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/using-web-scraping-to-improve-business-analytics-and-intelligence">競合調査</a>や<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/competitor-monitoring-for-price-strategy-and-product-planning/">EC(Eコマース)</a>分析をしている方には、非常に役立つツールです。</p>
<h1 id="4. 数秒で画像を一括ダウンロード!"><a href="#4.+%E6%95%B0%E7%A7%92%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%80%E6%8B%AC%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%EF%BC%81">4. 数秒で画像を一括ダウンロード!</a></h1>
<p>すべての画像URLをExcelファイルに保存した状態で、<a target="_blank" rel="nofollow noopener" href="https://www.youtube.com/watch?v=NJ8O4HUUfag">この動画</a>から紹介された一括ダウンロードツールを使って、全ての画像をダウンロードします。今回はChromeの「<a target="_blank" rel="nofollow noopener" href="https://chrome.google.com/webstore/detail/tab-save/lkngoeaeclaebmpkgapchgjdbaekacki">Tab Save</a>」という拡張機能を例として試していきましょう。</p>
<p><a href="https://crieit.now.sh/upload_images/c3bd348d576aaca9091be50739763d3460489d9a6822f.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c3bd348d576aaca9091be50739763d3460489d9a6822f.png?mw=700" alt="image" /></a></p>
<p>画像のURLをコピーしてタブ保存に貼り付け、ダウンロードをクリックすると、すべての画像が数秒でコンピュータにダウンロードされます。</p>
<p><a href="https://crieit.now.sh/upload_images/5ec31461ea5d0d590e32eae35b0c4ea560489da36267b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5ec31461ea5d0d590e32eae35b0c4ea560489da36267b.png?mw=700" alt="image" /></a></p>
<p>全体のプロセスはわずか10分かかります。楽天市場から画像の数千(サイトに応じて具体的なデータ件数も変わります)をダウンロードできます。ぜひ試してみてください!</p>
<h1 id="もしタスクは不具合な状況がある場合…"><a href="#%E3%82%82%E3%81%97%E3%82%BF%E3%82%B9%E3%82%AF%E3%81%AF%E4%B8%8D%E5%85%B7%E5%90%88%E3%81%AA%E7%8A%B6%E6%B3%81%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%E2%80%A6">もしタスクは不具合な状況がある場合…</a></h1>
<p>今回の例で自動識別による生成したタスクは問題なく実行できますが、もしタスクは不具合な状況がある場合は、どのように修正すればいいでしょうか?</p>
<h3 id="1. ページネーションが無効の場合"><a href="#1.+%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E7%84%A1%E5%8A%B9%E3%81%AE%E5%A0%B4%E5%90%88">1. ページネーションが無効の場合</a></h3>
<p>このステップでは、ページネーションを確認し、必要に応じて<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015765513-XPath%E5%9F%BA%E7%A4%8E%E7%B7%A8-1-%E3%83%BC-XPath%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5">Xpath</a>を修正していきます。ページネーションについて<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015281940-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%87%A6%E7%90%86-%E6%AC%A1%E3%81%B8-%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88-">こちら</a>でご参照ください。</p>
<p>具体的には、ステップ「ページネーション」をダブルクリックすると、設定画面が表示されます。その設定画面には、自動識別で作成されたXpathがあります。</p>
<p><strong>・どのように修正すればいいでしょうか?</strong><br />
右側の小さな矢印をクリックして、右側の内蔵ブラウザで「<strong>次のページ</strong>」ボタンをクリックします。これはクローラーに「これが私がクリックしたいボタン」を指示しています。簡単でしょうね。</p>
<p><a href="https://crieit.now.sh/upload_images/79f5fbfe4152d1b8f300d77443eb22b660489dad857b5.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/79f5fbfe4152d1b8f300d77443eb22b660489dad857b5.png?mw=700" alt="image" /></a></p>
<p><strong>・もし上記の方法を修正してもダメな場合はどうすればいいでしょうか?</strong></p>
<p>下記の画像の通りに、Xpathを入力してください。<br />
<code>(//a[@class="item -next nextPage"][contains(string(),"次のページ")][not(@disabled)])[1]</code></p>
<p><a href="https://crieit.now.sh/upload_images/b41344abcf2335f6b1c9b76b7dfd8e1360489db7bee43.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b41344abcf2335f6b1c9b76b7dfd8e1360489db7bee43.png?mw=700" alt="image" /></a></p>
<h3 id="2. 画像が読み込まないの場合"><a href="#2.+%E7%94%BB%E5%83%8F%E3%81%8C%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BE%E3%81%AA%E3%81%84%E3%81%AE%E5%A0%B4%E5%90%88">2. 画像が読み込まないの場合</a></h3>
<p>ページが完全に読み込みされるため、スクロールダウンの設定が必要となります。このステップは、スクロールダウンを設定することです。Octoparseで数回のクリックするだけで設定できます!</p>
<p>ワークフローに戻って、「<strong>Webページを開く</strong>」をダブルクリックし、「<strong>Webページを読み込んだ後</strong>」で「スクロールダウン」にチェックを入れ、2秒間隔でスクロール1回、回数50回を設定します。</p>
<p><a href="https://crieit.now.sh/upload_images/ddac9cf9e67bc63c79d4388e2779a23e60489dc8c71f7.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ddac9cf9e67bc63c79d4388e2779a23e60489dc8c71f7.png?mw=700" alt="image" /></a></p>
<p>これでタスクの修正は完了です!</p>
<h1 id="5. まとめ"><a href="#5.+%E3%81%BE%E3%81%A8%E3%82%81">5. まとめ</a></h1>
<ol>
<li>Octoparseは、無料プランも提供しているWebスクレイピングツールです。ノーコード技術を使うため、非エンジニアでもスクレイピングすることができます。Webスクレイピングプロジェクトを1から始める最適なツールです。</li>
<li>Octoparseの自動識別機能を利用して、Webサイトから簡単にデータを取得することができます。これにより、他のツールでややこしいステップ設定から解放されます。</li>
<li>自動識別機能を利用して、Xpathを書く必要はありません!ポイント&クリックだけでテキストやボタンなどの内容を指定できます。これは最もやりやすい方法です。</li>
</ol>
<p><strong>参考記事:</strong><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/bulk-download-images-from-links-top-5-bulk-image-downloaders/">画像を一括ダウンロードするのに超便利なツール5選</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/top-5-web-scraping-tools-comparison">注目のWebスクレイピングツール5選を徹底比較!</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/3-challenges-to-extract-data-from-ecommerce-websites">ECサイトからデータを抽出する3つの課題</a><br />
<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/data-driven-ecommerce-pricing-strategy-using-web-scraping">Webスクレイピングによる価格戦略・価格の決め方</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/16118
2020-10-07T16:56:24+09:00
2020-10-07T16:56:56+09:00
https://crieit.net/posts/Chrome-ChromeDriver
ChromeとChromeDriverのバージョン違いによるエラー
<p>初めての記事投稿(ポエム以外で)です</p>
<h5 id="概要"><a href="#%E6%A6%82%E8%A6%81">概要</a></h5>
<p>Seleniumを使ってスクレイピングをしています。<br />
プログラムが動いてない…と思ったらChromeが自動更新されていてCromeDriverとバージョンが合わなくなっていたからだったという話です(つい1時間前までは動いてたのに…)コードはお見せできませんが、備忘録的に記しておきます。</p>
<pre><code class="python">$ python3 sc.py
(中略)
selenium.common.exceptions.SessionNotCreatedException: Message:
session not created: This version of ChromeDriver only supports Chrome version 84
# バイナリでインストールしたChromeDriver
$ chromedriver --version
ChromeDriver 84.0.4147.30
# 現在のChrome
$ google-chrome --version
Google Chrome 86.0.4240.75
# ChromeDriverのインストール
$ pip install chromedriver-binary==86.0.4240.22
Successfully installed chromedriver-binary-86.0.4240.22.0
</code></pre>
<p>今回はChromeDriverをpipでインストールしたので、プログラム(scr.py)に<br />
<code>import chromedriver_binary</code>を追記</p>
<p><code>driver = webdriver.Chrome(options=options, executable_path=r'/usr/local/bin/chromedriver')</code><br />
の<code>executable_path</code>以降を削除</p>
<h5 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h5>
<ul>
<li><p>ChromeDriverのインストール</p>
<p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/hanzawak/items/2ab4d2a333d6be6ac760">[selenium向け] ChromeDriverをpipでインストールする方法(パス通し不要、バージョン指定可能) </a></p></li>
<li><p>ChromeDriver</p>
<p><a target="_blank" rel="nofollow noopener" href="http://chromedriver.chromium.org/downloads">Downloads - ChromeDriver - WebDriver for Chrome </a></p></li>
</ul>
橘 lah
tag:crieit.net,2005:PublicArticle/15907
2020-05-22T10:17:55+09:00
2020-05-22T10:17:55+09:00
https://crieit.net/posts/XPath-2-XPath
XPath基礎編(2) ー XPathの書き方
<p>前回の記事では、<a href="https://crieit.net/posts/XPath-1-XPath">XPathの基本概念</a>を簡単に紹介しました。今回はXPathによるWebページ(HTML)からデータを指定・取得する方法、つまりXPathの書き方を紹介します。</p>
<h1 id="1.タグ(要素)で指定する"><a href="#1.%E3%82%BF%E3%82%B0%EF%BC%88%E8%A6%81%E7%B4%A0%EF%BC%89%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B">1.タグ(要素)で指定する</a></h1>
<p>下記のHTMLサンプルで、文章が のように、といった記号で囲まれているのが分かります。このようなといった記号を、タグと言います。</p>
<pre><code><タグ名>ここにコンテンツが入ります... </タグ名>
</code></pre>
<p>最初のタグを「開始タグ」、終わりのタグを「終了タグ」といいます。そしてこの開始タグから終了タグまでの全体を、要素と呼びます。</p>
<p>下記のHTMLの中で赤色で表示された部分はタグです。(Firefoxで青色、Chromeでは紫色で表示されます。)<br />
<a href="https://crieit.now.sh/upload_images/ac2152aaa3a20ce773412b967f786c335ec5f9c9b9231.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ac2152aaa3a20ce773412b967f786c335ec5f9c9b9231.png?mw=700" alt="image" /></a></p>
<p>下記はHTMLでよく見かけるタグのまとめです。詳しくのは<a target="_blank" rel="nofollow noopener" href="https://www.tagindex.com/html5/elements/">この記事</a>を合わせてご覧ください!<br />
<a href="https://crieit.now.sh/upload_images/3b23cd0e54eb80bd11f5914238779f8b5ec5fa2b21fb0.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3b23cd0e54eb80bd11f5914238779f8b5ec5fa2b21fb0.png?mw=700" alt="image" /></a></p>
<p><strong>XPathの最も一般的な書き方は、スラッシュ “/” で区切りながらタグを記述します。</strong></p>
<p>例えば、このHTMLから『Harry Potter』を取得したい場合は、ツリー構造の上から順に『htmlタグ→bodyタグ→h1タグ』と指定できます。次のように書きます。</p>
<pre><code>/html/body/h1
</code></pre>
<p>また、『//』を用いて、途中までのパスを省略することができます。</p>
<pre><code>//h1
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/73909d4648ca098024e571d5d2c90ada5ec5fa7109dbf.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/73909d4648ca098024e571d5d2c90ada5ec5fa7109dbf.png?mw=700" alt="image" /></a></p>
<p>タグを複数に合致する場合に、N番目のタグを指定することができます。この例では、『7,631円』を取得する場合、「div」の行から2行目の「span」であるため、次のように書きます。</p>
<pre><code>//div/span[2]
</code></pre>
<p>抽象化にすると、タグ(要素)で書くXPath構文はこうなります。</p>
<pre><code>//タグ名
//タグ名/タグ名
</code></pre>
<h1 id="2.属性で指定する"><a href="#2.%E5%B1%9E%E6%80%A7%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B">2.属性で指定する</a></h1>
<p>属性とはタグの中に記載されていて、タグの情報を細かく表すものです。タグに属性をつけることで、要素の効果を指定したり、具体的な指示を付け加えることが出来ます。属性は通常、「id="booksTitle"」のように表示されます。なお、属性は複数指定する事も可能です。</p>
<pre><code><タグ名 属性名="属性値">
</code></pre>
<p>最も一般的な属性には、href、title、style、src、id、classなどがあります。詳しくはこの記事を合わせてご覧ください!</p>
<p><strong>XPathでは属性を『@』の関数で表します。</strong></p>
<p>例えば、『Harry Potter』を取得したい場合、XPathは次のように書きます。</p>
<pre><code>//h1[@id="booksTitle"]
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/74f53e19cdd3d7db9d3aaa665416865e5ec5fa9fbdc81.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/74f53e19cdd3d7db9d3aaa665416865e5ec5fa9fbdc81.png?mw=700" alt="image" /></a></p>
<p>抽象化にすると、属性で書くXPath構文はこうなります。</p>
<pre><code>//タグ名[@属性名="属性値"]
</code></pre>
<p>もし同じ属性を持つすべての要素を取得する場合、次のように書きます。</p>
<pre><code>//*[@属性名="属性値"]
</code></pre>
<h1 id="3.テキストで指定する"><a href="#3.%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B">3.テキストで指定する</a></h1>
<p>下記のようにタグで囲まれているのはテキストです。</p>
<pre><code><タグ名>ここにテキストが入ります... </タグ名>
</code></pre>
<p>Webページからデータを取得するのは、通常ページ内のコンテンツまたはテキストを取得することです。ですから、取得したいテキストを直接指定することができます。</p>
<p><strong>XPathではテキストを『text()』の関数で表します。</strong></p>
<p>例えば、『Harry Potter』を取得したい場合、テキストで指定すると、次のように書きます。</p>
<pre><code>//h1[text()="Harry Potter"]
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/606ad984d03cb33dbcf324b48fe3ef3a5ec5fae570088.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/606ad984d03cb33dbcf324b48fe3ef3a5ec5fae570088.png?mw=700" alt="image" /></a></p>
<p>抽象化にすると、属性で書くXPath構文はこうなります。</p>
<pre><code>//タグ名[text()="取得するテキスト"]
</code></pre>
<p>もし同じテキストを持つすべての要素を取得する場合、次のように書きます。</p>
<pre><code>//*[text()="取得するテキスト"]
</code></pre>
<h1 id="4.タグ関係で指定する"><a href="#4.%E3%82%BF%E3%82%B0%E9%96%A2%E4%BF%82%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B">4.タグ関係で指定する</a></h1>
<p>HTMLのツリー構造において、すべての要素が親子/兄弟関係を持っています。</p>
<p>1つまたは複数の要素を含む要素は親要素と呼ばれ、含まれる要素は子要素です。子要素は1つのみの親があり、親の開始タグと終了タグの間にあります。同じ親を持つ要素は兄弟要素と呼ばれます。</p>
<p>具体的な例も見てみましょう。</p>
<p>以下のサンプルは、[body]要素を基点に、[body]要素は[h1]要素と[div]要素の親で、[h1]要素と[div]要素は、[body]要素の子です。親子/兄弟関係にある要素を取得し、それぞれにスタイルを変更する例です。</p>
<p>[h1]要素と[div]要素は、同じ親[body]要素を持つため、兄弟要素です。</p>
<p>また、[div]要素は2つの[span]要素の親ですから、2つの[span]要素は[body]要素の子孫要素です。</p>
<p><a href="https://crieit.now.sh/upload_images/ac2152aaa3a20ce773412b967f786c335ec5fb00d4eb2.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ac2152aaa3a20ce773412b967f786c335ec5fb00d4eb2.png?mw=700" alt="image" /></a></p>
<p>カレント要素を基点として、親子、もしくは兄弟関係にある要素を取得することができます。例えば、『7,631円』を取得したい場合、タグの関係で指定すると、下記のように書くことができます。</p>
<ul>
<li><strong>[div]要素の子要素とする場合</strong></li>
</ul>
<pre><code>//div/span[2]
</code></pre>
<ul>
<li><strong>[body]要素の子孫要素とする場合</strong></li>
</ul>
<pre><code>//body//span[2]
</code></pre>
<ul>
<li><strong>[span class="author notFaded"]要素の兄弟要素とする場合</strong></li>
</ul>
<pre><code>//span[@class="author notFaded"]/following-sibling::span[1]
</code></pre>
<ul>
<li><strong>[span class="tax_postage"]要素の兄弟要素とする場合</strong></li>
</ul>
<pre><code>//span[@class="tax_postage"]/preceding-sibling::span[1]
</code></pre>
<p>兄弟関係のあるタグを指定するには『following-sibling::』と『preceding-sibling::』という2つの関数をよく使います。</p>
<p><strong>『following-sibling::』は、指定された要素より後の兄弟要素を指定する<br />
『preceding-sibling::』は、指定された要素より前の兄弟要素を指定する</strong></p>
<p>『following-sibling::』は、テーブル要素を指定する時に大活躍します。例えば、下記のHTMLサンプルがあります。<br />
<a href="https://crieit.now.sh/upload_images/47e4d5aa57d6e1622c851c7ab7d081235ec5fb78228ea.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/47e4d5aa57d6e1622c851c7ab7d081235ec5fb78228ea.png?mw=700" alt="image" /></a></p>
<p>このHTMLはページに変更すると、以下のようなテーブルの形になります。<br />
<a href="https://crieit.now.sh/upload_images/d31f11d0dc981223209a01066480dfcd5ec5fb8c89537.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d31f11d0dc981223209a01066480dfcd5ec5fb8c89537.png?mw=700" alt="image" /></a></p>
<p>この例では、店名の『12345』取得します。ただし、[td]要素が複数あり、<strong>//td[1]</strong> で対応できなくなります。また、もし複数のページから、同じ構造のテーブルを一括取得する場合、固定的な値「店名」を基点として、『following-sibling::』を使うほうが薦めです。次のように書きます。</p>
<pre><code>//th[text()="店名"]/following-sibling::td[1]
</code></pre>
<p><a href="https://crieit.now.sh/upload_images/bf91fbab825806d55d50077a1188024a5ec5fb9c4b147.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/bf91fbab825806d55d50077a1188024a5ec5fb9c4b147.png?mw=700" alt="image" /></a></p>
<p>抽象化にすると、タグ関係で書くXPath構文はこうなります。<br />
<a href="https://crieit.now.sh/upload_images/79fa6ebb0e474fa3720643700236f4145ec5fbb4e1ce5.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/79fa6ebb0e474fa3720643700236f4145ec5fbb4e1ce5.png?mw=700" alt="image" /></a><br />
もし上記の構文で複数に合致する場合に、<strong>[N]</strong> を付けてN番目のタグを指定することができます。</p>
<p>いかがでしょうか?以上は最も使われるXPath書き方です。さっそくお試してみてください。次回はXPathによく使われる関数を紹介します。お楽しみに!</p>
<p>元記事:<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360013122059">https://helpcenter.octoparse.jp/hc/ja/articles/360013122059</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/15905
2020-05-21T12:08:13+09:00
2020-05-21T12:08:13+09:00
https://crieit.net/posts/XPath-1-XPath
XPath基礎編(1)ー XPathの基本概念
<p>Webサイト上からデータを自動的に取得するには2つの方法があります。1つはPythonなどのプログラミング言語でWebクローラーを作る、もう1つは<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>のような<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/top-30-free-web-scraping-software/">Webスクレイピングツール</a>でデータを取得するのです。しかし、どれにしても、XPathは重要な役割を果たしています。XPathの書き方が分かれば、データをより正しくて効率的に取得できます。</p>
<p>それでXPathのシリーズではXPathの基本概念からXPathの書き方、応用まで詳しく紹介したいと思います。</p>
<p>この記事では、XPathの基本概念を簡単に紹介します。</p>
<h1 id="1. XPathとは?"><a href="#1.+XPath%E3%81%A8%E3%81%AF%EF%BC%9F">1. XPathとは?</a></h1>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/essential-for-web-scraping-xpath-introduction/">XPath</a> (XML Path Language)とは、ツリー構造となっているXML/HTMLドキュメントからの要素や属性値などを指定するための簡潔な構文(言語)です。<br />
Webページは通常HTMLで記述されるから、XPathはWebページの情報を取得する時によく利用します。ブラウザ(Chrome、Firefoxなど)でWebページのHTMLを表示するする場合、F12キーを押すことで、対応するHTMLドキュメントに簡単にアクセスできます。<br />
<a href="https://crieit.now.sh/upload_images/9df9699255a9f1dfaaa6c977dbd9c7f85ec5ef58a99b5.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/9df9699255a9f1dfaaa6c977dbd9c7f85ec5ef58a99b5.png?mw=700" alt="image" /></a></p>
<h1 id="2. XPathの仕組み"><a href="#2.+XPath%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF">2. XPathの仕組み</a></h1>
<p>XPathは具体的にはどのように動作するのかを見てみましょう。下記の画像はHTMLドキュメントの一部です。<br />
<a href="https://crieit.now.sh/upload_images/adab33ab3d7b51a493bb3cfb063f098b5ec5efa851b61.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/adab33ab3d7b51a493bb3cfb063f098b5ec5efa851b61.png?mw=700" alt="image" /></a></p>
<p>HTMLは、ツリー構造のように、異なるレベルのがあります。この例では、レベル1は<strong>bookstore</strong>で、レベル2は<br />
<strong>book</strong>です。<strong>Title、author、year、price</strong>はすべてレベル3です。</p>
<p>山括弧(など)を含むテキストはタグと呼ばれます。HTMLの要素は通常、開始タグと終了タグで構成され、その間にコンテンツが挿入されます。以下の形になります。</p>
<pre><code><○○>(開始タグ)ここにコンテンツが入ります... </○○>(終了タグ)
</code></pre>
<p>XPathはスラッシュ “/” で区切りながら階層を記述し、基準となるノードから別のノードを指定できます。URLと似ています。この例では、要素「author」を検索する場合、XPathは次のようになります。</p>
<pre><code>/bookstore/book/author
</code></pre>
<p>それがどのように機能するかをよりよく理解するには、コンピューター上の特定のファイルを見つける方法を参照してください。<br />
<a href="https://crieit.now.sh/upload_images/0620d07afe9f4535ee22c558c2a575fb5ec5ef88cc427.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/0620d07afe9f4535ee22c558c2a575fb5ec5ef88cc427.png?mw=700" alt="image" /></a></p>
<p>「author」という名前のファイルを見つけるには、正しいファイルパスは <strong>\ bookstore \ book \ author</strong>です。</p>
<p>コンピューター上のすべてのファイルには独自のパスがあるように、Webページ上の要素もパスがあります。そのパスはXPathで記述されています。</p>
<p>ルート要素(ドキュメントの一番上の要素)から始まり、中にあるすべての要素を経由して目標要素に至るXPathは、絶対XPathと呼ばれます。</p>
<pre><code>例: /html/body/div/div/div/div/div/div/div/div/div/span/span/span…
</code></pre>
<p>絶対XPathは長くて混乱する可能性があるため、絶対XPathを単純化するために、「//」を使用して途中までのパスを省略することができます(短いXPathとも呼ばれる)。</p>
<p>たとえば、</p>
<pre><code>絶対XPath: /bookstore/book/author
短いXPath: //author
</code></pre>
<h1 id="3. XPathを表示・書くには"><a href="#3.+XPath%E3%82%92%E8%A1%A8%E7%A4%BA%E3%83%BB%E6%9B%B8%E3%81%8F%E3%81%AB%E3%81%AF">3. XPathを表示・書くには</a></h1>
<h2 id="【Google Chromeの場合】"><a href="#%E3%80%90Google+Chrome%E3%81%AE%E5%A0%B4%E5%90%88%E3%80%91">【Google Chromeの場合】</a></h2>
<p>Chromeでこのページを表示し、右クリックメニューの[検証]から開発者ツールを表示します。Elementタブのhtmlで、要素を右クリックします。メニューの[Copy] → [Copy XPath ] でその要素を取得するためのXPathがクリップボードにコピーされます。<br />
<a href="https://crieit.now.sh/upload_images/7abc7bfcf22757417e5d1de2508ecd645ec5efc5ddd9d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7abc7bfcf22757417e5d1de2508ecd645ec5efc5ddd9d.png?mw=700" alt="image" /></a></p>
<p>表示されているElementタブのhtmlから “Ctrl + F” で検索欄を表示します。XPathを入力すると、得られる要素が選択されるはずです。<br />
<a href="https://crieit.now.sh/upload_images/26083b025f9b75340b4e0133bc0d3c885ec5efd93cb43.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/26083b025f9b75340b4e0133bc0d3c885ec5efd93cb43.png?mw=700" alt="image" /></a></p>
<p>また、「XPath Helper」という拡張機能を追加することもできます。XPathを入力すると、一致する結果が表示されます。(<a target="_blank" rel="nofollow noopener" href="https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl?hl=zh-CN">XPath Helperをインストールする</a>)<br />
<a href="https://crieit.now.sh/upload_images/2a1ec783d7eb286b630a0cec3a3a6a0f5ec5efeb6a203.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/2a1ec783d7eb286b630a0cec3a3a6a0f5ec5efeb6a203.png?mw=700" alt="image" /></a></p>
<p></p>
<h2 id="【Firefoxの場合】 "><a href="#%E3%80%90Firefox%E3%81%AE%E5%A0%B4%E5%90%88%E3%80%91%E3%80%80">【Firefoxの場合】 </a></h2>
<p>Firefoxの旧バージョンに搭載されている拡張機能「Firebug」が利用できます。(<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015765193-Firebug-FireXPath%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">Firebug&FireXPath拡張機能をインストールする方法</a>)</p>
<p>FirefoxでWebページを開く➡Firebugボタンをクリック➡ページ内の要素をクリック➡その要素のXPathが表示されます。<br />
<a href="https://crieit.now.sh/upload_images/f00ff934aa298fe710ed30ead91c5db95ec5f00a607c0.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f00ff934aa298fe710ed30ead91c5db95ec5f00a607c0.png?mw=700" alt="image" /></a></p>
<p>以上はXPathの基本概念でした。次回はXPathの書き方を紹介しますので、お楽しみにしてください!</p>
<p>元記事:<a target="_blank" rel="nofollow noopener" href="https://helpcenter.octoparse.jp/hc/ja/articles/360015765513">https://helpcenter.octoparse.jp/hc/ja/articles/360015765513</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/15864
2020-04-23T15:43:49+09:00
2020-04-23T15:43:49+09:00
https://crieit.net/posts/Octoparse-8-1-Beta
スクレイピング業界の変革|Octoparse 新バージョン 8.1 Beta がリリース!
<p><a href="https://crieit.now.sh/upload_images/83fd1e8a036ec55de62793094109faa55ea1386632f82.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/83fd1e8a036ec55de62793094109faa55ea1386632f82.png?mw=700" alt="image" /></a></p>
<p>Webスクレイピングツールである<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>の新バージョン ver 8.1 (ダウンロードは<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/Download">こちら</a>)が2020年4月15日よりリリースされました。今回の新バージョンのリリースでは、、Webページの自動認識機能の追加と内蔵ブラウザのアップグレードにより、パフォーマンスが向上し、データ取得の効率を大幅に改善しました。 また、ユーザインターフェースの改善により、インストールからタスク作成、実行中の操作まで、使いやすさも向上しました。</p>
<p>今回の主なバージョンアップ項目は以下のようになります。</p>
<h1 id="1.ハンズフリーでデータ抽出が可能"><a href="#1.%E3%83%8F%E3%83%B3%E3%82%BA%E3%83%95%E3%83%AA%E3%83%BC%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E6%8A%BD%E5%87%BA%E3%81%8C%E5%8F%AF%E8%83%BD">1.ハンズフリーでデータ抽出が可能</a></h1>
<p>「Webページの自動認識」機能を追加するにより、WebページのURLアドレスを入力するだけで、Octoparseは自動的にWebページを識別し、ワークフローを自動的に生成するようになります。Webページ上のテキスト、画像、リンクなどの情報を識別でき、収集するデータフィールド、ページネーション、スクロールダウンなどの設定を自動的に推奨できます。複数の認識結果が表示され、簡単に切り替えられ、一般的なニーズを満たすことができると思われます。超初心者でも手軽にデータをスクレイピングできるようになりました!</p>
<h1 id="2.高度なブラウザ互換性"><a href="#2.%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%BA%92%E6%8F%9B%E6%80%A7">2.高度なブラウザ互換性</a></h1>
<p>内蔵ブラウザをFirefoxからGoogle Chromeに切り替えました。以前のバージョンで読み込めなかったWebサイトは、Octoparse 8.1ですぐに読み込めるようになります。あらゆるWebサイトがOctoparseの内蔵ブラウザに開けられるように努めています。</p>
<h1 id="3.より高速なスクレイピング速度"><a href="#3.%E3%82%88%E3%82%8A%E9%AB%98%E9%80%9F%E3%81%AA%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E9%80%9F%E5%BA%A6">3.より高速なスクレイピング速度</a></h1>
<p>Webデータ収集のプロセスにおいて、更なる高速化が求められています。スクレイピング速度も、高品質のスクレイピングツールのコア競争力です。以前のバージョンと比べて、Octoparse 8.1は、10倍高速で応答性が向上しています。OP 7.0が100件データを抽出するのに21分41秒かかりましたが、OP 8.1が同じWebページから同じ量のデータを取得するのに2分しかかかりませんでした。</p>
<h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1>
<p>新バージョンに関する詳細はこの記事をご覧ください。Octoparseへのご意見、アドバイスなどがございましたら、ぜひご遠慮なくお寄せください。Octoparseは引き続きより良いサービス・機能を提供できるよう努めております。</p>
<p>元記事:<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/octoparse-81-release-features/">スクレイピング業界の変革|Octoparse 新バージョン 8.1 Beta がリリース!</a></p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/15682
2020-01-14T11:58:31+09:00
2020-01-14T11:58:31+09:00
https://crieit.net/posts/web-scraping-using-python
PythonによるWebスクレイピングを解説
<p>価格監視、ビジネス分析などのデータ関連プロジェクトを実施する場合、常にWebサイトからデータをエクセルに記録する必要があります。ただし、データを1行ずつコピペするのは時代遅れになり、<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/web-scraping-introduction/">Webスクレイピング</a>におけるニーズが高まっています。この記事では、Webデータを自動収集する方法、つまりPythonでWebスクレイピングを行う方法を説明します。</p>
<h1 id="ステップ0:はじめに"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%970%EF%BC%9A%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">ステップ0:はじめに</a></h1>
<p>Webスクレイピングとは、Webサイトからデータを取得するのに役立つ技術です。Pythonなどのプログラミング言語以外に、APIまたは<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>のような<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/top-30-free-web-scraping-software">スクレイピングツール</a>もWebスクレイピングを行うことができます。</p>
<p>AirbnbやTwitterなどの大規模サイトの場合、サイトにある情報をできるだけ広く共有するために、API を通してデータにプログラムレベルでアクセスし、企業、開発者、利用者に提供します。APIはApplication Programming Interfacesの略で、2つのアプリケーションが互いに通信できるソフトウェアビルディングブロックです。ほとんどの人にとって、APIはデータを取得するための最も適したアプローチです。</p>
<p>ただし、全てのサイトはAPIサービスを提供するわけではありません。APIを提供しても、取得できるデータが必要なものではない場合もあります。したがって、Pythonを活用してWebクローラーを自作することは、強力で柔軟なソリューションになります。</p>
<p><strong>では、なぜPythonが選ばれた言語なのでしょうか?</strong></p>
<p><strong>柔軟性:</strong> 私たちが知っているように、Webサイトはよく更新されます。コンテンツだけでなく、Web構造も頻繁に変更されます。Pythonは動的に入力可能で生産性が高いため、使いやすい言語です。したがって、はコードを簡単に変更し、Webサイトの更新速度に追いつくことができます。</p>
<p><strong>強力:</strong> Pythonには、有用で成熟したライブラリがたくさんあります。例えば、Requests、BeautifulSoupは、URLを取得し、Webページから情報を引き出すのに役立ちます。Seleniumは、Webクローラーが人間のブラウジング動作を真似できるようにすることで、一部のスクレイピング防止手法を回避するのに役立ちます。さらに、re、numpy、およびpandasを使用して、データのクリーンアップと処理を行うことができます。</p>
<p>それでは、PythonによるWebスクレイピングの旅を始めましょう!</p>
<h1 id="ステップ1:Pythonライブラリをインポートする"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%971%EF%BC%9APython%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B">ステップ1:Pythonライブラリをインポートする</a></h1>
<p>このチュートリアルでは、Yelpからレビューをスクレイピングする方法を示します。BeautifulSoupとRequestsの2つのライブラリを使用します。これらの2つのライブラリは、PythonでWebクローラーを構築する際に一般的に使用されます。最初のステップは、この2つのライブラリをPythonにインポートして、これらのライブラリの関数を使用できるようにすることです。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/ee38043b-1cf0-5edb-3018-cde7f861a517.png" alt="ライブラリをインポートする.png" /></p>
<h1 id="ステップ2:WebページからHTMLを抽出する"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%972%EF%BC%9AWeb%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89HTML%E3%82%92%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B">ステップ2:WebページからHTMLを抽出する</a></h1>
<p><a target="_blank" rel="nofollow noopener" href="https://www.yelp.com/biz/milk-and-cream-cereal-bar-new-york?osq=Ice+Cream">https://www.yelp.com/biz/milk-and-cream-cereal-bar-new-york?osq=Ice+Cream</a> からレビューを抽出しようとします。まず、URLという変数にURLを保存します。次に、このWebページのコンテンツにアクセスし、Requestsでurlopen()関数を使用して、HTMLを「ourUrl」に保存できます。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/3ed8515c-2ae9-1692-e7c5-b4b5ca659249.png" alt="HTMLを抽出する.png" /></p>
<p>それで、BeautifulSoupを使ってWebページを解析します。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/b0630902-1ea5-36fa-5050-415a3826eddf.png" alt="Webページを解析.png" /></p>
<p>このWebサイトの生のHTMLである「Soup」ができたので、prettify()と呼ばれる関数を使用して生データを消去し、それを印刷して「Soup」のHTMLのネスト構造を確認できます。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/19ab0e0e-7b15-0285-54d3-7e35f7db4357.png" alt="prettify.png" /></p>
<h1 id="ステップ3:レビューを見つけて抽出する"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%973%EF%BC%9A%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%81%A6%E6%8A%BD%E5%87%BA%E3%81%99%E3%82%8B">ステップ3:レビューを見つけて抽出する</a></h1>
<p>次に、このWebページでレビューのHTMLを見つけて抽出し、保存します。Webページの各要素には、唯一のHTML「ID」があります。IDを確認するには、Webページでそれらを検査する必要があります。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/d8e28b2b-84c3-c956-a4d8-dd482175c6b1.png" alt="要素の検証.png" /></p>
<p>「Inspect element(要素の検証)](「Inspect(検証))をクリックすると、レビューのHTMLが表示されます。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/0d48caf6-e20f-f695-5b4f-52fa0462a93c.png" alt="HTMLが表示されます.png" /></p>
<p>この場合、レビューは「p」というタグの下にあります。そのため、まずfind_all()という関数を使って、これらのレビューの親ノードを見つけます。そして、ループ内の親ノードの下にタグ「p」を持つすべての要素を見つけます。すべての「p」要素を見つけたら、それらを「review」という空のリストに保存します。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/7d03c63a-5992-20ac-8922-44aea1eb3991.png" alt="レビュー.png" /></p>
<p>これで、そのページからすべてのレビューを取得できます。いくつのレビューを抽出したか見てみましょう。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/944c1728-c0cc-3dec-345d-ae3c7100ae9f.png" alt="レビュー数.png" /></p>
<h1 id="ステップ4:レビューを処理する"><a href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%974%EF%BC%9A%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E5%87%A6%E7%90%86%E3%81%99%E3%82%8B">ステップ4:レビューを処理する</a></h1>
<p>各レビューの最初に<code><p lang = 'en'></code>、レビューの途中に<code><br/></code>、およびレビューの終わりに<code></ p></code>などの役に立たないテキストがまだあることに注意する必要があります。</p>
<p><code><br/></code>は改行を表します。レビューに改行を入れる必要はありませんので、削除する必要があります。また、<code><p lang = 'en'></code>と<code></ p></code>はHTMLの始まりと終わりであり、これらも削除する必要があります。</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262932/c31cad4a-2a12-047c-bf22-92ae926f411f.png" alt="レビューを処理する.png" /></p>
<p>最後に、20行未満のコードですべてレビューをきれいに取得しました。</p>
<h1 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h1>
<p>以上はYelpから20件のレビューを収集するデモです。しかし、実際には、他の多くの状況に直面する必要があるかもしれません。例えば、他のページに移動してこのショップの残りのレビューを抽出するには、ページネーションなどの手順が必要になります。または、レビュアー名、レビュアーの場所、レビュー時間などのその他の情報も収集する必要があります。</p>
<p>上記の操作を実装してより多くのデータを取得するには、Seleniumや正規表現などの関数とライブラリをさらに学習しなければなりません。Webスクレイピングの課題を掘り下げるのにより多くの時間を費やすことは興味深いでしょう。</p>
<p>ただし、Webスクレイピングを行う簡単な方法を探している場合は、Octoparseのようなスクレイピングツールが一番いいソリューションになるかもしれません。Octoparseは、コードを各必要なく、Webサイトから情報を簡単に取得できる強力なWebスクレイピングツールです。Webスクレイピングをマスターして、Webデータの取得を自動化にしましょう!</p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/15678
2020-01-13T18:52:04+09:00
2020-01-13T18:52:04+09:00
https://crieit.net/posts/what-is-octoparse
Octoparseとは?Webデータを自動抽出できるスクレイピングツール
<h2 id="Octoparseとは?"><a href="#Octoparse%E3%81%A8%E3%81%AF%EF%BC%9F">Octoparseとは?</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/">Octoparse</a>は、視覚的に分かりやすくデータを抽出できる<a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/the-10-best-web-scraping-tools/">Webスクレイピングツール</a>です。コードを書くことなく、スクレイピングの初心者でも、Octoparseを使ってWebサイトから大量の情報を手軽に抽出できます。</p>
<p>WindowsアプリケーションであるOctoparseは、Ajaxを使うWebページを含む静的および動的Webサイトに対応し、フォームを記入したり、テキストボックスに検索語を入力したりするなどで、人間の操作をシミュレートしてWebページとやり取りします。抽出プロジェクトは、自分のマシン(ローカル抽出)またはクラウド(クラウド抽出)で実行できます。CSV、EXCEL、HTML、JSON、データベース(MySQL、SQL Server、Oracle)などさまざまな出力形式があります。</p>
<p>Octoparse無料版と有料版は同じ機能を共有しています。無料版だと、一部機能に制限がありますが、ヘビーユーズでもしない限りは、十分すぎるくらいの機能があります。有料版だと、タスクの登録数や自動実行数が多くなり、クラウド上で動作させることもできます。</p>
<h3 id="ワークフロー"><a href="#%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC">ワークフロー</a></h3>
<p>Octoparseは、視覚的に使いやすい操作ペインを提供します。Octoparseは、Webページを開いたり、アカウントにログインしたり、テキストを入力したり、Web要素をクリックするなど人間のWebブラウジング動作をシミュレートします。内蔵組ブラウザでWebサイトの情報をクリックして、必要な構造化データを取得します。</p>
<h3 id="クラウドサービス"><a href="#%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">クラウドサービス</a></h3>
<p>分散コンピューティングに基づいて大規模なWebデータを同時にスクレイピングすることは、Octoparseの最も強力な機能です。クラウド機能を使うと、多数のクラウドサーバーを使って同時に抽出を実行できます。短期間に10,000のWebページをスクレイピングする必要がある場合は、Octoparseクラウドサービスが最適です。クラウド型プラットフォームでは、620倍の高速抽出が可能です。自動取得したデータはクラウドに保存され、どこでもアクセスできます。ハードウェア保守も不要だし、ネットワーク中断に心配する必要もありません。</p>
<h3 id="豊富なツール"><a href="#%E8%B1%8A%E5%AF%8C%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB">豊富なツール</a></h3>
<p>Octoparseには、ウィザード形式で抽出データを指定する「Wizard mode(ウィザードモード)」と自由に抽出データを指定できる「Advanced mode(アドバンスドモード)」2つのモードがあります。</p>
<p>ユーザー体験を向上させるため、Advanced modeでは、豊富なツールセットを提供します。</p>
<ul>
<li>正規表現式生成ツール</li>
<li>Xpath生成ツール</li>
<li>実行タイムアウトの設定</li>
<li>スクロールダウン</li>
<li>ページアンカーフック</li>
</ul>
<h3 id="API"><a href="#API">API</a></h3>
<p>Octoparse APIに接続すると、自分のシステムにデータを自動的に配信でき、自分のアカウントにあるデータにアクセスできます。タスクのルールを設定するだけで、Octoparseクラウドサーバーが残りの作業を行います。データはXMLの形式で配信されます。</p>
<h3 id="Webスクレイピングテンプレート"><a href="#Web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88">Webスクレイピングテンプレート</a></h3>
<p><a target="_blank" rel="nofollow noopener" href="https://www.octoparse.jp/blog/a-revolutionary-web-scraping-software-to-boost-your-business-easier/">Webスクレイピングテンプレート</a>は非常にシンプルで強力な機能です。テンプレートを使うと、プログラミング知識の少ない/ない人でも簡単にWebスクレイピングを達成できます。具体的には、Octoparseのソフトには数十種類のあらかじめ作成されたテンプレートがあり、パラメータ(ターゲットWebサイトのURL、検索キーワードなど)を入力するだけで、データが抽出されてきます。そのため、スクレイピングタスクやコードを書く必要はありません。例えば、eBayで「イヤフォン」に関する製品情報を収集したい場合は、パラメータに「イヤフォン」と入力してタスクを実行して、数秒でアイテム番号、価格、送料などを含む製品情報を得ることができます。</p>
<h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2>
<p>Webスクレイピングツールはニュースポータル、人工知能、フォーラム、Eコマースサイト、ソーシャルメディア、不動産、財務報告などさまざまな分野で広く使われています。Octoparseを利用することで、価格比較、研究、事業、営業、マーケティングを効率的に進めることができるようになります。</p>
Octoparse Japan
tag:crieit.net,2005:PublicArticle/15445
2019-10-01T20:31:32+09:00
2019-10-01T20:31:32+09:00
https://crieit.net/posts/puppeteer-Twitter
puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみた
<p>ふと、puppeteerがおもしろそうだなと思い、前から欲しかった<br />
TwitterブックマークをJSONファイルにエクスポートするツールを題材に、<br />
いろいろ遊んでみた時に備忘録。</p>
<p>puppeteerはサクッと使えるので、すてき(<em>´ω`</em>)</p>
<h3 id="作ったもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">作ったもの</a></h3>
<p>こんな感じで勝手に操作してエクスポートしてくれます(<em>´ω`</em>)</p>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">puppeteerで自動ログインして、ブクマをJOSNでエクスポートできるように(*´ω`*)わかりやすいように背景色を変えたりしてる(*´ω`*) <a target="_blank" rel="nofollow noopener" href="https://t.co/UJiGAiw5KN">pic.twitter.com/UJiGAiw5KN</a></p>— 積読ハウマッチ📚きらぷか (@kira_puka) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka/status/1178913910432256002?ref_src=twsrc%5Etfw">October 1, 2019</a></blockquote>
<p>最終的なソースコードはGitHubで公開中。<br />
- <a target="_blank" rel="nofollow noopener" href="https://github.com/memory-lovers/export_twitter_bookmarks_puppeteer">memory-lovers/export_twitter_bookmarks_puppeteer: Twitter Bookmark Export Tool using Puppeteer</a></p>
<p>ただ、注意事項がたくさんですが。。(-_-;)</p>
<hr />
<h3 id="puppeteerの使い方"><a href="#puppeteer%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">puppeteerの使い方</a></h3>
<h4 id="インストール"><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">インストール</a></h4>
<pre><code class="console">$ npm install -S puppeteer
</code></pre>
<h4 id="基本的な雛形"><a href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E9%9B%9B%E5%BD%A2">基本的な雛形</a></h4>
<p>基本的にはこんな感じ。</p>
<ol>
<li>ブラウザを起動</li>
<li>ページを作成</li>
<li>なんか処理する</li>
<li>ブラウザの終了</li>
</ol>
<pre><code class="javascript">const puppeteer = require("puppeteer");
const fs = require("fs");
async function main() {
let browser = null;
try {
// ブラウザの起動
browser = await puppeteer.launch();
// ページの作成
const page = await browser.newPage();
// 何らかの処理
} catch (error) {
console.error(`Error: ${error}`, error);
} finally {
// ブラウザの終了
if (!!browser) await browser.close();
}
}
main().then();
</code></pre>
<h4 id="puppeteerでできること"><a href="#puppeteer%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8">puppeteerでできること</a></h4>
<h5 id="ブラウザの起動/停止"><a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E8%B5%B7%E5%8B%95%2F%E5%81%9C%E6%AD%A2">ブラウザの起動/停止</a></h5>
<pre><code class="javascript">// ブラウザの起動: headlessで起動
const browser = await puppeteer.launch();
// ブラウザの起動: headlessじゃなく起動
const browser = await puppeteer.launch({ headless: false, slowMo: 10 });
// ブラウザの終了
await browser.close();
</code></pre>
<p><code>headless: false</code>にすると、ブラウザが立ち上がって、動作確認画できる。<br />
<code>slowMo: 10</code>の値を大きくすると、スローモーションのように操作がゆっくりになる。</p>
<h5 id="ページの開く/閉じる"><a href="#%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E9%96%8B%E3%81%8F%2F%E9%96%89%E3%81%98%E3%82%8B">ページの開く/閉じる</a></h5>
<pre><code class="javascript">// 新規ページの作成
const page = await browser.newPage();
// 画面サイズの設定
await page.setViewport({ width: 1280, height: 1200 });
// ページを閉じる
await page.close();
</code></pre>
<h5 id="指定したURLへ移動"><a href="#%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9FURL%E3%81%B8%E7%A7%BB%E5%8B%95">指定したURLへ移動</a></h5>
<pre><code class="javascript">// 指定したURLへ移動
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });
// 指定したURLへ移動: waitを設定
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });
</code></pre>
<p>オプションの<code>waitUntil</code>を指定すると、その条件が満たされるまでwaitする。<br />
指定できるのは、以下の4つ。</p>
<ul>
<li><code>load</code>: <code>load</code>イベントが発火するまで</li>
<li><code>domcontentloaded</code>: <code>DOMContentLoaded</code>イベントが発火するまで</li>
<li><code>networkidle0</code>: ネットワーク接続が0個である状態が500ミリ秒続いたとき</li>
<li><code>networkidle2</code>: ネットワーク接続が2個である状態が500ミリ秒続いたとき</li>
</ul>
<p>SPAとかの場合は、<code>networkidle2</code>とかまで待つと良さそう。</p>
<p>参考: <a target="_blank" rel="nofollow noopener" href="https://codeday.me/jp/qa/20190513/814601.html">PuppeteerによるJavaScriptレンダリングされたHTMLの取得 - コードログ</a></p>
<h5 id="要素の取得"><a href="#%E8%A6%81%E7%B4%A0%E3%81%AE%E5%8F%96%E5%BE%97">要素の取得</a></h5>
<pre><code class="javascript">// 最初の`.button`の要素を取得
const button = await page.$('.button');
// すべての`.button`の要素を取得
const buttonList = await page.$$('.button');
</code></pre>
<p>実際は<a target="_blank" rel="nofollow noopener" href="https://pptr.dev/#?product=Puppeteer&version=v1.20.0&show=api-class-elementhandle">ElementHandle</a>が返ってくる。</p>
<p>1件取得と全件取得があるので注意。<br />
セレクタの書き方は<a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>が使える。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate">XPATH</a>で書ける<code>page.$x();</code>というのもある。</p>
<h5 id="要素のクリック"><a href="#%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF">要素のクリック</a></h5>
<pre><code class="javascript">// クリック: ページからセレクタで指定
await page.click('.button');
// クリック: ElementHandlerからクリック
const button = await page.$('.button');
await button.click();
// クリック: ページからElementHandlerを使ってevaluate
const button = await page.$('.button');
await page.evaluate(v => v.click(), button)
// クリック: ElementHandlerからevaluateでクリック
const button = await page.$('.button');
await button.evaluate(v => v.click())
</code></pre>
<p>クリックなど、JavaScriptを実行する方法はいくつかある。<br />
SPAなサイトだとうまく行かない場合があるが、<code>page.evaluaate</code>などを使うとうまくいく時がある。</p>
<h5 id="入力する"><a href="#%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B">入力する</a></h5>
<pre><code class="javascript">// テキストを入力する: ページからセレクタで指定
await page.type('#text-input', "Hello");
// テキストを入力する: ElementHandlerで指定
const inputText = await page.$('#text-input');
await inputText.type("Hello");
</code></pre>
<h5 id="待つ/waitする"><a href="#%E5%BE%85%E3%81%A4%2Fwait%E3%81%99%E3%82%8B">待つ/waitする</a></h5>
<pre><code class="javascript">// 1000ms待つ
await page.waitFor(1000);
// 指定した要素が表示されるまで待つ
await page.waitForSelector(`.foo`);
// or
await page.waitFor('.foo');
// 条件を満たすまで待つ
await page.waitFor(() => !!document.querySelector('.foo'));
// 移動するまで待つ
await Promise.all([
page.waitForNavigation(),
page.click('a.my-link'),
]);
// or
const navigationPromise = page.waitForNavigation();
await page.click('a.my-link'),
await navigationPromise;
</code></pre>
<h5 id="その他もろもろ"><a href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%82%82%E3%82%8D%E3%82%82%E3%82%8D">その他もろもろ</a></h5>
<p><code>evaluate</code>を使うとHTML要素に対して実行できるので、いろいろできる</p>
<pre><code class="javascript"><br />// innerTextを取得
const innerText = await elm.evaluate(node => node.innerText);
// textContentを取得
const textContent = await elm.evaluate(node => node.textContent);
// href属性の取得
const href = await elm.evaluate(node => node.href);
// 背景色変更
await elm.evaluate((v, color) => (v.style.backgroundColor = color), "gray");
// URLの取得
const url = await page.evaluate(_ => location.origin);
// スクロール: 1画面分
await page.evaluate(_ => window.scrollBy(0, window.innerHeight));
// スクロール: 指定要素まで
await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), elm);
</code></pre>
<h5 id="スクリーンショットの取得"><a href="#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%E3%81%AE%E5%8F%96%E5%BE%97">スクリーンショットの取得</a></h5>
<pre><code class="javascript">// スクリーンショットの取得: 表示範囲のみ
await page.screenshot({ path: "screenshot.png" });
// スクリーンショットの取得: フルページを指定
await page.screenshot({ path: "screenshot.png", fullPage: true });
// スクリーンショットの取得: 指定要素のみ
const element = await page.$('h1');
await element.screenshot({path: 'screenshot_h1.png'});
</code></pre>
<h5 id="描画されたHTMLの取得"><a href="#%E6%8F%8F%E7%94%BB%E3%81%95%E3%82%8C%E3%81%9FHTML%E3%81%AE%E5%8F%96%E5%BE%97">描画されたHTMLの取得</a></h5>
<pre><code class="javascript">const fs = require("fs");
// HTMLの取得: ページ全体
const html = await page.content();
fs.writeFileSync("output.html", html);
// HTMLの取得: 指定要素のみ
const bodyHandle = await page.$('body');
const html_body = await page.evaluate(body => body.innerHTML, bodyHandle);
fs.writeFileSync("output_body.html", html_body);
</code></pre>
<h3 id="エクスポートするツールを作ってみる"><a href="#%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">エクスポートするツールを作ってみる</a></h3>
<p>やりたいことは、こんな感じ。</p>
<ol>
<li>ブラウザ起動</li>
<li>ログイン</li>
<li>ブックマークページに移動</li>
<li>以下繰り返し: 取得できる情報がなくなるまで
<ul>
<li>ブックマークの情報を取得</li>
<li>ブックマークの削除</li>
</ul></li>
<li>取得した情報を.jsonファイルに書き出し</li>
<li>ブラウザの停止</li>
</ol>
<h4 id="メインの処理はこんな感じ"><a href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E5%87%A6%E7%90%86%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98">メインの処理はこんな感じ</a></h4>
<pre><code class="javascript">async function exportBookmarkMain() {
let browser = null;
try {
// ブラウザの起動
browser = await puppeteer.launch({ headless: false, slowMo: 10 });
// ページの作成
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 1200 });
// ログイン: ログインページに移動&認証
await login(page);
// ブックマークのエクスポート: ブックマークページに移動&ツイート上の取得
const bookmarks = await getTwitterBookmarks(browser, page);
console.log(`bookmarks size is ${bookmarks.length}`);
// 取得した情報の書き出し
const timestamp = dayjs().format("YYYYMMDD_HHmmss");
const outputFile = `twitter_bookmarks_${timestamp}.json`;
fs.writeFileSync(`output/${outputFile}`, JSON.stringify(bookmarks));
} catch (error) {
console.error(`Error: ${error}`, error);
} finally {
// ブラウザの停止
if (!!browser) await browser.close();
}
}
</code></pre>
<h4 id="ログイン処理"><a href="#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E5%87%A6%E7%90%86">ログイン処理</a></h4>
<pre><code class="javascript">/**
* ログイン処理
*/
async function login(page) {
// dotenvからアカウント情報の取得
const account = process.env.TWITTER_ACCOUNT;
const password = process.env.TWITTER_PASSWORD;
// 指定したURLへ移動: waitを設定
await page.goto("https://twitter.com/", { waitUntil: "networkidle2" });
await page.waitForSelector(`.LoginForm > .LoginForm-username > .text-input`);
// アカウントとパスワード入力
await page.type(`.LoginForm > .LoginForm-username > .text-input`, account);
await page.type(`.LoginForm > .LoginForm-password > .text-input`, password);
// ログインボタンを押して、ページ遷移するまで待つ
const navigationPromise = page.waitForNavigation();
await page.click(` .LoginForm > .EdgeButton`);
await navigationPromise;
}
</code></pre>
<h4 id="ブックマークのエクスポート処理"><a href="#%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E5%87%A6%E7%90%86">ブックマークのエクスポート処理</a></h4>
<p>くり返す処理はこんな感じ。<br />
ツイートは<code><article></code>タグのようなので、それを起点に処理を進めていく。</p>
<pre><code class="javascript">async function getTwitterBookmarks(browser, page) {
const bookmarks = [];
try {
// ブックマークに移動
const bookmarksURL = "https://twitter.com/i/bookmarks";
await page.goto(bookmarksURL, { waitUntil: "networkidle2" });
// ブックマークしたツイートのHTML要素の取得
const articles = await page.$$("article");
for (let i = 0; i < articles.length; i++) {
const article = articles[i];
// ツイートまでスクロール
await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
await page.waitFor(1000);
// articleから情報を取得(別処理)
const data = await toArticleData(browser, page, article);
bookmarks.push(data);
// ブックマークの削除(別処理)
await deleteBookmark(browser, page, article);
}
} catch (error) {
console.error(`** Error occuerred: ${error}`, error);
}
return bookmarks;
}
</code></pre>
<p>無限ローディングを持つような場合、適宜スクロールしないと要素が表示されないので、<br />
ツイートごとにスクロールしている。</p>
<h5 id="ブックマークしたツイートから情報を取得"><a href="#%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%81%97%E3%81%9F%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%81%8B%E3%82%89%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97">ブックマークしたツイートから情報を取得</a></h5>
<p>かなりTwitterの仕様によっているけど</p>
<ol>
<li>取得したい要素を特定して、</li>
<li>その要素を取得するセレクタを書き、</li>
<li>innterTextやtextContentで文字を取得する</li>
</ol>
<p>といった、感じのことをしている。</p>
<pre><code class="javascript">async function toArticleData(browser, page, article) => {
// 初期化
const articleData = {
accountName: "",
accountId: "",
accountURL: "",
tweetText: "",
tweetURL: "",
links: []
};
// ツイートしたユーザのアカウント名とTwitterIdを取得
const account = "div > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)";
const accountName = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(1)`);
const accountId = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(2)`);
articleData.accountName = await accountName.evaluate(node => node.innerText);
articleData.accountId = await accountId.evaluate(node => node.innerText);
// ツイートの内容を取得
const tweetData = "div > div:nth-of-type(2) > div:nth-of-type(2)";
const tweet = await article.$(`${tweetData} > div:nth-of-type(2)`);
const tweetText = await tweet.evaluate(node => node.innerText);
articleData.tweetText = tweetText;
// ツイートに含まれるリンク(<a>)をすべて取得
const aTags = await article.$$(`${tweetData} a`);
for (let i = 0; i < aTags.length; i++) {
const aTag = aTags[i];
const text = await aTag.evaluate(node => node.textContent);
const link = await aTag.evaluate(node => node.href);
articleData.links.push({ link: link, text: text });
}
// <a>の1つ目はユーザのURL
articleData.accountURL = articleData.links[0].link;
// <a>の2つ目はツイートのURL
articleData.tweetURL = articleData.links[1].link;
articleData.links.splice(0, 2);
return articleData;
};
</code></pre>
<h5 id="ブックマークの削除"><a href="#%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%81%AE%E5%89%8A%E9%99%A4">ブックマークの削除</a></h5>
<pre><code class="javascript">async deleteBookmark(browser, page, article) {
const waitTime = 1500; // 待ち時間
// 削除対象までスクロール
await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
await page.waitFor(1000);
// 「ツイートを共有」ボタンをクリック
const button = await article.$("div[aria-label='ツイートを共有']");
await page.evaluate(v => v.click(), button);
// すこし待つ
await page.waitFor(waitTime);
// クリックするとメニューが出てくるので、取得
const menuItems = await page.$$("div[role='menuitem']");
// 非公開アカウントかどうかにより、メニューの数が変わるの処理を分ける
if (menuItems.length === 3) {
// 通常、メニューが3つあり、2つ目が削除ボタン
await menuItems[1].click();
await page.waitFor(waitTime);
} else if (menuItems.length === 1) {
// 非公開の場合は、削除ボタンのみ表示
await menuItems[0].click();
await page.waitFor(waitTime);
}
};
</code></pre>
<p>こんな感じで、「要素を探す→クリック→少し待つ」のくり返し。<br />
ただ、ブラウザで操作しているときでも、削除されないときがある。。</p>
<h2 id="使ってみた感想"><a href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E6%84%9F%E6%83%B3">使ってみた感想</a></h2>
<p>スクレイピング自体始めてだったけど、puppeteer自体がすごくよく、簡単に使うことができた(<em>´ω`</em>)</p>
<p>ただ、Twitterみたいなのを対象にするのは結構大変だった。。</p>
<h5 id="1. どうセレクタを書けば、期待する要素をとってこれるのかを考えないといけない"><a href="#1.+%E3%81%A9%E3%81%86%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%82%92%E6%9B%B8%E3%81%91%E3%81%B0%E3%80%81%E6%9C%9F%E5%BE%85%E3%81%99%E3%82%8B%E8%A6%81%E7%B4%A0%E3%82%92%E3%81%A8%E3%81%A3%E3%81%A6%E3%81%93%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%8B%E3%82%92%E8%80%83%E3%81%88%E3%81%AA%E3%81%84%E3%81%A8%E3%81%84%E3%81%91%E3%81%AA%E3%81%84">1. どうセレクタを書けば、期待する要素をとってこれるのかを考えないといけない</a></h5>
<p>特にscoped CSSを使っていて、class名がないdivばかりだとつらい</p>
<h5 id="2. SPAなど動的に変わる部分が多いサイトだと、クリックなどがうまく動かないことがある"><a href="#2.+SPA%E3%81%AA%E3%81%A9%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E3%82%8F%E3%82%8B%E9%83%A8%E5%88%86%E3%81%8C%E5%A4%9A%E3%81%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A0%E3%81%A8%E3%80%81%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%AA%E3%81%A9%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8B">2. SPAなど動的に変わる部分が多いサイトだと、クリックなどがうまく動かないことがある</a></h5>
<p>対象サイトのJavaScriptが正しく動作しない場合がある。。</p>
<h5 id="3. 実行や動作確認に時間がかかるので、テストにかなり時間がかかる"><a href="#3.+%E5%AE%9F%E8%A1%8C%E3%82%84%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D%E3%81%AB%E6%99%82%E9%96%93%E3%81%8C%E3%81%8B%E3%81%8B%E3%82%8B%E3%81%AE%E3%81%A7%E3%80%81%E3%83%86%E3%82%B9%E3%83%88%E3%81%AB%E3%81%8B%E3%81%AA%E3%82%8A%E6%99%82%E9%96%93%E3%81%8C%E3%81%8B%E3%81%8B%E3%82%8B">3. 実行や動作確認に時間がかかるので、テストにかなり時間がかかる</a></h5>
<p>あと、サイトのデザインが変わると追従対応しないといけない。。<br />
便利だけど、かなり大変そうな感じ(<em>´ω`</em>)</p>
<p>けど、ポイントを守ればかなり便利だなと、今更ながら体感(<em>´ω`</em>)</p>
<h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%21%21">こんなのつくってます!!</a></h2>
<p>積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!<br />
<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p>
<p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/></p>
<p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ</p>
<p>要望・感想・アドバイスなどあれば、<br />
公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで♪</p>
<h1 id="参考にしたサイト様"><a href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%97%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%98">参考にしたサイト様</a></h1>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/kanoe/items/9043a81d28a1b733b2e2">Puppeteerのセットアップから使い方まで〜ブラウザ操作の自動化〜 - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://pptr.dev/">Puppeteer v1.20.0</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://codeday.me/jp/qa/20190513/814601.html">PuppeteerによるJavaScriptレンダリングされたHTMLの取得 - コードログ</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/unhurried/items/56ea099c895fa437b56e#1-%E4%B8%80%E5%AE%9A%E6%99%82%E9%96%93%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E9%80%9A%E4%BF%A1%E3%81%AE%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%A7%E5%AE%8C%E4%BA%86%E3%82%92%E5%88%A4%E5%AE%9A%E3%81%99%E3%82%8B">puppeteerを使ったスクレイピング - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://gist.github.com/nnks1010/10abf3032933609d1b2bd5b99fc12586">絶対顔本スクレイピングするマン</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/go_sagawa/items/85f97deab7ccfdce53ea">puppeteerでの要素の取得方法 - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://stocker.jp/diary/nth-child/">CSSのnth-childとnth-of-typeについて基本から学ぼう | Stocker.jp / diary</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/tomi_linka/items/a68cf7840c3da002c6e0#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%92%E5%BE%85%E3%81%A4">puppeteerでスクレイピング - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/rh_taro/items/32bb6851303cbc613124#%E9%81%B7%E7%A7%BB%E3%82%92%E5%BE%85%E3%81%A4-%E3%81%9D%E3%81%AE2">puppeteerでよく使うであろう処理の書き方 - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/AYA_iro/items/e5dd0956b3ba82f6bf31">puppeteerを体験してみた - Qiita</a></li>
</ul>
きらぷか@積読ハウマッチ/SSSAPIなど