デスクワークを簡単に
  • スマホメニュータイトル1

デスクワークを簡単に

プログラマが教える、自動化できるところ・できないところ。

トップページ > Webショップ用楽するツール > Webショップの「お知らせ」を決めた期間だけ表示する

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

いいね! 0 はてブ 0 ツイート LINE

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

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

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

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

設置の条件

○設置できる環境

  • ページは自分で作っている
    (PCで作成したhtmlファイルをサーバーにアップロードしている)
  • ページ作成・管理機能を導入している
    (HTMLタグ入力が可能、かつ自動改行しない選択ができるシステムの場合。ほとんどのブログもこの条件に当てはまります)
  • 基本的なページ作成はWebショップ構築サービスにおまかせだが、自由にHTML(JavaScript可)を記述できる場所がある

この3点のいずれかの場合は大丈夫です。

×設置できない環境

  • ページの作成はWebショップ構築サービスにおまかせ
  • 自由記述欄にHTMLタグが使えない、あるいは使えるHTMLタグに「JavaScript」がない

この2点の両方に該当する場合は、残念ですができません。

設置方法

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

1.以下の枠内のコードをコピーします

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

コード

<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>

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

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

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

2、3、4行目の赤色になっていた場所は、2行目が「表示したい内容」、3行目が「表示を開始する年月日 時分秒」4行目が「表示を終了する年月日 時分秒」です。
Wordに貼り付けたコードの必要か所を書き換える

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

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

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

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

例1:書式例
区切り文字が違ったり桁が違ったり、数字以外だとエラーになります。

設定日時 プログラムが認識する日時 可否
2020/09/6 09:5:0 2020年9月6日9時5分0秒 ○
2020/09/6 09:5 2020年9月6日9時5分0秒 ○
2020/9/06 09:5:5 2020年9月6日9時5分5秒 ○
2020/09/06 09:05:00 2020年9月6日9時5分0秒 ○(見間違いにくいので推奨)
2020/9/6 9:5:5 2020年9月6日9時5分5秒 ○
2020-09-06 09:05 2020年9月6日9時5分0秒 ○(見間違いにくいので準推奨)
2020-9-6 9:5 2020年9月6日9時5分0秒 ○
2020-09-6 09:05 2020年9月6日9時5分0秒 ○
2020-09-6 09 2020年9月6日9時0分0秒 ○
2020/09/06 2020年9月6日0時0分0秒 ○
2020/09/06 09-5-0 2020年9月6日9時5分0秒 △(可能ですが非推奨)
2020/09/06/09/5/0 2020年9月6日9時5分0秒 △(可能ですが非推奨)
2020 09 6 08 8 0 2020年9月6日8時8分0秒 △(可能ですが非推奨)
2020:09:06-08/8/0 2020年9月6日8時8分0秒 △(可能ですが非推奨)
2020=09\06 09,05,00 プログラムエラー ×(区切り文字の間違い「=」「\」「,」)
2020/09/*6 09:#9:00 プログラムエラー ×(数字以外が含まれている「*」「#」)
2020/09/06 09:5:5 プログラムエラー ×(全角文字が含まれている「5」)
2020/09/ プログラムエラー ×(項目不足)

例2:入力ミスや環境によるエラー
「13月」「0日」「25時」等、存在しない日時を設定されたときは入力値異常と判定し、何も表示しません。

設定日時 正しい日時 結果
2020/02/03 25:05:00 2020年2月4日1時5分0秒 (非表示)
2020/12/00 09:05:00 2020年11月30日9時5分0秒 (非表示)
2020/00/03 09:05:00 2019年12月3日9時5分0秒 (非表示)
2020/12/32 09:05:00 2021年1月1日9時5分0秒 (非表示)
2020/13/01 09:05:00 2021年1月1日9時5分0秒 (非表示)
2020/23/05 09:05:00 2021年11月5日9時5分0秒 (非表示)
2020/102/03 00:00:00 2028年06月3日0時0分0秒 (非表示)
1996/12/23 10:00 1996年12月23日10時0分0秒 ?(※)

 ※1997年より前を認識できない端末があります

4.設置する場所を決めます

例:
Webショップ構築サービスで、自由に記述できるエリア
自由にHTMLを記述できる場所

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

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

例: 「HTML表示切替」と書かれた場所
Webショップ構築サービスで、自由に記述できるエリア
「ビジュアルエディタ」から「タグ入力エディタ」に切り替える

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

例:Word
Wordで必要か所を書き換えたコードをコピーする

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

例:
自由に記述できるエリアに、修正済みのJavascriptコードを貼り付ける
貼り付けたら、保存して完成です。
別途サイトの再構築が必要なシステムの場合は、その実行も忘れないようにしましょう。

7.使わなくなったら削除しましょう

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

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

メリット

  • 設定した期間だけ表示するので、販売システムで設定したセール期間が過ぎた瞬間にお知らせ表示をやめられます。
  • 深夜や早朝など、自分が更新できない時に表示・非表示の変更ができます。
  • 次に同じ場所を更新するまで放置が可能なので、更新作業が楽になります。
Javascriptのエラー情報は表示されないことが多いので、ページの閲覧者にはJavascriptが実行されていることはほぼ分かりません。
このプログラムのばあい、エラーになっても設定した通りに表示されないだけです。「エラーが出ていて恥ずかしい」ということもまずありませんし、ブラウザが「応答なし」になることもありません。

デメリット

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

使用例

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

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

お問い合わせ先

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

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

  • メールマガジン

カテゴリー

  • セルデータコンバータ
  • Excel
  • Webショップ用楽するツール
  • Word

最近の投稿

  • Excelのマクロ・アドインを有効化する方法
  • Excel用データ形式変換アドイン セルデータコンバータ
  • Excelの個人用マクロを新PCに引き継ぎたい
  • Excelアドイン「セルデータコンバータ」の使い方
  • Wordの新規作成時テンプレートを保存してあったファイルと同じにしたい。
  • Webショップの「お知らせ」を決めた期間だけ表示する

Copyright(c) 2023 デスクワークを簡単に All Right Reserved.

©デスクワークを簡単に