Tampermonkeyでスケジュール通知機能を作ってみた

こんにちは!昨年12月に入社したエンジニアのジョンダビンです。

実は私は、作業に夢中になり、スケジュール登録をしておいた予定を忘れてしまったことがあります。
特に最近は在宅勤務となり、周りに他のメンバーがいないので、更に気付きにくい状態となってしまいました。

そこで今日は自分が使っているスケジュール通知機能について紹介しようと思います。

1.注意事項

こちらの機能は以下の問題があります。

ChromeからJavascriptへの制限により、Chromeのタブがバックグラウンドにいると、Javascriptが停止し、正常に動かなくなります。

つまり常にスケジュールページを開いたまま、フロントを出してあげないと正常に動きません。

解決方法は未だ思いつかないですが、多分Chromeの拡張機能でできそうな気がします。ですが、そもそもそれが面倒でこちらで作ったため、微妙なところです。。。

もし解決方法が見つかったらまた更新します。

2.Tampermonkeyについて

まずTampermonkeyについて簡単に紹介します。

Tampermonkeyは、ブラウザー拡張機能として利用可能な寄付ウェアのユーザースクリプトマネージャーです。このソフトウェアを使用すると、ユーザーはユーザースクリプトを追加して使用できます。ユーザースクリプトは、Webページの変更に使用できるJavaScriptプログラムです。

その場でJavaScriptを書いて更新すればすぐ実行できるので、結構便利で昔から使っていました。

chrome ウェブストアでインストールできます。

3.通知機能作成

基本説明

それでは実際に作ってみましょう!

新規スクリプトを追加するとまず以下のページが開かれます。

上の部分はスクリプトの設定部分です。こちらのmatchは、自分がこのスクリプトを実行したいウェブサイトのurlを設定するところです。他の項目はそのままの意味なので説明は省略します。

そして自分が実行したい部分のcodeを下の部分に書けば、マッチしたウェブサイトで自動的にcodeの実行します。

機能実装

やりたいことはすごく単純で簡単です。

5分ごとに処理を実行し、スケジュールで次の予定時間が近づいたら、windowsの通知機能で通知を送る。

構造的にはすごく簡単なので、このままdocument.getElementsByClassNameでデータを絞り、時間を計算すれば問題なさそうです。

そして最後に「var notification = new Notification(“通知”);」これで通知を行えば終わりです。

イメージとしてはこんな感じです。

最後に自分のコードを貼っておきます。適当に書いたので、あまり参考にはならないと思いますが、一応問題なく動きます。


// ==UserScript==

// @name         スケジュール通知

// @namespace    http://tampermonkey.net/

// @version      0.1

// @description  スケジュール通知

// @auhtor       You

// @match        http://example.com

// @grant        none

// ==/UserScript==

(function() {
    'use strict';
    setInterval(function () {

        //通知権限請求
        Notification.requestPermission();

        //今日のスケジュールリスト
        var schedules = document.getElementsByClassName('hoge')[0].getElementsByClassName('hogehoge');
        for (var i = 0; i < schedules.length; i++)
        {
            RunNotification(schedules[i]);
        }
    }, 300000); //実施間隔 5分に一回実行
})();

function RunNotification(schedule){
    var nowTime = new Date();
    var year = nowTime.getFullYear();
    var month = nowTime.getMonth() + 1; //getDateはそのまま日数が取得できるがなぜか月は0から始まる謎仕様、、
    var day = nowTime.getDate();

    var startTime = schedule.getElementsByClassName('hoge')[0].textContent.substring(0,5);
    var fullStartTime = new Date(year+'-'+month+'-'+day+' '+startTime+':00');

    var remainTime = (fullStartTime.getTime() - nowTime.getTime())/60000;

    if (remainTime > 0 && remainTime < 10)
    {
        var title = schedule.getElementsByClassName('hoge')[0].textContent;

        // 通知処理
        var notification = new Notification(title+' 開始'+remainTime+'分前');
    }
}

4.まとめ

実はすでにスケジュール通知機能を他の方法で実現した文章が上がっていましたが、見た感じ色々と面倒だったので、こちらの方法で試してみました。

結果としてはスケジュールページをずっと出してあげないと止まっちゃうので、微妙な感じになりましたが、、

また時間があれば解決方法を探してまた更新しておきます。

関連記事

プロジェクトストーリー

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP