先生、ヘロク界に召喚された初心者がbottleとjinja2で遊んでいます。

phpのテスト用に取ったherokuアカウントですが、せっかくなので色々（主にpythonで）遊んでいます。
個人の備忘録として書きますので、間違い等あれば教えて下さい。


----------
###bottle試飲会

というわけで、さっそくpythonのwebフレームワーク、bottleを始めてみました。Djangoで挫折経験があるので、シンプルなものから覚えていこうというリベンジpythonです。仕事では簡単なpythonスクリプトを書くことがありますという程度の初心者（非エンジニア）です。



とりあえずマニュアルに載っているチュートリアル（hello.py）から開始。ローカルで動かしてみたあと、herokuへのデプロイで早速はまりました。
結論から言うと、Procfileのファイル名ミスです。最初にgitしたときに小文字でprocfileにしていて、後で修正したのがgit先生には通じなかったようです。解決したのはこのエントリのおかげです。
http://qiita.com/bonkun/items/328895b109ba47da69f6

ありがとうございました。

-----------

###script

で、次に何するか決めないまま、なんとなく思いついたのがJSと一緒に使うときはどうするんだろうということ。


JSから位置情報をPOSTしてデータを得る、というのをやってみました。stackoverflowではクライアントとサーバーのやりとりってのはPOSTだYo!と書いてあったのですが、これで良いのでしょうか。ルート（``/``）でデータを受け取っていないのはページを移動するのを試したかったからです。``method=['GET','POST']``だとここで受け取れるのだと思います。

```py

from bottle import run, get, post, request, static_file
from bottle import TEMPLATE_PATH, jinja2_template as template
import bottle

app = bottle.app()

TEMPLATE_PATH.append("./templates")

@app.route('/',method=['GET'])
def home_page():

    return template('index.html')


@app.route('/next', method='POST')
def next():
    latlng = request.forms.get("latlng")
    
    return template('next.html',latlng=latlng)


if __name__=='__main__':
    app.run(host='localhost', port=8080, reloader=True)

```


テンプレ１

```html:index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<link rel="stylesheet" href="/static/dist/css/flat-ui.min.css" type="text/css" />


<script>
function goToNext(action,name,value){

	var form = document.createElement("form");
	form.setAttribute("action", action);
	form.setAttribute("method", "post");
	form.style.display = "none";
	document.body.appendChild(form);

	var input = document.createElement('input');
	input.setAttribute('type', 'hidden');
	input.setAttribute('name', name);
	input.setAttribute('value', value);
	form.appendChild(input);

	form.submit();
};


function geoloc(){
	window.navigator.geolocation.getCurrentPosition(function(position) {
	var lat = position.coords.latitude;
	var lng = position.coords.longitude;

	var latlng =[lat,lng]

	goToNext('/next','latlng',latlng);
},
function(error){
alert("error");
});

};

</script>

</head>
<body>

<h1>HELLO WORLD!</h1>
	
<button onClick="geoloc()">NEXT</button>

</body>
</html>

```

テンプレ２

```html:next.html

{{latlng}}

```




----------

###jinja2


テンプレートエンジンというのも、はじめて触っています。jinja2が評判いいのでこれにしました。

はまったのはstaticファイルのパス。
staticファイル（CSS）を使う方法をいろいろ試したけど、これで動いたというサンプルが以下です。
このエントリが参考になりました。ありがとうございます。
http://d.hatena.ne.jp/nullpobug/20131026/1382728022

（マニュアルに載ってるのとかstackoverflowのスレにあるような``get_url``では、解決できませんでした）


```py:helloWorld.py

from bottle import run, get, post, request, static_file
from bottle import TEMPLATE_PATH, jinja2_template as template
import bottle
import os

app = bottle.app()

TEMPLATE_PATH.append("./templates")

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_DIR = os.path.join(BASE_DIR, 'static')

# static file CSS
@app.route('/static/css/<filename:path>')
def static_css(filename):
    return static_file(filename, root=STATIC_DIR+"/css")



@app.route('/')
def home_page():
    return template('index.html')


if __name__ == "__main__":

    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))


```


テンプレート

```html:index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<link rel="stylesheet" href="/static/css/style.css" type="text/css" />

</head>
<body>

<h1>Hello world!</h1>
	
</body>
</html>

```



CSS

```css:style.css

body{
	background-color: #ff0000;
}

h1{
	font-size: 2em;
	color: #0000ff;
}
```

--------
###結論：

Webフレームワーク以前にpythonのことを何もわかってない。

``if __name__=='__main__':``から勉強し直しています。

新しい概念を知ったり、覚えるのは楽しい（クロストレーニング的に、AngularJSの勉強にもなっている。たぶんwebの人たちには常識だったことが見えていなかったので）。