フラスコメガチュートリアル、パート13：日付と時刻

これは、Flaskマイクロフレームワークを使用してPython Webアプリケーションを作成した経験を説明するシリーズの13番目の記事です。

このガイドの目的は、かなり機能的なマイクロブログアプリケーションを開発することです。オリジナリティが完全に欠如しているため、マイクロブログアプリケーションと呼ぶことにしました。

GitHubノート

気付いていない人のために、最近マイクロブログのソースコードをgithubに転送しました。 リポジトリは次のアドレスにあります。
https://github.com/miguelgrinberg/microblog
このマニュアルの各ステップには、適切なタグが追加されています。

タイムスタンプの問題

長い間無視してきたアプリケーションの機能の1つは、日付と時刻の表示です。

これまで、Pythonを信頼して、ユーザーオブジェクトとポストオブジェクトに保存されているタイムスタンプを適切に表示するようにしていますが、これは実際には良い解決策ではありません。

次の例を考えてみましょう。 2012年12月31日15時54分にこれを書いています。 私のタイムゾーンはPST（または、それがもっと好きならUTC -8）です。 Pythonインタープリターを実行すると、次の結果が得られます。

>>> from datetime import datetime >>> now = datetime.now() >>> print now 2012-12-31 15:54:42.915204 >>> now = datetime.utcnow() >>> print now 2012-12-31 23:55:13.635874 

now（）を呼び出すと、タイムゾーンの正しい時間が返され、utcnow（）を呼び出すとGMT時間が表示されます。

それで、どの関数を使用するのが良いですか？

now（）を使用することにした場合、データベースに保存する予定のすべてのタイムスタンプはサーバーの場所に依存するため、問題が発生する可能性があります。

ある日、サーバーを別のタイムゾーンに移動する必要がある場合があります。 そしてこの場合、データベースに保存されているすべてのタイムスタンプは、サーバーを起動する前に新しいローカル時間に従って修正する必要があります。

しかし、このアプローチにはさらに深刻な問題があります。 異なるタイムゾーンのユーザーの場合、投稿がPSTタイムゾーンで表示されている場合、投稿がいつ公開されたかを正確に判断することは困難です。 決定するために、ユーザーは時刻がPSTに相対的であることも知っている必要があります。

明らかに、これは最良のオプションではないため、データベースを作成したときにGMTにタイムスタンプを保存することにしました。

ただし、タイムスタンプを特定の標準に合わせると、最初の問題（サーバーを別のタイムゾーンに移動すること）のみを解決し、2番目の問題は未解決のままでした-タイムスタンプは絶対にすべてのユーザーGMTに表示されます。

これでもユーザーを混乱させる可能性があります。 午後3時頃にブログエントリを投稿したPSTタイムゾーンのユーザーを想像してください。 レコードはすぐにメインページに表示されますが、23：00の作成時間を示しています。

したがって、今日の記事の目的は、ユーザーを混乱させないために、日付と時刻を表示する問題を明確にすることです。

ユーザーのタイムスタンプ

この問題の明らかな解決策は、ユーザーごとにGMTを現地時間に個別に変換することです。 これにより、データベースでGMTを使用し続けることができ、各ユーザーのその場で変換された時間により、すべてのユーザーの時間が一定になります。

しかし、ユーザーの位置をどのようにして知るのでしょうか？

多くのサイトには、ユーザーがタイムゾーンを指定できる設定ページがあります。 これを行うには、既存のタイムゾーンのドロップダウンリストを含むフォームで新しいページを追加する必要があります。 登録の一部は、ユーザーのタイムゾーンに関する質問への回答になります。
このソリューションは非常に実用的であり、問​​題を解決するという事実にもかかわらず、OSに既に設定されて保存されている情報をユーザーに入力するよう求めることは、いくぶん冗長に思えます。 ユーザーのコンピューターからタイムゾーン設定を取得する方がはるかに効率的であるようです。

