スプレッドシート上でベンチマークしたいサイトの情報を簡単にデータ取得出来たら、非常に便利ですよね。
GoogleスプレッドシートならImportXML関数[icon name="external-link" class="" unprefixed_class=""]を使えば可能なんです。
しかし！
ImportXML関数は第2関数である「Xpath」の使い方を理解しないと、「サイト情報の取得」はおろか、関数自体もうまく使えません...
そこで今回はXpathの使い方が分からない！ならChromeの検証から取得してみよう！についてご紹介させていただきます。
Xpathの使い方が複雑過ぎて泣ける
Xpathを理解するだけで3日以上かかっている。（どんだけ）
さて、ウエブ上からデータを抽出する技術を「スクレイピング」と言います。
そのスクレイピング技術を使うのにマスターしたいのが「Xpath」という言語。
今回は ”importXML関数を使ってスクレイピング" を目的とした、Xpathの使い方について忘れないようにまとめていきます。
Xpathの使い方がなぜ難しいのか
「Xpath」はXML文書の特定の部分を指定する言語のこと。
なぜこのXpathの使い方が難しいのかというと、指定する定義が定まっていないから。
いや、定まっているのですが※マークアップ言語について、きちんと理解がないと使えないんすよ。
※マークアップ言語（マークアップげんご、英: markup language）は、視覚表現や文章構造などを記述するための形式言語である
というのも、サイト毎にデータの構造が違えば、抽出したいデータの要素が違ってくるわけで。
そのため、あるサイトのデータを抽出するのに使えたXpathが他のサイトのデータを抽出するには使えないなんてことも。
そもそもエンジニアでもなんでもない人（あたす）にとっては、ハードルが高いというかガチで意味が分かりませんでした。ルートとかノードとかっておいしいの？
Xpathを使いたい！Chromeの検証画面から
だけどImportXML関数を知ってしまったからには、せめて自分のサイトデータくらい抽出したいやんけｗ！
そんなわけでリサーチしてみた結果、Xpathを取得する方法を見つけました。
それはChromeの「検証」画面からXpathをコピーすることです。
自分で要素について調べなくても、コピペでできちゃうんです。
この方法でコピペしたXpathは、基本的にはそのサイトのデータ抽出でしか使えません。
ではXpathをChromeで取得して、ImportXMLに挿入していく手順をご紹介します。
Chromeの検証画面からXpathを取得する手順
例として、以前ご紹介したImportXML記事の「h1タイトルのXpath」を取得してみます。
-
-
ImportXML関数の使い方！スプレッドシート上でサジェストを取得しよう！
ImportXML関数を使うと、スプレッドシート上でサジェストキーワードが... 取得出来ます。 ただImoprtXML ...
続きを見る
記事タイトルは基本的には「h1」タグで記載されているはずなので、Xpathもh1の要素を取得していきます。
先ずは該当記事を開いて、タイトル部分にカーソルを持っていきます。
その場所（Xpathを取得したい要素）で右クリックを押して メニュー ＞ 検証（メニュー画面の一番下） をクリック。
すると画面右側（右上）に現在開いているページの「ソース」が表示されます。
ページのソース上にカーソルを移動し右クリックして メニュー ＞ Copy ＞ Copy 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を押して完成を見てみましょう！
無事、タイトルが取得できましたね！！
同様に「カテゴリのXpath」と
"//*[@id='breadcrumb']/ol/li[2]/a/span"
「アイキャッチのXpath」も取得して
"//img/@src"
それぞれをImportXML関数に挿入してみると...
カテゴリ・アイキャッチ画像のどちらとも取得出来ていますね！
とはいってもLoading（読み込み）が多くあり全てのデータ取得が直ぐに完璧に行えるかというと、そうではありませんでした。
具体的にはどの位の量でLoadingになるのかイマイチ把握できてません。この辺の解決方法も分かったら追記します。
何はともあれXpathの使い方、取得したい要素が分からないのであれば
- Chrome
- 検証
- Xpath Copy
といった流れで取得することができます。
何度もXpath Copyを行っていると何となく規則性が見えてくるかも...
オススメGOOGLETRANSLATE関数の使い方！スプレッドシート上のテキストを翻訳出来るよ！
まとめ. Xpathを使ってみよう！
というわけで「Xpathの使い方」なんて大それたタイトルにしてしまいましたが、無事にimportXML関数にて求めていた要素は取得できましたか？
今回はほんとに僕の備忘録な部分が大半で、理解も説明もイマイチかもでごめんなさい。
個人的にXpathを取得するときは、
- Chrome
- 検証
- Xpath Copy
という流れで取得できることが分かっただけでも大収穫でした。
何気にImprtXml関数が、こんなに奥が深いものだったとは。新しい世界が開けた感じでもし作れたらサイト情報を取得するXpathの一覧でも次回作ろうかしら...
関連記事： Xpathの使い方が分からない！けどChromeの検証使ってみたら・・
関連記事： スプレッドシートquery関数の使い方！vlookupより断然オススメ！
関連記事： 【無料】アフィリエイトママのSEOツールでお宝キーワードをGETしよう！
