TopiMacros > 2014年5月
2014年5月30日

iMacrosのTAGコマンド詳説

May 30,2014 1:55 AM
Tag:[]
Permalink

iMacrosのTAGコマンドについて解説します。

iMacrosのTAGコマンド

1.はじめに

ブラウザの操作をマクロ化する「iMacros」」で紹介したとおり、iMacrosはブラウザ上の操作をマクロ化するためのアドオンです。

本エントリーではiMacrosコマンドのひとつである、TAGコマンドについて紹介します。

マクロコマンドを編集するには、編集したいマクロファイルをクリックしたあと、「Manage」タブ→「Edit Macro」をクリックしてください。

マクロコマンドを編集

2.TAGコマンドとは

TAGコマンドは、特定のHTML要素を抽出、あるいはHTML要素にテキストを設定するためのコマンドです。

次の例は、Google検索のページにアクセスして「hoge」という検索文字を入力する動作をマクロにしたものです。

URL GOTO=https://www.google.co.jp/
TAG POS=1 TYPE=INPUT:TEXT FORM=ID:tsf ATTR=ID:lst-ib CONTENT=hoge

1行目のURLコマンドでGoogle検索のページにジャンプし、2行目のTAGコマンドで検索フォームに「hoge」という文字列を設定しています。

URLコマンドは直観的に分かりますが、TAGコマンドの指定方法がやや分かりにくいと思います。

ということで、次項からTAGコマンドによる特定要素の指定方法を解説します。

3.TAGコマンドのフォーマット

TAGコマンドで要素を特定するための最低限のフォーマットは次のとおりです。

TAG POS=n TYPE=要素名 ATTR=属性名

サブコマンドは次の3種類です。

  • POS:要素の出現順序
  • TYPE:特定する要素名
  • ATTR:要素を特定するための情報

上記以外にもいくつかのサブコマンドがありますので、それらについては後述します。

ここではサンプルとして、ページ内に複数存在するa要素およびinput要素から特定の要素を指定する方法について解説します。

4.id属性で要素を特定する

特定したい要素にid属性が割り当てられている場合、TAGコマンドに次のように記述します。

TAG POS=1 TYPE=A ATTR=ID:id属性値

TYPEにはa要素を示す「A」、ATTRには「ID:」を記述し、その隣にid属性値を指定します。POSは出現順序で、要素を一意に特定できる場合は常に「1」を指定します。

たとえば次のようなHTMLがあるとします。

<a href="#" id="a">aaa</a>
<a href="#" id="b">bbb</a>
<a href="#" id="c">ccc</a>
<a href="#" id="d">ddd</a>
<a href="#" id="e">eee</a>

このHTMLで3番目のa要素を特定したい場合、

TAG POS=1 TYPE=A ATTR=ID:c

と記述します。これで「id属性がcであるa要素」となります。

5.テキストで要素を特定する

要素にid属性が存在しない場合、テキスト(要素の内容)で識別する必要があり、TAGコマンドに次のように記述します。

TAG POS=1 TYPE=A ATTR=TXT:テキスト

TYPEに「A」、ATTRに「TXT:」を記述し、その隣にテキストの内容を指定します。POSは前項同様「1」を指定します。

たとえば次のようなHTMLがあるとします。

<a href="#">aaa</a>
<a href="#">bbb</a>
<a href="#">ccc</a>
<a href="#">ddd</a>
<a href="#">eee</a>

このHTMLで3番目のa要素を特定したい場合、

TAG POS=1 TYPE=A ATTR=TXT:ccc

と記述します。これで「テキストがcccであるa要素」となります。

6.出現順序で要素を特定する

指定する要素の要素名とコンテンツの内容がすべて同一である場合、POSとTEXTで識別します。

TAG POS=n TYPE=A ATTR=TXT:テキスト

TYPEに「A」、POSに出現順序の番号、ATTRには「TXT:」を記述し、その隣にテキストの内容を指定します。

たとえば次のようなHTMLがあるとします。

<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>
<a href="#">aaa</a>

このHTMLで3番目のa要素を特定したい場合、

TAG POS=3 TYPE=A ATTR=TXT:aaa

と記述します。これで「テキストがaaaである3番目のa要素」となります。

7.name属性で要素を特定する

次にinput要素の指定です。

input要素の場合、id属性の他にname属性を使うことができます。

特定したい要素にname属性が割り当てられている場合、TAGコマンドに次のように記述します。

TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:name属性値

TYPEにはinput要素を示す「INPUT:」とその隣にtype属性値の「TEXT」、ATTRには「NAME:」を記述し、その隣にid属性値を指定します。POSは出現順序で、要素を一意に特定できる場合は常に「1」を指定します。

たとえば次のようなHTMLがあるとします。

<input name="a" type="text" />
<input name="b" type="text" />
<input name="c" type="text" />
<input name="d" type="text" />
<input name="e" type="text" />

このHTMLで3番目のa要素を特定したい場合、

TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:c

と記述します。これで「name属性がcであるinput要素」となります。

