jQuery と Twitter Bootstrap を使う

GAE Python Django

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 がロードされるようになりました。

参考：