2015 年 4 月の記事一覧です(3 件)

[CSS][JavaScript]Google カスタム検索 の設置をしてみた

Frozen-Flaskを使って静的サイト運営をしてからというもの、いかにクライアントサイドで動きを付与させるかを考えていて、その一環でGoogle カスタム検索を設置してみました。

このブログのサイドバーにあります。表示結果がオーバーレイされるようにしています。カッコいいです。

静的サイトにおけるサイト内検索は、自前で実装するならば検索データをjsonなりxmlなりで出力するページを設けてそれをJavaScriptでパースすることが考えられて、静的サイトジェネレータにそういった機能があればそれを使えばよいのだけれど、ない場合はGoogleに乗っかるのが一番手っ取り早いですね。
ちなみに Bootstrap3 で使ってみるとボタンがつぶれたりしてそのままだと表示が残念なので、デベロッパーツール等で ちまちま とCSS打ち消したりしていくしかないです。

jquery - Google CSE with Twitter Bootstrap not displaying the search box correctly - Stack Overflow

[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


Frozen-Flask + wercker + Amazon S3 でFlask製ブログを静的サイトとして運用してみた

そんなに大それた話ではないのですが、数日前にFrozen-Flaskを使ってFlask製ブログを文字通りFrozenさせてAmazon S3にホスティングさせてみました。なんとかうまくいっているので暫くこれでやってみます。


Frozen-Flaskを使おうと思った経緯


以前、Flaskの作者Arminさんがこのように言っていたのですが、自分の中でFlaskは mod_wsgi や uWSGI、Gunicorn などと組み合わせて使うもので、当初、Frozen-Flask が必要となる場面をなかなか想像出来ませんでした。
ただその後、WordPressで作成していた旧ブログのホスティングで悩んでいた時にStaticPressを試してみたことがあり、ブログやCMSならば、静的サイト構築もありなんだなと思った経緯があります。

今回Frozen-Flaskを使おうと思ったのは

  • Shizuoka.py界隈でWordPressからPelicanへ移行した方がいて、静的サイトもいいなあと思い始めていた
  • 常々VPS(さくらのVPS 2G)のランニングコストをもう少し節約しようと思っていた

という理由からだったのですが、静的サイトジェネレータへ引っ越すのではなく、4年近く使っているこのブログは生かしたいなと。ならばFrozen-Flaskやってみるかという流れです

あと、Amazon S3を選んだのはコストダウンとwerckerとの組み合わせ事例が幾つかあって導入しやすかったからです。
それとwerckerの導入(静的ファイルのビルドとAmazon S3 へのデプロイ)なのですが、割とすんなり出来たのでローカルでブログエントリーを書いてリモートリポジトリにPushすればデプロイまでやってくれる状態までもっていけました。werckerスゲー便利です。


Frozen-Flaskの運用方法

実際の運用なのですが、現状はこのように使っています。

  1. OS X Yosemite の virtualenv(Python3.4)環境で $python app.py でブログ起動
  2. エントリーを書いて コミットし、BitbucketのプライベートリポジトリへPush(sqliteのDBファイルも含みます)
  3. werckerがフックを感知して、リポジトリをclone
  4. werckerがwercker.ymlの記述通りに環境構築(virtualenvやpip install -r requirements.txtなど)
  5. werckerが$python freeze.py して静的ファイルをビルド
  6. werckerが出来上がった build/ の中身をAmazon S3へsyncする

もうFlask製ブログはローカルエディタみたいなものですね。後は全てwercker任せです。
因みに構成はこの時からほとんど変更ありません
[Python][Flask][Sqlalchemy]blogを作りなおしてみた | aoshiman.org

また、wercker.ymlの中身はこんな感じです。boxはwerckerが用意している標準のものです

box: wercker/python
# Build definition
build:
  # The steps that will be executed on build
  steps:
    # Use this virtualenv step for python 3.3
    - virtualenv:
        name: setup virtual environment
        python_location: /usr/bin/python3.3

    # A step that executes `pip install` command
    - pip-install:
        requirements_file: "requirements.txt" # Optional argument.

    # A custom script step, name value is used in the UI
    # and the code value contains the command that get executed
    - script:
        name: make html files
        code: |
            python freeze.py
# Deploy definition
deploy:
  steps:
      - s3sync:
          key_id: $KEY
          key_secret: $SECRET
          bucket_url: $URL
          source_dir: build/


Frozen-Flaskでつまずいた箇所

  • URLルールをtrailing slash付きに変更
    Frozen-Flask は app.route("/hoge" ) のようなるルールの場合、 hoge というHTMLファイルを作り、 app.route("/hoge/") のような場合、hogeというディレクトリを作り、中に index.html を作ります。
    Flaskで動的に動かしていた時は前者のようなtrailing slash無しのURLルールだったのですが、Pagenateを構築している関係か、Frozen-Flaskでのビルドが途中で止まって上手く行かず。
    色々調べてみたのですが、結局、trailing slashを付けたほうが手数を掛けずにビルド出来るので、URLルールをすべてtrailing slash付きに変更しました。 現在このブログのURLで検索エンジンにインディクスされていたり、ブックマークされているのはtrailing slash無しが多いのですが、適切にリダイレクトされるので、はてなブックマーク等のURLが分かれてしまうところは残念ですが、それ以外は問題ないです。

  • errorhandler() デコレーターは無視される
    ルーティングでのエラー処理で、ドキュメントに書いてあるerrorhandler()デコレータを使っているのですが、 これがFrozen-Flaskでは無視されます。なので別途静的ファイル作成用View関数を用意しました。 こんな感じのやつです

    @app.route('/404.html')
    def error404():
        """function of 404 error handler for frozen"""
        return render_template('404.html')
    

  • Flask-DebugToolbarは外しておく
    Deboug-Toolbarが有効な状態でfreezeさせるとエラーで止まってしまいました。今は必要ないので外しました

残処理について

  • Message Flashingを使って時間経過を表示させているのですが、サーバサイドで処理しているので、ビルドした時間での経過表示で静的ファイルが構築されてしまいます。さすがに毎日ビルドしなおすわけにはいかないので、クライアントサイドで経過表示出来るようにしたいです。
    4月4日 timeago.js をベースにローカライズ含め時間経過を再実装しました。
  • もう少し詳しいFrozen-Flaskについてのエントリー書きます。。

PAGE TOP