flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptでgreasemonkeyを作成する方法2

DOMについて理解する

前回記事:http://yatagarasu0495.hatenablog.jp/entry/2012/02/26/210834

前回は具体的なgreasemonkeyについての記述方法を紹介しましたが、今回は実際にサイトで表示されてあるコンテンツを書き換えていこうと思います。

DOMについて

DOM(Document Object Model)について簡易的に説明すると一種のデータの位置関係を示すツリー構造と言えます。

JavaScriptでDOMについては知らなくても以下の記述を見た方はいると思います。

Sample1

 document.getElementById("sample");
document.getElementsByClassName("sample");
document.getElementsByTagName("p");
document.getElementsByName("sample"); 

基本的にid名及びclass名等から要素を選出して動的に操作を加えるのに使います。

これが簡易的なgreasemonkeyの要素だと言えます。

まずこのDOMに関してのSample1のような書き方が分かったうえでgreasemonkeyは始めて扱うことができます。

ではどうやってサイトのコンテンツを書き換えるのかについて考えてみます。

 

Firebugを使い既存のタグのclass名やid名を取得しつつ動的に変化を加える

FirebugJavaScriptデバッグにかかせないアドオンの一つですが、他にも様々な機能があります。

  • 各要素のid名やclass名の取得が容易
  • DOMタブより変数の値を任意の物に置き換えられる
  • XPATHが取得できる

などがあります。他にも便利な機能はありますが、詳しくはFirebugを実際に使ってみて確かめてください。

今回は一番上のid名やclass名取得が重要となります。

XPATHで動的に変化を加えるのはJavaScriptの範囲では入門、初級を超えるので今回は省きます。

Firebugを使い実際にid名やclass名が取得出来るようになった所で

はてなメッセージを実際にgreasemonkeyで改装していきます。

はてなメッセージは見た目もシンプルでgreasemonkeyの操作がしやすい

Sample2

 <a href="/"><img alt="" src="/images/header-logo.png" class="service-logo"></a>

//http://m.hatena.ne.jp/images/header-logo.png 

Sample2のソースは、はてなメッセージのTOPの画像にあたるものです。

実際にFirebugをonにして画像の上で右クリックしてFirebugで要素を調査してみましょう。調査するとソース画面が現れますがドラッグされている場所が該当する部分です。

そしてこの画像を別の画像に置き換えるという処理をやってみようと思います。

行う事は次の通り

  • class名及びid名を取得する
  • getElementを使い要素を指定する
  • 動的に書き換える

順序はこのようになります。

Sample3

 //<a href="/"><img alt="" src="/images/header-logo.png" class="service-logo"></a>

// class名 : service-logo
// はてなmessageTOP画像をはてなfotolifeTop画像に変える

hatenaImage = document.getElementsClassName("service-logo")[0];
hatenaImage.src = "http://f.hatena.ne.jp/images/logo-hatena.gif"; 

基本これだけです。

Demo

実際に書き変わりましたね。

 

DOMをあまり使っていない人に混合しがちな事をあげると

  • id名はhtml中に一つしか存在しないので配列は存在せず単体で取り出せる
  • class名はhtml中に何度も使えるため配列として保存され有限的に保管される

この二点です、getElementByIdを使った事が多い方にとってClass名の後ろに付く配列の[0]は斬新な書き方に見えるのではないでしょうか!?

class名は複数利用できるので配列を抜かしてしまうと全部の要素に適応される気もしますが実際は上手く動作しないので単体で使用するようにしましょう。

基本的には書き換えはこのパターンの繰り返しです。

greasemonkeyを扱うにあたってDOMは重要な概念となってきます。

DOMを深く理解した上で改めてgreasemonkeyについて扱うとわかり易いかもしれません。

今回は簡単な書き換えでしたが次回からは複雑なpatternを実装していこうと思います。

(CSSだけの書き換えはgreasemonkeyの勤めではないという事も覚えておきましょう)