Back to Blog

Flaskで日時を日本標準時（JST）に変換する方法【Flask-Momentを使ってみよう】

flask

2024年10月3日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

今回の記事では、Flaskで日時を日本標準時（JST）に変換する方法について解説します。

Flaskで日時を変更する方法はいくつかありますが、今回の記事ではFlask-Momentというライブラリを使う方法を解説します。

Flask-Momentとは？

Flask-Momentは、Flaskアプリケーションで日時を簡単に操作・表示するための拡張機能です。

これは、JavaScriptの日時操作ライブラリであるMoment.jsをFlaskテンプレートと統合し、クライアントサイドでの日時のフォーマットやタイムゾーン変換を容易にします。

Flask-Momentを使用することで、日時表示に関する複雑な処理を簡素化し、ユーザーにとって見やすく、理解しやすい情報を提供できます。

主な特徴としては、サーバー側でUTCの日時を保持し、フロント側でユーザーのタイムゾーンに合わせて表示します。フロント側は、Flaskのテンプレート内で簡潔な記法で日時を操作・表示することができます。

Flask-Momentのインストールとセットアップ

ここからは、Flask-Momentをプロジェクトに導入するための手順を詳しく見ていきましょう。

Flask-Momentのインストール

まず、Flask-Momentをインストールします。ターミナルで以下のコマンドを実行してください。

pip install flask-moment pytz

pytzはタイムゾーンの処理に必要なライブラリです。

Flaskアプリケーションへの組み込み

次に、FlaskアプリケーションにFlask-Momentを組み込みます。

app.pyファイルを作成し、基本的なFlaskアプリケーションを設定します。

from flask import Flask, render_template
from flask_moment import Moment
from datetime import datetime
import pytz

app = Flask(__name__)
moment = Moment(app)

@app.route('/')
def index():
    # 現在のUTC時刻を取得
    utc_now = datetime.utcnow()
    # JSTタイムゾーンを設定
    jst = pytz.timezone('Asia/Tokyo')
    # UTC時刻をJSTに変換
    jst_now = utc_now.replace(tzinfo=pytz.utc).astimezone(jst)
    return render_template('index.html', current_time=jst_now)

if __name__ == '__main__':
    app.run(debug=True)

moment = Moment(app)の部分では、flask-momentのインスタンスを作成し、Flaskアプリケーションに登録します。これにより、テンプレート内でflask-momentの機能を利用できるようになります。

flask-moment自体はクライアント側で時刻を処理するため、上記のapp.pyでは、pytzを使用してUTC時刻をJSTに変換しています。

テンプレートの作成

続いて、テンプレートを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask Moment JST Example</title>
    {{ moment.include_moment() }}
</head>
<body>
    <h1>現在時刻（JST）</h1>
    <p>{{ moment(current_time).format('LLLL') }}</p>
    <!-- リアルタイムで時刻を更新する場合 -->
    <p>リアルタイム更新: <span id="current-time">{{ moment(current_time).format('LLLL') }}</span></p>
    <script>
        setInterval(function() {
            var now = moment().tz("Asia/Tokyo").format('LLLL');
            document.getElementById('current-time').innerHTML = now;
        }, 1000);
    </script>
</body>
</html>

上記のテンプレートの解説をします。

まず、ヘッダー部分で以下のタグを追加することで、moment.jsライブラリを読み込みます。

{{ moment.include_moment() }}

続いて、momentフィルターを使用して時刻をフォーマットします。

<p>{{ moment(current_time).format('LLLL') }}</p>

‘LLLL’はmoment.jsのフォーマットオプションで、例えば「2024年4月27日土曜日 15:30」のように表示されます。

クライアント側でリアルタイムに時刻を更新する場合は、JavaScriptを用いて定期的に時刻を更新します。上記のテンプレート例では、1秒ごとに時刻を更新しています。

まとめ

本記事では、Flaskとflask-momentを使用して時刻をJSTに設定する方法について解説しました。

flask-momentを活用することで、ユーザーにとって見やすく直感的な時刻表示が実現できます。特にタイムゾーンが重要な日本国内向けのアプリケーションでは、JSTへの正確な設定が不可欠です。ぜひ本記事を参考に、Flaskアプリケーションでの時刻表示を改善してみてください。

参考資料

flask フロントエンド

Pythonの基礎から応用まで学べる
Python WebAcademy

Python WebAcademyでは、Pythonの基礎からアーキテクチャなどの応用的な内容まで幅広く学べます。また、ブラウザ上で直接Pythonコードを試すことができ、実践的なスキルを身につけることが可能です。

Pythonの学習を始める

インフラの学習はInfraAcademy