時間前：投稿されてからの日付を表示する方法

キーテイクアウト

「2分前に公開された」など、投稿されてからの公開日を表示すると、「2016年9月12日に公開された」などの従来の日付形式とは対照的に、視聴者との鮮度と関与の感覚を高めることができます。 > Time_ago（）と呼ばれるPHP関数を使用して、UNIXタイムスタンプを「現在」、「3分前」、「8時間前」、「昨日」、または特定の日付などの人間の読み取り可能な形式に変換できます。活動は2日以上前に発生しました。
HTML
• 要素は、これらの動的な日付を提示するために使用できます。[DateTime]属性によってフォールバック値が提供され、より良いアクセシビリティが確保されます。 [タイトル]属性を使用して、カーソルが日付テキストに配置されているときの正確な日付を表示できます。
JavaScriptを使用して、Facebookと同様に日付をリアルタイムで増やすことができます。これは、リアルタイムの更新が重要な特定のタイプのWebサイトの優れた強化になる可能性があります。
• 2015年9月12日に公開された、2015年9月12日、09：41：23、2015-09-12などの形式で日付を提示することは一般的です。
これらの例のそれぞれは、公開された記事であれ、読者のコメントであれ、アップロードされたビデオなど、何らかのアクティビティの完全な日付および/または時間を示しています。 このような日付形式は、完全に合理的に見えるかもしれません。結局のところ、それらは有益で人間が読みやすいです！はい、しかし、「人間読み取り可能」は、ユーザーがアクティビティがどのように最近発生したかを容易に理解できることを意味しません。 Webは動きの速い場所であり、コンテンツに新鮮さを与えることが、視聴者との関わりの鍵になる可能性があります！それでは、これらの一般的な日付形式をどのように改善できるかを見てみましょう。
• ちょっとしたトリック
もう一度、もう一度、数分前に実際に公開された投稿に出くわしたとしましょう。

2016年9月12日に公開

…またはこれ：

2016-09-12、09：41：23

に公開されています

これらのメッセージの問題は、あなたのウェブサイトが更新されたばかりであるという感覚や、それを非常に頻繁に行うという感覚を伝えないことです。だから、確かに、このように時間を提示する方が、より魅力的で、はるかに明確です：

2分前に公開された

これは何度も見たことがありますか？しかし、あなたの何人があなたのプロジェクトにこれを構築しましたか？たとえば、Facebookを考えてみましょう。最初の例のように、最新のコンテンツの日付を提示した場合はどうなりますか？次の画像の左右の列を比較してください。

左の列の日付はそれほど魅力的ではありませんか？右手の例はあなたにとってより魅力的です。コンテンツが新鮮であることを知ることは非常に重要です。特にソーシャルネットワークでは、人々が古いものや明らかにタイムスタンプではないコンテンツを無視する可能性が高いです。

より良い日付を印刷

より良い日付を提示するために、では、サーバー側のスクリプトが必要になり、このデモにPHPを使用します。ここに示すように、time_ago（）と呼ばれる小さな関数を作成しました：

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

このコードの詳細を見てみましょう。

あなたが提供しなければならない唯一の議論は$時間であり、それはUnixタイムスタンプの日付です - time_ago（1442082961）。
• 渡された$時間に関して関数が返されるものの例：
• Now
  • - それが60秒以内に起こった場合（timefore_now） 3分前 - 60分未満の場合（timebefore_minute（s））
  • 8時間前 - 24時間未満の場合（timebefore_hour（s））
  • 昨日 - 48時間前（timefefore_yesterday）
  の場合
  • 12月12日 - 48時間以上で今年起こった場合（Timefore_format）
  • 2015年9月12日 - 今年発生しなかった場合（time_format_year）。
  PHP定義は、構成のようなデータを関数コードから分離するためのものです（すべてのdefine（）発生を構成ファイルに入れ、ヘルパーファイルの関数に配置することをお勧めします）。 定義の
  {num}は実際の数字（数分または時間）に置き換えられます。
• たとえば、これをWordPressサイトに載せたい場合は、これを書くだけです。
• またはそれが他の仮説CMSであった場合：
または静的な方法：

