TampermonkeyというChrome拡張をご存知でしょうか?
「GreasemonkeyスクリプトがChromeでも使える」と言ってわかる人は、きっと知らなくても話は早そうですね。
Tampermonkeyってなに?
Javascriptを組み合わせたスクリプトを、特定のウェブページで実行することができる……
といった代物です。
Greasemonkey(グリースモンキー)とは、Mozilla FirefoxおよびSongbird用の拡張機能。後述のユーザースクリプト形式に従ったJavascriptを組み合わせて、ウェブページ閲覧時に実行することができる。
引用:Greasemonkey - Wikipedia
ウェブページを見やすいようにカスタマイズしたり、拡張したりできるそうです。
Javascript操作してるから、当たり前かもしれないですが……
すごい……
元々GreasemonkeyというのがFirefoxのアドオンにあり、それをChromeで使えるようにしたもののようです。
今回は手書きでスクリプトを作成する方法を紹介しますが、既に作られた便利なスクリプトもTampermonkey公式から取得することもできるので、色々調べてみると便利かもしれませんよ!
拡張を導入する
Tampermonkeyは、Chrome ウェブストアからインストールすることができます。
他の拡張と同じで、普通にインストールするだけ。
スクリプトの新規作成
では、さっそくスクリプトを試してみたいと思います。
Tampermonkeyのボタンを押して、「新規スクリプトを追加」を選択します。
するとエディタが表示されますね。
ここにスクリプトを作り込んでいきます。
スクリプトの中身を書く
では、スクリプトの中身を書いていきましょう。
今回は、Googleの検索結果画面にある「設定」のリンクを削除するスクリプトを作ります。
まったくもって需要が無いですね!
いいんです。「正しく動く事」を、目に見えてすぐに確認したいだけなので(笑)
スクリプトの設定をする
まずはスクリプトの設定をします。
「スクリプトの設定をする」という言い回しであってるのかはわかりませんが……
新規作成されたスクリプトを見ると、何やら上部にコメント群がありますね。
コチラを変更していきます。
こんな感じ。
// ==UserScript== // @name test script // @namespace http://www.lisz-works.com/ // @version 0.1 // @description test. // @author lis // @match https://www.google.co.jp/search* // @grant none // ==/UserScript==
項目 | 内容 |
---|---|
@name | スクリプト名 |
@namespace | 自分のサイトとか入力するらしい |
@version | バージョン |
@description | このスクリプトの説明 |
@author | 製作者 |
@match | 対象のURL |
@grant | APIによってここに情報を入力する必要がある? |
他の人に公開とかしないのであれば、基本的には適当で大丈夫かと思います。
ただ、自分でわかるようにする意味も込めて、ある程度ちゃんと書いた方がいいですよ!
注意するポイントとしては、
- @match
- @grant
くらいですかね。
@matchについて
「@match」は、スクリプトを実行するURLを指定します。
ぼくの書いたものは、Googleの検索結果画面のURLです。
ただ検索結果によって、URLは変わってしまいますよね?
なので、共通の箇所「https://www.google.co.jp/search」まで入力して、「*」を付けています。
この「*」が「ワイルドカード」。つまり、「任意の文字」となります。
要約すると、「https://www.google.co.jp/search」で始まるURL~となります。
@grantについて
「@grant」については、ひとまずnoneでよさそうです。
APIによっては、ここに情報を記述しないといけないケースがあるみたい?
こちらに詳しく書かれてそうです。
jQueryを使えるようにする
jQuery使えたら便利ですよね。
ということで、とりあえず使えるようにセットアップ!
スクリプト先頭にあるコメント部分に、このコメントを追加します。
場所はどこでもよさそう。
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
こんな感じで。
// ==UserScript== // @name test script // @namespace http://www.lisz-works.com/ // @version 0.1 // @description test. // @author lis // @match https://www.google.co.jp/search* // @grant none // @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js // ==/UserScript==
こちらのサイトを参考にしました。
ありがとうございました。
jQueryのAPIは、コチラのサイトにまとまってます。
各APIにサンプルもついているので、超絶親切です。
スクリプトの処理部分
さて続いてスクリプトの処理部分です。
前述の通り、
作成するのは
Googleの検索結果画面にある「設定」のリンクを削除するスクリプト
です。
ということコードはコチラ。
(function() { $("#abar_button_opt").css("display", "none"); })();
たった3行です(笑)
簡単な解説を。
処理の大枠はこのように書きます。
この枠に囲われた所を実行してくれます。
(function() { // ココに処理を書く })();
で、実行している処理
$("#abar_button_opt").css("display", "none");
ですが、jQueryのセレクタ(要素)検索を使って、対象の要素を指定しています。
$("#abar_button_opt")
の箇所が、「id=abar_button_opt」の要素を指定しています。
で、後ろの
css("display", "none");
が、CSSの書換えで、「display:none」をセットしています。
要素を消すCSSですね。
で、ID指定とCSS書換えの間に「.」がいますね。
これは
「このIDのヤツ」に「この処理してね」
というような意味です。
なので
「id=abar_button_opt」の要素に対して、CSS「display:none」をセットしてね
となります。
なので、id=abar_button_optである「設定」のリンクが消えるわけですね。
あとがき
いかがでしたでしょうか。
ぼくは某サイトをいじくる為にコレを入れましたが、便利なスクリプトが沢山出回っています。
自分に合った方法で、サイト閲覧を楽チンにしてみましょう!