python Bottleの基本６Htmlデコレータ

# プログラマにとっていろんな言語使いながら仕事するのは、負担が多いし、嫌いである。
## pythonは、単語だけの英語のような便利な言語である。
### 簡単なweb アプリケーションをpythonで作成するのにも、html,css,javascript,sql,jqueryなどを駆使しないと作成できない。
>#せっかくC#とかjavaとかSQLから逃亡してpythonの世界に来たのにviewのテンプレートを書くのにpythonの方言のsimple template pythonを書かなければならない。

```sample.tpl
% for i in range(5):
<h1>test{{i}}</h1>
% end
```
書いている間にいつの間にかphpをコーディンクしてしまう。
できれば一つの言語で書いて、その他はデータにしたい。
#そのようなわけでデコレータを使いBootstrap付のHTMLをデコレータを作ってみた。
こまごましたhtmlのは、デコレータに任せbodyの中身だけを書く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/20bedec2-1609-2caf-dc20-990fd0b1c24d.png)


```ex6.py
from bottle import *
import json,os
#HTML デコレーション(Bootstrap4)
def Html(title):
    html='''
        <!DOCTYPE html>
            <html lang="ja">
            <head>
                <meta charset="utf-8" />
                <title>%s</title>
                <link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
	            <link href="static/content/jumbotron.css" rel="stylesheet" />
                <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
                <script src="/static/scripts/modernizr-2.6.2.js"></script>
                <script src="/static/scripts/jquery-1.10.2.min.js"></script>
                <script src="/static/scripts/bootstrap.min.js"></script>
                <script src="/static/scripts/respond.min.js"></script>
	            <script src="/static/scripts/mindmup-editabletable.js"></script>
            </head>
            <body>
            %s          
            </body>
            </html>'''
    def f0(f):
        def f1(*a,**b):          
            return html%(title,f(*a,**b))
        return f1
    return f0
# Bodyデコレータ (Bootstrap4)
def Body():
    def f0(f):
        def f1(*a,**b):
            return '<div class="container body-content">%s</div>'%f(*a,**b)
        return f1
    return f0

@route('/')
@Html('Hello')
@Body()
def Home():
    return "<h1>Hello World</h1>"
#faviconの読み込み    
@route('/favicon.ico')
def favcon():
    return static_file('favicon.ico', root='./static')
#staic ファイルの読み込み
@route('/static/<filepath:path>')
def server_static(filepath):
    return static_file(filepath, root='./static')
#web server のhost portの設定
HOST,PORT='localhost',8080
if __name__ =='__main__':
    run(host=HOST,port=PORT)


```

/staticの下にbootstrapとjsのファイルを用意してください。

```
/static
│  favicon.ico
├─content
│      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
│      jumbotron.css
│      site.css
│
└─scripts
        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-1.10.2.intellisense.js
        jquery-1.10.2.js
        jquery-1.10.2.min.js
        jquery-1.10.2.min.map
        jquery.validate-vsdoc.js
        jquery.validate.js
        jquery.validate.min.js
        jquery.validate.unobtrusive.js
        jquery.validate.unobtrusive.min.js
        mindmup-editabletable.js
        modernizr-2.6.2.js
        respond.js
        respond.min.js
        _references.js
```
### http://localhost:8080をアクセスすると下記のようなhtmlを作成する。

```result.html
<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Hello</title>
        <link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
	    <link href="static/content/jumbotron.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="/static/content/site.css" />
        <script src="/static/scripts/modernizr-2.6.2.js"></script>
        <script src="/static/scripts/jquery-1.10.2.min.js"></script>
        <script src="/static/scripts/bootstrap.min.js"></script>
        <script src="/static/scripts/respond.min.js"></script>
	    <script src="/static/scripts/mindmup-editabletable.js"></script>
    </head>
    <body>
    <div class="container body-content"><h1>Hello World</h1></div>          
    </body>
    </html>
```