jQuery タグの一覧です(2 件)

[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


[JavaScript][jQuery]InfinateScrollを導入した

Twitter(ブラウザ版)みたいな無限スクロールをブログに適用したくて色々と調べていたんですけど、InfinateScrollっていうjQueryプラグインを使うことにしました。

他にも類似品はあるのだけれど、これはGitHubでスターいっぱい付いているし、なによりこちらが参考になったので。

使い方はbodyの閉じタグ直前にjQuery本体、InfinateScrollの順に設置してあげて、その後にプラグインの設定部分を記述するだけです。

実際のコードはこんなかんじになっています。

<script type="text/javascript" src="/static/js/jquery.infinitescroll.min.js"></script>
<script>
    $(function(){
        $('#wrapper').infinitescroll({
            <!-- debug        : console.log, -->
            navSelector  : "li.next",
            nextSelector : "li.next a",
            itemSelector : "#wrapper div.container"
        });
    });
</script>

適用したのはPaginateを持っているapp.routeで今のところトップページとタグページになります。当初トップページだけでしたが、タグによってはかなりエントリ件数が増えているのでPaginate機能を持たせました。

閲覧してなんかおかしいところあったら教えてください。


PAGE TOP