プライムデーに向けて、タイムセール用商品カードを作ったよ！(テストページ)

こんにちは、ほけきよです。

いよいよプライムデーが近づいてきました！！

www.procrasist.com

いやはや、楽しみですね。お祭り騒ぎになりそうです。

せっかくのお祭りなので、今年は少し遊んでみることにしました。なんか作りたいなと思って、

javascriptを勉強中

最近、いろいろあってjavascriptを勉強中です。なので、いい練習機会になると思って、プライムデー専用の商品カードを作ってみました。

カードがこちら(デモ)

見方はこちら

f:id:imslotter:20180715025533p:plain

ポイントは

必要な情報をなるべく簡潔に載せる
直感的に、視覚的に把握できるようにする

あたりです。bootstrap4を使い、カードタイプにしてみました。実際はこんな感じ*1

Amazon Echo Dot

3,000円

49.8%OFF!!

ちょっとしたスペースにもピッタリ

リーズナブルな価格

モバイルバッテリーを買うとどこでも持ち運べる！

Amazonで見る

Amazon Echo

8,000円

33.2%OFF!!

おしゃれなスマートスピーカー

フェルトのスピーカなので、部屋のインテリアにも！

今ならxxx%OFF!

Amazonで見る

Kindle Paperwhite

15,200円

0.5%OFF!!

電子書籍リーダ

Amazon Kindleとの連携が密

長寿命！バッテリーが数週間持つ

Amazonで見る

Fire TV Stick

3,480円

30.1%OFF!!

prime videoをTVにつないでみられるスグレモノ！

アプリによる拡張でYouTubeやniconico動画とも連携

マイク内蔵音声による操作も可能

Amazonで見る

技術詳細

少々技術についても。

テンプレートはbootstrap4がメイン。ちょこちょことcssを当てる(画像のhoverとか)
商品カードで、valueに時間をもたせている。idにamazon商品idをもたせている。
classに"timer "を追加し、jQueryでカウントダウン。idが一意なので、すべてのカードに非同期的なカウントダウンが可能。valueを読み取って、現在時刻との差分を取る
いちいちhtmlを書くのは面倒なので、pythonで半自動処理。商品画像URLのスクレイピング/割引率計算etc...はバックエンドで自動抽出
記述するアイテムリストの変更差分を少なくするために、csvにて商品シートを管理(商品名, ID, 訴求ポイントなどを管理するシート)
webサービス化してみたかったけど、いろいろと考慮することが多すぎて時間内では断念。時間があるときにするかも？

参考までに、時刻カウントダウンのスクリプトを載せておきます。javascript勉強しているところなので、もっと良い書き方あればご指摘ください。文法とか、valueの使い方とかあっているかは知りませんが、とりあえず動いています。

<script type="text/javascript">
    $(function() {
        countDown();
    });
    function countDown(obj) {
        obj = document.getElementsByClassName("Timer");
        var startDateTime = new Date();  
        for(var i = 0;  i < obj.length;  i++){
            var endDateTime = Date.parse(obj[i].getAttribute("value"));
            var left = endDateTime - startDateTime;
            if(left<0){
                left = 0;
            }
            var a_day = 24 * 60 * 60 * 1000;
            var h = Math.floor((left / ( 60 * 60 * 1000))) ;
            var m = Math.floor((left % a_day) / (60 * 1000)) % 60 ;
            var s = Math.floor((left % a_day) / 1000) % 60 % 60 ;
            var id = obj[i].getAttribute("id");
            $("#"+id).text("残り : "+h+":"+m+":"+s);
            }
            if(left<3600*1000){
                document.getElementById(id).className = "btn btn-danger float-right badge-pill Timer";
            }
        setTimeout('countDown()', 1000);
    }
</script>