Greasemonkeyによるアプリケーション開発

第1回 Greasemonkeyによるアプリケーション開発の準備

この記事を読むのに必要な時間:およそ 5.5 分

本稿ではGreasemonkeyを使ってアプリケーションを作る際の筆者なりのコツを紹介しようと思います。単に筆者が「コツ」だと思っていることを紹介するだけでは面白くありませんので,ちょっとしたアプリケーションを題材にして,作成していく過程をステップに分けて解説していく形式をとることとします。

さて早速Greasemonkeyによるアプリケーションの作成方法を紹介しましょう,といいたいところですが,「Greasemonkeyによるアプリケーションとは何だ?」「そもそもGreasemonkeyとは何だ?」という疑問をお持ちの方もおられると思いますので,第1回は「Greasemonkeyとは何か」ということと,その基本的な使い方を紹介したいと思います。Greasemonkeyをよくご存知な方は,次週までお待ちください。

Greasemonkeyとは

GreasemonkeyはFirefox用の拡張機能の一つで,任意のページに対し,そのページのロード時(厳密にはページのロードが完了する直前の,ページのDOM解析処理が完了したタイミング)に設定したJavaScriptを実行する機能をもったものです。JavaScriptはページ内の要素を操作することで,ページの見栄えを変えたり使いやすくしたりできます(残念ながら使いにくくしたり,全く使えないものにさえできてしまいます)。

例えば

  1. ページ内の広告を表示しないようにする
  2. 本文の文字を読みやすいフォントサイズに変える
  3. 検索サービスの結果ページに別の検索サービスの検索結果を並べて表示する

といったことができます。

Greasemonkeyは単にインストールしただけではほとんど変化は起こりません。上記のような変化をもたらすのはGreasemonkeyにインストールされるユーザスクリプトと呼ばれるJavaScriptです。ユーザスクリプトをインストールすることで上記のような処理をページに施すことができます。

以上で「Greasemonkeyとは何だ?」という問いにはざっくりと答えることができたと思います。では「Greasemonkeyによるアプリケーション」とは何でしょう?

ユーザスクリプトはページにちょっとした機能を追加したり,レイアウトを変更したり,別サイトの情報を追加したり,といった用途のものがほとんどです。本稿ではそういった用途とはちょっとだけ趣向を変えて,ページ上で動作するアプリケーションを作ってみよう,ということを意図して,これを「Greasemonkeyによるアプリケーション」と呼ぶこととしました※1)。第2回以降では,カレンダアプリケーションを題材としてGreasemonkeyによるアプリケーション開発の話を進める予定です。

※1
「Greasemonkeyによるアプリケーション」という言葉に厳密な定義があるわけではありません。また,「Greasemonkeyアプリケーション」という言葉はおそらくAUSGANG SOFTこのページで登場したのが初めてだと思います(そこでは「グリモンアプリ」と書かれていますが)。

Greasemonkeyの基本的な使い方

「Greasemonkeyとは何か」がざっくりと分かったところで,基本的な使い方を説明します。

(1)Greasemonkeyのインストール

Greasemonkey :: Firefox Add-onsのページでGreasemonkeyをインストールすることができます。ページ中央のインストールボタンを押します。はじめてhttps://addons.mozilla.orgのサイトで拡張機能をインストールする場合はおそらくFirefoxがそのインストールを妨げ,その旨を伝えるメッセージがおそらく画面の上部に表示されます。その警告メッセージにあるボタンを押すことでインストールを妨げる機能から除外するサイトを設定するダイアログが現れますので,そのダイアログを使ってインストールできるように設定します(ボタンを押すだけです)。その上で再度ページ中央のインストールボタンを押すとGreasemonkeyをインストールするか否かを尋ねるダイアログが現れますので,そこでインストールボタンを押せばダウンロードおよびインストールが開始されます。

インストール完了後,Firefoxを再起動するとステータスバーの右端の方に猿の顔のアイコンが現れます。このアイコンでGreasemonkeyの管理を行うことができます。このアイコンをクリックすると色がグレーになります。グレーのときはGreasemonkeyの機能がオフになります。再びクリックすることでカラーになり,Greasemonkeyの機能がオンになります。このアイコンでコンテキストメニューを表示させる(Windowsなら右クリック,Macならコントロールキーを押しながらクリックする)と以下のようなメニュー項目が現れます。

  • 現在のページで実行されるように設定されているユーザスクリプトのリスト(選択すると有効/無効をトグル設定できる)
  • ユーザスクリプトで登録されているメニュー項目
  • 新しいスクリプトの作成
  • Greasemonkey管理画面の表示
  • Greasemonkeyのオン/オフ

以上でGreasemonkeyを利用する環境は整いました。

Greasemonkeyの猿の顔のアイコンと,コンテキストメニュー

Greasemonkeyの“猿の顔のアイコン”と,コンテキストメニュー

(2)ユーザスクリプトのインストール

GreasemonkeyがインストールされているFirefoxでユーザスクリプトにアクセスすると,そのソースを読む(Show Script Source)か,インストールする(Install)(もしくはキャンセル(Cancel)するか)を選択するダイアログが現れます。インストールしても大丈夫だと判断するのであればインストールボタンを押しましょう。インストールする前に一通りソースを読んで危険か否か判断しておきたい場合はソース表示ボタンを押しましょう。筆者はソース表示ボタンを押してソースを確認することをお勧めします。

インストール後,インストールしたスクリプトの実行対象のページにアクセスし,そのページがロードされるとスクリプトが実行されます。スクリプトの実行対象ページに関する設定はスクリプト自体に記述されていますが,ユーザが管理することもできます。

著者プロフィール

gotin(ゴチン:GOrdon TImothy Nathanson)

会社員です。肩書きは特にありません。Greasemonkeyは会社の後輩が使っていてそれ面白いじゃんって思って使い始めました。自宅サーバで作ったRuby on Railsな自作ブログツールで作った自作ブログにGreasemonkeyのユーザスクリプトを載せたりもしていたんですが,誰にも読んでもらえなくて寂しかったのです。で,作ったままほったらかしにしていたはてなダイアリーに載せたら自作ブログよりかはありがたいことに多少読んでもらえるようになり,その後いろいろあって,そして今ここにいます。

URLhttp://d.hatena.ne.jp/gotin/

コメント

コメントの記入