これは使える！超便利なJava Script集
Java Scriptを使うとHTMLやCSSではできないことができます。Java Scriptのサンプルはネット検索でたくさん見つけることができるのですが、「ネットショップに使える便利なモノ」となると、その数はぐんと減ってしまいます。
そんな中からネットショップの制作現場で使っているJava Scriptを厳選して紹介します。使い方は超簡単。コピペするだけです。
１．特定のPCページを特定のスマホ用ページへリダイレクト
リダイレクトとは「転送」のことです。ページ「A.html」にアクセスしてきたユーザーがスマホなら、別のページにそのまま転送することができます。れは自社サイトなどを作っていて、スマホ対応が遅れている場合に便利だと思います。
例えば、「B.html」のランディングが非常に多いので、「このページだけでもスマホページ化（レスポンシブ化）したい。」といった場合です。PC用ページ「B.html」の<HEAD>内に以下のJava Scriptをコピペするだけです。
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = 'http://sumaho.sumama/suma.html';
}
</script>
そして、背景が黄色の箇所を飛ばしたいページのURLに変更します。これは同じドメイン内でも、別サイトのページでもリダイレクトさせることができます。
２．お届け目安の日にちを自動表示させる
お客さんは、発送日がいつか？」ということより、「いつ届くか？」ということが知りたいわけです。ま、発送日を知らせると、１日２日プラスすれば何日に届くかくらいは計算できます。でも、それも、あえて「具体的に教えちゃいましょう。」という方法です。
ただ、このJava Scriptはシンプルなので、単純に現在の日時に、プラス何日かした日付しか表示できません。だから、ゴールデンウィークなどの連休のときの表示は、不可能なお届け日を表示させることになるので、ちょっと注意したいところです。
サンプルはこれです。
が最短のお届け日になります。
<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>
これも背景が黄色の箇所の数字だけを変更すればOKです。サンプルの場合、発送日の翌日から２日後の到着という設定です。
３．小窓に最新ニュースやセールジョフ王をスクロールで流す
本来は「<marqee>（マーキー）」というHTMLタグでやっていたのですが、ほとんど廃止されちゃったんですよね。で、これと同じことをJava Scriptでやるとこうなります。いわゆる、繁盛感賑わい感の演出にもつながりますよね。
ちょっと高度な感じがしますが、以下のサイトで配布している「marquee.js」を頂いて、<head>内にJSファイルを呼び出します。そして、表示させたい所に以下のHTMLを記述するだけです。
配布サイト：http://d.hatena.ne.jp/miya2000/20061227/1167210684
<div id="m1" style="width:100%;border:orange solid 1px;color:#ff6600;">
ただいまタイムセール実施中！全品８０％ＯＦＦ！
</div>
<script type="text/javascript">new Marquee('m1');</script>
ただ、これだといちいちHTML本体を編集しないといけないので、スクロールさせる部分は外部ファイルにしておいて、外部ファイルだけを変更するスタイルが便利です。
例えば、外部ファイルを「marquee.js」などとして中身にコンテンツを書きます。それを<div id="m1">～</div>内に読み込みます。読み込むタグはこれですね。（同じページ内に複数設置する場合はdiv
id="m1"」の個所と「Marquee('m1")」のところをm2に変える）
<script type="text/javascript" src="js/news.js"></script>
ファイル名やフォルダは自由に変えてください。
また、JavaScriptの外部ファイルは、この程度の内容なら簡単です。メモ帳に「document.wite("ここにこめんと");」と書いて、拡張子「.js」で保存するだけです。ただし、文字コードだけは注意してくだいよ。UTF-8のコードのHTMLにJIS-SHIFTを書いてしまうと文字化けします。
４．ショップサーブに設置してみた
メインショップで使っているショップサーブで使ってみました。こういった小技が自由に使えるっていいですね～。下のアニメーションのようにサイドバーで使ってみました。文字が長いと改行されます。marquee.jsの読み込みも含めて、すべてサイドバーのエリアに放り込みました（強引？）