ただし、セキュリティ上の理由から、ブラウザはユーザーのシステムへのアクセスを許可しないため、必要な情報を取得できません。 技術的に可能であっても、Windows、Linux、Mac、iOS、Androidのタイムゾーンの現在の設定を探す場所を正確に知る必要があります（これはあまり一般的ではないOSをカウントしません）。

ブラウザーはユーザーのタイムゾーンを認識しており、標準のJavaScriptインターフェイスを介してアクセスできるようになっています。 今日のWeb 2.0の世界では、ブラウザでJavaScriptが有効になっていることを期待できます（実際には、JavaScriptが無効になっていると現代のサイトは正しく動作しません）。

javascriptによって提供されるタイムゾーン情報を使用するための2つのオプションがあります。

1. 従来の（旧式の）アプローチは、ユーザーが最初にサイトにアクセスしたときに、ユーザーのタイムゾーンに関する情報をブラウザに送信するよう求めることです。 これは、Ajaxを使用するか、はるかに簡単にメタ更新タグを使用して実行できます。 サーバーはタイムゾーンを認識するとすぐに、この情報をユーザーセッションに保存し、レンダリング中にテンプレートのすべてのタイムスタンプを調整できます。
2. 最新の（新しい学校の）アプローチは、このプロセスにサーバーを関与させず、GMTでユーザーのブラウザーにタイムスタンプを送信できるようにすることです。 また、クライアントのjavascriptを使用して、ユーザーのタイムゾーンに応じた時間変換が行われます。

どちらのオプションも正しいですが、2番目のオプションには利点があります。 ブラウザには、ユーザーのシステムロケールの設定に従って日付を正しくレンダリングするためのオプションがさらにあります。 AM / PM（12時間）または24時間の時刻形式などの詳細が使用されます。DD/ MM / YYまたはMM / DD / YY日付形式が優先され、その他の多くはブラウザで利用でき、サーバーには認識されません。

2番目のオプションを支持するこれらの議論が十分でない場合、このアプローチには別の利点があります。 すべての作業がすでに完了していることがわかりました！

moment.jsに会う

Moment.jsは、日付と時刻を新しいレベルにレンダリングするコンパクトなオープンソースjavascriptライブラリです。 あらゆる種類の書式設定オプションなどが提供されます。

アプリケーションでmoment.jsを使用するには、テンプレートにかなりのJavaScriptを追加する必要があります。 ISO 8601形式の時間から瞬間オブジェクトを作成することから始めますたとえば、上記の例でGMTを使用して、次のような瞬間オブジェクトを作成します。

 moment("2012-12-31T23:55:13 Z") 

オブジェクトが作成されると、さまざまな形式の文字列に変換できます。 たとえば、ロケールシステム設定に従ったかなり詳細な表示は次のようになります。

 moment("2012-12-31T23:55:13 Z").format('LLLL'); 

次に、システムがこの日付を表示する方法を示します。

 Tuesday, January 1 2013 1:55 AM 

さまざまな形式で表示される同じタイムスタンプのいくつかの例を次に示します。

書式	結果
L	01/01/2013
LL	2013年1月1日
Lll	2013年1月1日1:55 AM
Lll	2013年1月1日火曜日1:55 AM
dddd	火曜日

さまざまなオプションのライブラリサポートはこれで終わりではありません。 形式（）に加えて、ライブラリはfromNow（）およびcalendar（）を提供し、タイムスタンプのはるかにユーザーフレンドリーな表示を提供します。

書式	結果
fromNow（）	2年前
カレンダー（）	01/01/2013

提示されているすべての例で、サーバーはGMTで同じ時間を提供し、必要な変換はユーザーのブラウザーによって既に行われていることに注意してください。

スキップしたjavascriptマジックの最後の部分は、モーメントオブジェクトメソッドによって返される行をページ上に表示することです。 これを実現する最も簡単な方法は、次に示すように、javascript document.write関数を使用することです。

 document.write(moment("2012-12-31T23:55:13 Z").format('LLLL')); 

document.writeの使用は、javascriptを使用してHTMLドキュメントのフラグメントを生成する方法として非常にシンプルで簡単ですが、この実装にはいくつかの制限があることに注意してください。 最も重要なことは、document.writeはドキュメントの読み込み中にのみ使用でき、読み込みが完了した後はドキュメントの変更に使用できないことです。 また、この制限の結果、Ajaxを介してデータをロードする場合、このソリューションは機能しません。

