ElectronとPythonによるマルチプラットフォーム開発の続き


[Pythonの勉強になる](http://qiita.com/akashima/items/8a11b3e6fb6ead0cd257)、と言ったな。
しかも、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っぽいなー・・・)

## 参考URL

- [Flask本家](https://flask-docs-ja.readthedocs.io/en/latest/)
- [ウェブアプリケーションフレームワーク Flask を使ってみる](http://qiita.com/ynakayama/items/2cc0b1d3cf1a2da612e4)
- [Jinja2の使い方がわかるとFlaskを用いた開発がよりスマートになる](http://qiita.com/ryo2851/items/7ae5de21307d101b4759)