なおinput要素の場合、値を設定するケースだと思いますので、CONTENTも同時に設定します。CONTENTは値を設定するサブコマンドです。

TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:name属性値 CONTENT=設定内容

8.form要素で要素を特定する

特定する要素の親要素にform属性が存在する場合、FROMサブコマンドを利用することができます。

TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:name属性値 FROM=NAME:name属性値 CONTENT=設定内容

または、

TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:name属性値 FROM=ID:id属性値 CONTENT=設定内容

複数のform要素で同一のinput要素が存在する場合に組み合わせて使います。

たとえば次のようなHTMLがあるとします。

<form name="a">
<input type="text" name="aaa" /><br />
<input type="text" name="bbb" /><br />
<input type="text" name="ccc" /><br />
</form>
<form name="b">
<input type="text" name="aaa" /><br />
<input type="text" name="bbb" /><br />
<input type="text" name="ccc" /><br />
</form>

このHTMLで2つめのformの2番目のinput要素(name="bbb")に「foo」という値を設定したい場合、

TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:b ATTR=NAME:bbb CONTENT=foo

と記述します。

この場合、POSに「1」を設定することに注意してください。

ここまで読み進んだ方であれば、2項のGoogle検索のTAGコマンドの意味がお分かりになったと思います。

9.その他

マクロを作成する場合のポイントです。

  • a要素・input要素以外の特定も可能です
  • class属性値は要素の特定には使われません
  • 特定方法に優先順位は特にありませんが、マクロを作成する場合、id属性 → form属性 + name属性 → name属性 → テキスト → POSという順序で考えるとよいでしょう
Comments [0] | Trackbacks [0]
2014年5月15日

ブラウザの操作をマクロ化する「iMacros」

May 15,2014 2:33 AM
Tag:[]
Permalink

ブラウザの操作をマクロ化する「iMacros」を紹介します。

iMacros

1.はじめに

ブラウザで操作を行う場合、ある決まった手順を行うことがあると思います。

簡単な例では、ブログを投稿する場合のブログツールへのログインから新規作成画面の表示などですが、より複雑な操作を日常的に行なう場合、結構面倒に感じることがあると思います。

本エントリーで紹介する「iMacros」を利用すれば、そういったブラウザ上の操作をマクロ化することができます。

iMacrosはGoogle Chrome/Firefox/IEのアドオンとして提供されています。

クリック動作やフォームへの入力などは、ブラウザの座標ではなくHTML要素や属性を探索して実行しているので、精度はそれなりに高いようです。

またJavaScriptなどによる制御も可能なようです。

ということで今回はインストールから基本な操作について紹介し、高度な機能については別途エントリーしたいと思います。

2.サンプル

YouTubeにサンプル動画をアップロードしたのでマクロの実行イメージをご確認ください。

このサンプルでは、以下の手順を1つのマクロですべて行っています。

  • WordPressのログイン
  • 新規記事作成画面の表示
  • タイトルと本文に文章入力
  • 記事投稿
  • 投稿記事の確認画面表示

3.iMacrosのインストール

ブラウザに応じて、下記のリンクからアドオンあるいは拡張のインストールを行ってください。

iMacros for Chrome
iMacros for Chrome

iMacros for Firefox
iMacros for Firefox

iMacros For Internet Explorer
iMacros For Internet Explorer

ここではFirefoxを例にインストールの説明を進めます。

「ツール」→「アドオン」をクリック。

メニューバー

検索ボックスに「iMacros」を入力してリターン。

検索ボックス

「iMacros for Firefox」の「インストール」をクリック。

インストール

「今すぐ再起動する」をクリック。

インストール完了

再起動されればインストール完了です。

4.マクロの登録

追加されたiMacrosのアイコンをクリック。

iMacrosのアイコン

開いたウィンドウにある「Rec」をクリック。

Rec

「Record」をクリックすると操作のマクロへの記録が開始します。

Record

ここではサンプルとして、Googleの検索ページを表示し、検索フォームに「hoge」と入力して検索結果を表示させてみました。

(クリックで拡大)
サンプル

マクロウィンドウに各操作が順に表示されていきます。

各操作

マクロへの記録が完了したら「Stop」をクリック。

iMacrosのアイコン

この時点ではマクロが「#Current.iim」という一時ファイルに記録されています。

5.マクロの再生

さきほど記録したマクロを再生します。

「Play」タブをクリック。

iMacrosのアイコン

「#Current.iim」を選択して「Play」をクリックすればマクロが再生されます。

iMacrosのアイコン

「#Current.iim」をダブルクリックするだけでも再生できます。

6.マクロの保存

操作を正式なマクロとして保存する場合は、「#Current.iim」をクリックして「Rec」タブの「Save」をクリック。

iMacrosのアイコン

「Name:」に適当な名前を設定して「OK」をクリック。ここでは「テスト」とします。

Save File

これでマクロが「テスト.iim」という名前で保存されました。

マクロが保存

このファイルを選択して再生すれば、記録したマクロを実行できます。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3