コンサルロケッツ STATION


  
  

はじめに

どういうわけかホットペッパーグルメのクーポンが4000pt(4000円分)付与されていました。
こんにちは。ロケッツの4号機です。
  
今回は、楽天のクーポンURLを一定期間ごとに自動的に変更してくれる超絶スクリプトを開発しましたのでご紹介します。
  
予めことわっておきますが、楽天の「クーポン自体を自動で発行」するわけではありません(そこは面倒ですが各自発行してください)。各自発行したURLを予めJavaScriptファイルに記載しておくことで、指定した日時ごとに自動で切り替えを行うというものです。
  
それでは、どうぞ!

  
  
  
  

目次

  
  
  
  

前提

まず、今回のスクリプトの前提条件です。
今回のスクリプトはPC表示・スマートフォン表示いずれにも対応しています。
クーポンの表示箇所はPC(GOLDで作成したトップページ及び商品ページ)「ページ右側追従」と、スマートフォン商品ページ「ページ下追従」です。
  
*PC版クーポンの表示デモ(画面右側に追従)

  
*スマートフォン版クーポンの表示デモ(画面下に追従)

  
編集箇所は、楽天GOLDで作成したindex.html(トップページ)と、RMS「ヘッダー・フッター・レフトナビ」及びスマートフォン「商品ページ共通説明文」の3箇所です。
クーポンの画像はPC用・スマートフォン用の2種類を予めご用意ください。
*今回はクーポン画像の変更は行わず、URLのみ変更する仕様です(が、応用を利かせれば画像の変更も簡単に可能ですので必要あればチャレンジしてみてください)。

  
  
  
  

HTML – iframe.html

  
設置時には上記のhtmlをiframeで呼び出しします。
PC/スマートフォンいずれも同一のファイル(上記)を呼び出すため、スマートフォン表示用にデバイス判定でスタイルをJSで付与+画像切り替えを行っています。
またクーポン画像のファイル名は、PC用は「pc_」スマートフォン用は「sp_」から始めてください(画像切り替えのフラグとして)。

  
  
  
  

JavaScript(jQuery) – common.js

*2018/11/8修正
変数「nowMonth」及び「nowDay」にて取得する日付の数値が1桁の場合、頭に0(ゼロ)を付けるよう修正いたしました。

  
変数「$el01」及び「$el02」がクーポンのリンク(href)となります。
期間の指定は、例えば下記の箇所

は「2018/10/16/00:00〜2018/10/24/23:59」で表示しますよ、という意味です。そのif文のなかに該当期間中のクーポンのURLを記入します。以降elseifで分岐を作って期間を追加していけばOK。ただし期間は被らないように注意してください。
期間外は要素を非表示(hide)にします(ただしページ上ではiframeの要素が残っているため、設置しない期間が続くようであればiframeごと非表示もしくは削除しておきましょう)。

  
  
  
  

CSS – style.css

  
スタイルシートに関してはお好みで各自調整してください。

  
  
  
  

設置方法(RMS/GOLD)

  

index.html(GOLDに作成しているトップページ)

  

RMS「ヘッダー・フッター・レフトナビ」 – PC

  

RMS「商品ページ共通説明文」 – スマートフォン

  
  
  
  

さいごに

いかがでしたか?
たとえば向こう先ひと月分のクーポンを発行しておき、予めURLを登録しておけばイチイチURL変更の手間なく自動で切り替わってくれます。
ちなみにクーポンでなくとも、どんなURLでも大丈夫です(セール時の特集ページでもOK)。
あと、最近なにかと時限式に関するブログが多いのですが、いまマイブームなのでもう少し続くかもしれません。ご了承ください。
  
それでは、良き楽天クーポンライフを!

  
  
  
  

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • サリープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!