Tampermonkeyでスケジュール通知機能を作ってみた
こんにちは！昨年12月に入社したエンジニアのジョンダビンです。
実は私は、作業に夢中になり、スケジュール登録をしておいた予定を忘れてしまったことがあります。
特に最近は在宅勤務となり、周りに他のメンバーがいないので、更に気付きにくい状態となってしまいました。
そこで今日は自分が使っているスケジュール通知機能について紹介しようと思います。
1. 注意事項
こちらの機能は以下の問題があります。
ChromeからJavascriptへの制限により、Chromeのタブがバックグラウンドにいると、Javascriptが停止し、正常に動かなくなります。
つまり常にスケジュールページを開いたまま、フロントを出してあげないと正常に動きません。
解決方法は未だ思いつかないですが、多分Chromeの拡張機能でできそうな気がします。ですが、そもそもそれが面倒でこちらで作ったため、微妙なところです。。。
もし解決方法が見つかったらまた更新します。
2. Tampermonkeyについて
まずTampermonkeyについて簡単に紹介します。
Tampermonkeyは、ブラウザー拡張機能として利用可能な寄付ウェアのユーザースクリプトマネージャーです。このソフトウェアを使用すると、ユーザーはユーザースクリプトを追加して使用できます。ユーザースクリプトは、Webページの変更に使用できるJavaScriptプログラムです。
その場でJavaScriptを書いて更新すればすぐ実行できるので、結構便利で昔から使っていました。
chrome ウェブストアでインストールできます。
3. 通知機能作成
基本説明
それでは実際に作ってみましょう！
新規スクリプトを追加するとまず以下のページが開かれます。
上の部分はスクリプトの設定部分です。こちらのmatchは、自分がこのスクリプトを実行したいウェブサイトのurlを設定するところです。他の項目はそのままの意味なので説明は省略します。
そして自分が実行したい部分のcodeを下の部分に書けば、マッチしたウェブサイトで自動的にcodeの実行します。
4. 機能実装
やりたいことはすごく単純で簡単です。
５分ごとに処理を実行し、スケジュールで次の予定時間が近づいたら、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+'分前');
}
}
5. まとめ
実はすでにスケジュール通知機能を他の方法で実現した文章が上がっていましたが、見た感じ色々と面倒だったので、こちらの方法で試してみました。
結果としてはスケジュールページをずっと出してあげないと止まっちゃうので、微妙な感じになりましたが、、
また時間があれば解決方法を探してまた更新しておきます。