[jQuery] timeago.js を使って経過時間表示させる

Frozen-Flaskを使うようになり、今までサーバーサイドで表示させていた 経過時間表示が使い物にならなくなったので、クライアントサイドで表示させるように変更しました。具体的には timeago.js を使って実現しています。

timeago: a jQuery plugin

やり方ですが、まず app.py 側で該当エントリーの 日時(この場合は pub_date) を strftime を使ってISO8601に変換

@app.route('/entry/<int:post_id>/')
def show_entry(post_id):
    dt = Entry.query.filter_by(id = post_id).one()
    flash(u'%s' % dt.pub_date.strftime('%Y-%m-%dT%H:%M:%S+09:00'), 'alert-success')
    return render_template('show.html',
        entries = Entry.query.filter_by(id = post_id).all())

次に templateファイルl内 で flashメッセージを受け取る記述をします。その時に spanタグの class名をtimeagoとし、titleに日時(ISO8601)がセットされるようにします。spanタグはabbrでも可能ですが、後述するtimeago.js のパラメータの記述も合わせる必要があります。

{% elif request.endpoint == 'show_entry' %}
                <div class="row">
                    <div class="col-md-8">
                        {% for category, message in get_flashed_messages(with_categories=true) -%}
                        <div class="{{category}}"><span class=timeago title="{{message}}"></span></div>
                        {%- endfor %}
                        {{ self.body() }}
                    </div>
                    <div class="col-md-4">
                        <div id="sidebar">
                            {% block sidebar %}{% endblock %}
                        </div>
                    </div>
                </div>

最後に同じくtemplateファイルで timeago.js の設置と設定をします。

<script type="text/javascript" src="/static/js/jquery.timeago.js"></script>
        <script>
            // Japanese setting for Timeago
            $.timeago.settings.strings = {
                prefixAgo: "",
                prefixFromNow: "今から",
                suffixAgo: "",
                suffixFromNow: "後",
                seconds: "1 分未満",
                minute: "約 1 分",
                minutes: "%d 分",
                hour: "約 1 時間",
                hours: "約 %d 時間",
                day: "約 1 日",
                days: "約 %d 日",
                month: "約 1 月",
                months: "約 %d 月",
                year: "約 1 年",
                years: "約 %d 年",
                wordSeparator: ""
            };
        </script>
        <script>
            $(function() {
                $('span.timeago').timeago();
                $('span.timeago').before("この記事は投稿から");
                $('span.timeago').append("が経過しています");
            });
        </script>

私の場合、前後にメッセージを結合したかったので、before とappend で追加しています(このやり方でいいのか不安)。因みに日本語化はこちらを参考にしました。
jquery-timeago/locales at master · rmm5t/jquery-timeago

尚、今までのサーバーサイド側での方法はこちらのエントリーをご参照願います。
[Python][Flask]ブログエントリーの経過時間を表示させる | aoshiman.org


  • このエントリーをはてなブックマークに追加
PAGE TOP