Tampermonkeyを使った日々の業務改善

Tampermonkeyを使った日々の業務改善

はじめに

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

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

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

Tampermonkeyとは

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

元々はMozilla Firefox用の拡張機能 Greasemonkey に由来する拡張機能ですが、この拡張機能は任意の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);
})();

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

カメラとマイク両方オン
マイクのみオン
カメラのみオン
両方オフ

これを見て「今はタイトル⭕️だから声が聞こえる状態」のように判断できます。地味な対応ですが、結構役立ちます。

さいごに

今回挙げた改善はものすご〜〜〜〜〜〜く地味な修正です。ですが、毎日使うものなのでチリも積もればなんとやら。かなり時間とストレスが減ります。

仮にこの問題によって1回10秒、1日5回無駄な時間が減るとします。すると1年(240日)で200分の無駄な時間が削減されます。これによって50人の問題が解決した場合、年間で166時間削減されます。そう考えると効果は大きいです。

今回はGoogle Chrome拡張を使った改善方法について記載しましたが、他にもちょっとした工夫で改善できる業務はたくさんあると思います。みなさんもいろいろ試してみてください。

採用情報

メンバーズエッジで最高のチームで最高のプロダクトを作りませんか?

最高のプロダクトをつくる 最高のチームで働く

在宅でも、地方でも、首都圏でも。多様な働き方で最高のチームをつくり、お客様のプロダクトパートナーを目指します。アジャイル開発を通じ、開発現場の第一線で活躍し続けたいエンジニアを募集しています。