曜日や日時、時間帯に処理を実行するjsライブラリ「self-timer.js」

動かしたい時間帯や日時、曜日などに 処理を実行するJSライブラリ「self-timer.js」の紹介です。

"月、水、金曜日に"、 "10日 〜 19日まで"、 "9時 〜 17時までの間"
と言う風に 決まったタイミングで処理を実行したいと思ったことはありませんか？

販促系のサイトであれば " 毎月25日はポイント2倍 " と 23日~25日に通知バーを出したり
定休日があるところなら " 毎週火曜日は定休日 " と 前日の月曜から火曜日にアラート。

ニュース系のサイトであれば、
サイドバーのコンテンツが曜日毎に切り替わったりすると面白いかもしれません。

例えばサイトにアクセスした時、
" *3月 〜 5月* *毎月5の付く日* *9時 〜 23時* にキャンペーン用のalertを出す "
なんてコードを書く時は少し面倒です。

" 上記の様なことが、簡単に書けるライブラリがないかな? " と思って色々探していましたが、
見つからなかったので「self-timer.js」というJavascript用のライブラリを作ってみました。

/* self-timer.jsを使って、
 * "3,4,5"月の"5,15,25"日、"9:00 ~ 23:59"にアラートを出すサンプル
 */

// initialize
var st = new SelfTimer(new Date());

// month: 3,4,5  day: 5, 15, 25
st.in(true)
    .MonthSelects([3, 4, 5])
    .Days([5, 15, 25], function() {
      //  9 to 23 o'clock
      st.at().HoursBetween(9, 23, function() {
        // callback
        alert("何か表示");
      });
    });

self-timer.jsを使うと 指定した 日時や曜日、日付のコールバック処理が簡単に書けるようになります。
 

self-timer.jsの導入は'npm'と'CDN'からの読み込みに対応しています。
( サーバー上でもブラウザ上でも動作します * 一部の機能はブラウザ専用 )

# ターミナル上でnpmコマンドを使ってインストールする場合
npm install self-timer --save

ブラウザ上でCDNから読み込む場合
<!-- callbackベース -->
<script src="https://unpkg.com/self-timer/dist/selftimer.min.js"></script>

<!-- promise -->
<script src="https://unpkg.com/self-timer/dist/selftimer-promise.min.js"></script>

<!-- promise-polyfill -->
<script src="https://unpkg.com/self-timer/dist/selftimer-promise-polyfill.min.js"></script>

self-timer.jsには3種類のファイル、2通りの処理の書き方があります。
( * 用意されている機能は共通です )

- self-timer.js
  ・ 一般的な 'function' で書くコールバックを記述します

/* selftimer.js */
// callback
var st = new SelfTimer(new Date())

st.on().Sunday(function() {
  // callback
  console.log("この処理は '日曜日' に実行されます")
});

// コールバックが無いと'true||false'の判定として扱われます 
if( st.on().Tuesday() ) {
  // callback
  console.log("この処理は '火曜日' に実行されます");
}

- self-timer-promise.js
  ・ コールバックを 'Promise' で書く処理 * 'then()' 'catch()'メソッドでコールバックを記述

- selftimer-promise-polyfill.js
  ・ コールバックを 'Promise' で書きますが、ブラウザ用にpolyfillをビルトインしています

/* elftimer-promise.js || selftimer-promise-polyfill.js */

// callback
var st = new selfTimer(new Date());
// promise
st.on()
    .Sunday()
      .then(function() {
        // callback
        console.log("この処理は '日曜日' に実行されます");
      });

// catchを使った例外時の処理
st.on(true) // trueパラメータがあると 'catch'メソッドが使えます
    .Sunday()
      .then(function() {
        // callback
        console.log("この処理は '日曜日' に実行されます");
      })
      .catch(function(){
        // callback
        console.log("この処理は '日曜ではない日' に実行されます");
      });

self-timer.jsは4つのグループ ( .on, .at, .in, .is ) で機能が分けられています。
( * callback , promise共通 )

SelfTimer.グループ().メソッド()

執筆時点 ( v1.1.0 ) では22個のメソッドが用意されていますが 幾つかザックリと紹介します。

・ライブラリの読み込み

<!-- ブラウザ -->
<script src="self-timer/selftimer.min.js"></script>
<script src="self-timer/selftimer-promise-polyfill.min.js"></script>

/* es6 / 2015 ( *babelを使う場合 ) */
// callback
import SelfTimer from 'self-timer';
// promise
import SelfTimer from 'self-timer/dist/selftimer-promise';
// promise-polyfill
import SelfTimer from 'self-timer/dist/selftimer-promise-polyfill';

/* CommonJS ( *node.js ) */
// callback
var SelfTimer = require('self-timer');
// promise
var SelfTimer = require('self-timer/dist/selftimer-promise');

・ .on() : 主に曜日関係の処理をする時

- on().Sunday( task ) : 日曜日に処理を実行

/* -- 利用可能なメソッド --
  日 : Sunday(), 月 : Monday(), 火 : Tuesday(), 水 : Wednesday(),
  木 : Thursday(), 金 : Friday(), 土 : Saturday()
*/

var st = new SelfTimer(new Date());

st.on().Sunday(function() {
  // callback
  console.log("この処理は '日曜日' に実行されます")
});

- on.().DatesBetween( from, to, task ) : 指定した開始日から終了日までの期間無いなら処理を実行

var st = new SelfTimer(new Date());

// DatesBetween() * 2016年11月２日 ~ 2016年11月17日まで
st.on().DatesBetween('2016-11-2', '2016-11-17', function() {
  // callback
  console.log("この処理は '2016年11月2日 ~ 2016年11月17日' の期間に実行されます");
});

・.at() : 時間関係の処理

- at().Between( from, to, task ) : 指定した開始時間から終了時間の間なら処理を実行

// initialize
var st = new SelfTimer(new Date());

// Between() usage
st.at().Between('9:00 am', '5:30 pm', function() {
  console.log("この処理は '午前9時 〜 午後5時30分' に実行されます");
});

・.in() : 主に日付関係の処理

- .in().DaysBetween( from, to, task ) : 指定した開始日から終了日の期間なら処理を実行

// initialize
var st = new SelfTimer(new Date());

// DaysBetween() usage
st.in().DaysBetween(10, 16, function() {
  // callback
  console.log("この処理は '10日 〜 16日' に実行されます");
});

- .in().MonthSelects( months, task ) : 指定した月(複数可)に処理を実行

// initialize
var st = new SelfTimer(new Date());

// MonthSelects() usage
st.in().MonthSelects([7, 8], function() {
  console.log("この処理は '7月、8月' に実行されます");
});

・.is() : 判定で使う処理

​- .is().Lang( language, task ) : * Webブラウザのみ
指定した言語とブラウザのuser-browser-languageがマッチした時に処理を実行

// initialize
var st = new SelfTimer(new Date());

// Lang()
st.is().Lang('ja', function() {
  // callback
  console.log("この処理はブラウザの言語が 'ja(日本語)' の時に実行されます");
});

以上がself-timer.jsの紹介でした。

ポップアップを曜日や時間帯によって表示するタイミングをコントロールしたり、
読み込むテンプレートを季節によって変更。
react.jsを使っているのなら日付や曜日、時間帯によってrenderの種類を変えるなど。

使い方によっては面白いことが出来ると思うので、気になった人はゼヒ×2チェックしてください！

self-timer.js: GitHubレポジトリ / ドキュメント