携帯電話からいろいろするための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 アクセスする。
