JavaScriptでgreasemonkeyを作成する方法3
クリックによるイベント作成
前回記事:http://yatagarasu0495.hatenablog.jp/entry/2012/02/27/235214
前回まではCSS関連の変化(動的なユーザーの介入が無い)でしたが
今回は実際にクリック、マウスを乗せるなどのイベント操作でサイトを操作していこうと思います。
各class名やid名及びtag名の抜き取りで一番簡単な方法を再度記述しておきます。
(最終的にはXPATHで各場所を指摘できるようになると良い)
Sample1 : HTML , JavaScript
<div id="menu" class="design" name="user">
<div id="content" class="design" name="user">
<img src="image.png">
</div></div>
// ==UserScript==
// @
// ==/UserScript==
//id名で取得する document.getElementById
id_menu = document.getElementById("menu");
id_content = document.getElementById("content");
//class名で取得する documents.getElementByClassName
section1 = document.getElementsByClassName("section")[0];
section2 = document.getElementsByClassName("section")[1];
alert(document.getElementsByClassName("section").length);//個数表示する
//tag名で取得する document.getElementsByTagName
div1 = document.getElementsByTagName("div")[0];
div2 = document.getElementsByTagName("div")[1];
img1 = document.getElementsByTagName("img")[0];
これがid名、class名そしてtag名での取得となります。
気をつける点はidとcalss,tagの定義で、idは一つだけしか存在してはいけない物であるためelement(要素)は複数系にならず値もそのまま格納されます。
しかしclassとtagは個数が複数あるためelementが複数系となりsが付き
更に値は配列として保存されるということに注意しましょう。
クリックイベントの追加
では以上の事を踏まえたうえで実際にある箇所をクリックしてアラートを出す処理をしてみましょう。
使用するサイトは前回同様にはてなメッセージで行います。
まずは実際にサンプルを書いてみます。
Sample2 : HTML , JavaScript
<!-- はてなメッセージのお知らせ部分のリンクの一部 -->
<a class="message-title" href="/tree?9258791470029364816">[Hatena::Ugomemo]
</a>
// ==UserScript==
// @include http://m.hatena.ne.jp
// ==/UserScript==
message = document.getElementsByClassName("message-title")[0];
message.onclick = function(){ alert(Hello World!!); }
とりあえず、この形にします。
DOMの概念ですが基本的にdocument.getElement("").XXXXX getElementの後ろは"style","イベントハンドラ","innerHTML","ノード関係"これらのオブジェクトが続いていくという形になります。
基本的にこの4つを書けるようにすれば実質万能にサイトは操作が可能になります。
今回のソースはハンドラをelementの後ろにつけるという形にしましたが、もう少し綺麗な書き方があります。
Sample3
// ==UserScript==
// @include http://m.hatena.ne.jp
// ==/UserScript==
message = document.getElementsByClassName("message-title")[0];
message.onclick = function(){ alert(Hello World!!); }
message.addEventListener("click",function(){alert("");},"true");
addEventListenerというものを使います、引数は3つでそれぞれ
"イベントの種類"、"実行する関数の変数及び無名関数でそのまま記述","基本的にtrueを無難に記述"となります。
前半の引数の2つを覚えておくと良いでしょう。
イベントの種類はonを除く("click","mouseover","mouseout")などが該当します
関数は無名関数でかけるのと、変数を表記して関数を呼び出せるのも強いところです。サンプルは無名関数ですが無論、変数にして呼び出すことも可能です。
Sample4
// ==UserScript==
// @include http://m.hatena.ne.jp
// ==/UserScript==
message = document.getElementsByClassName("message-title")[0];
message.onclick = function(){ alert(Hello World!!); }
message.addEventListener("click",eventHandle,"true");
function eventHandle(){
alert("");
}
このようにしても警告表示を出すことが出来ます。
しかしながらこれでは0番目の配列の要素しか評価されず結果的に一番上のリンクにしかアラート関数が行き渡りません、ですのでclass配列を全て回し関数に渡すようにしてやります。
Sample5
// ==UserScript==
// @include http://m.hatena.ne.jp
// ==/UserScript==
messageLength = document.getElementsByClassName("message-title").length;
for(i=0;i<messageLength;i++){
document.getElementsByClassName("message-title")[i].addEventListener("click",eventHandle,"true");
}
function eventHandle(){
alert("50個ちゃんとアラート表示されます");
}
具体的な説明として、配列の個数はdocument.getElements("class").lengthで 取得ができます。for文で配列は0から始まりますのでi=0と指定して配列長さを格納したmessageLength(今回は50個)より値が下の場合関数を作るという処理をします。これで50件全部のリンクにはクリックした時にアラートを出すというイベントを全て作成したという事になります。
イベントハンドラと具体的な関数の製作の説明は今回はここまでにしたいと思います。次回からは具体的にどのような感じで製作すれば便利にサイトを扱えるようになるかについて説明していきたいと思います。
