[2019/12/19 追記: 誤ってマイマップを消してしまったので、内容を修正しています]
以前、ツイッターでgoogleスプレッドシートでスクレイピングができることを知りました。
今回はこのスクレイピング機能を活用し、ZOZOのファッションコーディネートサイト、WEARからセレクショップの店舗一覧データを取得し、それをGoogleマップにプロットしてみたので、その内容についてまとめています。
1. 実験内容と環境
今回の実験内容と環境は以下になります。
- 実験内容
- googleスプレッドシートの機能を使って、WEARからセレクトショップ一覧をスクレイピング
- それをgoogleマップのマイマップにプロット
- 備考
- 対象データは兵庫県に限定
- 構築環境
- MacbookAir
2. googleスプレッドシートでセレクトショップ一覧をスクレイピング
まずは、googleスプレッドシートを利用したスクレイピングです。WEARのサイトの店舗一覧で都道府県を限定し、兵庫県の店舗一覧を取得します。そして、店舗名にカーソルを合わせコンテキストメニュー(マウスでいう右クリック、Macbookのトラックファイルならデフォルトだと2本指でのタッチ)を表示します。コンテキストメニュー内の「検証」を押すと、htmlやcssが出てくる場所が出ます。さらにhtml上でコンテキストメニューを開き、「Copy」を選択すると下の画像のように4つの選択肢が表示されます。
一番下の「Copy XPath」を選択すると、Xpathと言われる、端的に言えばhtml上の欲しいデータまでの経路を入手することができます。これをコピーしたら、次はgoogleスプレッドシートに移行します。googleスプレッドシートで必要なものは、この情報とそのページのURLの2つだけです。そして下記の画像のように、URLと先ほどコピーしたXPathを貼り付けることで店舗名とその住所を入手することができます。
住所やその他の店舗についてもこの作業を繰り返すことで、上記のように複数店舗の店舗データを入手することができます。
googleスプレッドシートでのスクレイピングの問題点と思われるところ
上記のように、やり方を理解すれば非常に簡単にスクレイピングをすることができます。一方で、googleスプレッドシートの問題点も感じました。
- エクセル同様、力技が必要なときがある。
- 例えば、店舗名、住所共にidの指定でダブルクォートが使われているが、XPathを指定するダブルクォートとかぶってしまうので、手作業でシングルクォートに変える必要がある。また、Xpath内の数字を変更するにも手作業で変えるしかない
- 動的なサイトで対応しきれていないのか、スクレイピングできていない部分がある
- 上記の画像の住所部分はなぜか取得することができていない
上記のような問題点により多くの時間を費やしたため、今回は1ページ目のスクレイピングのみに留めました。
3. googleマップへのプロット
次は、googleマップへのプロットです。今回はAPIなどではなく、シンプルにgoogleマップのマイマップ機能を活用しています。googleのマイマップは、googleマップからマイプレイス -> マイマップの順で作成することができます。
マイマップではgoogleスプレッドシートを読み込むことができるので、先ほどのスプレッドシートを読み込みます。
それを読み込むことで画像のプロットが完成します。下記が上記のフローで完成したマップになります。
[2019/12/19 追記: 誤ってマイマップを削除してしまいましたm(_ _)m]
4. まとめ
今回は、プログラミングの方法などを知らなくてもできるスクレイピング方法についてまとめました。日常使用には便利である一方で本格的な利用には少し不向きかなと思いますが、他に利用できそうな場面があれば色々と使ってみて、様々な利用方法を開拓できればと思います。
読んで頂き、ありがとうございました。