TOC

ユーザーのタイムゾーンに日付を表​​示する

ユーザーのタイムゾーンでの日付の表示

1. 概要

今回のthe Reddit app case studyの記事では、bescheduling post’s according to the user’s timezoneを追加します。

タイムゾーンに対処することは非常に困難であり、技術的な選択肢は広く開かれています。 私たちの最初の懸念は、自分の（設定可能な）タイムゾーンに従って日付をユーザーに表示する必要があることです。 また、what format the date will be saved as, in the databaseを決定する必要があります。

2. 新しいユーザー設定–timezone

まず、既存の設定に新しいフィールド（timezone）を追加します。 

@Entity
public class Preference {
    ...
    private String timezone;
}

次に、単純にmake the timezone configurable in the user Preferences Page –単純ですが非常に便利なJQuerypluginを活用します。

デフォルトのタイムゾーンはサーバーのタイムゾーンであることに注意してください–which runs on UTC.

3. コントローラー

さて、楽しい部分です。 日付をuser’s timezoneからserver’s timezoneに変換する必要があります。 

@Controller
@RequestMapping(value = "/api/scheduledPosts")
public class ScheduledPostRestController {
    private static final SimpleDateFormat dateFormat =
      new SimpleDateFormat("yyyy-MM-dd HH:mm");

    @RequestMapping(method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    public void schedule(
      @RequestBody Post post,
      @RequestParam(value = "date") String date) throws ParseException
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.PUT)
    @ResponseStatus(HttpStatus.OK)
    public void updatePost(
      @RequestBody Post post,
      @RequestParam(value = "date") String date) throws ParseException
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }

    private synchronized Date calculateSubmissionDate(String dateString, String userTimeZone)
      throws ParseException {
        dateFormat.setTimeZone(TimeZone.getTimeZone(userTimeZone));
        return dateFormat.parse(dateString);
    }
}

変換は非常に簡単ですが、書き込み操作でのみ発生することに注意してください。サーバーは読み取りに対してUTCを返します。

JSで変換を行うため、これはクライアントにとってはまったく問題ありませんが、for read operations, the server still returns UTC datesであることを理解する価値があります。

4. フロントエンド

それでは、フロントエンドでユーザーのタイムゾーンを使用する方法を見てみましょう。

4.1. 投稿を表示する

ユーザーのタイムゾーンを使用して投稿のsubmissionDateを表示する必要があります。 


Post title
Submission Date
  (UTC)

そして、これが私たちの関数loadPage()です： 

function loadPage(page){
    ...
    $('.table').append(''+post.title+''+
      convertDate(post.submissionDate)+'');
    ...
}
function convertDate(date){
    var serverTimezone = [[dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz(date, serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    return clientDate.format(myformat);
}

Moment.jsは、ここでタイムゾーンの変換に役立ちます。

4.2. 新しい投稿をスケジュールする

また、schedulePostForm.htmlを変更する必要があります。 

Submission Date (UTC)

最後に、submissonDateの古い値をローカライズするために、editPostForm.htmlを変更する必要もあります。 

$(function() {
    var serverTimezone = [[dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz($("#date").val(), serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    $("#date").val(clientDate.format(myformat));
});

5. 結論

この簡単な記事では、Redditアプリにシンプルだが非常に便利な機能を導入しました。これは、独自のタイムゾーンに従ってすべてを表示する機能です。

これはone of the main pain points as I was using the appでした–すべてがUTCであったという事実。 現在–すべての日付は、ユーザーのタイムゾーンで適切に表示されます。

Related