日別アーカイブ: 2014-11-17

変幻自在なウェブサイト例

ものづくり筆耕ブログ

electronic小売業において多彩な商品を扱っている場合、店頭の販促モニターや電子ポップの文言、画像の表現を外気温、曜日、季節などに応じて自動的に変更したいことがあります。USB温度計

HTML5を使えば、簡単に実現することができます。と言ってもインターネット接続で、外部からの情報を入手できることが条件です。

外気温では気象庁からのピンポイント発表でも対応できることがありますが、店先に設置された温度計からの温度・湿度の取得できる環境が理想です。

WEEK8B

インターネットに接続されていれば曜日、季節の入手は容易です。曜日に応じて適切な画像を表示する例を以下に示します。

今日の日付を出力します。

サンプルコード

<html>
<script type="text/javascript"> // <![CDATA[
var youbi = ["<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week0.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week1.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week2.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week3.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week4.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week5.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week6.png' width='80' height='80' />"];

myWeek = new Date();
myYear = myWeek.getFullYear();
myMonth = myWeek.getMonth() + 1;
myDate = myWeek.getDate();
myDay = myWeek.getDay();
myHour = myWeek.getHours();
myMinute = myWeek.getMinutes();
mySecond = myWeek.getSeconds();

myMess1 = myYear + "年" + myMonth + "月" + myDate + "日";
myMess3 = myHour + "時" + myMinute + "分" + mySecond + "秒";
myMess = myMess1 + " " + myMess3;
document.write( myMess + "<BR>曜日の画像："+youbi[myDay] ); // ]]>
</script>
</html>

まとめ

あるデパートでは入り口で秘かに買い物客の全身画像をカメラに収め、過去の買い物歴などを瞬時に取り出し、接客の参考に利用始めているようです。また、外の天気が雨ならば元気の出るBGM、晴れならばしっとりとした曲と天気によって流す音楽を変えたりすれば販売促進につながりそうです。

このように外界の情報にすばやく対応するシステム構築の参考になれば幸いです。