アクセシビリティとユーザビリティ

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

日付を表示するために使用する必要がある特定のHTML要素があります：。私たちの場合、Time_ago関数を使用する場合、時間要素の値は常に有効な日付形式ではありません（昨日

または<?=time_ago( $post->date_created )?>3分前

など）。したがって、[DateTime]属性を使用して、フォールバック値を提供する必要があります。

<?=time_ago( 1447571705 )?>

これにより、アクセシビリティが向上します。たとえば、

[タイトル]属性を見つけましたか？それは小さなユーザビリティの改善です。カーソルを日付テキストに渡すと、タイトル属性に表示されているメッセージが表示されます。それは、何らかの理由で「実際の」日付を探していたユーザー向けです。これは、もっと何かがあるという感覚を強化するための小さなCSSのトリックです：

javaScriptの拡張

もう1つできることがあります！ Facebookもリアルタイムで日付を増やしていることに気づきましたか？ 1分間3分で見るだけで、4分などに変わります。したがって、これが非常に優れた強化として機能する場合は、Webサイトにはタイプがあります。このような記事の投稿では役に立たないでしょうが、Readerrr：のようなサイトでは完璧です。

<span><span><?php
</span></span><span>
</span><span>    <span>define( TIMEBEFORE_NOW,         'now' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTE,      '{num} minute ago' );
</span></span><span>    <span>define( TIMEBEFORE_MINUTES,     '{num} minutes ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOUR,        '{num} hour ago' );
</span></span><span>    <span>define( TIMEBEFORE_HOURS,       '{num} hours ago' );
</span></span><span>    <span>define( TIMEBEFORE_YESTERDAY,   'yesterday' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT,      '%e %b' );
</span></span><span>    <span>define( TIMEBEFORE_FORMAT_YEAR, '%e %b, %Y' );
</span></span><span>
</span><span>    <span>function time_ago( $time )
</span></span><span>    <span>{
</span></span><span>        <span>$out    = ''; // what we will print out
</span></span><span>        <span>$now    = time(); // current time
</span></span><span>        <span>$diff   = $now - $time; // difference between the current and the provided dates
</span></span><span>
</span><span>        <span>if( $diff < 60 ) // it happened now
</span></span><span>            <span>return TIMEBEFORE_NOW;
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 ) // it happened X minutes ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 60 ) ), $out == 1 ? TIMEBEFORE_MINUTE : TIMEBEFORE_MINUTES );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 ) // it happened X hours ago
</span></span><span>            <span>return str_replace( '{num}', ( $out = round( $diff / 3600 ) ), $out == 1 ? TIMEBEFORE_HOUR : TIMEBEFORE_HOURS );
</span></span><span>
</span><span>        <span>elseif( $diff < 3600 * 24 * 2 ) // it happened yesterday
</span></span><span>            <span>return TIMEBEFORE_YESTERDAY;
</span></span><span>
</span><span>        <span>else // falling back on a usual date format as it happened later than yesterday
</span></span><span>            <span>return strftime( date( 'Y', $time ) == date( 'Y' ) ? TIMEBEFORE_FORMAT : TIMEBEFORE_FORMAT_YEAR, $time );
</span></span><span>    <span>}
</span></span><span>
</span><span><span>?></span></span>

最後に、PHPコードをJavaScriptの等価物に変換する必要があります。バニラJSでこれをやったことがあります（ただし、jQueryバージョンも利用できます）。スクリプトは毎分[データ時間]要素を毎分1回（SetimeOut（Updatedates、1000 * 60））通過し、値を更新します。

<span><span><?=time_ago( get_the_time( 'U' ) )?></span></span>

オンラインデモとコードのダウンロード

上記のコードのオンラインデモをチェックするか、完全なデモコードをダウンロードできます。

もう1つのこと

上記の例では、3日以上前にアクティビティが発生した場合、完全な日付が提示されます。しかし、5日前、2週間前、1か月前などのような時間を提示するために、スクリプトを拡張するのは非常に簡単です：

wlap up

<?=time_ago( $post->date_created )?>

