Python Bottle Hello World Bootstrap4 #Python

携帯電話からいろいろするためのHello World

(所要時間30分)

Stupid Phone用にCSSをできるだけ書かないようにするために基礎

ディレクトリー配置
プログラムソースの下にstatic/viewsフォルダを配置する。
static フォルダには、bootstrap4からダウンロードしたjs/cssファイルを配置する。
favicon.png/favicon.icoは、static直下に配置する
Stupid Phoneの起動ICONにするために必要
viewsの配下には、layout.tpl/index.tplを配置する。

BottleHelloWorld.py
├─static
│  │  favicon.ico
│  │  favicon.png
│  ├─css
│  │      bootstrap-grid.css
│  │      bootstrap-grid.css.map
│  │      bootstrap-grid.min.css
│  │      bootstrap-grid.min.css.map
│  │      bootstrap-reboot.css
│  │      bootstrap-reboot.css.map
│  │      bootstrap-reboot.min.css
│  │      bootstrap-reboot.min.css.map
│  │      bootstrap.css
│  │      bootstrap.css.map
│  │      bootstrap.min.css
│  │      bootstrap.min.css.map
│  └─js
│          bootstrap.bundle.js
│          bootstrap.bundle.js.map
│          bootstrap.bundle.min.js
│          bootstrap.bundle.min.js.map
│          bootstrap.js
│          bootstrap.js.map
│          bootstrap.min.js
│          bootstrap.min.js.map
│          jquery-3.3.1.min.js
│          popper.min.js
└─views
    │  index.tpl
    │  layout.tpl

BottleHelloWorld.py

from bottle import *
@route('/')
@view('index.tpl')
def home():
    return dict()
@route('/static/<file_path:path>')
def static(file_path):
    return static_file(file_path, root='./static')
run(host="192.168.1.10",port=911,debug=True)

index.tpl

% rebase('layout.tpl', title='Home Page')
<div class="jumbotron"><h1>Hello World</h1></div>

{{titl}}に上記で指定したHome pageが挿入される
{{!base}}にindex.tplが挿入される
{{}}に囲まれた中は、変数として扱われhtmlが生成される

layout.tpl

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
    <link rel="apple-touch-icon" href="/static/favicon.png" />
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
</head>
<body>
<div class="container">
{{!base}}
</div>
</body>
</html>

「Stupid Phone」から http://192.168.1.10:911 アクセスする。