統合moment.js

アプリケーションでmoment.jsを使用するために必要なことがいくつかあります。

まず、ダウンロードしたライブラリmoment.min.jsを/ app / static / jsフォルダーに配置して、静的（静的ファイル）としてクライアントに提供する必要があります。

次に、このライブラリをベーステンプレート（app / templates / base.htmlファイル）に追加します。

 <script src="/static/js/moment.min.js"></script> 

これで、タイムスタンプを表示するテンプレートに<script>タグを追加でき、ジョブが完了しました。 しかし、代わりに、テンプレートで使用できるmoment.jsのラッパーを作成します。 これにより、タイムスタンプを表示するためのコードを変更する場合、1つのファイルのみを変更するだけで十分であるため、将来的に時間を節約できます。

ラッパーは非常に単純なpythonクラス（app / momentjs.pyファイル）です。

 from jinja2 import Markup class momentjs(object): def __init__(self, timestamp): self.timestamp = timestamp def render(self, format): return Markup("<script>\ndocument.write(moment(\"%s\").%s);\n</script>" % (self.timestamp.strftime("%Y-%m-%dT%H:%M:%SZ"), format)) def format(self, fmt): return self.render("format(\"%s\")" % fmt) def calendar(self): return self.render("calendar()") def fromNow(self): return self.render("fromNow()") 

renderメソッドは文字列を直接返すのではなく、テンプレートエンジンであるJinja2が提供するMarkupクラスのインスタンスであることに注意してください。 ポイントは、Jinja2はデフォルトですべての行をエスケープするため、<script>はこの形式＆lt; script＆gt;でクライアントに到達できることです。 文字列の代わりにマークアップオブジェクトのインスタンスを返したので、Jinja2にこの文字列をエスケープしてはならないことを伝えました。

ラッパーができたので、それをJinja2に追加して、テンプレート（app / __ init__.pyファイル）で使用できるようにする必要があります。

 from momentjs import momentjs app.jinja_env.globals['momentjs'] = momentjs 

これにより、すべてのテンプレートでJinja2がクラスをグローバル変数として提供できるようになりました。

これで、テンプレートを変更する準備が整いました。 アプリケーションには、日付と時刻を表示する2つの場所があります。 最初はユーザープロフィールページで、最後にアクセスした時間を表示します。 このページに表示するには、カレンダー（）フォーマット（ファイルアプリ/テンプレート/ user.html）を使用します。

 {% if user.last_seen %} <p><em>Last seen: {{momentjs(user.last_seen).calendar()}}</em></p> {% endif %} 

2番目の場所は、インデックス、ユーザー、および検索ページで使用される投稿テンプレートです。 投稿テンプレートでは、fromNow（）のフォーマットを適用します。投稿が作成された正確な時刻は、投稿が作成されてからの経過時間ほど重要ではないためです。 なぜなら 別のテンプレートで投稿のレンダリングを選択しました。ここで、投稿を表示しているすべてのページ（ファイルアプリ/テンプレート/ post.html）を変更するために1か所で変更を行う必要があります。

 <p><a href="{{url_for('user', nickname = post.author.nickname)}}">{{post.author.nickname}}</a> said {{momentjs(post.timestamp).fromNow()}}:</p> <p><strong>{{post.body}}</strong></p> 

そして、この簡単な変更により、タイムスタンプに関するすべての問題を解決しました。 また、同時に、サーバーコードを変更する必要もありませんでした！

おわりに

気付かないうちに、今日、ユーザーのロケール設定に応じて日付表示を変更することにより、Web全体からユーザーのアプリケーションの可用性を向上させる重要な一歩を踏み出しました。

このシリーズの次回の記事では、複数の言語のサポートを含めるため、外国人ユーザーをさらに喜ばせようとします。

ダウンロード： microblog-0.13.zip。
または、 GitHubでソースコードを見つけることができます。

ミゲル