ユーザーエクスペリエンスと満足度が詳細です。ダイナミックな日付形式などの簡単な詳細が、私たちのウェブサイトを少し良くするのに十分な場合がある場合があります。

では、この解決策についてどう思いますか？次のプロジェクトで使用することを検討しますか？質問はありますか？コメントで私に知らせてください。

ちなみに、

は、122Wがクールではないこと、2.4yrsの理解がはるかに簡単であることを誰かがInstagramに伝えることができることを願っています。それは良いでしょうね

「前」の時間を数えることに関するよくある質問（FAQ）

JavaScriptで「AGO」時間関数はどのように機能しますか？

​​

JavaScriptの「Ago」時間関数は、特定のイベントが発生してから経過した時間を表示する方法です。日付オブジェクトを使用して、現在の時間とイベントの時間の違いを計算します。この差は、差の大きさに応じて、数秒、数分、時間、日、週、または年に変換されます。結果は、「5分前」や「2日前」など、人間の読み取り可能な形式で経過時間を表す文字列です。 Application？

Webアプリケーションで「Ago」時間関数を実装するには、入力として日付オブジェクトを取得し、経過時間を表す文字列を返すJavaScript関数を作成する必要があります。この関数は、現在の時刻と入力日の差を計算し、この差を適切なユニットに変換し、結果を文字列としてフォーマットする必要があります。その後、「前」の時間を表示する必要があるときはいつでもこの関数を呼び出すことができます。

「前」の時間関数を使用することの利点は何ですか？

​​

「Ago」時間関数は、時間情報を表示するためのより直感的でユーザーフレンドリーな方法を提供します。解釈して比較するのが難しい場合があるイベントの正確な日付と時刻を表示する代わりに、「前」の時間関数は、理解しやすい形式で経過時間を示しています。これにより、ユーザーエクスペリエンスが向上し、Webアプリケーションがより魅力的でインタラクティブになります。日付。入力日が現在の日付より遅い場合、関数はイベント以来の時間ではなくイベントまでの時間を計算します。結果は、「5分」や「2日間」などの人間が読み取る形式で残りの時間を表す文字列になります。私のニーズ？

「Ago」時間関数は非常にカスタマイズ可能です。関数を変更して、異なる時間単位、出力文字列に異なる形式、または経過時間を丸めるための異なるルールを使用できます。必要に応じて、さまざまな言語またはロケールのサポートを追加することもできます。関数を微調整することで、Webアプリケーションの設計と機能に完全に適合させることができます。関数は標準のJavaScript機能に基づいているため、すべての最新のWebブラウザーと互換性があるはずです。ただし、さまざまなブラウザやプラットフォームでコードをテストして、正しくかつ一貫して機能することを確認することをお勧めします。 「前」の時間関数は、タイムゾーンを処理できます。この関数は、ユーザーのデバイスのタイムゾーンを自動的に考慮した日付オブジェクトを使用します。これは、「Ago」時間がユーザーの位置やタイムゾーンに関係なく正確であることを意味します。 「Ago」時間関数は正しく機能していません。Console.log（）メソッドを使用して、入力日、現在の日付、計算された違いを印刷できます。これにより、関数のエラーまたは不一致を特定するのに役立ちます。また、ブラウザの開発者ツールでデバッガーツールを使用して関数をステップスリートし、その動作を詳細に検査することもできます。はい、モバイルアプリで「Ago」時間関数を使用できます。 JavaScriptは、モバイルアプリを含む多くの異なる環境で使用できる多用途の言語です。この関数は、モバイルアプリでWebアプリケーションと同じように機能する必要があります。「Ago」時間関数のパフォーマンスを最適化するにはどうすればよいですか？

​​

「Ago」時間関数のパフォーマンスを最適化するには、メモ化やキャッシュなどの手法を使用できます。これらの手法は、関数が実行する必要がある計算の数を減らし、より速く、より効率的にすることができます。また、すべてのページのロードまたは毎秒ではなく、必要な場合にのみ「AGO」時間を更新することにより、関数が呼び出される回数を最小限に抑えることもできます。

以上が時間前：投稿されてからの日付を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。