1. はじめに
GAE上でページ遷移するWebページの作成を行います。Flaskにはinclude, extendsという構文があり、これらを用いる事でWebページの共通部分(HeaderやFooterなど)を別ファイルとして管理できます。
jsファイルやcssファイルの読み込み等、複数ページで同じ処理を記述する部分に用います。
GAEへのWebアプリケーションのデプロイなどは以下に記載しています。
GAE 入門今回のsourceは以下に保存しています。
static_page_app2. 基本フォルダ構成
Webページ/WebアプリをFlaskで作成するにあたり、pythonファイルのみでHTML/JS/CSSを作成することも可能ですが、コード量が増えると現実的ではありません。Flaskによる動的な処理と静的な部分(HTML/JS/CSS)を組み合わせてWebアプリを作成するのが望ましいと考えられます。
Flaskでは以下の様なフォルダ構成になっています。Flaskではフォルダ名と配置する場所が予めある程度定められています。
static_page_app
├── app.yaml
├── main.py
├── requirements.txt
├── static
│ ├── index.css
│ └── index.js
└── templates
├── article1.html
└── index.html
static フォルダ
cssファイル/Javascriptファイルはstaticフォルダ内に格納します。
templates フォルダ
htmlファイルをtemplatesフォルダ内に格納します。
3. Flaskのルーティング
サイトにアクセスすると、main.pyが実行されますが、index.htmlを表示させたい場合は、Webアプリルートにアクセスされた際にindex.htmlを返す様に記載する必要があります。
ルーティングは以下の様に記載します。
@app.route('path')
def func_name():
return render_template(path)
topページ及び遷移先であるarticle1へのルーティングを記載する場合は以下の様になります。
@app.route('/')
def static_main_page():
return render_template("index.html")
@app.route('/article1', methods=['GET', 'POST'])
def static_article_page():
if request.method == 'GET':
input_value = request.args.get('input1')
elif request.method == 'POST':
input_value = request.form['input1']
return render_template("article1.html", output_value=input_value)
上記では/にアクセスされると、index.htmlを返す様にし、article1にアクセスされると、article1.htmlを返すプログラム例です。static_article_page()ではformの入力値を受け取り、article1.htmlへ受け渡しています。
4. テンプレートの活用
4-1. include
c言語のヘッダファイルの様に、外出ししたプログラムを任意の場所に読み込む事ができます。
以下の様に記載することで、common_header.htmlに<html>~JS/CSSファイルの読み込みを記載しておけば、全てのページにJS/CSSファイルの読み込みを記載する必要がなくなり、メンテナンス性が向上します。
{% include "common_header.html" %}
</head>
4-2. extends
オブジェクト指向言語の継承を利用する事ができます。継承される側のファイルには、以下の様に書きます。
{% include "common_header.html" %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
継承する側には以下の様に記載します。extendsを記載する事で、継承される側のファイルをテンプレートの様に利用して、block body~endblockの間に記載した内容を継承される側のファイルにはめ込み、1つのWebページとして利用する事ができます。
{% extends "common_page_content.html" %}
{% block body %}
<p id="comment">This is a static html page.</p>
{% endblock %}
5. アプリケーションの実行
アプリケーションを実行する準備としてvirtualenvを利用して必要な依存関係をインストールしまｓ。
$ python3 -m venv env $ source env/bin/activate $ pip install -r requirements.txt
アプリケーションを実行します。
$ python main.py