【JavaScript】週一、x曜日 y時を超えると日付が次のx曜日に変わるスクリプト

2017年9月21日2017年9月28日

1. 1. n曜日までは当日の日付が表示され、次の日からは次のn曜日が表示されるスクリプト。
- 1.1. x曜日のy時を超えると次の日付が次のn曜日になるスクリプト
2. 2. 一週間に一度日付が変わるスクリプト実装方法・手順
- 2.1. 「 ○○月△△日（月）までの注文」の日付部分（次週の締め切り日付）
- 2.2. 「 △△日（月）に出荷」の日付部分（締め切り翌日の日付）
3. 作った表示させるHTML例
- 3.1. 冒頭のテストのHTMLタグ例
- 3.2. テストする方法
4. 3. 応用編 -月曜日以外の曜日で変わるように書き換える方法の解説-
5. x曜日のy時を超えると次の日付が次のn曜日になるスクリプトまとめ

1. n曜日までは当日の日付が表示され、次の日からは次のn曜日が表示されるスクリプト。

久しぶりにスクリプトなんて書いたので自分用のメモついでに。

x曜日のy時までは当日の日付が表示され、次の日からは次のx曜日の日付が表示されるスクリプトです。

商品ページに週一で自動的に日付が変わる納期情報を表示する際の使用を前提にしています。

（もちろん他の用途にも使いまわせます）

x曜日のy時を超えると次の日付が次のn曜日になるスクリプト

（月）の正午12時までの注文頂ければ、（火）に出荷します。

※月曜日・火曜日が祝日の場合は後日へずれ込む場合があります。

週に一回、月曜日正午12時までの注文をまとめて発注し、火曜日に入荷した分を出荷する商品に使う例です。

（赤文字の日付部分だけJavaScriptで、後は固定でHTMLベタガキで書いてあります）

毎日特定の時間に1日ずつ日付が切り替わるスクリプトやツールはたくさんあるんですけど、週1回発注＆まとめて出荷をするような形態で使えるものがなかったので作ってみました。

最近はBtoCの通販では減っていますけど、BtoBのECサイトなんかにはそれなりにある形態なのではないかと思います。

以下上記の例の実現方法（html、JavaScriptファイル）と、切り替わる曜日・時間を変えられるようJavaScriptに解説を付けて置きます。

2. 一週間に一度日付が変わるスクリプト実装方法・手順

やることとしてはコピペで.jsのファイルを2つ作ること。そして日付を入れたい部分にそのjsファイルをHTMLに読み込むタグを追加するだけです。

（できる方ならHTML直書きでもいけるかと思いますが、JavaScript初心者の方は手順通りにやって頂いた方が簡単かと）

まずは下記二つのJavaScriptをコピペしてjsファイルを二つ作りましょう。

「 ○○月△△日（月）までの注文」の日付部分（次週の締め切り日付）


// JavaScript Document
var now = new Date();
var Y = now.getFullYear();
var W = now.getDay();
var H = now.getHours();

var nextweekD = new Date(now.getTime() + 7 *24*60*60*1000);
var sunDay = new Date(now.getTime() + 1 *24*60*60*1000);
var monDay = new Date(now.getTime() + 0 *24*60*60*1000);
var tueDay = new Date(now.getTime() + 6 *24*60*60*1000);
var wedDay = new Date(now.getTime() + 5 *24*60*60*1000);
var thuDay = new Date(now.getTime() + 4 *24*60*60*1000);
var fryDay = new Date(now.getTime() + 3 *24*60*60*1000);
var satDay = new Date(now.getTime() + 2 *24*60*60*1000);

