「bottle」+「jinja2」を使ってサイト構築 2 jQueryとBootstrap導入
導入に引き続き。
導入で用意したjs,css,imgディレクトリを利用できるようにする。
また、jQuery、bootstrapを導入する。
サンプルコードはこちら
（次回以降に紹介したコードも含む）
js,css,img,fontsディレクトリを指定する
static_fileメソッドを使って、js,css,imgディレクトリを指定する。
bootstrapにはfontsディレクトリも必要だったため、追加した。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | # -*- coding: utf-8 -*-import osfrom bottle import route, runfrom bottle import TEMPLATE_PATH, jinja2_template as templatefrom 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) |
jQuery,Bootstrapに必要なファイルを設置
次のように設置した。
導入で作成したtop.htmlで読み込む。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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> |
http://localhost:8080/top にアクセスしてみる。
bootstrapが適用できていることがわかる。
次はテンプレートファイル同士を呼び出す、フレームワークらしい開発手順。
Follow me!
