designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. プログラミングの記事
  4. 期間指定のコンテンツ公開に使えるPHPのDateTimeクラスを使ったカウントダウンタイマーを作成してみる

期間指定のコンテンツ公開に使えるPHPのDateTimeクラスを使ったカウントダウンタイマーを作成してみる

  • 2021.05.21
  • プログラミング
  • PHP
ウェブサイト制作の中では、何日後の何時にコンテンツを公開するというような要件もたまにあります。その際にはリアルタイムで作業することもあれば、日時を迎えると同時に動的にコンテンツを切り替えることで公開することもあります。今回はPHPを使って、指定日時に合わせたカウントダウンタイマーを作成してみたいと思います。   カウントダウンタイマーはJavaScriptでも作成することができますが、時間が端末に依存してしまうため、正確に統一した日時に合わせるためにはサーバーサイド側で処理を行う方が賢明です。(フロント側の処理が含まれないため値はページを更新してあげる必要がありますが)今回はPHPのDateTimeクラスを使う方法で試してみます。   カウントダウンタイマーを作成するにあたっては、まず現在時刻を取得する必要があります。下記のようにDateTimeクラスのインスタンスを変数へ格納し、その中身を見ていきます。このときに、サーバーのタイムゾーンが正しく設定されていない可能性もあるので、「date_default_timezone_set()」関数で標準時を指定しておくと安心です。
date_default_timezone_set('Asia/Tokyo');
$current_time = new DateTime();
print_r( $current_time );
  DateTimeクラスで取得した現在時刻の情報を見てみるとこのような内容になっています。ここからキーを指定することで現在時刻を値として扱うことができます。
DateTime Object
  (
    [date] => 2021-05-19 16:32:29.065552
    [timezone_type] => 3
    [timezone] => Asia/Tokyo
  )
  それでは実際にカウントダウンタイマーの処理を作成していきます。現在時刻と指定時刻をそれぞれ変数に格納しておきます。時刻を指定する場合にはDateTimeクラスの引数に指定日時を渡してあげる形になります。そして、「diff()」関数を使って現在時刻と指定時刻との差を取ります。
date_default_timezone_set('Asia/Tokyo');
$current_time = new DateTime();
$schedule_time = new DateTime('2021-07-01 13:00:00');
$count = $current_time->diff($schedule_time);
print_r( $count );
  差を取った中身を見てみるとこのように年や月など細かく分けられたオブジェクトになっているのがわかります。
DateInterval Object
  (
    [y] => 0
    [m] => 1
    [d] => 11
    [h] => 20
    [i] => 23
    [s] => 58
    [f] => 0.372982
    [weekday] => 0
    [weekday_behavior] => 0
    [first_last_day_of] => 0
    [invert] => 0
    [days] => 42
    [special_type] => 0
    [special_amount] => 0
    [have_weekday_relative] => 0
    [have_special_relative] => 0
  )
  あとはこのオブジェクトからキーを指定して文字列として出力するとカウントダウンタイマーの完成です。文字列で出力するときには変数部分が含まれるため、「ダブルクオーテーションマーク」を使うことと、変数自体を波括弧で囲んであげる必要があります。
echo "あと{$count->y}年{$count->m}ヶ月{$count->d}日{$count->h}時間{$count->i}分{$count->s}秒です", PHP_EOL;
  実際に画面上には下記のように出力されます。先ほど取得した現在日時の差の値が反映されているのが確認できますね。
あと0年1ヶ月11日20時間23分58秒です
  ちなみに設定時間を超えているかどうかを調べる場合には、そのままDateTimeクラスで取得した時刻を比較することで可能になります。
if( $current_time > $schedule_time ) {
  echo '設定時間を過ぎました';
} else {
  echo '設定時間はまだです';
}
  先ほどは指定日時までの時間をカウントダウン表示する形でしたが、これを応用することで、指定日時に合わせたコンテンツの表示非表示を切り替えることが可能になります。  
  今回はPHPでカウントダウンタイマーを作る方法についてまとめてみました。ウェブサイトの要件で、期間指定でコンテンツを公開するときなどは便利ですね。ちょっとした処理で完結するので、ぜひ覚えておきたいですね。   【参考にさせて頂いたサイト】 DateTime クラスのまとめメモ

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

categories

  • WordPress(61)
  • JavaScript(49)
  • Vue.js(48)
  • CSS(46)
  • jQuery(34)
  • Nuxt.js(22)
  • Sass(21)
  • Gulp(17)
  • webpack(16)
  • PHP(14)
  • HTML(14)
  • GSAP(11)
  • React(10)
  • Vite(9)
  • Pug(9)
  • Laravel(8)
  • Cordova(8)
  • Linux(7)
  • Next.js(6)
  • Apache(5)
  • Shopify(4)
  • REST API(4)
  • Node.js(4)
  • Smarty(3)
  • Git(3)
  • JSON(3)
  • その他プログラミング(3)
  • Google Apps API(3)
  • Bootstrap(3)
  • 環境構築・システム(3)
  • TypeScript(2)
  • EJS(2)
  • RMS(2)
  • Docker(2)
  • Instagram API(2)
  • Excel VBA(2)
  • SVG(1)
  • Dart(1)
  • ECカートASP(1)
  • Markdown(1)
  • AMP(1)
  • Nginx(1)
  • XML(1)
  • shellscript(1)
  • Ruby(1)
  • MySQL(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact