サイトの表示や動作を自己流にアレンジできる

JavaScriptが使えるようになると、greasemonkeyも使えるようになると言われていますが、個人的にはDOMの概念について理解しておかないと使えないと言っても良いかもしれません。

JavaScriptには大きく分けると

ナビゲータオブジェクト(ブラウザの判別やハンドラ等)
ビルトインオブジェクト(newで始まる予め用意されたオブジェクト)
DOM(Document Model Object いわばDHTML)

基本的にはこの3つです。

ではgreasemonkeyはDOMを理解していないとできないのか!?と言われればそうではありません。主にgreasemonkeyでやっている事は内容の書き換えですのでDOMを用いる場面が多いというのが結論となってきます。DOMを用いなくてもgreasemonkeyは製作出来ますが、基本的にナビゲーター思考の表面上の改変しか出来ないということになります。

では早速簡易的なスクリプトを書いていこうと思います。

Sample1

// ==UserScript==
// @name          User Script
// @namespace     http://hogehoge
// @description   Test Script
// @author        flandlescarlet
// @include       http://hoge/*
// @exclude       http://hoge2/*
// ==/UserScript==

まずgreasemonkeyを始めるにあたって最初の一歩の記述となります。

UserScriptから/UserScriptまでがインストールする際に参照される部分ですので、必ず明記するようにしましょう。

各値の説明

@name : スクリプトの名前(greasemonkeyの管理画面から見える名前にあたるので慎重に考える必要があります)

@namespace : 名前空間と呼ばれ、基本的に@nameが被った時の回避として使います。基本的にはgreasemonkeyを適応させるサイトのドメインで良いでしょう。

@description : スクリプトの説明です。簡単に書いておきましょう。

@author : スクリプト製作者の名前を入れるところです(書いてもいいし書かなくてもいい)

@include : スクリプトを反映させる具体的で範囲的なURLを記入します。サイトによってはプロパティやハッシュ(#や?)でURL尾の形が変動する事があります。その場合にワイルドカードである*で対処します。

@exinclude : スクリプトを反映させないURLです(個人的に無くてもいい気がする)

基本的にはこんな感じになります。後はSample1を参照しつつ考えてみてください。

今回ははてなのTOP画面で適応させる簡易的なスクリプトを製作します。

Sample2

// ==UserScript==
// @name          Hatena Test Script
// @namespace     http://www.hatena.ne.jp
// @description   Test Script
// @author        flandlescarlet
// @include       http://www.hatena.ne.jp/
// @exclude       http://*.hatena.ne.jp/*
// ==/UserScript== 

(function(){
 alert("はてなのTOPページです");
 document.title = "::HATENA::";
})();

先ほどのインストールする際に適応させる空間を書き換えました。

@includeで設定したのは、はてなのTOPページです。特にこのURL以外でのサイトでは反映されないようになっています。

@excludeで設定したのはhttp://*.hatena.ne.jp/*ですが、具体的には以下のサイト全て適応外にしています。

http://m.hatena.ne.jp/

http://m.hatena.ne.jp/setting

http://ugomemo.hatena.ne.jp/

http://h.hatena.ne.jp/follow

ワイルドカードを設置した場所は全てのパターンの文字列を格納していますので結果的にはてなのTOP以外では作動させないという形にしました。

そして本題のスクリプトですが、DOM以外であるJavaScriptを使ってみました。

alert("")で直接サイトに入った時警告を鳴らし、<title>で囲まれた部分を変動させます。

基本的にスクリプトは無名関数で囲むようにしましょう。(function(){})();

DOMを使わない場合基本的にこのようなパターンの事しかできません。

次回は実際にDOMを使用して製作していこうと思います。

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

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

JavaScriptでgreasemonkeyを作成する方法

サイトの表示や動作を自己流にアレンジできる