前回は、仮想環境を作ってローカルでアプリを表示してみました。（→参照）
「main.py」という名前を付けたファイルを仮想環境で実行すると、ブラウザーにこのように表示されます。
これだけでも、表示されたときは、感動しましたが、まだ、WEBアプリの本当の良いところは、使っていません。
W002
今回の実施内容
そこで今回は、テンプレートエンジンを使って、HTMLをレンダリングしてみます。
テンプレートエンジンは、データとテンプレートを組み合わせて文字列を作成するフレームワークで、動的なコンテンツの生成ができます。
「Flask」は、「Jinja2」というテンプレートエンジンを持っていて、これを使用します。
前回は、「main.py」というpythonファイルのみでしたが、今回は、htmlファイルとcssファイルも追加します。
そして、用意したhtmlファイルとcssファイルを「main.py」で呼び出して、サーバー側で新たに HTMLコードを生成（レンダリング）してみます。
以下の手順で行います。
・フォルダとファイルを追加
・「index.htmlファイル」を新たに作成
・「index.cssファイル」を新たに作成
・既に用意した「main.py」を修正
では、始めます。
フォルダとファイルを追加
まず、前回作成したフォルダの中に「templates」と「static」の２つのフォルダを作成します。
そして、それぞれのフォルダにこれから新たに用意するindex.htmlファイルとindex.cssファイルを追加します。
フォルダ構成は、次のようになります。
C:\Py\Project\MyPj\FlaskPj\
|--templates\
| └--index.html
|--static\
| └--index.css
└--main.py
「index.htmlファイル」を作成
次に「index.htmlを表示」という文字を画面上に表示するhtmlファイルを用意します。
プログラムは次のように書いています。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webアプリテスト</title>
<!-- index.cssへのリンク -->
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='index.css') }}">
</head>
<body>
<h1>index.htmlを表示</h1>
</body>
</html>
VSCodeを使っているので、「! 」キー +「 tab」キーを同時押しすれば、htmlファイルの基本的な記載を、ある程度自動で作ってくれました。
文字の装飾部分は、別に作成するcssファイルから、呼び出してくるようにしています。
「index.cssファイル」を作成
その文字の装飾部分を定義したcssファイルです。背景色を青、文字の色を白で表示するようにしています
h1 {
background-color: blue;
color: white;
}
「main.py」を修正
最後に前回作成した、「main.py」ファイルに修正を施します。
まず、render_templateをimportしておきます。
from flask import Flask, render_template
そしてrender_templateで先ほど作った、index.htmlをreturnします。するとこのindex.htmlの内容が画面に表示されます。
@app.route('/index')
def index():
return render_template('index.html')
以上で今回の作業は終了です。
結果
では、実際に表示してみます。
今回は、/indexのページを別に作りましたので、ブラウザに
http://127.0.0.1:5000/index
と入力します。
すると、このように表示されました。
おわりに
今回はWebアプリを使ってindex.htmlを表示する方法が理解出来ました。
まだまだ、テスト段階で簡単な内容ですが、順を追って高度な内容に挑戦していきたいと思います。
今回使用したプログラムをサンプルコードとして、以下に掲載しておきます。
0 件のコメント:
コメントを投稿