Web サイトを使用していると「こうできたらもっと便利なのに」等と思うことが多くあると思います。

そういったとき、以前よりブックマークレットが使われてきました。 また、拡張機能・アドオンの登場により、ブックマークレットのように自発的に処理を動作させるだけではなく、 起動タイミングを設定できたりブラウザの API を呼び出すことができるようになりました。

しかし、公開されている多くの物がメジャーなサイトのみの対応だったり、多くの需要がある機能であることが多く、 特定のサイトの要望を必ずしも満たすものではないことがあります。

更に、開発元に改善して欲しい旨を伝えても中々実現されない、ということもあるかと思います。

今回は、そのような Web サイト上の問題を自分たちで改善、修正が行える UserScript を紹介します。

UserScript とは

UserScript はブラウザでユーザーが用意したスクリプトを実行する為の仕組み、またはそのスクリプトを指します。実態は JavaScript です。

2005 年に Firefox のユーザースクリプトマネージャーアドオン Greasemonkey が誕生し、その中で使用されているスクリプトが UserScript でした。 そのアドオンにちなんで Greasemonkey スクリプトと呼ばれることもあります。

その後、様々なブラウザでユーザースクリプトマネージャーの拡張機能が作成されました。

ブラウザ ユーザースクリプトマネージャー
Google Chrome Tampermonkey, Violentmonkey
Firefox Greasemonkey, Tampermonkey, Violentmonkey
Safari Tampermonkey
Microsoft Edge Tampermonkey

UserScript の探索

Uまずは先人たちが作成されている UserScript を体験してみましょう。

UserScript を探すのにオススメなのは Greasy Fork という UserScript 用のリポジトリサイトです。

Greasy Fork は

  • @require で呼び出す CDN 等を動的に変更できないリンク先(ホワイトリスト化されている)を使用しているスクリプトを公開されている
    • これによりセキュリティリスクが軽減される
    • 詳しくはこちらを参照
  • スクリプトのバージョン管理機能が備わっている
  • スクリプトの人気がわかる
    • デイリーのインストール数と総合インストール数が記録されている
  • 開発者にフィードバックが送信できる
  • スクリプトの説明がある

が可能となっています。 また、 GistUserScript 【使いたいサービス名】 で検索するとニッチな UserScript が見つかります。

UserScript の作成

UserScript を見つける方法はわかりましたが、それでも課題が解決されないこともあります。 そんなときは自分で UserScript を作成しましょう。

今回は例として、 「Gmail において、送り先のドメインに応じて色を変えて警告する」 UserScript を作成してみます。

UserScript ヘッダーの定義

UserScript が唯一通常の JavaScript と異なるのが、独自で定義されているヘッダーが存在する点です。 これにより UserScript の様々な制御が可能となります。

例えば、

  • UserScript を走らせる前に、CDN などから JavaScript のライブラリを読み込む
  • UserScript をホスティングして、バージョンが上がったらスクリプトを更新する
  • UserScript をどの Web サイトで実行するかを指定する

などができるようになります。 詳しくは Tampermonkey Documentation をご覧ください。

さて、それでは「Gmail において、送り先のドメインに応じて色を変えて警告する」 UserScript 用にヘッダーを定義していきます。

// ==UserScript==
// @name         Gmail Internal and External Domain Alert
// @namespace    https://mail.google.com
// @version      1.0.0
// @description  This script will visually warn you when sending mail to other than the regulated domain in Gmail.
// @author       Tadayuki Onishi
// @include        /^https:\/\/mail\.google\.com\/mail/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/gmail-js/0.7.2/gmail.min.js
// @downloadURL  https://kenchan0130.github.io/assets/posts/2018-05-21/1/gmail_internal_and_external_domain_alert.js
// @updateURL    https://kenchan0130.github.io/assets/posts/2018-05-21/1/gmail_internal_and_external_domain_alert.js
// @supportURL   https://kenchan0130.github.io
// ==/UserScript==

@include にて、URL または URL の正規表現を指定することで Gmail のサイトのみで実行するようにしています。 また、 @require を使用して jQuery および gmail.js を事前に読み込むようにしています。

ここで特に重要なのは @version@downloadURL@updateURL です。

ブックマークレットの欠点は、作って「ハイ終わり!」になってしまうことでした。

しかし、 UserScript ではスクリプトをホスティング、および変更が合った際に @version をインクリメントすることにより、クライアント側で手動または自動で、@updateURL に記載されているホスティング先の UserScript に更新することができます。

これにより継続的なメンテナンスが可能となります。

UserScript の処理部の実装

ここからは普段の JavaScript と同じであるため深くは記載しません。 今回の実装のゴールは、「メールアドレスのドメインが internal と external かによって背景色を変更する」としてみました。

const setBackGroundColorToRecipient = () => {
  // ここに宛先の背景色を変える処理を入れるが省略
};
// MutationObserver を使用することで DOM が変更された際に関数を走らせることができる
const setBackGroundColorObserver = new MutationObserver(setBackGroundColorToRecipient);
// gmail.js の Gmail のインスタンスを生成
const gmail = Gmail();
// Gmail の宛先が変更されたイベントのコールバックを使用して背景色を変更する処理を登録する
gmail.observe.on('recipient_change', () => {
  setBackGroundColorToRecipient();
  $('form').find('[email*="@"]').each((index, element) => {
    setBackGroundColorObserver.observe($(element).closest('form')[0], {
      attributes: false,
      childList: true,
      characterData: true,
      subtree: true
    });
  });
});

実際に動作するスクリプトはこちらよりダウンロード可能です。 Gmail の旧 UI および新 UI でも動作を確認しています。

UserScript の登録

作成したらデバッグも兼ねて UserScript を登録してみましょう。 今回は Google Chrome の Tampermonkey を使用をしてみます。

  1. 設定画面にて「新規スクリプトを追加」を押します。 新規スクリプト追加

  2. スクリプトをエディタ内に記載して、 [ctrl + s] または保存アイコンをクリックして保存を押します。 スクリプトの追加と保存

  3. Gmail のサイトをリロードして結果を確認します。今回は gmail.com を internal のドメインとし、internal のドメインの場合、背景もデフォルトのままにする設定を行ったため gmail.com のアドレスは色が変わっていません。 Gmail にスクリプトが適用された結果 Gmail にスクリプトが適用された結果(ポップアップ)

無事スクリプトが設定、実行されました。

まとめ

UserScript について紹介しました。

先人が作成したスクリプトを使用するもよし、自分でスクリプトを作成するもよしです。 しかし、外部の方が作成されたスクリプトを利用する際はセキュリティのリスクがあるため、内容を確認して慎重にお使いください。

今回は例として「Gmail において、送り先のドメインに応じて色を変えて警告する」 UserScript を作成しましたが、 実態は JavaScript であるため、皆さんが解決したい多くの課題を改善・解決することが可能となります。

UserScript をうまく使用して業務を改善していきましょう!