if (W == 1 && H >= 12){
document.write(nextweekDay.getMonth()+1 + '月');
document.write(nextweekDay.getDate() + '日');
}
else    
{
if (W == 0){
document.write(sunDay.getMonth()+1 + '月');
document.write(sunDay.getDate() + '日');
    
} else if (W == 1){
document.write(monDay.getMonth()+1 + '月');
document.write(monDay.getDate() + '日');
    
} else if (W == 2){
document.write(tueDay.getMonth()+1 + '月');
document.write(tueDay.getDate() + '日');
    
} else if (W == 3){
document.write(wedDay.getMonth()+1 + '月');
document.write(wedDay.getDate() + '日');
    
} else if (W == 4){
document.write(thuDay.getMonth()+1 + '月');
document.write(thuDay.getDate() + '日');
    
} else if (W == 5){
document.write(fryDay.getMonth()+1 + '月');
document.write(fryDay.getDate() + '日');
    
} else if (W == 6){
document.write(satDay.getMonth()+1 + '月');
document.write(satDay.getDate() + '日');
}
}

上記JavaScriptコードが冒頭例にある 『 ○○月××日の正午12時までのご注文で～』の日付部分を表示してくれるスクリプトです。

DreamWeaverやメモ帳などにコピペしてサーバーの好きな場所に入れておいてください。

ファイル名は monday.js としておきましょう。

「 △△日（月）に出荷」の日付部分（締め切り翌日の日付）


// JavaScript Document

var now = new Date();
var Y = now.getFullYear();
var W = now.getDay();
var H = now.getHours();

var nextweekDay = new Date(now.getTime() + 8 *24*60*60*1000);
var sunDay = new Date(now.getTime() + 2 *24*60*60*1000);
var monDay = new Date(now.getTime() + 1 *24*60*60*1000);
var tueDay = new Date(now.getTime() + 7 *24*60*60*1000);
var wedDay = new Date(now.getTime() + 6 *24*60*60*1000);
var thuDay = new Date(now.getTime() + 5 *24*60*60*1000);
var fryDay = new Date(now.getTime() + 4 *24*60*60*1000);
var satDay = new Date(now.getTime() + 3 *24*60*60*1000);

if (W == 1 && H >= 12){
document.write(nextweekDay.getMonth()+1 + '月');
document.write(nextweekDay.getDate() + '日');
}
else    
{
if (W == 0){
document.write(sunDay.getMonth()+1 + '月');
document.write(sunDay.getDate() + '日');
    
} else if (W == 1){
document.write(monDay.getMonth()+1 + '月');
document.write(monDay.getDate() + '日');
    
} else if (W == 2){
document.write(tueDay.getMonth()+1 + '月');
document.write(tueDay.getDate() + '日');
    
} else if (W == 3){
document.write(wedDay.getMonth()+1 + '月');
document.write(wedDay.getDate() + '日');
    
} else if (W == 4){
document.write(thuDay.getMonth()+1 + '月');
document.write(thuDay.getDate() + '日');
    
} else if (W == 5){
document.write(fryDay.getMonth()+1 + '月');
document.write(fryDay.getDate() + '日');
    
} else if (W == 6){
document.write(satDay.getMonth()+1 + '月');
document.write(satDay.getDate() + '日');
}
}

続いてもう一つ、上記のJavaScriptコードをコピペして.jsファイルを作りましょう。

ファイル名はtuesday.jsとします。

『 ○○月△△日に出荷します』の日付部分を表示してくれるJavaScriptコードです。

（※応用編の部分で解説しますが、中の数字を入れ替えるだけで日付がどう変わるかをコントロールができます）

作ったmonday.jsとtuesday.jsを楽天GOLDや自社サイトのサーバー上の任意の場所にアップロードしましょう。

作った表示させるHTML例

後は、商品ページや楽天GOLDなどのHTMLで表示させたい部分に


<script src="http://www.example.com/monday.js"></script>

<script src="http://www.example.com/tuesday.js"></script>

上記タグを入力すれば、それぞれに月曜日と火曜日の日付が表示されます。

URLのwww.example.comはあくまでもサンプルなので、ファイルをアップロードしたサーバーから読み込むよう書き換えましょう。

なお、特に楽天GOLDやYahoo!ショッピングのトリプルで絶対パス指定する場合は https:// と http:// に注意が必要です。

冒頭のテストのHTMLタグ例


