PCサイトの要素をXPathで指定しようとしても取得がうまくいかず、
結果XPathの記述が誤っていて要素自体取れていなかった、ということはありませんか。
その間違いに気がつくのが実装するタイミングだと、作業が後手に回り不便です。
そうならないためには、予めXPathの記述は正しいと分かっている必要があります。
そんな時に便利なのが、Google Chromeのデベロッパー・ツールです。
デベロッパー・ツールは、
Windows : 右クリックから要素の検証
Mac : Command + alt + i
で起動することができます。
このデベロッパー・ツールにあるconsoleパネルを使用してXPathの確認ができます。
なお、初期表示の場合はconsoleパネルが非表示になっている場合があります。
その際は、"Elements","Network"などの項目と同じ列にある">_"をクリックしてください。
consoleパネルにXPathを記述すると、サイト内で取得できたものが表示されます。
記述をする時は、XPathを $x(' ') で囲むようにしてください。
例1. body
bodyをXPathで取得できるか記述してみましょう。
エンターを押すと、きちんとbodyが取得できているのがわかります。
逆に、ここで記述が誤っていると…
何も取得できません。
例2. header
このページはheaderにidがついているので、それで指定します。
問題なく取得できました。
例3. 表示されている画像の中の一つ
一番左端にある画像を取得してみます。
右側に表示されているDOMを見ながらXPathを記述していきます。
記述してみましたが、画像は複数取れてしまいました。
どこがダメだったのか、少しずつ絞っていきます。
これで一個だけが取得できるようになりました。
このように、サイト上でXPathがあっているかそうでないか、
確かめながら記述を行うことができます。
書き方に不安がある方や、取得できているか確認したい場合は、
ぜひこのツールをご活用ください。