Pythonの勉強になる、と言ったな。
しかも、HTML5は勉強しなくても良さげ、とも言ったな。
あれは うそ だ。
色々試した結果
正確にはうそではないんですが、中身を調査してわかったことは、Pythonの機能とFlask(jinja2)という機能を使って実現されています。
実際に試したコード
試しに下記のようなFlaskのみを使った記述を行い、electron .とやって見ましたが、きちんと動作しております。
$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from __future__ import print_function
import time
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "<!DOCTYPE html>\
<html lang=\"en\">\
<head>\
<meta charset=\"utf-8\">\
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
<script src=\"http://code.jquery.com/jquery-1.11.1.min.js\"></script>\
<link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\" crossorigin=\"anonymous\">\
<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"></script>\
</head>\
<body>\
<div class=\"container\">\
<div class=\"header\">\
<h3 class=\"text-muted\">Yesterday</h3>\
</div>\
</div>\
</body>\
</html>"
if __name__ == "__main__":
app.run(host="127.0.0.1", port=5000)
もっとスッキリしたコーディング
pythonの中にhtmlを書くぐらいなら、下記のようにしてしまった方がマシというものです。
index.pyの内容
$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from __future__ import print_function
import time
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(host="127.0.0.1", port=5000)
templates/index.htmlの内容
$ cat templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">Sample Page</h3>
</div>
</div>
</body>
</html>
ページを行ったり来たりする方法
仮に下記のようにtemplates/sample/sample.htmlを作成し、Jinja2も使い、リンクを貼れば動作するようです。
（templatesフォルダ内にファイルが複数ある場合、動作しないっぽい？）
$ cat index.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from __future__ import print_function
import time
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
next = u'次のページへ行くよー'
return render_template('/index.html', message=next)
@app.route('/sample/')
def sample():
return render_template('/sample/sample.html')
if __name__ == "__main__":
app.run(host="127.0.0.1", port=5000)
/templates/index.htmlの中身
$ cat Downloads/work/templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
{% if message %}
<h3 class="text-muted"><a href="/sample">{{message}}</a></h3>
{% endif %}
</div>
</div>
</body>
</html>
/templates/sample/sample.htmlの中身
$ cat Downloads/work/templates/sample/sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted"><a href="/">戻るよー</a></h3>
</div>
</div>
</body>
</html>
Jinja2について
詳しいことは抑えていませんのでこれから習熟して行く形ですが、変数やif文を使うことができ、html内で取り扱ってくれるようです。
そして、python内で書いたapp.route内が厳密なようです。
Jinja2は 末尾が/で終わる場合、フォルダと見なされ、/sampleのように終わると、ファイルと見なされるようです。
その結果、/sampleでアクセスできねーとか思ってたのですが、ディレクトリを参照しなきゃいけないとのことでした。
htmlファイルのうち、/templates/index.htmlの内容はpythonから受け取った変数を使ってメッセージ表示しています。
さらにリンクはpythonのapp.routeと異なり、/sampleでアクセスできます。
この記述は、app.routeに近いのですが、緩いです。末尾に/がなくても問題ありません。
ただし、sample.htmlを直接参照してくれません。
逆に/templates/sample/sample.htmlから/templates/index.htmlに戻る場合は、/のみで戻れます。
まとめ
結局、HTML5をやることになりそうです。
頑張ります…
( ˙-˙)。oO(なんかこうして見ると、iOSのマルチプラットフォーム開発で利用したcordovaっぽいなー・・・)