1. はじめに

GAE上でページ遷移するWebページの作成を行います。Flaskにはinclude, extendsという構文があり、これらを用いる事でWebページの共通部分(HeaderやFooterなど)を別ファイルとして管理できます。
jsファイルやcssファイルの読み込み等、複数ページで同じ処理を記述する部分に用います。

GAEへのWebアプリケーションのデプロイなどは以下に記載しています。

今回のsourceは以下に保存しています。

2. 基本フォルダ構成

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を利用して必要な依存関係をインストールしまs。

$ python3 -m venv env
$ source env/bin/activate
$ pip install -r requirements.txt

アプリケーションを実行します。

 $ python main.py

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)