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っぽいなー・・・)

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

色々試した結果

実際に試したコード

もっとスッキリしたコーディング

ページを行ったり来たりする方法

Jinja2について

まとめ

参考URL