ヘッダーロゴ

Xpathの使い方が分からない!けどChromeの検証使ってみたら・・

スプレッドシート上でベンチマークしたいサイトの情報を簡単にデータ取得出来たら、非常に便利ですよね。

GoogleスプレッドシートならImportXML関数を使えば可能なんです。

 

しかし!

 

ImportXML関数は第2関数である「Xpath」の使い方を理解しないと、「サイト情報の取得」はおろか、関数自体もうまく使えません...

 

そこで今回はXpathの使い方が分からない!ならChromeの検証から取得してみよう!についてご紹介させていただきます。

Xpathの使い方が複雑過ぎて泣ける

Xpathを理解するだけで3日以上かかっている。(どんだけ)

 

さて、ウエブ上からデータを抽出する技術を「スクレイピング」と言います。

 

そのスクレイピング技術を使うのにマスターしたいのが「Xpath」という言語。

 

今回は ”importXML関数を使ってスクレイピング" を目的とした、Xpathの使い方について忘れないようにまとめていきます。

Xpathの使い方がなぜ難しいのか

「Xpath」はXML文書の特定の部分を指定する言語のこと。

 

なぜこのXpathの使い方が難しいのかというと、指定する定義が定まっていないから。

 

いや、定まっているのですが※マークアップ言語について、きちんと理解がないと使えないんすよ。

マークアップ言語(マークアップげんご、英: markup language)は、視覚表現や文章構造などを記述するための形式言語である

引用元:https://ja.wikipedia.org/wiki/マークアップ言語

というのも、サイト毎にデータの構造が違えば、抽出したいデータの要素が違ってくるわけで。

 

そのため、あるサイトのデータを抽出するのに使えたXpathが他のサイトのデータを抽出するには使えないなんてことも。

 

そもそもエンジニアでもなんでもない人(あたす)にとっては、ハードルが高いというかガチで意味が分かりませんでした。ルートとかノードとかっておいしいの?

アヒルン
だから「エックスパス」なんだな...
うちゅうじん
うまいこと言ってる風だが違うぞ

Xpathを使いたい!Chromeの検証画面から

だけどImportXML関数を知ってしまったからには、せめて自分のサイトデータくらい抽出したいやんけw!

 

そんなわけでリサーチしてみた結果、Xpathを取得する方法を見つけました。

 

それはChromeの「検証」画面からXpathをコピーすることです。

 

自分で要素について調べなくても、コピペでできちゃうんです。

この方法でコピペしたXpathは、基本的にはそのサイトのデータ抽出でしか使えません。

 

ではXpathをChromeで取得して、ImportXMLに挿入していく手順をご紹介します。

Chromeの検証画面からXpathを取得する手順

例として、以前ご紹介したImportXML記事の「h1タイトルのXpath」を取得してみます。

ImportXML関数の使い方!スプレッドシート上でサジェストを取得しよう!

ImportXML関数を使うと、スプレッドシート上でサジェストキーワードが...

続きを見る

記事タイトルは基本的には「h1」タグで記載されているはずなので、Xpathもh1の要素を取得していきます。

先ずは該当記事を開いて、タイトル部分にカーソルを持っていきます。

その場所(Xpathを取得したい要素)で右クリックを押して メニュー > 検証(メニュー画面の一番下) をクリック。

すると画面右側(右上)に現在開いているページのソース」が表示されます。

ページのソース上にカーソルを移動し右クリックして メニューCopyCopy XPath をクリック。

これでタイトルのXpathが取得できました\(^o^)/!

 

コピーしたXpathはコチラ↓きちんとh1の要素が取得出来ていますね。

//*[@id="post-2092"]/h1

 

ではImportXML関数に取得したXpathを挿入してみましょう!

ImportXML関数にXpathを挿入してみよう

ImportXMLの構文は、

=ImportXML(URL,"Xpath")

となっています。

 

ポイントとしては「Xpath」の部分はダブルクオーテーション(")で囲うこと。

 

今回はスプレッドシートを開いて適当なセルに

  • タイトルを取得したいURL
  • Importxml関数

を記入します。

ImprtXML関数を設置する手順

まずImportXML関数を記入してURL(記事URL)を指定します。

今回はB2セルにURLを表示しておいて、ImportXMLではB2セルをURLに割り振りました。

次に先ほどコピーした「Xpath」をペースト。

しかしこのままではimportXML関数の定義に沿ってないので、結果がエラーになってしまいます。修正しましょう!

Xpathの左右にダブルクオーテーション””を付けて...

[]の中のダブルクオーテーションをシングルクォーテーションに変更します。ダブルクオテーションが重複しちゃいますからね。

アニメーションで...

ここまで体裁を整えればあとはEnterを押して完成を見てみましょう!

無事、タイトルが取得できましたね!!

アヒルン
ヤッタ、h1タグのテキストが取得出来た!

同様に「カテゴリのXpath」と

"//*[@id='breadcrumb']/ol/li[2]/a/span"

「アイキャッチのXpath」も取得して

"//img/@src"

それぞれをImportXML関数に挿入してみると...

カテゴリ・アイキャッチ画像のどちらとも取得出来ていますね!

 

とはいってもLoading(読み込み)が多くあり全てのデータ取得が直ぐに完璧に行えるかというと、そうではありませんでした。

MEMO

具体的にはどの位の量でLoadingになるのかイマイチ把握できてません。この辺の解決方法も分かったら追記します。

何はともあれXpathの使い方、取得したい要素が分からないのであれば

  1. Chrome
  2. 検証
  3. Xpath Copy

といった流れで取得することができます。

 

何度もXpath Copyを行っていると何となく規則性が見えてくるかも...

オススメGOOGLETRANSLATE関数の使い方!スプレッドシート上のテキストを翻訳出来るよ!

まとめ|Xpathを使ってみよう!

というわけで「Xpathの使い方」なんて大それたタイトルにしてしまいましたが、無事にimportXML関数にて求めていた要素は取得できましたか?

 

今回はほんとに僕の備忘録な部分が大半で、理解も説明もイマイチかもでごめんなさい。

個人的にXpathを取得するときは、

  1. Chrome
  2. 検証
  3. Xpath Copy

という流れで取得できることが分かっただけでも大収穫でした。

 

何気にImprtXml関数が、こんなに奥が深いものだったとは。新しい世界が開けた感じでもし作れたらサイト情報を取得するXpathの一覧でも次回作ろうかしら...

関連記事: Xpathの使い方が分からない!けどChromeの検証使ってみたら・・
関連記事: スプレッドシートquery関数の使い方!vlookupより断然オススメ!
関連記事: 【無料】アフィリエイトママのSEOツールでお宝キーワードをGETしよう!

  • この記事を書いた人
  • 最新記事

OYAKUN

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

© 2021 OYAKUDACHI.XYZ