古い時代から自作サイトを立ち上げ、ネット通販をやってきた身としてはJavaScriptと言えば「便利！」「小回りが効くよね～」「痒いところに手が届く！」
そんな感じの印象でしたが、気づけば、ほぼ使っていないです。
もし、JavaScriptを開発した人が◯◯さんと知っていれば、感謝の念を伝えたいですね。
当社は、現在はShopifyで通販をやっています。
これまでのメインはショップサーブだったのですが、そこではかなり便利に使っていました、いや、今も使っています。
時間による表示変更
通販サイトは２４時間３６５日受注可能です。
でも、事務スタッフは公務員のごとく月金の９時～１７時で働いています。
受注はネットショップからいつでも受けられるんですが、電話も受けているんですよね・・・
電話に関しては、もちろん営業時間外は出られません。
それを表示する手段としてJavacriptを一部使っています。
具体的には、９時～１７時は「お電話対応中」と表示し「１７時～０８：５９」は、「お電話休業中」というふうに表示させています。
AIだのIoTだのこれだけ進化しているので、そういうところは、意外に手動で設定しないと表現できないという不自由もあるんです。
まあ、電話番号を常時表示しておいて、例えば「２１時頃に、お客さんが電話してきても出なかった。」ってなれば、お客さんも「だよね～」ってなりますからね。
でも、時間によって表示を切り替えると「ライブ感」がでるじゃないですか。
それはすなわち、「繁盛感」につながるので、うちとしては、そういう表示方法はやっておきたいんです。
ただのこだわりですけどね！
時間によって表示を買える便利
Javascriptを取り入れる、と言っても別にプログラマーになる必要もないですし、Javascriptが書ける様になる必要もない。
便利なJavascriptが無料で配布されてるので、それをコピペしてちょこっと変えてやるだけ。
そこが「便利」たる所以【ゆえん】でしょう。
例えば、次に貼り付けるコードなどは、細かく時間によってメッセージを変えられるJavascriptです。
<!-- 表示させるテキストを切り替えるスクリプト。 -->
<script type="text/javascript">
<!--
//時間帯でテキストの表示切り替え
var msg1 = '夜更かしはやめてそろそろ寝ませんか？';
var msg2 = '早起きですね。それとももしかして徹夜しました？';
var msg3 = 'おはようございます。今日がよい一日でありますように。';
var msg4 = 'こんにちは。こんな時間にこんなサイトを見ているなんて暇なんですか？';
var msg5 = 'お腹空きましたね。空いてないですか？';
var msg6 = '今日も一日お疲れさまでした。おやすみなさい。'
var now = new Date();
var hour = now.getHours();
if(hour >= 0 && hour <= 3){
document.write(msg1);
}
if(hour >= 4 && hour <= 6){
document.write(msg2);
}
if(hour >= 7 && hour <= 10){
document.write(msg3);
}
if(hour >= 11 && hour <= 16){
document.write(msg4);
}
if(hour >= 17 && hour <= 19){
document.write(msg5);
}
if(hour >= 20 && hour <= 23){
document.write(msg5);
}
// -->
</script>
<!-- 表示させる画像を切り替えるスクリプト。赤字の部分をお持ちの画像と入れ替えてください。 -->
<script type="text/javascript">
<!--
//時間帯で画像の表示切り替え
var now = new Date();
var hour = now.getHours();
if(hour >= 0 && hour <= 3){
document.write('<img src="contents_img/timeimg3.jpg">');
}
if(hour >= 4 && hour <= 7){
document.write('<img src="contents_img/timeimg0.jpg">');
}
if(hour >= 8 && hour <= 15){
document.write('<img src="contents_img/timeimg1.jpg">');
}
if(hour >= 16 && hour <= 18){
document.write('<img src="contents_img/timeimg2.jpg">');
}
if(hour >= 19 && hour <= 23){
document.write('<img src="contents_img/timeimg3.jpg">');
}
// -->
</script>
出典：http://java123.web.fc2.com/contents/js/js5.htmlこれをちょっといじって、文字に色をつけて、リアルタイムに表示させたのがこれ↓
設定した時間帯によってメッセージが変わっているのがわかると思います。
ちなみに、画像による変更もできますが、一旦サボって画像表示はしていないです。
購入を煽るためのカウントダウン
通販という業種の特性上、便利なJavascriptを探す場合でも、どうしても「販売のため」という条件が付きます。
「色を変えられる」「アニメーション」「スクロール」など、HTMLではできなかったことがJavascriptでできた時代も、もはや古き良き時代にってしまいました。
今はCSSで瞬殺ですね。
でも、そんな中、カウントダウンはCSSではできないんですよね。
たとえば、「オリンピックまで◯日と◯時間◯秒」みたいな表示をしてリアルタイムに数字が動くやつ。
まさにJavascriptの腕の見せどころ。
これを応用して「セール終了まで◯日」といった表示をさせることで消費者の購買を煽るという手法があります。
こんな感じ↓
今月の終わりまで、日 時間 分 秒！その月の日数を計算して、ちゃんと計算して残り日数時間を出してくれています。
スクリプトは、出典：https://mgmgblog.com/post-2595/です。
中身はどうあれコピペで済みます。
便利ですね。
お届けの目安を表示する
これも便利な機能です。
受注からお届けまでの日数（目安）を自動で表示させることができます。
★のところの数字を変えるだけ。
★本日１５時までのご注文で
<script type="text/javascript">
var term=2; //配達にかかる日数★
var date=new Date(); //日付を取得 カッコ内に日付を入力すればチェックできる（入力例）2015,0,30,13,00,00
//時間チェック
var h=date.getHours();
if(h >= 12)date.setTime(date.getTime()+(24*3600*1000));
//曜日チェック
var w=date.getDay();
while(w==6 || w==0){
date.setTime(date.getTime()+(24*3600*1000));
w=date.getDay();
}
//到着予定日（＋配達日数）
date.setTime(date.getTime()+(term*24*3600*1000));
//到着予定日出力
var writeY=date.getYear()+1900;
var writeM=date.getMonth()+1;
var writeD=date.getDate();
document.write(writeY+"年"+writeM+"月"+writeD+"日");
</script>
★が最短のお届け日になります。動作サンプル↓
本日１５時までのご注文で が最短のお届け日になります。ニュースの横スクロールで営業中感の演出
下記のスクロールが動作サンプルです。
これは、javascriptのライブラリというものを別のファイルとして、ページとは別のところにおきます。
それを下記のようなjavascritpで呼び出して表示するという手法になります。
拝借したのは、http://d.hatena.ne.jp/miya2000/20061227/1167210684。
JSライブラリの読み込みタグとは別に表示させるところは下記のタグを入れます。
<div id="m1" style="width:100%;border:orange solid 1px;color:#ff6600;">
ただいまタイムセール実施中！全品８０％ＯＦＦ！★
</div>
<script type="text/javascript">new Marquee('m1');</script>★の部分を変えたり、CSSの部分を変更して装飾を変えることもできます。
お店のデザインに合わせて変更可能です。
レビューのスクロール表示
これ、個人的に好きなだけです。
レビューがスクロールで動くやつ。
なんか、ライブ感があってよくないですか？
<SCRIPT type="text/JavaScript">
<!--
var max=900;
var i=1;
function winScroll(){
if(i>max){
return;
}else{
scroll(0,i);
}
i++;
setTimeout("winScroll()", 100);
}
//-->
</SCRIPT>作り方は、レビューを掲載したHTMLを作って上記のJavascriptを、そのHTMLファイルの<head>~</head>にコピペするという単純なものです。
900という数字を変えることでスクロールのスピードも変えることができます。
navigator.useragent 廃止
同じJavascriptの話でも、ちょっとむずかしい話。
普段ネットを見ているブラウザは、自分たちが気づかない部分でサーバーサイドを通信をしています。
こちらが「ブラウザはサファリ使ってるよ。」とか「Chrome使ってるよ。」とか言わないでも、勝手に情報を取得されてしまいます。
こういうのがプライバシーにかかわるということで、navigator.useragentというスタイルは2023年中には廃止の方向だということです。
ま、EC事業者にとっては、あまり関係ないっちゃ関係ないですけど、今後取得できるユーザーのブラウザ情報が制限される可能性はあります。