RMSでメールアドレス検索するThunderbirdのWebExtensions版アドオンを作った話 その3

• RMSでメールアドレス検索するThunderbirdのWebExtensions版アドオンを作った話 その1
• RMSでメールアドレス検索するThunderbirdのWebExtensions版アドオンを作った話 その2
• RMSでメールアドレス検索するThunderbirdのWebExtensions版アドオンを作った話 その3

皆様どうも、こんにちは！
こまりの自称ソフトウェアエンジニア、桑木です。

前回の記事では、

1. ThunderbirdからURLを別アプリケーションに伝える
2. 別アプリケーションではOSのデフォルトブラウザでURLを開く
3. ブラウザでメールアドレス検索を実行する

この3段階の手順のうち、2番目で使用する別アプリケーションの作成とインストールについてご紹介しました。

今回は、最後の段階であるブラウザでのメールアドレス検索の実行についてご紹介します。

RMSの注文検索画面

RMSとは楽天のショップ用管理システムのことで、商品登録や注文の処理などショップの運営に関する操作をすることができます。このRMSはウェブブラウザでアクセスして、操作毎にページ遷移するオーソドックスなウェブシステムになっています。

このシステムには注文情報を条件指定して検索できる「注文検索」画面が存在します。この画面を開いたばかりの状態では、検索条件の注文日欄に「昨日～今日」の日付が入力されていて、ステータス欄は「受注後～発送前」を表すステータスがチェックされています。

この状態からメールアドレス検索をする場合、「メールアドレス欄にメールアドレスを入力」「注文日の範囲を広げる」「全てのステータスをチェック」してから「検索ボタンを押す」ことになります。

ユーザスクリプトによるブラウザ拡張

Thunderbirdのアドオンからブラウザにメールアドレスが伝えられたら、検索画面におけるこの一連の手順を自動的に実行できれば目的は達成されます。

このようなブラウザ側の自動処理は、ブラウザの拡張機能(アドオン、プラグイン)を作ることで実現できます。しかし、1回目の記事でやったようにThunderbirdの簡単なアドオンを作成するだけでもそれなりに大変でした。

そこで、今回は登録したスクリプトを自動で実行してくれる既存の拡張機能を利用します。自前で拡張機能を作るほどの自由度はないものの、簡単に作れるので色々と便利です。

Tampermonkey

このような拡張機能はいくつか存在しますが、今回はTampermonkeyを使用します。

これは、あらかじめJavaScriptで記述したユーザスクリプトを登録しておくことで、指定したURLにマッチするページを開いたらそのスクリプトを実行してくれます。ここで実行されるスクリプトはそのページに元々存在するスクリプトと同じように実行されるので、DOM操作やAjaxなど通常のウェブ開発で使っている技術をそのまま使うことができます。

Tampermonkeyへユーザスクリプトを登録するには、Tampermonkeyの管理画面で直接ソースコードを記述するとか、拡張子が.user.jsのURLにブラウザでアクセスするなどの方法があります。

RMS拡張ユーザスクリプト

実際の業務では今回のメールアドレス検索だけでなく、色々な機能をRMSに追加するユーザスクリプトを使用していますが、この記事用にメールアドレス検索機能だけ抽出したものを記載します。

// rms-rp_extension.user.js
// ==UserScript==
// @name         RMS Thunderbird メールアドレス検索
// @namespace    http://komari.co.jp/
// @version      1.4.0
// @author       Komari co. ltd.
// @match        https://order-rp.rms.rakuten.co.jp/order-rb/search-order-sc/*
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

(function rms_extension() {
    'use strict';

    function searchingOrderRPay(email) {
        var from = new Date();
        from.setDate(from.getDate() - 62);
        $("#startDate").val(from.getFullYear() + "-" + ("00" + (from.getMonth() + 1)).substr(-2) + "-" + ("00" + from.getDate()).substr(-2));
        $("input[name='orderProgressList']").prop("checked", true);
        $("#ordererMailAddress").val(email);

        $("#rms-content-save-button").first().click();
    };

    // Thunderbird連携
    var email = location.search.match(/(?<=[&?]ordererMailAddress=)[^&]*/);
    if (email) {
        searchingOrderRPay(decodeURIComponent(email[0]));
    }
})();

Thunderbirdのアドオンでは、注文検索画面のURLにordererMailAddressパラメータを付加したURLを生成していて、それを最終的にブラウザで開くことになります。

このユーザスクリプトはRMSの注文検索画面を開くと実行され、URLにordererMailAddressパラメータが付加されていれば、日付と注文ステータスとメールアドレスを自動入力して検索ボタンをクリックする処理を実行しています。たったそれだけのスクリプトです。

完成

言ってしまえば、Thunderbirdでボタンを押したらそのメールアドレスをブラウザで検索するだけ、という機能の実装について3回に渡ってご紹介しました。

Thunderbirdアドオンの作成、Node.jsの実行ファイル化、インストーラの作成、ユーザスクリプトの作成、と手順はやたら多いですが、それぞれの部分でやっていることは単純なものばかりです。結果としてとてもチュートリアル的な題材だったと思います。

さすがに、これらが全て連携するような機能を作る事はそうそうないと思いますが、部分部分の技術は何かしら使うことがあるでしょう。その際の参考になれば幸いです。