【#jQuery】ソースコードをコピペするだけでタイマー機能を実装する方法

今さらだけど、まだ手動でセール告知しているの？

今さらだけど、まだ手動でセール告知しているの

未だに日付が変わる瞬間に頑張って起きていたり、公休なのに自宅で作業してプライベートを侵食していたり、更新当日に担当者が休みで更新できないと嘆いたり、ほんとに意味がわからない。WEBを担当している身としては、とても言いたい。

その時間、ムダですよ。

まさに今お仕事を請け負っているうちの一社が、そういう底辺な管理体制なのですがwずっと楽天やYahooの商品LPやキャンペーンLPを担当してきたからこそ、今じゃなきゃとか、誰か特定の人じゃなきゃとか、そんな専門の知識もタイミングも関係なくって、むしろコピペの意味だけ分かれば大丈夫なんですって伝えたいんです。わたしが推薦するのは「jQuery」というものです。これをページで読み込むことで簡単なコードを記載するだけで、かゆいところに手の届くページを制作することができるわけですね。初心者さんでも分かるように「コピペするだけでOK」な状態で紹介していきます。

jQueryとは

JavaScriptの機能をより簡単に、使いやすくしたものと考えてください。JavaScript（ジャバスクリプト）とは、動きを付けることができるプログラミング言語のことです。JavaScriptは異なるブラウザごとに微妙に内容が違ったりするのですが（難しいので具体的な内容は端折ります）、jQueryはブラウザの互換性が高いので、異なるブラウザでもほぼ共通で使用できるという利点があります。例えば、Chromeではこの内容、Firefoxではこの内容といった感じで、ブラウザごとの特徴にあわせて記述しないと不具合が発生しやすいのがJavaScript。ChromeもFirefoxも同じ内容でも動作にほぼ問題ないのが、jQueryといった感じです。

jQueryでできること

大きく下記3つの動作を行うことができます。今回はこの中から「時間によって表示を変化させること」を紹介します。簡単に言うと「タイマー機能」ですね。

アニメーションなどの動きをつけること
時間によって表示を変化させること
ユーザーの動きによって表現を変化させること

jQueryを読み込む方法

さて、最新のjQueryが分かったところで、ページの中に埋め込みますよ。先ほどのURLをコピペして、＜head＞～＜/head＞の一番上に記載しましょう。つまり＜head＞の直下が理想です。一番最初に読み込んでくれるので、ここが良いかと思います。

今回の目的であるタイマーを動かすためのjQueryを記述する

先ほどのjQueryのすぐ下に記載すると分かりやすいでしょう。

タイマー表示させたい内容を記述する

準備が整いましたので、実際にタイマー表示させたい内容を＜body＞～＜/body＞の中に記述します。今回は、バナーひとつを表示したりしなかったりではなくてページの内容をガラッと入れ替えるというときやキャンペーンのときに文章も画像もみんな切り替えたいなんてときにこそ使えるこの3種類をピックアップしてみましたよ。

指定の期間だけ表示する

◯◯◯◯◯の部分を「指定の期間だけ表示させたい」内容に置き換えてください。

指定の日時から表示しっぱなし

◯◯◯◯◯の部分を「指定の日時から表示から表示させたい」内容に置き換えてください。

指定の日時まで表示しておく

◯◯◯◯◯の部分を「指定の日時まで表示させたい」内容に置き換えてください。

まとめ

jQueryの公式ホームページで最新のファイルをチェックする。
Googleに上がっている最新のjQueryを拝借しよう。
jQueryを読み込む場所は＜head＞～＜/head＞の間にしよう。
タイマーを動かすためのjQueryを＜head＞～＜/head＞の間に記述しよう。
タイマー表示させたい内容を＜body＞～＜/body＞の中に記述しよう。

社畜系オタクがスキマ時間に書くブログ

興味を持ったものを好きなように紹介します。