未経験のITエンジニア転職【テックキャンプ】

iMacros:TAGコマンドのPOSとXPATHのを使い分ける基準と使い方【PART.9】

iMacros POSとXPATHの使い方

このページ【PART.9】では、XPATHコマンドの作成方法と使う場所についてご説明します。

TAG + POSTAG + XPATHどちらを使っても(文字、リンク、画像など)をクリックできます。

POSは自動で書き込んでくれるのでiMacrosを使っていると必ず出てきます。

逆にXPATH自分で取得して手動で書き込む必要があり、見たことがない方がほとんどです。

XPATHPOSでクリックできない場所を指定するために使います。

ノーノちゃん

何かよく分からないけどPOSのレベルアップ版みたいなもの?
そんな感じです。POSよりもXPATHの方が細かく指定できます。それでは順番にご説明していきます。

テイくん

1. POSとXPATHの違い

まずは、違いを確認しておきましょう。

POS XPATH
自動書き込み
細かい指定
使いやすさ 簡単 少し面倒
使用頻度 高い 低い
必須ブラウザ
(取得時)
特になし *Firefox Quantum
or
Google Chrome

*Firefox Quantumとは、FireFoxの最新バージョンの名前のことです。

注意
iMacros8.9.7や9.0.3を使っている方は、FireFoxのバージョンを上げてしまうと使えなくなるので、Google ChromeでXPATHを取得する必要があります。

XPATHでないと作れない場合とは?

XPATHはタイトル(文字列)、リンク先URLが定期的に変わる場合に使います。

具体的に言うと定期的に更新されるニュースサイトなどです。

ただ、以下の条件であればPOSでも可能な場合もあります。

POSで対応可能な例
  1. タイトル(文字列)、リンク先URLの場所だけの規則性がある
    ワイルドカードを使う
  2. その場所だけ独自のclassやIDが付与されている場合
    ※リンクをクリックする場合は基本不可
  3. サイトの情報が少ない + 配置の変更がない
    ※上から何番目(POS=n番目)で簡単に指定できる

ノーノちゃん

ごめんなさい。何を言っているのか全く分からない(T_T)
次の項目で確認して頂ければ、何となく理解できると思います。

テイくん

2. XPATHで作成してみよう

POSの場合とは違い、クリックする場所を自分で取得しますので面倒な部分があります。

ただ、POSで対応できない場所をXPATHで解決できるので覚えておいて損はないです。

それでは、練習編と実践編の2つ例を順番に解説していきます。

①練習編

まずは、練習用サイトでどうやって作成するのか確認しましょう。

サンプルマクロ
XPATH【練習用サイト】の1番目のリンクをクリックする。

作業の流れ

STEP.1
マクロを作成
XPATH【練習用サイト】にアクセスする
STEP.2
XPATHを取得
Google Chromeを使う
STEP.3
マクロを編集
取得したXPATHをマクロに追記
STEP.4
マクロを再生

※動画(約3分)を確認後、下の解説を読んで頂くと分かりやすいと思います。


【STEP.1】マクロを作成

1

XPATH【練習用サイト】にアクセス

https://teilab-sub.net/?p=142

2

記憶を開始する

imacros-recored
XPATHは自動で取得できませんので、何もクリックする必要はありません。

3

記憶を終了する

imacros-stop

4

名前を変更する(省略可)

「#Current.iim」から「XPATH.iim」に変更しておきましょう。
マクロ名の変更
XPATH


【STEP.2】XPATHを取得

1

XPATH【練習用サイト】にアクセス

https://teilab-sub.net/?p=142

注意
必ずGoogle Chromeを使用してください。
2

ソースコードを開く

iMacros XPATHをGoogle Chromeで取得する方法
「検証」の代わりにショートカットキー(CTRL + SHIFT + C)でもOKです。

3

XPATHを取得

iMacros XPATHをGoogle Chromeで取得する方法

注意
Google、Yahoo、OCN、Nifty、BIGLOBEの並び順は、アクセスするとランダムに表示する設定です。1番目がBIGLOBE以外であってもXPATHは全く同じです。
4

XPATHを確認

テキストエディタ(メモ帳、TeraPad、秀丸など)に貼り付けて確認しましょう。
取得した場所が間違えていなければ以下のようになります。

xpath
//*[@id="entry"]/section/div[1]/ul/li[1]/a

ノーノちゃん

XPATHって宇宙の言葉みたいで何か分からないねw
3. コマンドの解説」の項目で説明していますが、理解しなくても使えるので気にしなくて大丈夫ですよ。

テイくん


【STEP.3】マクロを編集

1

編集画面を開く

iMacros XPATH作成の手順

先ほど「自動で作成されたマクロ」と「取得したXPATH」は以下のようになっています。

iim
VERSION BUILD=8970419 RECORDER=FX
TAB T=1
URL GOTO=https://teilab-sub.net/?p=142
xpath
//*[@id="entry"]/section/div[1]/ul/li[1]/a
2

マクロを編集する

赤色:追加した部分
オレンジ色:変更した部分
緑色:メモ書き(コメントアウト)
iim
VERSION BUILD=8970419 RECORDER=FX
TAB T=1
URL GOTO=https://teilab-sub.net/?p=142

'1番目をクリック
TAG XPATH="//*[@id="entry"]/section/div[1]/ul/li[1]/a"

もしも2番目や3番目をクリックする方法はこちら

iim
'2番目をクリック
TAG XPATH="//*[@id="entry"]/section/div[1]/ul/li[2]/a"
'3番目をクリック
TAG XPATH="//*[@id="entry"]/section/div[1]/ul/li[3]/a"


