プロクラシスト

今日の寄り道 明日の近道

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


スポンサーリンク

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

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

www.procrasist.com

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

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

javascriptを勉強中

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

カードがこちら(デモ)

見方はこちら

f:id:imslotter:20180715025533p:plain

ポイントは

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

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

3,000円
49.8%OFF!!
  • ちょっとしたスペースにもピッタリ
  • リーズナブルな価格
  • モバイルバッテリーを買うとどこでも持ち運べる!
  • 8,000円
    33.2%OFF!!
  • おしゃれなスマートスピーカー
  • フェルトのスピーカなので、部屋のインテリアにも!
  • 今ならxxx%OFF!
  • 15,200円
    0.5%OFF!!
  • 電子書籍リーダ
  • Amazon Kindleとの連携が密
  • 長寿命!バッテリーが数週間持つ
  • 3,480円
    30.1%OFF!!
  • prime videoをTVにつないでみられるスグレモノ!
  • アプリによる拡張でYouTubeniconico動画とも連携
  • マイク内蔵音声による操作も可能
  • 技術詳細

    少々技術についても。

    • テンプレートは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>
    

    まとめ

    javascriptを触れるようになると、また表現の幅が広がりますね。きちんと勉強しようと思いました。

    こういうの作っていたら(特にデザインのところ)、細かな修正が無限にできるので、キリが無くなります。まだ直したいところはいくつかあるのですが、、

    とりあえず月曜日まではまだ時間があるので、もうちょっと気になるところを直して実際に使いたいなと思います。

    プライムデー楽しみましょう!ではではっ

    *1:動作確認も兼ねています。

    PROCRASIST