Tampermonkeyで業務改善 | メンバーズエッジカンパニーブログ

はじめに

皆さんの会社では働き方改革は進んでいますか?

働き方改革の最終目的は新しいアイデアによってアウトプットを増やし、生産性を上げることです。しかし目の前の仕事に追われている状況では、新しいアイデアは思いつきません。そのためにまずは今行っていることを効率化し、余裕を作ることが必要です。

その効率化のためのツールとして、Tampermonkeyを紹介します。

Tampermonkeyとは

Tampermonkeyとは、Google Chrome用の拡張機能です。

Tampermonkey • Chrome

元々はMozilla Firefox用の拡張機能 Greasemonk ey に由来する拡張機能ですが、この拡張機能は任意のWebサイトにおいて、任意のJavaScriptを実行することが可能です。これを使ってWebサイトの使いやすさを改善し、作業の効率化が行えます。

ただしこの拡張機能は任意のJavaScriptを実行できるため、信頼できないスクリプトを実行するとセキュリティホールになる可能性があります。自分で作成したものや、内容を確認して問題ないもののみ実行しましょう。

このTampermonkeyを使って、次のような問題を解決しました。

Google Meetの離脱問題

メンバーズエッジでは、Google Meetを使ったWeb会議システムを採用しています。このGoogle MeetはWebブラウザで実行します。そのため、間違ってリロード(Mac: ⌘ + R、Windows: Ctrl + R)を押してしまうと、会議室から出てしまいます。

この現象に悩まされていた同僚がいたため、Tampermonkeyを使って解決しました。そのスクリプトは以下になります。

(function() {
    'use strict';

    hotkeys('command+r', function() {
        alert('⌘ + Rでリロードはできません。');
    });

    hotkeys('command+shift+r', function() {
        alert('⌘ + Shift + Rでリロードはできません。');
    });

    hotkeys('ctrl+r', function() {
        alert('Ctrl + Rでリロードはできません。');
    });

    hotkeys('ctrl+shift+r', function() {
        alert('Ctrl + Shift + Rでリロードはできません。');
    });
})();

外部ライブラリ(hotkeys)を使っていますが、わずか19行でリロードを防ぐことができます。

Google Meetのステータスが分かりづらい問題

メンバーズエッジでは拠点間にまたがったチームのコミュニケーションのために、Google Meetで常時接続しています。そのため、ひとりごとが他の人に聞こえないように通常はミュート状態にしています。ですが、その状態が分かりづらいため、誰も聞こえない状態で話すことがよくありました。

そこで次のようなスクリプトを書いてみました。

(function() {
    'use strict';

    function setStatus(status) {
        if (document.title.startsWith("Meet")) {
            document.title = status + " | " + document.title;
        } else {
            document.title = document.title.replace(/^.* \|/, status + " |");
        }
    }

    function checkStatus() {
        const muteButtons = Array.from(document.querySelectorAll("[role='button'][data-is-muted]"));
        if (muteButtons.length === 0) {
            setTimeout(checkStatus, 1000);
            return;
        }

        const voiceIsMuted = muteButtons[0].getAttribute("data-is-muted") === "true";
        const cameraIsMuted = muteButtons[1].getAttribute("data-is-muted") === "true";
        if (voiceIsMuted && cameraIsMuted) {
            setStatus("❌");
        } else if (voiceIsMuted) {
            setStatus("🎥");
        } else if (cameraIsMuted) {
            setStatus("🎤");
        } else {
            setStatus("⭕️");
        }

        setTimeout(checkStatus, 1000);
    }

    setTimeout(checkStatus, 1000);
})();

このスクリプトを実行すると、以下のようなアイコンがタイトルに出ます。上から「カメラとマイク両方オン」「マイクのみオン」「カメラのみオン」「両方オフ」になります。