<span style="color: #ff0000; font-weight: bold;"><script src="http://www.example.com/monday.js"></script></span>日の正午12時までの注文頂ければ、 <span style="color: #ff0000; font-weight: bold;"><script src="http://www.example.com/tuesday.js"></span></script>に出荷します。

今回の例としてstyleタグを使っていますが、ただのHTMLなので適宜CSSなどで肉付け可能です。

○○月△△日、○○月××日のテキストと同じものとして扱え、他のHTMLタグと絡ませることが可能です。

曜日と締め切り時間は固定なのでHTMLにそのままベタ書きしています。

＆当然、月曜日や火曜日の時もそのまま表示されてしまうので、その場合用に但書をつけるのも忘れずに。

（必須ではありませんけど、何かしら対策しないとクレーム必至です）

なお楽天市場のRMSなど、<script>タグが禁止されている場所も結構あります。

その場合はHTMLページとしてパーツを作って、iframeタグで呼び出すと良いでしょう。

テストする方法

このJavaScript、切り替わる日時にならずともパソコンやスマホなどの時間をズラすことでテストは可能です。

例えば1月1日が月曜日であれば、PCの時計を1月1日の11時30分にして実装したページをChromeなどのブラウザで開きます。

1月1日に～と表示されていればOK。

続いてパソコンの時計を3日の12時30分にずらしして再度読み込んでみて、1月8日に～と表示されればOKです。

（読み込み時には完全更新のShift+F5がオススメ）

iframeパーツとして埋め込んだページ上ではうまく更新がかからない場合もありますが、時間をおけば更新されます。

iframeとして読み込んでるページそのものの上で確認した方が更新が早いので、テストする際はそちらを見た方が良いでしょう。

不具合による損害、不利益などの責は負いかねます。必ずテストしてください。

なお、テストで日付を変える時、リマインダーツールなど時間で動くツールなどの挙動は気をつけてくださいね。

3. 応用編 -月曜日以外の曜日で変わるように書き換える方法の解説-

上記JavaScriptでは月曜日の正午12時を締め切り時間として二つの日付が変わるようにしました。

しかし、「月曜日じゃなくて水曜日がいい」とか「正午12時じゃなくて午後16時がいい」などなど色々要望もあるかと思います。

冒頭のJavaScriptのコードをベースにどこをどう書き換えてコントロール・実装可能かを解説します。

var= うんぬんは無視！

最初の「 ○○月△△日（月）までの注文」の日付部分を例に挙げていきます。

1行目のコメントアウトと15行目より前のvar=から始まる部分は無視してください。

この辺りは現在の日付を取得させたり、後で使うコードを書きやすいように『こんな感じで略すよ！』っていう変数の部分です。

3-1. 締め切り日程の設定

まず最初に大事なのは、下記の部分です。

if (W == 1 && H >= 12){
document.write(nextweekDay.getMonth()+1 + '月');
document.write(nextweekDay.getDate() + '日');
}

まずこの部分は、締め切り曜日当時の締め切り時間になったら、日付にプラス7日する処理。

つまり、月曜日の正午12時を過ぎたら日付をプラス7日して次の月曜日の日付にするのです。

もし切り替える曜日を月曜日以外にしたり、切り替え時間正午12時から変えたいのであればまず1行目と2行目をいじります。

W == 1 の部分が『月曜日なら』の意味。

（管理人的にWはWeekのつもり）

JavaScriptのルールで、曜日は数字で表し

日曜日＝0

月曜日＝1

火曜日＝2

水曜日＝3

木曜日＝4

金曜日＝5

土曜日＝6

となります。

そのあとに続く H >= 12 は現在の時刻の時の部分が12以上、つまり12時以降なら、って意味です。

24H表記です。（HはHourだと思ってください）

つまり、日曜日の15時に切り替わって欲しい時は (W == 0 && H >= 15) とすればOKなのです。

他の例としては、

木曜日9時切り替え：(W == 0 && H >= 15)

金曜日18時切り替え：(W == 5 && H >= 18)

