「bottle」+「jinja2」を使ってサイト構築 2 jQueryとBootstrap導入
導入に引き続き。
[amazonjs asin="4774173207″ locale="JP" title="Pythonエンジニア養成読本［いまどきの開発ノウハウ満載！］ (Software Design plus)"]
導入で用意したjs,css,imgディレクトリを利用できるようにする。
また、jQuery、bootstrapを導入する。
サンプルコードはこちら
（次回以降に紹介したコードも含む）
js,css,img,fontsディレクトリを指定する
static_fileメソッドを使って、js,css,imgディレクトリを指定する。
bootstrapにはfontsディレクトリも必要だったため、追加した。
[python title="index.py"]
# -*- coding: utf-8 -*-
import os
from bottle import route, run
from bottle import TEMPLATE_PATH, jinja2_template as template
from bottle import static_file
# index.pyが設置されているディレクトリの絶対パスを取得
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
# テンプレートファイルを設置するディレクトリのパスを指定
TEMPLATE_PATH.append(BASE_DIR + "/views")
@route('/css/<filename>’)
def css_dir(filename):
""" set css dir """
return static_file(filename, root=BASE_DIR+"/static/css")
@route('/js/<filename>’)
def js_dir(filename):
""" set js dir """
return static_file(filename, root=BASE_DIR+"/static/js")
@route('/img/<filename>’)
def img_dir(filename):
""" set img file """
return static_file(filename, root=BASE_DIR+"/static/img")
@route('/font/<filename>’)
def font_dir(filename):
""" set font file """
return static_file(filename, root=BASE_DIR+"/static/fonts")
@route('/top’)
def top():
# 配列を渡すための準備
fizzbuzz = []
for i in range(1, 100):
if i % 3 == 0 and i % 5 == 0:
fizzbuzz.append(str(i) + ": fizzbuzz")
elif i % 3 == 0:
fizzbuzz.append(str(i) + ": fizz")
elif i % 5 == 0:
fizzbuzz.append(str(i) + ": buzz")
else:
fizzbuzz.append(str(i))
return template('top’, name="umentu", fizzbuzz=fizzbuzz)
if __name__ == "__main__":
run(host="localhost", port=8080, debug=True, reloader=True)
[/python]
jQuery,Bootstrapに必要なファイルを設置
次のように設置した。
導入で作成したtop.htmlで読み込む。
[html title="top.html"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>テストページ</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
</head>
<body>
<!–変数を使う場合は、｛｛｝｝の中に変数名を記述–>
こんにちは、 {{name}}
<h1>今日のfizzbuzz</h1>
<!–
配列fizzbuzzから１つずつ順番にデータを取り出し、fzbzに代入。
fzbzは単なる変数のため、｛｛｝｝で表示
–>
<table class="table table-striped">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
</tr>
<tr>
<td>data2</td>
</tr>
<tr>
<td>data3</td>
</tr>
<tr>
<td>data4</td>
</tr>
</tbody>
</table>
</body>
</html>
[/html]
https://localhost:8080/top にアクセスしてみる。
bootstrapが適用できていることがわかる。
次はテンプレートファイル同士を呼び出す、フレームワークらしい開発手順。