プラグインこんにちは稲垣です。台風が過ぎて少し涼しくなりましたね。今回はjQueryでcookieを保存し、訪問回数をカウントするページを作ってみました。一昔前のサイトで使われていたのをちょこちょこ見かけた覚えがあります。目次デモhtmlを用意する動きの実装まとめデモそれでは完成イメージになります。訪問回数をカウントするサンプルページを訪問した回数と、前回の訪問から何日経っているかを表示させています。Cookieに保存しているので一度閉じてから開くと、前回の分に加算された回数が表示されます。サンプルを作った際になんとも地味だったので、当時の雰囲気を出すために90年代後半のようなデザインを目指してみました。加えて今年の福岡での初釣果であるアメフラシのイラストも置いてみました。賑やかになって満足です。htmlを用意する今回は無駄な装飾が多いので最低限必要な部分のみ抜き出しました。CSSや画像は必要に応じてご自由にどうぞ。href="javascript:location.reload();">ブラウザの更新ボタン</a></div>ちなみにサンプルで目一杯使用しているtableタグは載せてません。動きの実装それではjavascriptの部分になります。今回はCookieの保存や取得をjquery.cookie.jsで行うので、jQueryの後に忘れずに読み込ませてください。ローカルでは動作しないので確認時はサーバーにアップするなどの手順を踏んで下さい。jquery.cookie.jsのダウンロードはこちら最初に今回必要な変数と関数を書き出します。変数の値は実行時にCookieから読み込んだものを使うのでここでは宣言のみです。//現在の日時取得}Dateオブジェクトを使用して現在の時間を取得する関数です。00:00:00からの経過ミリ秒を取得するgetTime()を使用しました。//日数に換算}変数nの部分にnowTimeの様なタイムスタンプ型の変数を入れて使います。courseに入る経過時間は1000ミリ秒の単位になっているので、最後の行で表示させたい単位に変換します。});123456//「Cookieを消す」ボタン押下時の処理$("#btn_reset").click(function(){$.removeCookie('visitCount');$.removeCookie('preVisit');alert("Cookieを削除しました")});Cookieに保存されている変数を指定して削除する関数です。あとはページが読み込まれた時の実行処理を記述します。+"日が経過しています!");});まずCookieの中身を確認し、変数が空っぽなら初訪問時の処理を行い、それ以外の場合は2回目以降の処理を行います。‘値’)を使って現在の値をCookieに保存しておきます。訪問回数と経過時間を分けて書きましたが、一緒に書いた方がコードがすっきりしそうですね。まとめ最後に全てのコードをまとめて載せます。+"日が経過しています!");});全体通して載せてみても結構短いですね。...本当は育成ゲーム的なものを作ろうとしたのですが収集がつかなくなったため今回の様なサンプルになりました。機会があれば完成させてアップできればと思います。無料で使えるJavaScriptやCSSなどのCDNサービスまとめgulp4に移行するためにタスクを書き換えてみたマグネッツとは?福岡でWEB制作や中小企業様の集客支援などを行っている会社です。