となります。

ちなみに少し前の

var nextweekDay = new Date(now.getTime() + 7 *24*60*60*1000);

って部分は、nextweekDay にその日に一週間後の7日を足した日付を入れています。

で、このnextweekDayは日付変更日当日の締め切り時間を過ぎたら表示されるように設定してあります。

つまり、『月曜日』で『正午12時を過ぎた』ら『現在の日付に7日を足す』＝次の月曜日の日付が表示されるってわけです。

このnew Date(now.getTime() + 7 *24*60*60*1000) を new Date(now.getTime() + 8 *24*60*60*1000)にすれば現在月曜日よりも8日後の火曜日の日付になります。

実際、冒頭のtuesday.js用に書いたJavaScriptコードでは翌日の『 ××日に出荷します』を表示させるために7から8に書き換えています。

3-2. 当日締め切り時間以外の設定

上記だけで設定が終われば簡単なのですが、残念ながら管理人、そこまで親切に作っていません……

といってもあとはそんなに難しい話ではないので、頭の体操ついでにもう少しお付き合いください。

上記で解説したのは切り替わるの締め日と締め時間の設定、そしてその日時を過ぎた時に次の週の日にちが表示されるようにする部分。

続いて設定すべきはページを開いた日時が月曜日の正午以降以外の場合です。（※）

（※つまり、月曜日の正午11時59分までと月曜日以外の曜日の場合）

・日曜日：現在の日付に1日足す＝次の月曜日の日付を表示

・月曜日：現在の日付に0日足す＝当日月曜日の日付を表示

・火曜日：現在の日付に6日足す＝次の月曜日の日付を表示

・水曜日：現在の日付に5日足す＝次の月曜日の日付を表示

・木曜日：現在の日付に4日足す＝次の月曜日の日付を表示

・金曜日：現在の日付に3日足す＝次の月曜日の日付を表示

・土曜日：現在の日付に2日足す＝次の月曜日の日付を表示

ってな処理をかけています。

つまり、切り替わる当日の切り替わる時間までは当日、当日の切り替わる時間以降とそれ以外の曜日は、全て次の切り替わる曜日になるように日付を調整しているのです。

実際のコードは下記の通りです。（冒頭のmonday.jsの抜粋＆解説付きです）

var sunDay = new Date(now.getTime() + 1 *24*60*60*1000);
var monDay = new Date(now.getTime() + 0 *24*60*60*1000);
var tueDay = new Date(now.getTime() + 6 *24*60*60*1000);
var wedDay = new Date(now.getTime() + 5 *24*60*60*1000);
var thuDay = new Date(now.getTime() + 4 *24*60*60*1000);
var fryDay = new Date(now.getTime() + 3 *24*60*60*1000);
var satDay = new Date(now.getTime() + 2 *24*60*60*1000);

sunDay、monDay、tueDay…… はそれぞれが日曜日、月曜日、火曜日……に対応しています。

そしてnew Date(now.getTime() + n *24*60*60*1000) の + n の部分で現在の日にちに n日を足しています。

now.getTime()にはアクセスした日時が自動的に入力されます。

（ *24*60*60*1000は気にしないでオッケー。）

この例では月曜日正午12時に切り替えなので、まず

1行目の日曜日（sunDay）には now.getTime() + 1 で日曜日現在の日付に1日足して、月曜日の日付にしているのです。

これによって、12月31日日曜日には『 1月1日（月）までの注文で～』の1月1日の部分を表示させられるってわけです。

後は他の曜日も同様です。

火曜日に月曜日の日付を出すには6日進める必要があります。

なので、火曜日（tueDay）には now.getTime() + 6 で現在の日付に6をプラスしています。（3行目）

これで、『 1月2 』（現在）日にこの商品ページを開くと次の月曜日である『 1月8日』（現在の日付＋6日）と表示されるのです。

後は水曜日に月曜日の日付を出すには5日進める必要があるので、水曜日（wedDay）には現在の日付にnow.getTime() + 5で5をプラス 。