Webショップの「お知らせ」を決めた期間だけ表示する

Ｗｅｂショップ運営をしていると、「○○セール中」や「□□入荷予定」などのお知らせを、期日が過ぎたのに削除し忘れることではないでしょうか。
ほとんどの人は、「セール」という部分だけを見て終了日を見ていません。
せっかくバナー（お知らせ画像）に反応してセールのページを開いてくれても、すでに期間が終わり通常価格になっていたら、人によっては「裏切られた」「このお店は信用できない」と感じて、探しに来た商品さえ買わずに帰ってしまいます。それは避けたいですよね。
そこでここでは、お知らせを「設定した期間だけ」表示する方法をお教えします。

紹介するプログラムをコピー＆貼り付けするだけ

「プログラミングを覚えなくちゃいけないんじゃないの？」と思うかも知れませんが、基本的には、ここで紹介するプログラムを「表示したい場所にコピー＆貼り付けする」だけです。書き換える部分も必要ですが、ほんの少しです。以下に書く設置方法どおりにすれば実現できます。

ただし、プログラムをコピー＆貼り付けするだけとは言っても、そのプログラムが使える環境でなくてはなりません。
ご紹介するプログラムは「Javascript」というもので書かれています。Javascriptはプログラミング言語のひとつで、Webページを表示するための言語である「HTML」の中に記述するとブラウザ上で動きます。
たいていのWebショップ構築サービスではページ作成にHTMLが使えるので、まずは使える環境かどうか、下記の項目をチェックしてください。

設置の条件

設置方法

ここでは、Webショップ構築サービスの「自由にHTMLを記述できる場所」を例に説明していきます。

１．以下の枠内のコードをコピーします

ドラッグドロップで(マウスでなぞって)反転し、右クリックメニューからクリップボードにコピーします。
※赤色になっている部分は、後述する「修正が必要になる場所」です。

コード

<script type="text/javascript"><!--
var viewstr = '9月6日まで○○30％OFFセール実施中！';
var startdate = '2020/08/06 09:00:00';  //開始日時
var enddate = '2020/09/06 18:00:00';    //終了日時


startdate=startdate.replace(/[\/:]/g,' ');
var starts=startdate.split(' ');
for(i=0;i<starts.length;i++){starts[i]=starts[i]-0;}
enddate=enddate.replace(/[\/\-:]/g,' ');
var ends=enddate.split(' ');
for(i=0;i<ends.length;i++){ends[i]=ends[i]-0;}
if((starts.length>2)&&(ends.length>2)){
 if(starts.length<6){for(i=6;i>starts.length;i--){starts[i]=0;}}
 if(ends.length<6){for(i=6;i>end.length;i--){ends[i]=0;}}
 var starttime=new Date(starts[0],starts[1]-1,starts[2],starts[3],starts[4],starts[5]);
 var endtime=new Date(ends[0],ends[1]-1,ends[2],ends[3],ends[4],ends[5]);
 if((starttime.getFullYear()==starts[0])&&(starttime.getMonth()==(starts[1]-1))&&(starttime.getDate()==starts[2])&&(starttime.getHours()==starts[3])&&(starttime.getMinutes()==(starts[4]))&&(starttime.getSeconds()==starts[5])&&(endtime.getFullYear()==ends[0])&&(endtime.getMonth()==(ends[1]-1))&&(endtime.getDate()==ends[2])&&(endtime.getHours()==ends[3])&&(endtime.getMinutes()==(ends[4]))&&(endtime.getSeconds()==ends[5])){
  var timenow=new Date();
  var startsec=starttime.getTime();
  var endsec=endtime.getTime();
  var tsecnow=timenow.getTime();
  if ((endsec>tsecnow)&&(startsec<tsecnow)){ document.write( viewstr ); }
 }
}
//--></script>

２．「Word」など、文字編集できるソフトに貼り付けます

この例では、見やすくするために文字間隔等倍のフォントを使用しています。フォントはご自身が見やすいものをお使いください。

３．前記枠内で赤色になっていた場所を書き換えます

２、３、４行目の赤色になっていた場所は、２行目が「表示したい内容」、３行目が「表示を開始する年月日 時分秒」４行目が「表示を終了する年月日 時分秒」です。

3.1　２行目「表示したい内容」

var viewstr = 'ここに表示したい内容を書きます';
「'」を消してしまわないようにご注意ください。

3.1　３行目４行目「開始・終了年月日 時分秒」

３行目と４行目の日時は、下記例と同じように書いてください。
var startdate = '2020/08/06 09:00:00'; //開始日時
var enddate = '2020/09/06 18:00:00'; //終了日時

４．設置する場所を決めます

例：

自由にHTMLを記述できる場所

４．ビジュアルエディタをオフにします

自由にHTMLを記述できる場所は、多くの場合、実際の表示に近い形を見ながら「文字を大きくする」「太字にする」などのボタンを使って編集できる「ビジュアルエディタ」形式となっています。
ビジュアルエディタは作りたいイメージをHTML言語に変換してくれる便利な機能ですが、
Javascriptの記述は「タグ入力」ができないといけませんので、「表示切替」などと書かれた場所を探し、ビジュアルエディタをオフにします。

例： 「HTML表示切替」と書かれた場所

「ビジュアルエディタ」から「タグ入力エディタ」に切り替える

５．修正済みのコードを文字編集ソフトからコピーします

例：Word

６．先ほど決めた設置する場所に貼り付けます

例：

貼り付けたら、保存して完成です。
別途サイトの再構築が必要なシステムの場合は、その実行も忘れないようにしましょう。

７．使わなくなったら削除しましょう

設置したJavascriptは、使わなくなったら削除しましょう。ページ表示は速いほうがいいのですから、表示しない部分はないほうが良いですよね。何に使ったコードか忘れてしまわないうちがおすすめです。

このプログラムを使うメリット・デメリット

メリット

• 設定した期間だけ表示するので、販売システムで設定したセール期間が過ぎた瞬間にお知らせ表示をやめられます。
• 深夜や早朝など、自分が更新できない時に表示・非表示の変更ができます。
• 次に同じ場所を更新するまで放置が可能なので、更新作業が楽になります。

デメリット

• HTMLタグ記述が必要なため、ビジュアルエディタですでに設置してある文や画像の間に入れるには、HTMLの知識が必要です。
• 閲覧者の端末上で動くため、Javascript機能が無効にされていると指定した期間でも何も表示されません。ただ、通常は有効になっています。
• 端末の時間が合っていない場合、指定日時ではないときに表示されることになります。ただし、現在ではほぼすべての端末がインターネットなどで正確な時間を取得しているので、考慮は不要でしょう。

使用例

• 新着情報を10日間だけ表示
• サーバーメンテナンスのお知らせ
• 休業のお知らせ
• 季節商品のお知らせ

ぜひ、使ってみてください

お問い合わせ先

ご要望、不具合報告、その他お問い合わせは、オフィス・トリイの鳥居宛にメールをお送りください。
お気軽にお知らせいただけると嬉しいです。

オフィス・トリイのプログラムやツールの紹介、プログラムを使って効率アップした例などをお知らせするメルマガにご登録ください。
下記のページで登録・解除できます。

• メールマガジン