【STEP.4】マクロを再生

1

作成したマクロをクリックする

iMacros XPATH作成の手順

2

Playを押す

imacros-play
何度か再生して順番が入れ替わってもエラーがでなければ成功です。


②実践編

実践編では誰もが知っている、Yahooニュースの記事をクリックするマクロ作成してみましょう。

時間によって記事タイトルが変わるのでXPATHで対応していきます。

サンプルマクロ
Yahooニュースの2記事目のリンクをクリックする。

作業の流れ

STEP.1
マクロを作成
Yahooにアクセスする
STEP.2
XPATHを取得
Google Chromeを使う
STEP.3
マクロを編集
取得したXPATHをマクロに追記
STEP.4
マクロを再生

※動画(約3分)を確認後、下の解説を読んで頂くと分かりやすいと思います。

注意
Yahooのページがリニューアルされ動画と少し解説が違う部分があります。
動画内://*[@id="topicsfb"]/div[1]/ul[1]/li[2]/a
解説://*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a

【STEP.1】マクロを作成

1

Yahooにアクセス

https://www.yahoo.co.jp/

2

記憶を開始する

imacros-recored

3

記憶を終了する

imacros-stop

4

名前を変更する(省略可)

「#Current.iim」から「yahoo.iim」に変更しておきましょう。
マクロ名の変更
iMacros XPATHを使ってyahooニュース記事をクリックする手順


【STEP.2】XPATHを取得

1

YahooにGoogle Chromeでアクセス

https://www.yahoo.co.jp/

2

ソースコードを開く

iMacros XPATHを使ってyahooニュース記事をクリックする手順

3

XPATHを取得

iMacros XPATHを使ってyahooニュース記事をクリックする手順

4

XPATHを確認

xpath
//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a

【STEP.3】マクロを編集

1

編集画面を開く

iMacros XPATHを使ってyahooニュース記事をクリックする手順
先ほど「自動で作成されたマクロ」と「取得したXPATH」は以下のようになっています。

iim
VERSION BUILD=8970419 RECORDER=FX
TAB T=1
URL GOTO=https://www.yahoo.co.jp/
xpath
//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a
2

マクロを編集する

赤色:追加した部分
オレンジ色:変更した部分
緑色:メモ書き(コメントアウト)
iim
VERSION BUILD=8970419 RECORDER=FX
TAB T=1
URL GOTO=https://www.yahoo.co.jp/

'2記事目をクリック
TAG XPATH="//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a"

もしも違う記事をクリックする場合はこちら

iim
'1記事目をクリック
TAG XPATH="//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[1]/article/a[1]/a"
'3記事目をクリック
TAG XPATH="//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[3]/article/a[3]/a"


【STEP.4】マクロを再生

1

作成したマクロをクリックする

iMacros XPATHを使ってyahooニュース記事をクリックする手順

2

Playを押す

imacros-play

3. コマンドの解説

XPATH

iim
TAG XPATH="//*[@id="entry"]/section/div[1]/ul/li[1]/a"
TAG XPATH="//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a"
解説
  • TAG
    どこの場所をクリックするか指定するために使用します
  • XPATH(エックスパス)
    XPATHを使うと指示する
  • "(ダブルクォーテーションマーク)
    XPATHを"で両端を囲う
XPATHの作成方法
Google Chromeで取得したXPATHを以下の★の部分に貼り付けします。

TAG XPATH="★ここに貼り付ける★"

POSがざっくりした位置を指定するのに対して、XPATHが正確な位置を指定することができるコマンドです。

次の項目で、どのように位置を指定しているのか確認してみましょう。

XPATH【練習用サイト】の場合

図のように広い範囲から、小さい範囲を順番に指定しています。

解説に使ったのは①練習編のXPATH【練習用サイト】です。


Yahooの場合

情報量が多いサイトなので難しく思えますが、先ほどと同じく順番に範囲を指定しています。
注意
Yahooのページがリニューアルされ図と違う部分があります。
以前://*[@id="topicsfb"]/div[1]/ul[1]/li[2]/a
現在://*[@id="tabpanelTopics1"]/div/div[1]/ul/li[2]/article/a

解説に使ったのは②実践編のYahooです。

ノーノちゃん

なるほど、こんな感じに正確な位置を指定しているんだね。
はい。必要はありませんが、Webの知識(HTML、CSS)があれば自分で一から作成することもできます。

テイくん

4. よくあるエラー事例

XPTH形式になっていない場合のエラーです。"(ダブルクオーテーション)で両端を囲い忘れていたり、半角ではなく全角になっていないかなど再度確認しましょう。
指定したXPATHの位置が間違っている、もしくは見つからない場合のエラーです。再度Google ChromeでXPATHを取得してみましょう。

5. まとめ

今回【PART.9】ではXPATHを使って、文字やリンク先URLが変わってもクリックできる方法をお伝えしました。

このコマンドは使用頻度が少ないですが、覚えていると凄く役に立ちます。

【PART.9】まとめ
  • POSでうまく作成出来なかった時に使用
  • Google Chromeを使って取得
  • 自分で作成する必要はなし

次回予告

次回【PART.10】は、今まで出てきたコマンドの復習と新しいマクロの一覧になります。

サンプルマクロを大量に載せていますので、今後のiMacros作成に役立てて頂ければと思います。
iMacrosコマンド一覧と使い方 iMacros:コマンド一覧と使い方(大量のサンプルマクロあり)【PART.10】