Google App Engine で開発。第十二弾。

GAE python 27 + django 1.3 です。GAE に含まれている Django を使っています。

jQuery と Bootstrap を使います。

まず、それぞれのサイトからダウンロードして、ファイルを展開します。

app_root
  static
    css
      bootstrap.min.css
      bootstrap-responsive.min.css
    img
      glyphicons-halflings.png
      glyphicons-halflings-white.png
    js
      bootstrap.min.js
      jquery-1.8.2.min.js


app.yaml にて static_dir を指定します。

handlers:
- url: /css
  static_dir: static/css
- url: /img
  static_dir: static/img
- url: /js
  static_dir: static/js


Django Template でこれらを読み込むように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>作物カタログ</title>
    <link href="{{ bootstrap_css }}" rel="stylesheet">
    <link href="{{ bootstrap_responsive_css }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                Header
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                Sidebar
            </div>
            <div class="span8">
                Main Pane
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                Footer
            </div>
        </div>
    </div>
    <script src="{{ jquery_js }}"></script>
    <script src="{{ bootstrap_js }}"></script>
</body>
</html>


{{}} で囲まれた部分には、コンテキストの Key を指定しています。コンテキストの Value を設定するために、コンテキストプロセッサを使います。ついでに、ローカル環境と本番環境では異なるURLを使用するようにしてみます。そのための準備として、IS_LOCAL 定数にローカル環境では True を設定します。

settings.py

TEMPLATE_CONTEXT_PROCESSORS = (
    django.core.context_processors.csrf,
    tools.context_processors.libs,
)

host = os.environ.get(HTTP_HOST, )
if host.startswith(localhost):
    IS_LOCAL = True
else:
    IS_LOCAL = False


tools.context_processors.libs 関数を作成します。

tools.context_processors.py

import settings


if settings.IS_LOCAL:
    def libs(request):
        return {
            jquery_js: /js/jquery-1.8.2.min.js,
            bootstrap_js: /js/bootstrap.min.js,
            bootstrap_css: /css/bootstrap.min.css,
            bootstrap_responsive_css: /css/bootstrap-responsive.min.css,
        }
else:
    def libs(request):
        return {
            jquery_js: http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js,
            bootstrap_js: /js/bootstrap.min.js,
            bootstrap_css: /css/bootstrap.min.css,
            bootstrap_responsive_css: /css/bootstrap-responsive.min.css,
        }


以上で、CSS と JavaScript がロードされるようになりました。

参考:

  • http://blog.amazedkoumei.com/2011/06/google-app-engine-python.html
  • http://djangoproject.jp/doc/ja/1.0/ref/templates/api.html
  • http://djangoproject.jp/doc/ja/1.0/topics/templates.html
  • https://developers.google.com/speed/libraries/devguide?hl=ja
  • http://dotinstall.com/lessons/basic_jquery
  • http://dotinstall.com/lessons/basic_twitter_bootstrap_v3